/************************************************************************************************/
/*                                      SlideShow.js                                            */
/* Functionality:																				*/
/*																								*/
/* Methods: Create(id,name,speed,delay,cap)														*/
/*			AddImage(name,caption)																*/
/*			Start()																				*/
/*			FadeOut()																			*/
/*			ChangeImage()																		*/
/*			ChangeCaption()																		*/
/*																								*/
/* Usage: Call SlideShow.Create()																*/
/*		  Call SlideShow.AddImage()																*/
/*		  Call SlideShow.Start()																*/
/*																								*/
/* Requires: TLCScript.js																		*/
/************************************************************************************************/
var SlideShow = {
	ID: null,
	Name: null,
	speed: 1,
	wait: 3000,
	imageNumber: 1,
	imageOpacity: 100,
	amount: 5,
	captions: true,
	
	myImages: [],
	myCaptions: [],
	
	Create: function(ID,Name,Speed,Delay,Cap){
		this.ID=ID;
		this.Name=Name;
		this.speed=Speed;
		this.wait=Delay;
		this.captions=Cap;
		
		var i1 = document.createElement("div");
		i1.id="imageone"+this.ID;
		i1.style.position="absolute";
		i1.style.height="100%";
		i1.style.width="100%";
		i1.style.zIndex=2;
		i1.style.top="0px";
		i1.style.left="0px";
		i1.style.background = "#000 top left no-repeat";
		$(this.ID).appendChild(i1);
		
		var i2 = document.createElement("div");
		i2.id="imagetwo"+this.ID;
		i2.style.position="absolute";
		i2.style.height="100%";
		i2.style.width="100%";
		i2.style.zIndex=1;
		i2.style.top="0px";
		i2.style.left="0px";
		i2.style.background = "#000 top left no-repeat";
		$(this.ID).appendChild(i2);
		
		if(this.captions){
			var c = document.createElement("div");
			c.id="captions";
			c.style.position="absolute";
			c.style.left="0px";
			c.style.bottom="0px";
			c.style.height="50px";
			c.style.width="100%";
			c.style.zIndex=3;
			c.style.display="none";
			
			var s = document.createElement("div");
			s.style.position="absolute";
			s.style.height="100%";
			s.style.width="100%";
			s.style.background="#000";
			s.style.bottom="0px";
			s.style.left="0px";
			s.style.zIndex=1;
			
			setOpacity(s,60);
			
			c.innerHTML = "<table id=\"captionwrapone"+this.ID+"\" class=\"captionwrapone\"><tr><td><span class=\"caption\" id=\"captionone"+this.ID+"\"></span></td></tr></table>"+
						  "<table id=\"captionwraptwo"+this.ID+"\" class=\"captionwraptwo\"><tr><td><span class=\"caption\" id=\"captiontwo"+this.ID+"\"></span></td></tr></table>";
			c.appendChild(s);
			$(this.ID).appendChild(c);
		}
	},
	
	AddImage: function(name,caption){
		this.myImages[this.myImages.length] = new Image();
		//this.myImages[this.myImages.length-1].onload=function(){this.width=100;}
		this.myImages[this.myImages.length-1].src="uploads/"+name;
		//alert(this.myImages[this.myImages.length-1].width);
		if(this.captions) this.myCaptions[this.myCaptions.length]=caption;
	},
	
	Start: function(){
		$("imageone"+this.ID).style.backgroundImage="url('"+this.myImages[0].src+"')";
		$("imagetwo"+this.ID).style.backgroundImage="url('"+this.myImages[1].src+"')";
		if(this.captions){
			$("captions").style.display="block";
		 	//$("captionone"+this.ID).innerHTML=this.myCaptions[0];
			$("captionone"+this.ID).appendChild(document.createTextNode(this.myCaptions[0]));
			//$("captiontwo"+this.ID).innerHTML=this.myCaptions[1];
			$("captiontwo"+this.ID).appendChild(document.createTextNode(this.myCaptions[1]));
		}
		setTimeout("SlideShow.FadeOut()",this.wait);
	},
	
	FadeOut: function(){
		if(this.imageOpacity>0){
			this.imageOpacity=this.imageOpacity-this.amount;
		}else{
			this.imageOpacity=0;
			//this.myOpacity=0;
		}
		setOpacity($("imageone"+this.ID),this.imageOpacity);
		
		if(this.captions) $("captionwraptwo"+this.ID).style.display="block";
		if(this.captions) setOpacity($("captionwrapone"+this.ID),this.imageOpacity);
		if(this.captions) setOpacity($("captionwraptwo"+this.ID),(100-this.imageOpacity));
		
		if(this.imageOpacity>0){
			setTimeout("SlideShow.FadeOut()",this.speed);
		}else{
			this.imageOpacity=100;
			this.ChangeImage();
			if(this.captions) this.ChangeCaption();
			setTimeout("SlideShow.FadeOut()",this.wait);
		}
	},
	
	ChangeImage: function(){
		$("imageone"+this.ID).style.backgroundImage=$("imagetwo"+this.ID).style.backgroundImage;
		
		setOpacity($("imageone"+this.ID),this.imageOpacity);
			
		this.imageNumber++;
		if(this.imageNumber>=this.myImages.length){this.imageNumber=0;}
		$("imagetwo"+this.ID).style.backgroundImage="url("+this.myImages[this.imageNumber].src+")";
	},
	
	ChangeCaption: function(){
		//$("captionone"+this.ID).innerHTML=$("captiontwo"+this.ID).innerHTML;
		$("captionone"+this.ID).innerHTML="";
		$("captionone"+this.ID).appendChild(document.createTextNode($("captiontwo"+this.ID).innerHTML));
		
		setOpacity($("captionwrapone"+this.ID),100);
		setOpacity($("captionwraptwo"+this.ID),0);
		
		//$("captionwraptwo"+this.ID).style.display="none";
		//$("captiontwo"+this.ID).innerHTML=this.myCaptions[this.imageNumber];
		$("captiontwo"+this.ID).innerHTML="";
		$("captiontwo"+this.ID).appendChild(document.createTextNode(this.myCaptions[this.imageNumber]));
	}
}