/*
		Site:		Imaginext Dinosaurs
		Date:		January - February 2006
		Author:	Eric Shepherd
		File:		Site-Specific Behaviors
*/
var myrules = {
			
		'.popup' : function(element) {
			element.onclick=function() {
				var win=window.open(this.href, 'demo', 'width=780, height=410,scrollbars=yes, resizable=yes');
				return false;
			}
		}
	};


if (document.getElementsByTagName && document.getElementById) Behavior.register(myrules);

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

	init: function() 
	//initialize event listeners and other housekeeping tasks
	{
		
		Dino.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', Dino.swapImages, false);
				if (Dino.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 theCaption = theShot.getElementsByTagName('dd')[0];

		// create new image and caption
		var theImage = document.createElement('img'); // variation on normal code - don't copy this for standard use
		var theNewCaption = this.title;

		// check to see if there is a flash movie with the same name as the image
		if (theLink.match(/_1.jpg/) && UFO.hasFlashVersion(6,0)) { 

			// do this if it's number one and the user has flash
						
			flashImage.movie = '/content/v4/us/imaginext/dinosaurs/swf/pshot.swf';
			flashImage.flashvars = 'audioPath=/content/v4/us/imaginext/dinosaurs/audio/&imgPath=/img/product_shots/&pn='+pn;
			
			// build flash embed
			UFO.create(flashImage, "product-image");

			// do the caption too
			theCaption.firstChild.nodeValue=theNewCaption;
			
			EventHelper.CancelDefault(e);
			
		} else {

			// do this if it's just an image
			// we can't just use the image element and set its src attribute
			// because the img element isn't there after the flash replaces the dt content!
			// so, we use DOM methods to dynamically remove and add elements
			
			theImage.src = theLink; // set the image
			var theChildren = theImageParent.childNodes; // get everything inside the dt
			var c = theImageParent.removeChild(theChildren[0]); // remove first child (image or flash embed)
			theImageParent.appendChild(theImage); // insert the image
			theCaption.firstChild.nodeValue=theNewCaption; // switch the caption
			EventHelper.CancelDefault(e);
			
		}
	}
}

// onload function

EventHelper.AddEvent(window, 'load', Dino.init, false);