<!--
/********************************************
* Name: Classy Slideshow Lite
* Version: 0.2
* Created by: Kevin Kirchner
* Created on: 3.10.2010
* Last Update: 3.17.2010
* Notes:
*	- Example config object at bottom
**********************************************/

var config = "";

var transitions = {
	fade: function(){
		Effect.Fade(this.list[this.counter], {from:1, to:0, duration:this.config.transitionTime});
		// this.list[counter].setStyle({zIndex:(this.list.length-this.counter)}) 
		this.counterUp();
		Effect.Appear(this.list[this.counter], {from:0, to:1, duration:this.config.transitionTime});
	}
};

Prototype.Browser.IE6 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6;
Prototype.Browser.IE7 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 7;
Prototype.Browser.IE8 = Prototype.Browser.IE && !Prototype.Browser.IE6 && !Prototype.Browser.IE7;

var ClassySlideshow = Class.create(transitions, {
	initialize: function(slideshowId, config){
		

		//declare variables
		this.slideshowId = slideshowId;
		this.slideshow = $(this.slideshowId);
		var args = $A(arguments);
		this.config = (!args[1]) ? {transition:"fade", showTime:3, transitionTime:1, pager:[false, {initOpacity:1, hoverOpacity:1, activeOpacity:1, arrows:false, centerActiveThumb:false, verticalAlign:false, playAfterClick:false}], pauseOnHover:true, play:true} : args[1]; 		// TODO - set default for individual variables missing, TODO - maybe someone wants to show ONLY arrows
		this.thumbs = (this.config.pager) ? this.config.pager[0] : false;
		this.pagerConfig = (this.config.pager) ? this.config.pager[1] : false;
		
		this.restartTimeout = this.config.showTime*1000+this.config.transitionTime*1000;
		this.counter = 0;
		this.lastCounter = this.counter;
		this.list = this.slideshow.getElementsBySelector("li");
		if(this.list.length<=1) this.config.play = false;
		this.fading = false;
		this.clicked = false;
		this.playing = this.config.play;
		
		//make wrapper
		this.slideshowWrapper = new Element("div", {"id":this.slideshowId+"_wrapper"}).addClassName('classy-wrapper');
		this.slideshow.wrap(this.slideshowWrapper);
		
		if(this.config.play && this.config.pauseOnHover){
			this.slideshow.observe("mouseover", this.pauseOnOver.bind(this))
				.observe("mouseout", this.unPauseOnOut.bind(this));
		}
		
		// -- BUILD it
		
		// if there"s a pager
		if(this.config.pager && this.list.length>1){
			this.pagerConfig.initPos = 0; // important to keep for "else" part in activePagerSwitch
			if(this.pagerConfig.verticalAlign){
				switch(this.pagerConfig.verticalAlign){
					case "center" :
						this.pagerConfig.initPos = this.thumbs[0].activeH/2 - this.thumbs[0].inactiveH/2;
						break;
					case "bottom" :
						this.pagerConfig.initPos = this.thumbs[0].activeH - this.thumbs[0].inactiveH;
						break;
					default :
						this.pagerConfig.initPos = 0;
						break;
				}
			}
			
			this.pagerWrapper = new Element("div", {"id":this.slideshowId+"_pager_wrapper"}).addClassName('classy-pager-wrapper');
			this.pager = new Element("div", {"id":this.slideshowId+"_pager"}).addClassName('classy-pager');
			
			this.slideshowWrapper.insert(this.pagerWrapper);
			if(this.pagerConfig.centerActiveThumb) {
				this.pagerWrapper.setStyle(
					{
						width:"80%", 
						overflow:"hidden",
						margin:"0 auto 20px",
						height: this.thumbs[0].activeH + "px"
					})
				.insert(this.pager);
			} else { 
				this.pagerWrapper.insert(this.pager);
			}
			var numberLink = "",
				pagerContent = "",
				j = "",
				pagerWrap = "";

			if(this.pagerConfig && this.pagerConfig.arrows){
				leftArrow = new Element("a", 
						{
							"id":this.slideshowId+"_left_arrow"
						}
					).addClassName('classy-pager-arrow-left');

				leftArrow.update("&laquo;")
					.observe("click", this.pagerClick.bind(this, leftArrow, "-", this.pagerConfig.playAfterClick))
					.observe("mouseover", function(){
						leftArrow.setStyle({backgroundPosition:"100% 100%"});
					})
					.observe("mouseout", function(){
						leftArrow.setStyle({backgroundPosition:"100% 0"});
					});
				this.slideshowWrapper.insert(leftArrow);
			}
			for(i=0;i<this.list.length;i++){
				var skuTag = (this.thumbs) ? this.thumbs[i].sku : i
				numberLink = new Element("a", 
					{
						"id":this.slideshowId+"_pager_link_"+i, 
						"onclick":"return false;", 
						"href":"#" + skuTag,
						"outline":"none"
					});
					
				if(this.thumbs){
					var theWidth,
						theHeight,
						setPagerWidth = 0;
				
					theWidth = (i!=0) ? this.thumbs[i].inactiveW : this.thumbs[i].activeW ;
					theHeight = (i!=0) ? this.thumbs[i].inactiveH : this.thumbs[i].activeH ;
					if(this.pagerConfig.centerActiveThumb) {
						this.thumbs[i].move = this.pager.getWidth()/2;
						for(j=i;j>=0;j--) {
							this.thumbs[i].move -= (j==i) ? this.thumbs[i].activeW/2: this.thumbs[i].inactiveW;
						}
					}
					var theTop = (i!=0) ? this.pagerConfig.initPos : 0;
					// var theStyle = (Prototype.Browser.IE8) ? "position: relative; top: " + theTop + "px" : ""; 
					var theStyle = "";
					pagerContent = new Element("img", 
						{
							"src": this.thumbs[i].imgSrc, 
							"id": this.slideshowId+"_thumb_"+i,
							"alt": this.thumbs[i].altText,
							"width": theWidth, 
							"height": theHeight,
							"style" : theStyle
						}
					);
					
					// if(this.pagerConfig.verticalAlign){
					// 	var theTop = (i!=0) ? this.pagerConfig.initPos : 0;
					// 	new Effect.Move(pagerContent, {y: this.pagerConfig.initPos + "px", mode:"relative", duration:.5});
					// }
					
					// pagerContent.setStyle({position: thePosition, top: theTop+"px"});

				} else {
					pagerContent = i+1;
				}
				
				// sweet fade out effect
				
				// this.pagerConfig.initOpacity = 1;
				// var opacityFactor = (i<4) ? 1-(i*.25) : 0;
				var opacityFactor = 1;

				numberLink.update(pagerContent)
					.setStyle({opacity: this.pagerConfig.initOpacity * opacityFactor})
					.observe("mouseover", this.pagerOver.bind(this, numberLink))
					.observe("mouseout", this.pagerOut.bind(this, numberLink))
					.observe("click", this.pagerClick.bind(this, numberLink, i, this.pagerConfig.playAfterClick));

				pagerWrap = new Element("span", {"id": this.slideshowId+"_pager_wrap_"+i}).addClassName('classy-pager-wrap');
				pagerWrap.insert(numberLink);	
				this.pager.insert(pagerWrap);
				this.list[i].setStyle({zIndex: (this.list.length-i)})
					.writeAttribute("id", this.slideshowId+"_li_"+(i+1));
					
				if(this.list[i].getAttribute("title")) {
					this.list[i].addClassName("linked")
						.observe("click", this.linkLi.bind(this, this.list[i].getAttribute("title")));
				}
				
				if(i!=0) this.list[i].setStyle({display:"none"});
			} // end for loop
			
			
			// fixed by using position relative		
			if(this.thumbs) {
				var hackImg = new Element("img", {
					"src": BLANK_IMG,	// set in head.phtml
					"height":this.thumbs[0].activeH,
					"width":"1"
				});
				this.pager.insert(hackImg);

				if(this.pagerConfig.centerActiveThumb) {
					// initial centering it
					new Effect.Move(this.pager, {x:this.thumbs[0].move, duration:0});

					// set pager width to avoid wrapping - thanks IE 
					var setPagerWidth = (this.list.length-1) * this.thumbs[0].inactiveW + this.thumbs[0].activeW + 1;
					this.pager.setStyle({width: setPagerWidth + "px"});
				}
			}
			$(this.slideshowId+"_pager_link_"+this.counter).addClassName("active")
				.setStyle({opacity: this.pagerConfig.activeOpacity});

			if(this.pagerConfig && this.pagerConfig.arrows){
				// insert left arrow
				rightArrow = new Element("a", 
						{
							"id":this.slideshowId+"_right_arrow"
						}
					).addClassName('classy-pager-arrow-right');
				rightArrow.update("&raquo;")
					.observe("click", this.pagerClick.bind(this, rightArrow, "+", this.pagerConfig.playAfterClick))
					.observe("mouseover", function(){
						rightArrow.setStyle({backgroundPosition:"0 100%"});
					})
					.observe("mouseout", function(){
						rightArrow.setStyle({backgroundPosition:"0 0"});
					});
				this.slideshowWrapper.insert(rightArrow);
			}
		// if there"s no pager
		} else{ 
			for(i=0;i<this.list.length;i++){
				this.list[i].setStyle({zIndex: (this.list.length-i)}).writeAttribute("id", this.slideshowId+"_li_"+(i+1));
				if(i!=0) this.list[i].setStyle({display:"none"});
			}
		}
		
		// -- STYLE it

		// -- RUN it
		if(this.config.play) this.timeout = window.setTimeout(this.runSlideshow.bind(this), this.config.showTime*1000);
		return this;
	},
	keyPressed: function(event){
		if(event.keyCode == 37) this.pagerClick(this.slideshowId, "-");
		if(event.keyCode == 39) this.pagerClick(this.slideshowId, "+");
	},
	activePagerSwitch: function(){
		if(this.thumbs){
			var fromSlide = i = this.lastCounter;
			var toSlide = this.counter;
			var stopSlide = (fromSlide<toSlide) ? toSlide-1 : toSlide+1;
			var lastOne = "";
			var newOne = "";
			var time = (this.clicked) ? this.config.transitionTime/6*1000 : this.config.transitionTime/4*1000;
				time = (Math.abs(fromSlide-toSlide)>5 && ((fromSlide==this.list.length-1 && toSlide==0) || (fromSlide==0 && toSlide==this.list.length-1))) ? time/2 : time;
			
			lastOne = $(this.slideshowId+"_pager_link_"+fromSlide);
			if(lastOne.hasClassName("active")){ lastOne.removeClassName("active")};
			
			var direction = function(i){
				return (fromSlide<toSlide) ? i+1 : i-1;
			}
			

			this.magFx = function(){
				lastOne = $(this.slideshowId+"_pager_link_"+i);
				lastOne.setStyle({opacity: this.pagerConfig.initOpacity});
				newOne = $(this.slideshowId+"_pager_link_"+(direction(i)));
				newOne.setStyle({opacity: this.pagerConfig.activeOpacity});
				// var moveX = (this.pagerConfig.centerActiveThumb) ? this.thumbs[(direction(i))].move : 0;
				// var moveMode = (this.pagerConfig.centerActiveThumb) ? 'absolute' : 'relative'; 
				
					// if(Prototype.Browser.IE8){
					// 	var theMode = (this.pagerConfig.verticalAlign) ? "absolute" : "relative";
					// 	new Effect.Parallel(
					// 		[	
					// 			new Effect.Move(this.slideshowId+"_thumb_"+i, { y: this.pagerConfig.initPos, mode: "relative", sync: true}),
					// 			new Effect.Move(this.slideshowId+"_thumb_"+ (direction(i)), { y: 0, duration: time/1000, mode: theMode, sync:true }),
					// 			new Effect.Tween(this.slideshowId+"_thumb_"+i, this.thumbs[i].activeW, this.thumbs[i].inactiveW, {sync:true}, "width"),
					// 			new Effect.Tween(this.slideshowId+"_thumb_"+i, this.thumbs[i].activeH, this.thumbs[i].inactiveH, {sync:true}, "height"),
					// 			new Effect.Tween(this.slideshowId+"_thumb_"+(direction(i)), this.thumbs[(direction(i))].inactiveW, this.thumbs[(direction(i))].activeW, {sync: true}, "width"),
					// 			new Effect.Tween(this.slideshowId+"_thumb_"+(direction(i)), this.thumbs[(direction(i))].inactiveH, this.thumbs[(direction(i))].activeH, {sync: true}, "height")
					// 		], { duration: time/1000}
					// 	);
					// } else {
						new Effect.Parallel(
							[	
								// new Effect.Move(this.slideshowId+"_pager", {x: moveX, duration: time/1000, mode: moveMode, sync:true}),
								new Effect.Tween(this.slideshowId+"_thumb_"+i, this.thumbs[i].activeW, this.thumbs[i].inactiveW, {sync:true}, "width"),
								new Effect.Tween(this.slideshowId+"_thumb_"+i, this.thumbs[i].activeH, this.thumbs[i].inactiveH, {sync:true}, "height"),
								new Effect.Tween(this.slideshowId+"_thumb_"+(direction(i)), this.thumbs[(direction(i))].inactiveW, this.thumbs[(direction(i))].activeW, {sync: true}, "width"),
								new Effect.Tween(this.slideshowId+"_thumb_"+(direction(i)), this.thumbs[(direction(i))].inactiveH, this.thumbs[(direction(i))].activeH, {sync: true}, "height")
							], { duration: time/1000}
						);
					// }
					if(i!=stopSlide){
						i = direction(i);
						this.magFxTimeout = window.setTimeout(this.magFx.bind(this), time);
					} else {
						newOne.addClassName("active");
					}
				}
			
			this.magFxTimeout = window.setTimeout(this.magFx.bind(this), time);

			var moveX = (this.pagerConfig.centerActiveThumb) ? this.thumbs[this.counter].move : 0;
			var moveMode = (this.pagerConfig.centerActiveThumb) ? 'absolute' : 'relative'; 
			var totalTime = (Math.abs(fromSlide-toSlide)>5 && ((fromSlide==this.list.length-1 && toSlide==0) || (fromSlide==0 && toSlide==this.list.length-1))) ? Math.abs(fromSlide-toSlide) + 3 : Math.abs(fromSlide-toSlide) + 1.5; 
				totalTime = time*totalTime;
				
			new Effect.Move(this.slideshowId+"_pager", {x: moveX, duration: totalTime/1000, mode: moveMode, transition: Effect.Transitions.sinoidal});

		} else {
			var lastOne = $(this.slideshowId+"_pager_link_"+this.lastCounter);
			var newOne = $(this.slideshowId+"_pager_link_"+this.counter);

			if(lastOne.hasClassName("active")) lastOne.removeClassName("active").setStyle({opacity: this.pagerConfig.initOpacity});
			newOne.addClassName("active").setStyle({opacity: this.pagerConfig.activeOpacity});
		}
		this.clicked = false;
		this.lastCounter = this.counter;
	},
	counterUp: function(){
		this.fading = true;
		this.counter=(this.counter>=(this.list.length-1))?0:this.counter+1;
		if(this.config.pager){
			var time = (this.clicked) ? 50 : this.config.transitionTime*1000/3;
			window.setTimeout(this.activePagerSwitch.bind(this), time);
		} 
	},
	runSlideshow: function(){
		switch(this.config.transition){
			default:
				this.fade();
				break;
		}
		this.otherTimeout = window.setTimeout(this.fadingFalse.bind(this), this.config.transitionTime*1000);
		if(this.config.play) this.timeout = window.setTimeout(this.runSlideshow.bind(this), this.restartTimeout);

	},
	pagerOver: function(el){
		el = $(el);
		el.setStyle({opacity: this.pagerConfig.hoverOpacity});
	},
	pagerOut: function(el){
		el = $(el);
		if(el.readAttribute("class")!="active") { el.setStyle({opacity: this.pagerConfig.initOpacity}); }
	},
	pagerClick: function(el, number, play){		// TODO - arrows not working in IE
		clearTimeout(this.timeout);
		el = $(el);
		if(number=="-") number = (this.counter==0) ? this.list.length-1 : this.counter-1;
		if(number=="+") number = (this.counter==this.list.length-1) ? 0 : this.counter+1;
		
		if(el.getAttribute("class")!="active" && !this.fading){
			// TODO - do something when it IS fading	
			// TODO - make available for other transitions
			var time = this.config.transitionTime/2;
			
			Effect.Fade(this.list[this.counter], {from:1, to:0, duration: time});
			this.counter = (number==0) ? this.list.length-1 : number-1;
			this.clicked = true;
			this.counterUp();
			this.effect = Effect.Appear(this.list[this.counter], {from:0, to:1, duration: time});
			
			this.otherTimeout = window.setTimeout(this.fadingFalse.bind(this), time*1000);
		}
		this.playing = this.pagerConfig.playAfterClick;
		
		if(this.playing) this.timeout = window.setTimeout(this.runSlideshow.bind(this), this.restartTimeout);
	},
	pauseOnOver: function(){			// TODO - not working on homepage in IE
		clearTimeout(this.timeout);
	},
	unPauseOnOut: function(){			// TODO - not working on homepage in IE
		if(this.playing) this.timeout = window.setTimeout(this.runSlideshow.bind(this), this.restartTimeout/2);
	},
	fadingFalse: function(){
		this.fading = false;
	},
	linkLi : function(url){
		window.location = url;
	},
	testMethod : function(arg){
		cl("test: " + arg);
	}
});


/* 
// Example config object
var config = {
	transition:"fade", 
	showTime:3, 						// in seconds
	transitionTime:1, 					// in seconds
	pager:[								// For no pager of any kind, replace array or arguments with: false
		[{								// First argument is an array of objects with details for each thumbnail. For no thumbnails replace array with: false
			alt:"alt text",				
			title:"title attr",			
			imgSrc:"image src path",	
			activeW: 50,				// an integer
			inactiveW: 50				// an integer
		},
		{								// 2nd thumbnail object of thumbnail"s details
			...							// and so on and so forth
		}], 
		{								// Second argument is an object for configuring the pager
			initOpacity:1, 				// 1 = 100% opacity, .5 = 50% opacity
			hoverOpacity:1, 			// 1 = 100% opacity, .5 = 50% opacity
			activeOpacity:1,			// 1 = 100% opacity, .5 = 50% opacity
			arrows:true,				// puts &laquo and &raquo on either side of the pager
			centerActiveThumb: true,	// puts active thumb in the center,
			verticalAlign:"center"		// also accepts "top", "bottom", or false. if true, defaults to "top"
		}
	],
	pauseOnHover:true, 
	play:true							// start playing on load
}
*/
//-->