/****************************************************
 * Solution Browser Widget
 * Sunil Karve 09/21/2007
 *
 * Dynamic, SEO-friendly widget to learn about the
 * six featured solution lines at the IBA 2007
 * conference.
 *
 * Requires the Yahoo! User Interface Library: Animation - 
 * http://developer.yahoo.com/yui/animation/
 ****************************************************/
 
  var imagePath = "/iba/commonimages/"; // Global image path
  var isYahooAnimLoaded; // Boolean to check if Yahoo! UI animation library loaded
  var solBrowserContainer; // Container for widget
  var solTitles; // Solution titles (stored in dt elements)
  var solDescrips; // Solution descriptions (stored in dd elements)  
  var thisEvent; // Container variable for event reading and manipulation
  var isIntro = true; // Flag if the intro message is displayed
  var solLineArray = new Array (
							    "_cd.gif",
								"_rs.gif",
								"_pm.gif",
								"_ls.gif",
								"_rc.gif",
								"_cm.gif"							   
							   ); // Solution line abbreviations
    
  // Check if Yahoo! UI library loaded and available
  //isYahooAnimLoaded = ( typeof YAHOO == "undefined" ) ? false : true;

  window.onload = function() { // Begin onload
	
	// Cancel script if Yahoo! UI library not loaded/unavailable, or DOM not supported
	if( !isReady() ) { return; }
	
	appendImages();
	  
	  
  } // End onload
  
  function isReady() {
	  // Check if all requirements met before running script (Yahoo! UI library loaded, DOM supported)
	    return ( !document.getElementById || typeof YAHOO == "undefined" ) ? false : true;	  
  }
  
  function initSolBrowser() {
	  // Prep solution browser elements; run immediately after element creation using inline JS

    if( !isReady() ) { return; }
	 
  	// Get element references
	solBrowserContainer = document.getElementById("solBrowserContainer");
	solTitles = solBrowserContainer.getElementsByTagName("dt"); // Array of titles
	solDescrips = solBrowserContainer.getElementsByTagName("dd"); // Array of descriptions
	
	// Hide descriptions and titles until ready to reveal, and add extra space at top
	for( var i=0; i < solDescrips.length; i++ ) {
		solDescrips[i].style.display = "none"; // Hide from view
		solDescrips[i].style.position = "absolute"; // Reposition when revealed
		solDescrips[i].style.top = "15px";
		
		solTitles[i].style.display = "none";
	}
		  
  }
  
  function appendImages() {
      // Remove text from all <dt> nodes and replace with images wrapped in anchor tags
	  
	  var newImage;
	  var newHeading;
	  //var newTextNode;
	  
	  for( var j=0; j < solTitles.length; j++ ) {
		  
		  // Insert image title nodes into each dd 	
		  newHeading = document.createElement("p");
		  newImage = document.createElement("img");
		  newImage.setAttribute("src", (imagePath + "title" + solLineArray[j]) );
		  newImage.setAttribute("alt", solTitles[j].firstChild.nodeValue );
		  newHeading.appendChild( newImage );
		  solDescrips[j].insertBefore( newHeading, solDescrips[j].firstChild );
		  
		  // Replace definition title text with image buttons
		  newImage = document.createElement("img"); // Replace with image buttons
		  //newImage.setAttribute("alt", solTitles[j].firstChild.nodeValue );
          solTitles[j].removeChild( solTitles[j].firstChild ); // Clear text node out of dt
		  newImage.setAttribute("src", (imagePath + "btn" + solLineArray[j]) );
		  newImage.setAttribute("id", ("button" + j) );
		  solTitles[j].appendChild( newImage );
		  solTitles[j].style.marginBottom = "4px";
		  solTitles[j].style.display = "block";
		  
		  // Add listeners for mouseover/out and clicks
		  addEvent( newImage, "mouseover", buttonOver );
		  addEvent( newImage, "mouseout", buttonOut );
		  addEvent( newImage, "click", showDescrip );
		  newImage = null;
	  }	  
	  
	      // Add solution browser intro/instructions
		  var introPara = document.createElement("p");
		  var introText = "Click on a solution to learn more about it.";
		  introPara.appendChild( document.createTextNode( introText ) );
		  introPara.setAttribute("id", "introPara");
		  introPara.style.position = "absolute";
		  introPara.style.top = "15px";
		  introPara.style.left = "170px";
		  introPara.style.width = "200px";
		  introPara.style.color = "#666666";
		  solBrowserContainer.insertBefore( introPara, solBrowserContainer.getElementsByTagName("dl")[0] );
	  
  }
  
  function buttonOver(e) {
	  // Change button states on mouseover
	  thisEvent = getEventElement(e);
  }
  function buttonOut(e) {
	  // Change button states on mouseout
	  
  }
  function showDescrip(e) {
	  // Hide all descriptions and show the selected description. 
	  
	  // Remove the instructions paragraph (if it exists)
	  
	  if( isIntro == true ) {
		  solBrowserContainer.removeChild( document.getElementById("introPara") );
		  isIntro = false;
	  }
	  
	  var selDescrip; // Array index of selected description (pulled from element's ID)
	  var displayState;
	  thisEvent = getEventElement(e);
	  selDescrip = thisEvent.getAttribute("id").charAt(6);
	  
	  for( var k=0; k < solDescrips.length; k++ ) {
		// Hide all descriptions except the selected one
		if( k == selDescrip) {
			displayState = "block"; // Make visible (but still 0 opacity)
			
		} else {
			displayState = "none";	
		}
		
		YAHOO.util.Dom.setStyle( solDescrips[k], 'opacity', 0.0); // Sets element opacity to 0 for fade-in animation later
		solDescrips[k].style.display = displayState;
		var revealDescrip = new YAHOO.util.Anim( solDescrips[k], { 
            opacity: { to: 100 }  
    }, 4, YAHOO.util.Easing.easeIn);
	revealDescrip.animate();
	delete revealDescrip;
	
	  }
  }
  
  
  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 getEventElement(e) {
	// Returns an event element reference (cross-browser compatible)	
	var targ;
	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;
	}
	return targ;
  }