//slideshowView.js
//Nick Oliver for EvansTools.com
//last edited 2009/10/29


//listen for keypresses
//if (document.addEventListener){ document.addEventListener("keydown",keyDownHandler,false); } else if (document.attachEvent){ document.attachEvent("onkeydown",keyDownHandler); }
//listen for scrolling
//if (document.addEventListener){document.addEventListener("scroll",drawerViewScrollHandler,false);}else if(window.attachEvent){window.attachEvent("onscroll",drawerViewScrollHandler);}

function slideshowView ()
{
	this.loadingImage = new Image();
	this.loadingImage.src = "assets/templates/default/images/loading.gif";
	this.pageThumbList = new Array(4);	//list of thumbs from the page (thus database driven)
	this.slideshowThumbList = new Array(4); //list of thumbs on the slideshow (copied from page)
	this.mainDisplay; //the biggest image, actual presentation
	this.fog;
	this.encap;	
	
	this.create = function()
	{
		//first, add the html to the page. (Check to see if the encapsulator is there, first!)
		this.encap = document.getElementById("slideshowViewEncapsulator");
		if(!this.encap)
		{
			this.encap = document.createElement("div");
			this.encap.id = "slideshowViewEncapsulator";
			this.encap.innerHTML = "<p>This was dynamically created. HUZZAH.</p>";
			document.body.appendChild(this.encap);
		}
		//Create the html for the window
		var temp = "";
		temp += "<div id=\"slideshowViewFog\" style=\"background:url('assets/templates/default/images/fog.png') repeat;position:absolute;top:0px;left:0px;width:100%;height:100%;display:none;min-height:500px;min-width:700px;text-align:left;\" oonkeydown=\"keyDownHandler(event);\">\n";
		temp += "	<div style=\"position:relative;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;top:5%;background-color:white;height:90%;width:90%;border:medium black solid;overflow:scroll;\">\n";
		temp += "		<div style=\"float:right;width:75px;height:100%;\">\n";
		temp += "			<div style=\"height:55px;\"></div>\n";
		temp += "			<div style=\"height:100%;border:none;\">\n";
		temp += "				<img src=\"\" id=\"slideshowViewThumb1\" name=\"slidshowViewThumb1\" style=\"padding-bottom:5%;cursor:pointer;\" onclick=\"productShow.switchMain(this.src);\" /><br />\n";
		temp += "				<img src=\"\" id=\"slideshowViewThumb2\" name=\"slidshowViewThumb2\" style=\"padding-bottom:5%;cursor:pointer;\" onclick=\"productShow.switchMain(this.src);\" /><br />\n";
		temp += "				<img src=\"\" id=\"slideshowViewThumb3\" name=\"slidshowViewThumb3\" style=\"padding-bottom:5%;cursor:pointer;\" onclick=\"productShow.switchMain(this.src);\" /><br />\n";
		temp += "				<img src=\"\" id=\"slideshowViewThumb4\" name=\"slidshowViewThumb4\" style=\"padding-bottom:5%;cursor:pointer;\" onclick=\"productShow.switchMain(this.src);\" /><br />\n";
		temp += "			</div>\n";
		temp += "		</div>\n";
		temp += "		<div style=\"float:none;overflow:hidden;\" id=\"slideShowMainViewDiv\"><div style=\"#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;\"><div style=\"border:none;#position: relative; #top: -50%; margin-left: auto; margin-right: auto; ooverflow:scroll;\"><img src=\"\" id=\"slidshowViewMain\" name=\"slidshowViewMain\" style=\"\"/></div></div></div>\n";
	//	temp += "		<div style=\"float:none;overflow:hidden;\" id=\"slideShowMainViewDiv\"><div style=\"#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;\"><div style=\"border:none;#position: relative; #top: -50%; margin-left: auto; margin-right: auto; overflow:scroll;\"><img src=\"\" id=\"slidshowViewMain\" name=\"slidshowViewMain\" style=\"\"/><span style=\"width:20px;color:white;\" >&nbsp;spacer</span><div style=\"height:20px;\" >&nbsp;</div></div></div></div>\n";
		temp += "		<div style=\"background:url('assets/templates/default/images/close.png') no-repeat;position:absolute;top:0px;right:0px;width:50px;height:50px;cursor:pointer;\" onclick=\"this.parentNode.parentNode.style.display='none';\">&nbsp;</div>\n";
		temp += "	</div>\n";
		temp += "</div>\n";
		this.encap.innerHTML = temp;//add it in
		
		//second, set all the object pointers
		//a, the viewer
		this.fog = document.getElementById("slideshowViewFog");
		this.mainDisplay = document.getElementById("slidshowViewMain");
		for(var x=0;x<4;x++)
		{	this.slideshowThumbList[x] = document.getElementById("slideshowViewThumb"+(x+1)); }
		//this.mainViewDiv = document.getElementById("slideShowMainViewDiv");
		
		//b, the page's images
		for(var x=0;x<4;x++)
		{	this.pageThumbList[x] = document.getElementById("pimage"+(x+1)); }
	}
	
	this.open = function (openingImageSource)
	{	
		if(openingImageSource.indexOf("drawerView")== -1)
		{
			if(!this.fog){ this.create(); }	//should be called only the first time opened
			//show the Fog...and its children
			this.fog.style.display = '';
			//move the fog to the top of the viewed portion of the page
				var tempY = 0;
				if(document.documentElement.scrollTop){	tempY = document.documentElement.scrollTop; }
				else if(document.body.scrollTop){ tempY = document.body.scrollTop; }
			this.fog.style.top=tempY + "px";
			//set the main image
			this.switchMain(openingImageSource);
			//create thumbs on the side
			for(var x=0;x<4;x++)
			{	
				if(this.pageThumbList[x] && (this.pageThumbList[x].src.indexOf("drawerView.jpg")==-1))
				{ this.slideshowThumbList[x].src = this.pageThumbList[x].src; }
				else
				{ this.slideshowThumbList[x].style.display='none'; }
			}
		}
		else
		{ displayDrawerView(); }
	}
	
	this.close = function()
	{
		this.fog.style.display = 'none';
	}
	
	this.switchMain = function (thumbsrc)
	{
		this.mainDisplay.src = this.loadingImage.src;
		this.mainDisplay.src = this.formatImageURL(thumbsrc);
	}
	
	this.formatImageURL = function (thumbsrc)
	{
		//these two lines for use in dev. env. with local images
		/*
		thumbsrc = thumbsrc.replace("_mid.","_full.");
		thumbsrc = thumbsrc.replace("_thumb.","_full.");//*/
		//return thumbsrc;
		//input format:
			//thumbnail.asp?file=[filename]&maxx=[number]&maxy=[number]
			//ex: thumbnail.asp?file=assets/images/E9599a.jpg&maxx=75&maxy=0
		//output format:
			//thumbnail.asp?file=[filename]&maxx=[container width - 75px]&maxy=[container height]
			//ex: thumbnail.asp?file=assets/images/E9599a.jpg&maxx=800&maxy=500
			//http://www.evanstools.com/thumbnail.asp?file=assets/images/E9599a.jpg&maxx=75&maxy=0
		//find where the filename is, then output the image location with the dimensions of the 'window' in the browser
		//*
		fileStart = thumbsrc.indexOf("file=")+5;
		fileEnd = thumbsrc.indexOf("&",fileStart);
		return "http://www.evanstools.com/thumbnail.asp?file="+thumbsrc.substr(fileStart,fileEnd-fileStart)+"&maxx="+(this.fog.children[0].offsetWidth-20-75)+"&maxy="+0;//(this.fog.children[0].offsetHeight-5); //*/
		/*
		return thumbsrc; //*/
	}
	
	this.scrollHandler = function(e)
	{
		var tempY = 0;
		if(document.documentElement.scrollTop){	tempY = document.documentElement.scrollTop; }
		else if(document.body.scrollTop){ tempY = document.body.scrollTop; }
		//alert(tempY);
		if(document.getElementById("slideshowViewFog")){document.getElementById("slideshowViewFog").style.top=tempY + "px";}
	}
	
	this.keyDownHandler = function(e)
	{
		//alert(e.keyCode);
		switch(e.keyCode)
		{
			case 27:	//ESC
			case 13:	//Enter
				//close the "window"
				productShow.close();
				break;
		}
	}
}

//create instance of class
productShow = new slideshowView();
//listen for keypresses
if (document.addEventListener){ document.addEventListener("keydown",productShow.keyDownHandler,false); } else if (document.attachEvent){ document.attachEvent("onkeydown",productShow.keyDownHandler); }
//listen for scrolling
if (document.addEventListener){document.addEventListener("scroll",productShow.scrollHandler,false);}else if(window.attachEvent){window.attachEvent("onscroll",productShow.scrollHandler);}
