/**
* @author E.TWEbb
* @usage 
*/

var slideshow = new Class({
	
	Implements: Options,
	
	options: {
		thumbColor: "#fff",
		thumbHightlight: "#f00",
		tickTime: 3,
		autoStart: false,
		startBtn: "images/slideshow/start_btn.png",
		nextBtn: "images/slideshow/next_btn.png",
		prevBtn: "images/slideshow/prev_btn.png"
	},
	initialize : function (options) {		
		this.setOptions(options);
		
		//check for div
		if($("slideshow") == null) {return false}

		//Set up globals
		this.container = $("slideshow"); //Toplvl container		
		this.images = $("slideshow_images").getChildren(); // the images within
		this.thumbContainer = new Element("div", {"id":"slideshow_thumbnails"}); // make thumbnail holder
		this.container.adopt(this.thumbContainer); //Add it to the container
		this.currentImg = null;
		this.interval = null;
		
		//Autostart
		if(this.options.autoStart) {
			this.startTimer(false);
		}
		
		//Create control layer
		this.controlLayer = new Element("div",{
				"id":"slideshow_controls",
				"styles": {
					"position":"relative",
					"top": - this.container.getStyle("height").toInt(),
					"height": $("slideshow_images").getStyle("height"),
					"width": this.container.getStyle("width")
				}
			});
		this.container.adopt(this.controlLayer);
		
		var topDist = ($("slideshow_images").getSize().y / 2) - 20;
			
		//PREV
		this.prevButton = new Element("img", {
			"id":"slideshow_nextBtn",
			"src":this.options.prevBtn,
			"styles": {
				"position":"absolute",
				"top":topDist,
				"left": 10
			},
			"opacity": .8
		});
		this.prevButton.addEvent("click", function() {
			this.prevSlide();
			this.hideStart();
		}.bind(this));
		this.controlLayer.adopt(this.prevButton);
		
		//START
		this.startButton = new Element("img", {
			"id":"slideshow_nextBtn",
			"src":this.options.startBtn,
			"styles": {
				"position":"absolute",
				"top":topDist,
				"left": (this.container.getStyle("width").toInt() / 2) - 76
			},
			"opacity": .9			
		});
		//Auto start so no button needed
		if(!this.options.autoStart) {
			this.controlLayer.adopt(this.startButton);
		}
		this.startButton.addEvent("click", function() {
			this.startTimer(true);
			this.hideStart();
		}.bind(this));
		
		//NEXT
		this.nextButton = new Element("img", {
			"id":"slideshow_nextBtn",
			"src":this.options.nextBtn,
			"styles": {
				"position":"absolute",
				"top":topDist,
				"left": this.container.getStyle("width").toInt() - 50
			},
			"opacity": .8
		});
		this.nextButton.addEvent("click", function() {
			this.nextSlide();
			this.hideStart();
		}.bind(this));
		this.controlLayer.adopt(this.nextButton);
		
		//Inital view
		this.hideControls();
		this.showStart();
		
		//Control layer events
		this.controlLayer.addEvent("mouseover",function() {
			this.showControls()
		}.bind(this));
		
		this.controlLayer.addEvent("mouseout",function() {
			this.hideControls();
		}.bind(this));
			
		//Process the images
		this.images.each(function(item,index) {
			
			if(item.hasClass("default")) {
				item.fade("show");
				this.currentImg = item;
			} else {
				item.fade("hide");
			}
				
			var a = this.getThumb(item.src,index);
				a.addEvent("click",function(e) {
					e = new Event(e);
					e.stop();
					this.transition(this.currentImg,item);
					this.highlightThumb(a);
					this.stopTimer();
					this.hideStart();
					item.addEvent("click",function() {
						this.startTimer(true);
					}.bind(this));
				}.bind(this));
			this.thumbContainer.adopt(a);
			if(index == 0) {this.highlightThumb(a)}
		}.bind(this));	
	},
	getThumb: function (url, text) {
		var a = new Element("a",{"href":url,"html":text});
			a.setStyle("background-color",this.options.thumbColor);
			a.set("tween",{duration:"long"});
		return a;
	},
	transition: function (oldImg, newImg) {
		oldImg.set("tween", {
			onComplete: function() {
				oldImg.setStyle("display","none");
				oldImg.set("tween", {});
				newImg.setStyle("display","inline");
				newImg.fade("in");
				this.currentImg = newImg;
			}.bind(this)
		});
		oldImg.fade("out");		
	},
	highlightThumb: function(targ) {
		this.thumbContainer.getChildren().each(function(item) {
			if(targ == item) {				
				targ.tween("background-color", this.options.thumbColor,this.options.thumbHightlight);
			} else {
				item.tween("background-color", this.options.thumbColor);
			}
		}.bind(this));		
	}, 
	startTimer : function (showNext) {
		if(showNext) {this.tick()}
		if(this.interval == null) {this.interval = this.tick.periodical(this.options.tickTime*1000, this)};
		this.hideStart();
	},
	stopTimer : function() {
		if(this.interval != null ) {$clear(this.interval)};
	},
	tick : function() {
		var currentIndex = this.images.indexOf(this.currentImg);
		var nextImgIndex = currentIndex + 1 > this.images.length-1 ? 0 : currentIndex+1;
		this.transition(this.currentImg,this.images[nextImgIndex]);
		var thumbArray = this.thumbContainer.getChildren();
		this.highlightThumb(thumbArray[nextImgIndex]);
	},
	showStart : function() {
		this.startButton.tween("opacity",.9);
	},
	hideStart : function() {
		this.startButton.tween("opacity",0);
	},
	showControls : function() {
		this.nextButton.tween("opacity",.8);
		this.prevButton.tween("opacity",.8);
	},
	hideControls : function() {
		this.nextButton.tween("opacity",0);
		this.prevButton.tween("opacity",0);
	},
	nextSlide: function() {
		this.stopTimer();
		this.tick();
	},
	prevSlide: function() {
		this.stopTimer();
		var currentIndex = this.images.indexOf(this.currentImg);
		var nextImgIndex = currentIndex - 1 < 0 ? this.images.length - 1 : currentIndex - 1;
		this.transition(this.currentImg,this.images[nextImgIndex]);
		var thumbArray = this.thumbContainer.getChildren();
		this.highlightThumb(thumbArray[nextImgIndex]);
	}
});