/*
		Site:	Little Einsteins
		File:	Default Behavior JavaScript
		Author:	Eric Shepherd
		Date:	March 2006
*/


var Gp = {
	
	isSafari : ((document.childNodes)&&(!document.all)&&(!navigator.taintEnabled)&&(!navigator.accentColorName)?true:false), //boolean - is it safari?

	init: function() 
	//initialize event listeners and other housekeeping tasks
	{
		
		Gp.addLinkElements();
		
		// add event listeners
		if (!document.getElementsByTagName || !document.getElementById) return;
	
		var theThumbnailDiv = document.getElementById('product-thumbnails');
		
		if(theThumbnailDiv) {
			var theLinks = theThumbnailDiv.getElementsByTagName('a');
	
			for (var i=0; i<theLinks.length; i++) {
				EventHelper.AddEvent(theLinks[i], 'click', Gp.swapImages, false);
				if (Gp.isSafari) theLinks[i].onclick = EventHelper.CancelClickSafari; //safari still doesn't support cancelDefault()
			}
		}
	},
	
	addLinkElements: function()
	// add a dynamic <a> tag to the image in a list of product thumbnails
	// this allows us to hardcode the link only on the <dt> where it belongs
	{
		if (!document.getElementsByTagName || !document.getElementById) return;
		// first, we get an array with all the <dl class="product"> elements referenced
		// IE5 doesn't support push, but it doesn't need to run this function; the link will still be on the product
		// even if it isn't on the image. it degrades acceptably.
		
		var theDls = document.getElementsByTagName('dl');
		var theProductDls = new Array();
		
		for (var i=0; i<theDls.length; i++) {
			if (theDls[i].className.match(/product/g)) {
				theProductDls.push(theDls[i]);
				// if you need this to work in IE5, simply include /pages/v4/script/arrayExtension.js
				// in the HTML. That script extends the prototype of Array() to include push in IE5
			}
		}

		// now, we need to cycle through and get references to the <dt> and image <dd>
		var theDt; // individual product name <dt>
		var theDds; // all the <dd>s in the <dl> we're looking at
		var theA; // the link in the <dt> tag
		var theLink; // the href of that link
		var newLink; // the new link to be inserted in the product image <dd>
		
		// cycle through all the product definition lists
		// get the product <dt> and all the <dd>s underneath
		for (var j=0; j<theProductDls.length; j++) {
			theDt = theProductDls[j].getElementsByTagName('dt')[0];
			theDds = theProductDls[j].getElementsByTagName('dd');
			
			// get the product <a> element and href
			theA = theDt.getElementsByTagName('a')[0];
			theLink = theA.href;
			
			// cycle through all the <dd>s in each product <dl>
			// there could be many definitions (price, ages, etc) in addition to image
			for (var k=0; k<theDds.length; k++) {
				if (theDds[k].className.match(/product-image/)) {
					// get the image if it's an image <dd>
					var theImg = theDds[k].getElementsByTagName('img')[0];
					// create a new <a> element node with the href of the product
					// and append the image to this <a> node
					newLink = document.createElement('a');
					newLink.href = theLink;
					newLink.appendChild(theImg);
					// insert the new <a> tag containing the image into the <dd>
					theDds[k].appendChild(newLink);
				}
			}
		}
	},
	
	swapImages : function(e) 
	// this function, on click of image thumbnails, switches out the large image AND the caption paragraph text
	{ 
		// set variables for this image click
		var theLink = this.href;
		var theShot = document.getElementById('product-shot');
		var theImageParent = theShot.getElementsByTagName('dt')[0];
		var theImage = theImageParent.getElementsByTagName('img')[0];
		var theCaption = theShot.getElementsByTagName('dd')[0];

		// create new image and caption
		var theNewCaption = this.title;

		theImage.src = theLink; // set the image
		theCaption.firstChild.nodeValue=theNewCaption; // switch the caption
		EventHelper.CancelDefault(e);
			
	}
}
// onload function
EventHelper.AddEvent(window, 'load', Gp.init, false);