
function Slideshow(Name, DivShow, width, height, Photos, Captions) {
	
	this.b = navigator.appName;
	
	if (this.b == "Microsoft Internet Explorer") {
		this.IE = true;
	} else {
		this.IE = false;
	}
	
	this.id = Name;
	
	this.PhotoArray = Photos;
	this.CurrentPhoto = -1;
	
	this.PhotoDir = "img/images/";
	
	this.CaptionArray = Captions;
	this.CaptionSize = 30;
	this.CaptionSteps = 13;
	this.CaptionNum = -0.1;
	this.CaptionUp = false;
	this.CaptionHeight = 40;
	this.CaptionTime = 100;
	
	this.FadeSteps = 10;
	this.FadeTime = 100;
	this.FadeNum = 1;
	this.FadeBack = true;
	
	this.FadeTimeout = 0; //Stops fading too quickly
	
	this.SlideLength = 5000;
	this.SlideTimeout = 0; //Delays showing next slide
	
	this.OuterDiv = document.getElementById(DivShow);
	this.width = width;
	this.height = height;
	
	this.Pause = false;
	
	this.OuterDiv.innerHTML = "<div id=\""+this.id+"_main\" class=\"slideshow\"><img src=\"img/blank.png\" id=\"picframe1\" style=\"width: "+this.width+"; height: "+this.height+";\" /><img src=\"img/blank.png\" id=\"picframe2\" style=\"width: "+this.width+"; height: "+this.height+";\" /></div>"
	+ "<div id=\""+this.id+"_caption\" class=\"caption\" style='overflow: hidden; height: 1px;'><div style='float: right; font-size: 10px;'><a style='color: white;' id='"+this.id+"_downloadLink' href='javascript:"+this.id+".DownloadPicture()'>[ Download ]</a></div>Caption here</div>"
	+ "<div id=\""+this.id+"_toolbar\" class=\"toolbar\" style=\"clear: left; background-color: #222222; color: #ffffff;\"><input type='button'  class=\"PauseButton\" onclick=\""+this.id+".togglePaused()\" value='Pause' id='"+this.id+"_Pause' />&nbsp;&nbsp;<input type='button'  class=\"ParamButton\" onclick=\""+this.id+".toggleAdvanced()\" value='Show Advanced Options' id='"+this.id+"_Advanced' />&nbsp;&nbsp;<input type='button'  class=\"DownloadButton\" onclick=\""+this.id+".DownloadPicture()\" value='Download Image' id='"+this.id+"_Download' /><br />"
	+ "<div id=\"adv\" class=\"advanced\" style=\"visibility: hidden; position: absolute; font-size: 12px; background-color: #222222; color: #ffffff;\"><h3>Advanced Setup</h3>"
	+ "Fade smoothness (Frames per fade): <input type=\"text\" value=\""+this.FadeSteps+"\" id=\""+this.id+"_FadeSmooth\" /><br />"
	+ "Fade time (Delay between frame change in milliseconds): <input type=\"text\" value=\""+this.FadeTime+"\" id=\""+this.id+"_FadeTime\" /><br />"
	+ "Caption smoothness (Frames for rise): <input type=\"text\" value=\""+this.CaptionSteps+"\"id=\""+this.id+"_CaptionSmooth\" /><br />"
	+ "Caption time (Delay between frame change in milliseconds): <input type=\"text\" value=\""+this.CaptionTime+"\"id=\""+this.id+"_CaptionTime\"><br />"
	+ "Caption height (Height in pixels of caption): <input type=\"text\" value=\""+this.CaptionHeight+"\"id=\""+this.id+"_CaptionHeight\" /><br />"
	+ "Image view time (Milliseconds before picture changes): <input type=\"text\" value=\""+this.SlideLength+"\" id=\""+this.id+"_ImgDelay\" /><br />"
	+ "<input type=\"button\" onclick=\""+this.id+".setParams()\" value=\"Set Params\" />"
	+ "&nbsp<input type=\"button\" onclick=\"window.location=window.location\" value=\"Refresh\" />"
	+ "</div></div>";
	
	this.Div = document.getElementById(this.id+"_main");
	this.Caption = document.getElementById(this.id+"_caption");
	this.BackFrame = document.getElementById("picframe1");
	this.FrontFrame = document.getElementById("picframe2");
	this.PauseButton = document.getElementById(this.id+"_Pause");
	this.AdvancedButton = document.getElementById(this.id+"_Advanced");
	this.DownloadButton = document.getElementById(this.id+"_Download");
	this.downloadLink = document.getElementById(this.id+"_downloadLink");
	
	//Variables set - Set it up!
	this.Div.style.width=this.width;
	this.Div.style.height=this.height;
	this.OuterDiv.style.overflow="hidden";
	if (this.IE) {
		this.Caption.style.width=this.width;
	} else {
		this.Caption.style.width=this.width-10;
	}
	this.Caption.style.backgroundColor = "#ffffff";
	this.Caption.style.color = "#000000";
	
	this.Caption.style.opacity = 0.7;
	this.Caption.style.MozOpacity = 0.7;
	this.Caption.style.filter = "alpha(opacity=70)";
	this.Caption.style.position="absolute";
	
	//this.Caption.style.marginTop=(this.CaptionHeight+5)+"px";
	this.Caption.style.marginTop="0px";
	
	this.Caption.style.height="0px";
	
	this.Caption.style.paddingTop="5px";
	this.Caption.style.paddingLeft="5px";
	this.Caption.style.paddingRight="5px";
	this.Caption.style.position="absolute";
	
	this.Div.style.zIndex="99";
	this.Caption.style.zIndex="100";
	
	this.BackFrame.style.position="absolute";
	this.FrontFrame.style.position="absolute";
	
	this.BackFrame.style.zIndex="5";
	this.FrontFrame.style.zIndoex="5";
	
	
	
	this.Start = function() {
		this.CaptionChange();
		//this.SlideTimeout = setTimeout(this.id+".Fade()",this.SlideLength);
	}

	this.Fade = function() {
		if (this.FadeNum > 0 && this.FadeNum < 1) {
			if (this.FrontFrame.style.visibility == "hidden")
				this.FrontFrame.style.visibility = "visible";
			if (this.BackFrame.style.visibility == "hidden")
				this.BackFrame.style.visibility = "visible";
		}
		
		if (this.FadeBack == true && this.FadeNum > 0) {
			//alert("Fading to back!");
			FadeStep = 1/this.FadeSteps;
			this.FadeNum = this.FadeNum-FadeStep;
			this.setTransparency(this.FadeNum);
			this.FadeTimeout = setTimeout(this.id+".Fade()",this.FadeTime);
		} else if (this.FadeBack == false && this.FadeNum < 1) {
			//alert("Fading to front!");
			FadeStep = 1/this.FadeSteps;
			this.FadeNum = this.FadeNum+FadeStep;
			this.setTransparency(this.FadeNum);
			this.FadeTimeout = setTimeout(this.id+".Fade()",this.FadeTime);
		} else {
		
			
			if (this.FadeBack == false) {
				this.FadeBack = true;
			} else {
				this.FadeBack = false;
			}
			this.ChangePhoto();
			this.CaptionChange();
		}
	}
	
	this.setTransparency = function(Transparency) {
			this.FrontFrame.style.opacity = Transparency;
			this.FrontFrame.style.MozOpacity = Transparency;
			this.FrontFrame.style.filter = "alpha(opacity="+(Transparency*100)+")";
			
			this.BackFrame.style.opacity = 1-Transparency;
			this.BackFrame.style.MozOpacity = 1-Transparency;
			this.BackFrame.style.filter = "alpha(opacity="+(100-(Transparency*100))+")";
			
	}
	
	this.ChangePhoto =function() {
		if (this.CurrentPhoto >= this.PhotoArray.length-1) {
			this.CurrentPhoto = 0;
		} else {
			this.CurrentPhoto++;
		}
		
		//TODO image scale
		image = new Image();
		image.src = this.PhotoDir+this.PhotoArray[this.CurrentPhoto];
		height = image.height;
		width = image.width;
		
		if (image.width > this.width) {
			width = this.width;
			height = this.getAspect(this.width,image.width,image.height);
		}
		
		if (height > this.height) {
			height = this.height;
			width = this.getAspect(this.height,image.height,image.width);
		}
		
		marginLeft = (this.width-width)/2;
			
		if (this.FadeBack == true) {
			this.BackFrame.style.visibility = "hidden";
			this.BackFrame.src = this.PhotoDir+this.PhotoArray[this.CurrentPhoto];
		
			this.BackFrame.style.width = width+"px";
			this.BackFrame.style.height = height+"px";
			this.BackFrame.style.marginLeft = marginLeft+"px";
		} else {
			this.FrontFrame.style.visibility = "hidden";
			this.FrontFrame.src = this.PhotoDir+this.PhotoArray[this.CurrentPhoto];
			
			this.FrontFrame.style.width = width+"px";
			this.FrontFrame.style.height = height+"px";
			this.FrontFrame.style.marginLeft = marginLeft+"px";
		}
	}
	
	this.CaptionChange = function() {
		CaptionFadeStep = this.CaptionHeight/this.CaptionSteps;
		if (this.CaptionUp==true && this.CaptionNum+CaptionFadeStep <= this.CaptionHeight) {
			this.CaptionNum = this.CaptionNum+CaptionFadeStep;
			this.Caption.style.height = (this.CaptionNum+1)+"px";
			if(this.IE) {
				this.Caption.style.marginTop = "-"+this.CaptionNum+"px";
			} else {
				this.Caption.style.marginTop = "-"+(this.CaptionNum+5)+"px";
			}
			this.CaptionTimeout = setTimeout(this.id+".CaptionChange()",this.CaptionTime);
		} else if (this.CaptionUp==false && this.CaptionNum-CaptionFadeStep >= 0) {
			this.CaptionNum = this.CaptionNum-CaptionFadeStep;
			this.Caption.style.height = (this.CaptionNum+1)+"px";
			if(this.IE) {
				this.Caption.style.marginTop = "-"+this.CaptionNum+"px";
			} else {
				this.Caption.style.marginTop = "-"+(this.CaptionNum+5)+"px";
			}
			this.CaptionTimeout = setTimeout(this.id+".CaptionChange()",this.CaptionTime);
		} else {
			if (this.CaptionUp==true) {
				this.CaptionUp = false;
				this.DownloadButton.disabled = false;
				if (this.Pause == false) {
					this.SlideTimeout = setTimeout(this.id+".CaptionChange();"+this.id+".DownloadButton.disabled=true;",this.SlideLength);
				}
			} else {
				this.Caption.innerHTML = "<div style='float: right; font-size: 10px;'><a style='color: black;' id='"+this.id+"_downloadLink' href='javascript:"+this.id+".DownloadPicture()'>[ Download ]</a></div>"+this.CaptionArray[this.CurrentPhoto];
				this.CaptionUp=true;
				this.Fade();
			}
		}
	}
	
	this.toggleVisible = function(Div) {
		DivStyle = document.getElementById(Div).style;
		if (DivStyle.visibility == "visible") {
			DivStyle.visibility = "hidden";
			DivStyle.position = "absolute";
		} else {
			DivStyle.visibility = "visible";
			DivStyle.position = "relative";
		}
		
	}
	
	this.setParams = function() {
		//this.OuterDiv.innerHTML += "Fade smoothness: <input type=\"text\" id=\""+this.id+"_FadeSmooth\">";
		this.FadeSteps = document.getElementById(this.id+"_FadeSmooth").value;
		
		//this.OuterDiv.innerHTML += "Fade time: <input type=\"text\" id=\""+this.id+"_FadeTime\">";
		this.FadeTime = document.getElementById(this.id+"_FadeTime").value;
		
		//this.OuterDiv.innerHTML += "Caption smoothness: <input type=\"text\" id=\""+this.id+"_CaptionSmooth\">";
		this.CaptionSteps = document.getElementById(this.id+"_CaptionSmooth").value;
		
		//this.OuterDiv.innerHTML += "Caption time: <input type=\"text\" id=\""+this.id+"_CaptionTime\">";
		this.CaptionTime = document.getElementById(this.id+"_CaptionTime").value;
		
		//this.OuterDiv.innerHTML += "Caption height: <input type=\"text\" id=\""+this.id+"_CaptionHeight\">";
		this.CaptionHeight = document.getElementById(this.id+"_CaptionHeight").value;
		
		//this.OuterDiv.innerHTML += "Image view time: <input type=\"text\" id=\""+this.id+"_ImgDelay\">";
		this.SlideLength = document.getElementById(this.id+"_ImgDelay").value;
	}
	
	this.toggleAdvanced = function() {
		this.toggleVisible('adv');
		if (document.getElementById("adv").style.visibility == "hidden") {
			this.AdvancedButton.value = "Show Advanced Options";
		} else {
			this.AdvancedButton.value = "Hide Advanced Options";
		}
	}
	
	this.togglePaused = function() {
		if (this.Pause) {
			this.Pause = false;
			this.Start();
			this.PauseButton.value = "Pause";
		} else {
			this.Pause = true;
			clearTimeout(this.SlideTimout);
			this.PauseButton.value = "Play";
		}
	}
	
	this.DownloadPicture = function() {
		if (this.FadeBack == true) {
			window.open(this.FrontFrame.src);
		} else {
			window.open(this.BackFrame.src);
		}
	}
	
	
	this.getAspect = function(max, num, dependant) {
		if (max < num) {
			ratio = (max-num)/num;
			return dependant+(dependant*ratio);
		} else if (max > num) {
			ratio = (num-max)/num;
			return dependant+(dependant*ratio);
		} else {
			return dependant;
		}
	}
	
	if (this.PhotoArray.length <2) {
		this.Div.innerHTML = "There must be at least 2 pictures in the picture array";
	} else {
		this.ChangePhoto();
	}
	
}


