/****************************************************
 * Rotating Career Feature and Selector
 * Sunil Karve 07/15/2007
 *
 * Use DOM-based animations to cycle through a list
 * of career features and move and highlight images
 * on user input.
 *
 * Requires the Yahoo! User Interface Library: Animation - 
 * http://developer.yahoo.com/yui/animation/
 ****************************************************/
 
  var careerFeatures; // Definition list containing feature titles and descriptions
  var featureTitles; // Feature titles in dt elements
  var featureDescrips; // Feature descriptions in dd elements
  var faceContainer; // Container element for all face photos
  var arrowContainer; // Container element for arrow below face photos
  var faceArrow; // Arrow element under photos for positioning
  var positionArray = new Array( 0, 661, 711, 761, 811, 861, 911 ); // Set array of left positions for the animated elements (initial position not used)
  var counter = 1; // Master counter for determining current selection  
  var imagePath = "/careers/commonimages/";  // Global path to images directory
  var rotateTimer; // Reference to setInterval() setting time between rotation
  var isPhotoClicked = false; // Boolean to check if automated rotation has stopped
  var isYahooAnimLoaded; // Boolean to check if Yahoo! UI animation library loaded
  
  // Check if Yahoo! UI library loaded and available
  isYahooAnimLoaded = ( typeof YAHOO == "undefined" ) ? false : true;
  
  window.onload = function() {  

	// Cancel script if Yahoo! UI library not loaded/unavailable
	if( !isYahooAnimLoaded ) { return; }
	
    // Compatibility check
    if( !document.getElementById ) { return; }
	
	// Load images required for animation
	appendImages();
	
	// Kick off first feature display immediately and trigger automatic rotation
	doAnimation();
	rotateTimer = setInterval( "doAnimation()", 5000); // 5-second interval
    
  }
  
  function doAnimation() {
  // Move the highlight box and arrow to the next position in sequence
    animMotion("faceHighlightBox");
	animMotion("faceArrow");

  // Highlight (full color) next photo in sequence
    animChangeOpacity();

  // Change to next feature description in sequence
    changeFeature();
	
	if( counter == 6 ) {   
      // Reset counter to beginning at end of sequence
	  counter = 1;	  
	  return;
	}
	// Increment counter for automatic rotation, and store last photo index value
	counter++;	  
  }
  
  function changeFeature( position ) {
    var lastFeature;
	var currentFeature;
	
	if( position == null ) {
	  lastFeature = ((counter == 1) ? 6 : counter-1);
	  currentFeature = counter;	
	} else {
	  lastFeature = counter;
	  currentFeature = position;	
	}
  
    // Hide previous feature title and description
    elementDisplay( featureTitles, false, lastFeature );
	elementDisplay( featureDescrips, false, lastFeature );
		
	// Show new feature title and description
	elementDisplay( featureTitles, true, currentFeature );
	elementDisplay( featureDescrips, true, currentFeature );	
  }
  
    function appendImages() {
    // Write animated images to the document
  
    // Get references to containers
	faceContainer = document.getElementById("faceContainer");
	arrowContainer = document.getElementById("arrowContainer");

	// Append the face outline box image and handler	
	var faceHighlightBox = document.createElement("img");	
	faceHighlightBox.setAttribute("src", (imagePath + "facehighlightbox.gif") );
	faceHighlightBox.setAttribute("id", "faceHighlightBox");
	addEvent(faceHighlightBox, "click", onPhotoClick);
	faceContainer.appendChild(faceHighlightBox);

  	for( var j=1; j < 7; j++ ) {
	  var facePhoto = document.createElement("img");	  
	  facePhoto.setAttribute("src", (imagePath + "face" + j + ".jpg") );
	  facePhoto.setAttribute("alt", "face");
	  facePhoto.className = "facePhoto";
	  facePhoto.setAttribute("id", ("face" + j) );
	  addEvent(facePhoto, "click", onPhotoClick);
	  faceContainer.appendChild(facePhoto);
	}
	
	// Append the arrow image to appear below the face photos
	var arrowImage = document.createElement("img");
	arrowImage.setAttribute("src", (imagePath + "face_arrow.gif") );
	arrowImage.setAttribute("id", "faceArrow");
	arrowContainer.appendChild(arrowImage);
  
  }

  /* ----------------- Utility functions ----------------- */
  
  function onPhotoClick(e) {
  // Handler for photo images
  
  // Halt automated rotation, and decrement counter on initial load only
    if( !isPhotoClicked ) {
      clearInterval( rotateTimer );
      counter--;
      isPhotoClicked = true;
    }
  
    var targ;
	var targID;
	var lastPos = counter; // Last counter position
		
	if (!e) { var e = window.event };
	if (e.target) { targ = e.target }
	else if (e.srcElement) { targ = e.srcElement };
	if (targ.nodeType == 3) {// Defeat Safari bug
		targ = targ.parentNode;
	}
	targID = targ.getAttribute("id");
	if( targID == "faceHighlightBox") { return; } // Do nothing if a user clicks on the already-highlighted face

	counter = targID.charAt(4);

    // Change photo opacity on previous and current images
	animChangeOpacity( lastPos );

    // Move animated items to selected image
	animMotion("faceHighlightBox");
	animMotion("faceArrow");	
	  
	// Clear all features and reveal selected benefit
	elementDisplay( featureTitles, false );
	elementDisplay( featureDescrips, false );
	changeFeature();
	  
  }
  
  function animMotion( elem, position ) {
  /* Uses Yahoo API function to animate an element's position */

    // Target position value for animation
    var targetPos = ( position == null ) ? positionArray[counter] : positionArray[position];   
  
    var myAnim = new YAHOO.util.Anim( elem, { 
      left: { to: eval(targetPos) }  
    }, 1, YAHOO.util.Easing.easeOutStrong); 
    myAnim.animate();
	myAnim = null;  
  }
  
  function animChangeOpacity( lastPos ) {
  /* Yahoo API function to animate photo opacity */ 
    var lastPhoto;
	var currentPhoto;
	
	var animLastPhoto;
	var animCurrentPhoto;
		
	if ( lastPos == null ) { // Set current to next face in sequence (automatic rotation)
	    lastPhoto = "face" + ((counter == 1) ? 6 : counter-1);
		currentPhoto = "face" + counter;	
	} else { // or set current to specified position, and last to the previous selected set in counter
	    lastPhoto = "face" + lastPos;
		currentPhoto = "face" + counter;
	}	

    animLastPhoto = new YAHOO.util.Anim( lastPhoto, { 
      opacity: { to: 0 }  
    }, 0, YAHOO.util.Easing.easeOut);
	animLastPhoto.animate();
	
    animCurrentPhoto = new YAHOO.util.Anim( currentPhoto, { 
      opacity: { to: 100 }  
    }, 0, YAHOO.util.Easing.easeIn);
	animCurrentPhoto.animate();
	
    // Clean up instantiated objects
	delete animCurrentPhoto;
	delete animLastPhoto;		
  }
  
  function addEvent(obj, evType, fn) {
  // Add event handler to element (cross-browser compliant)
    if (obj.addEventListener){ 
        obj.addEventListener(evType, fn, false); 
        return true; 
    } else if (obj.attachEvent){ 
        var r = obj.attachEvent("on" + evType, fn); 
        return r; 
    } else { 
        return false; 
    } 
  }
  
  function elementDisplay(node, isVisible, index) {
  // Change visibility on element in the passed-in node, and hide/reveal only index    
	if (index == null) {	// Change visibility on all node elements		
	  for (var i=0; i < node.length; i++) {		
	    if (isVisible) {
	  	  node[i].style.display = "block";
	    } else {
          node[i].style.display = "none";			
        } 	  
	  }
	}
	else { // Change visibility on only the selected node element index
	 if (isVisible) {
	  	  node[index-1].style.display = "block";
	 } else {
          node[index-1].style.display = "none";			
     }	
  }
	
}