window.addEvent('domready',function(){


	// Image thumbs!
	if ($('moreImagesThumbs')){
		var moreImagesThumbs = $('moreImagesThumbs').getElements('a').getElement('img');
		moreImagesTips = new Tips(moreImagesThumbs,{className: 'simpleTips'});
	}
	// end image thumbs
	
	
	// Image replacer
	if ($('moreImagesThumbs')){

		function thumbNailSwitcheroo(item){
				
				var theOldImage = $('prodDetailImage').getElement('a');
				
				// un-highlight others
				moreImagesThumbs.each(function(thumby){
					thumby.morph({'border-color': '#ddd'});
				});
	
				// highlight the thumb
				item.morph({'border-color': '#666'});
				
				
				// fade the existing image
				var moveOldImage = new Fx.Morph(theOldImage, {duration: transitionSpeed, transition: Fx.Transitions.Back.easeIn});
				moveOldImage.start({
					'opacity': 0,
					'left': -500
				});		
	
				// thing that kills existing, fades in new
				function fadeInNew(){
					$('prodDetailImage').getElement('a').dispose();
					var newSrc = item.get('href');
					var newTitle = item.get('rel');

					// create the new image from the relevant href
					var theNewImage = new Element('a', {
						'style': 'background-image:url('+newSrc+');',
						'title': 'The title'
					}).inject('prodDetailImage', 'top');
					
					// hide then show it
					theNewImage.setStyles({
						'opacity': 0,
						'left': -200,
						'top': 0,
						'position': 'absolute'
					});
					
					var moveNewImage = new Fx.Morph(theNewImage, {duration: transitionSpeed, transition: Fx.Transitions.Elastic.easeOut});
					moveNewImage.start({
						'opacity': 1,
						'left': 0
					});
					
					// now we do the title:
					var prodDetailImageTitle = $('prodDetailImageTitle');
					prodDetailImageTitle.fade('hide');
					prodDetailImageTitle.empty();
					
					//WF 17-NOV-09, Need to replace the Html, not just the text
					//prodDetailImageTitle.set('text', newTitle); 
					prodDetailImageTitle.set('html', newTitle);
					
					prodDetailImageTitle.fade('in');
					
				}
				
				// bring in the new image after a delay
				transitionSpeedDelay = (transitionSpeed + 100)
				fadeInNew.delay(transitionSpeedDelay);
				
				// and just to be difficult, we're going to check if
				// this has a relevant h3 over on the right, and highlight it.
				$$('.linkedToThumb').each(function(el){
					el.getParent('h3').removeClass('active');
				});
				
				// if it has a relevant dude:
				(function(){
				if ($chk(item.get('rel'))){
					var relevant = item.get('rel')
					$(relevant).getParent('h3').addClass('active');
				}
				}).delay(50);

	
		}// end big fat interface function
		
		
		// find the thumbs, mess with them
		var moreImagesThumbs = $('moreImagesThumbs').getElements('a');
		var transitionSpeed = 200;
		
		moreImagesThumbs.each(function(item){
			item.addEvent('click', function(e){
				e.stop();
				thumbNailSwitcheroo(this);
			});
					
		});
		
		
		// now we do stuff linking other stuff to thumbs
		$$('.linkedToThumb').each(function(el){
		
			// make sure it actually has a rel, find it, work it harder, make it stronger.
			if ($chk(el.get('rel'))){
				var relevant = $(el.get('rel'));
				el.addEvent('click', function(e){
					e.stop();
					thumbNailSwitcheroo(relevant);
				});
				
			}
		
		});



 
	} // end Image replacer
	
	
}); //dom