/**
//++++++++++++++++++++++++++++++++++++
// YUI IMAGE SLIDESHOW
// 1/9/2008 - Edwart Visser & Arjen Weeber
//
// show a slideshow of images
//
// REQUIRES: yahoo-dom-event.js
// OPTIONAL: animation-min.js
//
//++++++++++++++++++++++++++++++++++++
 * @version 2008-10-15 DD
*/
YAHOO.namespace("lutsr");

YAHOO.lutsr.slideshow = {
		
	/**
	 * Process of single animation
	 */
	animationThread : null,
	
	/**
	 * Process of iteration
	 */	
	animationTimer : null, 
	/**
	 * Image container height
	 */
	divContainerHeight : 280,
	
	// global variables inside properties objects
	properties : {
		slideshowAutoStart : false,
		slideshowPreload : false,
		slideshowSpeed : 6000,
		slideshowRootNode : null,
		slideshowListItems : null,
		slideshowFrames : null,
		slideshowFrameContainerId : null,
		slideshowIsAnimating : false,
		slideshowFadeInObject : null,
		slideshowFadeOutObject : null,
		isActive : null,
		isNext : null,
		slideshowKeyboardNavigation : false
	},

	disableDefaultBehaviour : function(e) {
		$E.preventDefault(e);
	},

	init : function(slideshowProperties) {		
		// set properties
		this.properties.slideshowAutoStart = slideshowProperties.autoStart;
		this.properties.slideshowPreload = slideshowProperties.preloadImages;
		this.properties.slideshowSpeed = slideshowProperties.slideSpeed;
		this.properties.slideshowRootNode =  $D.get(slideshowProperties.rootId);
		this.properties.slideshowFrameContainerId =  slideshowProperties.frameContainer;
		if(this.properties.slideshowRootNode){
			var slideshowList = this.properties.slideshowRootNode.getElementsByTagName("ul")[0];
			this.properties.slideshowListItems = slideshowList.getElementsByTagName("li");
			this.properties.slideshowFrames = $D.getElementsByClassName("frame","li",slideshowList);
			this.properties.isActive = this.getCurrent();
			this.properties.isNext = this.getNext();

			// build image container
			this.buildContainer();

			// set slide objects
			this.properties.slideshowFadeInObject = $D.get("slide2");
			this.properties.slideshowFadeOutObject = $D.get("slide1");

			// init navigation controlls
			this.initPagination();

			if(this.properties.slideshowAutoStart) {
				this.properties.slideshowIsAnimating = true;
				this.startTimer();
			}

			if(this.properties.slideshowPreload) {
				this.preloadImages();
			}
			
			// Add listener to recalc position of first image
			var slideshowObject = this;
			
			YAHOO.util.Event.addListener(this.properties.slideshowFadeOutObject,'load', 
			function() {
				var marginTop = parseInt((YAHOO.lutsr.slideshow.divContainerHeight - slideshowObject.properties.slideshowFadeOutObject.height) /2);
				if(marginTop >0) {	
					slideshowObject.properties.slideshowFadeOutObject.style.marginTop = marginTop  + "px";
				}
				YAHOO.util.Event.removeListener(slideshowObject.properties.slideshowFadeOutObject,'load',this); // remove listener 
			});
		}

		if(this.properties.slideshowKeyboardNavigation) {
			this.keyboardNavigation();
		}
		
		YAHOO.hmmh.DDBilderliste.init();
	},

	getCurrent : function() {
		if(this.properties.slideshowFrames.length > 0) {
			for(var i=0; i<this.properties.slideshowFrames.length; i++) {
				if($D.hasClass(this.properties.slideshowFrames[i],"isActive")) {
					return i;
				}
			}
		}
	},

	getNext : function() {
		if(this.properties.isActive == this.properties.slideshowFrames.length -1) {
			return 0;
		} else {
			return this.properties.isActive + 1;
		}
	},
	
	getPrevious : function() {
		if(this.properties.isActive == 0) {
			return this.properties.slideshowFrames.length -1;
		} else {
			return this.properties.isActive - 1;
		}
	},

	buildContainer : function() {
		if(!$D.get(this.properties.slideshowFrameContainerId)){
			var productSource = YAHOO.util.Selector.query("td.icons a.addToCart")[0].rel;
			var frameContainer = document.createElement("div");
			var divContainerA = document.createElement("div");
			var divContainerB = document.createElement("div");
			var productLinkA = document.createElement("a");
			var productLinkB = document.createElement("a");
			var imgA = document.createElement("img");
			var imgB = document.createElement("img");
			
			// set product sources
			with (productLinkA) {
	            setAttribute('href', 'javascript:;');
	            setAttribute('rel', productSource);			            
	            className = 'infoLink';
	        }
	        
	        with (productLinkB) {
	            setAttribute('href', 'javascript:;');
	            setAttribute('rel', productSource);			            
	            className = 'infoLink';
	        }
			
			$D.addClass(divContainerA, "slideshowFrameContainerForImg");
			$D.addClass(divContainerB, "slideshowFrameContainerForImg");
			
				
			// set image sources
			imgA.setAttribute("src",this.properties.slideshowFrames[this.properties.isActive].getElementsByTagName("a")[0].getAttribute("href"));
			(this.properties.slideshowFrames[this.properties.isActive].getElementsByTagName("a")[0].getAttribute("href"));
			imgB.setAttribute("src",this.properties.slideshowFrames[this.properties.isNext].getElementsByTagName("a")[0].getAttribute("href"));
			
			$D.addClass(imgA,"slide1");
			$D.addClass(imgA,"relIMG");
			
			$D.addClass(imgA,"thumb");
			/*
			$D.addClass(imgA,"addToClipboard");
			*/
			$D.addClass(imgB,"slide2");
			$D.addClass(imgB,"relIMG");
			/* $D.addClass(imgB,"addToClipboard"); */
			$D.addClass(imgB,"thumb");
			
			frameContainer.id = this.properties.slideshowFrameContainerId;
			imgA.id = "slide1"; // starts as back image
			imgB.id = "slide2"; // starts as front image

			// append elements
			frameContainer.appendChild(divContainerA);
			frameContainer.appendChild(divContainerB);
			
			divContainerA.appendChild(productLinkA);
			divContainerB.appendChild(productLinkB);
			
			productLinkA.appendChild(imgA);
			productLinkB.appendChild(imgB);
			
			this.properties.slideshowRootNode.appendChild(frameContainer);
			
			// Read height of container 
			YAHOO.lutsr.slideshow.divContainerHeight = divContainerB.clientHeight;
		}
	},
	
	initPagination : function() {
		for(var i=0; i<this.properties.slideshowListItems.length; i++) {
			var controlNode = this.properties.slideshowListItems[i].getElementsByTagName("a")[0];
			$E.addListener(controlNode,"click",this.disableDefaultBehaviour);

			// add behaviour based on classname
			switch(true) {
				case $D.hasClass(this.properties.slideshowListItems[i],"navPrev") : var slideTarget = -1;
				break;

				case $D.hasClass(this.properties.slideshowListItems[i],"navNext") : var slideTarget = 1;
				break;

				default : var slideTarget = 0;
				break;
			}
			
			$E.addListener(controlNode,"mouseover",this.slideTo,{slidePosition:slideTarget,slideshowObject:this});
			$E.addListener(controlNode,"click",this.stopTimer);
			//$E.addListener(controlNode,"mouseout",this.slideTo,{slidePosition:slideTarget,slideshowObject:this});
			//$E.addListener(controlNode,"mouseout",this.stopAnimation);
		}
	},

	slideTo : function(e,slideProperties,refObj) {
		
		var slideshowObject = slideProperties.slideshowObject;
		// turn off autostart
		slideshowObject.properties.slideshowAutoStart = true;

		if(!refObj) {
			refObj = this;
		}
		if(slideshowObject.properties.slideshowIsAnimating) {
			if(YAHOO.lutsr.slideshow.animationThread != null) {
				clearTimeout(YAHOO.lutsr.slideshow.animationThread);	
			}
			YAHOO.lutsr.slideshow.animationThread = window.setTimeout(function() {slideshowObject.slideTo(null,slideProperties,refObj);}, 1000);
			return false;
		}

		// set frame
		if(slideProperties.slidePosition == 1) {
			slideshowObject.properties.isNext = slideshowObject.getNext();
		} else if (slideProperties.slidePosition == -1) {
			slideshowObject.properties. isNext = slideshowObject.getPrevious();
		} else {
			slideshowObject.properties.isNext = slideshowObject.getSelected(refObj);
		}

		// set slideTo img object source
		var aTag = slideshowObject.properties.slideshowFrames[slideshowObject.properties.isNext].getElementsByTagName("a")[0];
		slideshowObject.properties.slideshowFadeInObject.src = aTag.getAttribute("href");
		
		// animate to slideTo img
		clearTimeout(YAHOO.lutsr.slideshow.animationTimer);
		//slideshowObject.startTimer();
		slideshowObject.startAnimate(slideshowObject);
	},
	
	startAnimate : function(slideshowObject) {
		// fade out current slide
		fadeOutAnimation = new YAHOO.util.Anim(slideshowObject.properties.slideshowFadeOutObject, { opacity: { to: 0 }},50);
		
		fadeOutEnd = function() {
			// no action defined
		}
		fadeOutAnimation.useSeconds = false;
		fadeOutAnimation.onComplete.subscribe(fadeOutEnd);
		slideshowObject.properties.slideshowIsAnimating = true;
		
		// Resize Images for IE
		if(YAHOO.env.ua.ie >0) {
			var image = new Image();
			
			image.src= slideshowObject.properties.slideshowFadeInObject.src;
			
			slideshowObject.properties.slideshowFadeInObject.width = image.width;
			slideshowObject.properties.slideshowFadeInObject.height = image.height;
		}

		// Recalc size if image is too big
		if(!(YAHOO.env.ua.ie >0)) {
			var origHeight = slideshowObject.properties.slideshowFadeInObject.height;
			if(origHeight > YAHOO.lutsr.slideshow.divContainerHeight) {
				
				slideshowObject.properties.slideshowFadeInObject.height = YAHOO.lutsr.slideshow.divContainerHeight;
				slideshowObject.properties.slideshowFadeInObject.width = 
				parseInt(slideshowObject.properties.slideshowFadeInObject.width * YAHOO.lutsr.slideshow.divContainerHeight / origHeight);
			}
		}
		
		
		// Reposition image
		var marginTop = parseInt((YAHOO.lutsr.slideshow.divContainerHeight - slideshowObject.properties.slideshowFadeInObject.height) /2);
		slideshowObject.properties.slideshowFadeInObject.style.marginTop = Math.max(marginTop,0)  + "px";	

		// fade in new slide
		fadeInAnimation = new YAHOO.util.Anim(slideshowObject.properties.slideshowFadeInObject, { opacity: { to: .999 }},50);
		
		fadeInEnd = function() {
			$D.removeClass(slideshowObject.properties.slideshowFrames[slideshowObject.properties.isActive],"isActive");
			$D.addClass(slideshowObject.properties.slideshowFrames[slideshowObject.properties.isNext],"isActive");
			
			var aTag = slideshowObject.properties.slideshowFrames[slideshowObject.properties.isActive].getElementsByTagName("a")[0];
			slideshowObject.properties.slideshowFadeOutObject.src = aTag.getAttribute("href");
			
			// add product pk for Drag and Drop actions
			var pk = YAHOO.hmmh.Accordion.findInfo(aTag).pk;
			slideshowObject.properties.slideshowFadeOutObject.longDesc = pk;
			slideshowObject.properties.slideshowFadeInObject.longDesc = pk;
			
			slideshowObject.properties.isActive = slideshowObject.properties.isNext;

			// replace classes
			$D.replaceClass(slideshowObject.properties.slideshowFadeInObject,"slide2","slide1");
			$D.replaceClass(slideshowObject.properties.slideshowFadeOutObject,"slide1","slide2");

			// set new fadeIn & fadeOut object references
			slideshowObject.properties.slideshowFadeInObject = $D.getElementsByClassName("slide2","img",slideshowObject.properties.slideshowRootNode)[0];
			slideshowObject.properties.slideshowFadeOutObject = $D.getElementsByClassName("slide1","img",slideshowObject.properties.slideshowRootNode)[0];
			
			// remove any inline styling - WHY???
			//slideshowObject.properties.slideshowFadeInObject.removeAttribute("style");
			//slideshowObject.properties.slideshowFadeOutObject.removeAttribute("style");
			slideshowObject.properties.slideshowIsAnimating = false;

			if(slideshowObject.properties.slideshowAutoStart) {
				slideshowObject.properties.isNext = slideshowObject.getNext();
				slideshowObject.properties.slideshowFadeInObject.src = slideshowObject.properties.slideshowFrames[slideshowObject.properties.isNext].getElementsByTagName("a")[0].getAttribute("href");
				slideshowObject.startTimer();
			}
		}
		fadeInAnimation.useSeconds = false;
		fadeInAnimation.onComplete.subscribe(fadeInEnd);
		
		
		fadeOutAnimation.animate();
		fadeInAnimation.animate();
	},
	
	stopAnimation : function(e,slideProperties,refObj) {
		var slideshowObject = slideProperties.slideshowObject;
	},
	
	startTimer : function() {
		var slideshowObject = this;
		clearTimeout(YAHOO.lutsr.slideshow.animationTimer);
		YAHOO.lutsr.slideshow.animationTimer = window.setTimeout(function() { slideshowObject.startAnimate(slideshowObject);},this.properties.slideshowSpeed);
	},
	
	stopTimer : function() {
		var slideshowObject = this;
		clearTimeout(YAHOO.lutsr.slideshow.animationTimer);
	},

	preloadImages : function() {
		for(var i=2; i<this.properties.slideshowFrames.length;i++) {
			var preloadImage = new Image();
			preloadImage.src = this.properties.slideshowFrames[i].getElementsByTagName("a")[0].getAttribute("href");
		}
	},

	getSelected : function(refObject) {
		// remove previous active class
		$D.removeClass(this.properties.slideshowFrames[this.properties.isActive],"isActive");

		// set active class
		$D.addClass(refObject.parentNode,"isActive");

		return this.getCurrent();
	},

	keyboardNavigation : function() {
		var refObj = this;
		$E.addListener(window,"keydown",this.keyPressed,refObj);
	},
	
	keyPressed : function(e,refObj) {
		if(e.keyCode == 37) {
			var slideProperties = {
				slidePosition:-1,
				slideshowObject:refObj
			}
			if(YAHOO.lutsr.slideshow.animationThread != null) {
				clearTimeout(YAHOO.lutsr.slideshow.animationThread);	
			}
			YAHOO.lutsr.slideshow.animationThread = window.setTimeout(function(){refObj.slideTo(e,slideProperties,refObj);},10);
		} else if (e.keyCode == 39) {
			var slideProperties = {
				slidePosition: 1,
				slideshowObject:refObj
			}
			YAHOO.lutsr.slideshow.animationThread = window.setTimeout(function(){refObj.slideTo(e,slideProperties,refObj);},10);
		}
	}
}

initPage = function() {
	// call slideshow init function 
	if(!$D.get("slideshowModule")) {return}
	YAHOO.lutsr.slideshow.init(
	{
		rootId:"slideshowModule",
		autoStart:true,
		slideSpeed:4010,
		preloadImages:true,
		frameContainer:"slideshowFrameContainer"
	});
}

$E.on(window,"load",initPage);