/**************
* product_imgLoader.js
* will swap image 
*
**************/
var imgRoot = ""; //change this to the root to the images to swap

function addEvent(elm,evType,fn,useCapture) {
  //cross browser event handling for IE5+,NS6+, and Mozilla
    if (elm.addEventListener) {
    elm.addEventListener(evType,fn,useCapture);
	return true;
 } else if (elm.attachEvent) {
   var r = elm.attachEvent('on' + evType, fn);
   return r;
 } else {
   elm['on' + evType] = fn;
 }
}
	
	
function findTarget(e,elm) {
 /* will traverse the DOM tree to find a given element */
 var target;
	 if ( window.event && window.event.srcElement )  {
	    target = window.event.srcElement;
	} else if ( e && e.target ) {
	    target = e.target;
	}
	
	if ( !target ) {
	  return null;
	}
	
	while ( target != document.body && target.nodeName.toLowerCase() != elm ) {
	  target  = target.parentNode;
	}
	
	if ( target.nodeName.toLowerCase() != elm ) {
	  return null;
	}
	
   return target;
}
  

function productImageSwap(e) {
      if(!document.getElementById ||
         !document.getElementsByTagName)
	      return false;
		
	/* when an image thumbnail is clicked, find the element which was clicked,
	 then look for a 'hiRes' attribute for the image.
	load the hiRes image into the main image display section of the page*/
	var srcElement = "";// the image source for the large image
	var targetElement = "";// the element that was clicked. get the hiRes attribute to get hte srcElement image name;

	/* set the image source****************/
	 targetElement = findTarget(e,"img"); // hires is the psuedo attribute used to tell us the source of the new image
	 if(targetElement && targetElement.getAttribute("hiRes")) {
	 
		  //get the image whose source we want to replace
		  var srcElementParent = document.getElementById("imgFull");
		  var arrSrcElement = srcElementParent.getElementsByTagName("img");
		  srcElement = arrSrcElement[0];
		  theImg = targetElement.getAttribute("hiRes");
		  var imgSrc = imgRoot + theImg;
		  srcElement.setAttribute('src', imgSrc);
		 /* end set the image source **************/
		 
		 /* set the product title ***************/
		 //the product title will be the image alt tag
		 if ( targetElement.getAttribute( "alt" ) ) {
			 var theTitle = document.createTextNode( targetElement.getAttribute("alt") );
			 //alert(theTitle.nodeValue);
			 //now find the element to which we want to apply the new title (an h2 tag with an id of imgFull_title)
			 theElmTitle = document.getElementById("imgFull_title");
			 //alert(theElmTitle.firstChild.nodeValue);
			 theElmTitle.firstChild.nodeValue = theTitle.nodeValue;
		 }//if ( targetElement.getAttribute( "alt" ) )
		 
		 //now get the description
		  if ( targetElement.getAttribute( "descrip" ) ) {
			  var theDescription =  targetElement.getAttribute( "descrip" ) 	;
			  theElmDescript = document.getElementById( "imgFull_descript" );
			  theElmDescript.innerHTML = theDescription;
			  //theElmDescript.firstChild = theDescription;
			  //alert( theElmDescript.childNodes.length );
		  }//if ( targetElement.getAttribute("descrip") )
		  
		   //now, change the buy now link
		   if ( targetElement.getAttribute( "prodDisplayURL" ) &&
		         document.getElementById( "buyBtn" ) ) {
			   //get the url from the img attributes
			   var newUrl  =  targetElement.getAttribute( "prodDisplayURL" );
			  // alert(newUrl.nodeValue);
			   //attach the url to the buy now buttons
			   var buyLinkParent = document.getElementById( "buyBtn" );
			   var buyLink = buyLinkParent.getElementsByTagName('a');//there should be only one 'a' tag
			   buyLink[0].setAttribute("href", newUrl);
		   }//targetElement.getAttribute("prodDisplayURL") )
	   
	 }//targetElement && targetElement.getAttribute("hiRes")
	 
    cancelClick(e);
	return false;
}//eof

function addListeners() {

  if(!document.getElementById ||
     !document.getElementsByTagName)
	   return false;
	   
	if (!document.getElementById("thumbs"))
	    return false;
		
  //get all list items in the thumbs div
   var parentEl = document.getElementById("thumbs");
   var childList = parentEl.getElementsByTagName("li");
   //get the childs of the list itme
   for (var i = 0; i < childList.length;i++) {

      addEvent(childList[i].firstChild,'click',productImageSwap,false) 
   }
  //loop through each  li and attach the event listener as an onClick event handler
}

addEvent(window,'load',addListeners,false);