//Globals
var maskSelector = '#mask';             //CSS selector of mask div for modal
var mySlideShow = 0;
var loadedImages = new Array();
var imgWidths = new Array();
var imgHeights = new Array();
var imgRatios = new Array();
var standardInterval = 1000;
var currentImg = 0;
var currentStoryPage = 0;
var currentSlot = 0;
var dirArray = new Array('right','left','down','up');
var templateArray = new Array('e','d','c','b','a','f');
var numImageSlots = new Array(2,2,2,3,1,3);
//ratio arrays values - 2 = landscape only, 1 = portrait only, 0 = no restriction
var arImageSlots = new Array(0);
var brImageSlots = new Array(1,0,1);
var crImageSlots = new Array(0,1);
var drImageSlots = new Array(0,0);
var erImageSlots = new Array(0,0);
var frImageSlots = new Array(0,2,2);
var myURL = "";
var DEFAULT_DELAY_SECONDS = 2;

// imageConstraints to control slideshow template constraints
var f0imageConstX = 0;
var f0imageConstY = 0;
var f1imageConstX = 0;
var f1imageConstY = 0;
var f2imageConstX = 0;
var f2imageConstY = 0;
var e0imageConstX = 0;
var e0imageConstY = 0;
var e1imageConstX = 0;
var e1imageConstY = 0;
var d0imageConstX = 0;
var d0imageConstY = 0;
var d1imageConstX = 0;
var d1imageConstY = 0;
var c0imageConstX = 0;
var c0imageConstY = 0;
var c1imageConstX = 0;
var c1imageConstY = 0;
var b0imageConstX = 0;
var b0imageConstY = 0;
var b1imageConstX = 0;
var b1imageConstY = 0;
var b2imageConstX = 0;
var b2imageConstY = 0;
var a0imageConstX = 0;
var a0imageConstY = 0;

var hook = {}; 		//used to expose functions defined within .ready()

var cropImages = new Boolean(false);
var myTemplate = 1;
var templateStickiness = 3;  //higher values decrease template swapping (0=never swap, 1=always swap)
var templateCounter = 0;
var showFull = new Boolean(false);
var runShow = new Boolean(false);
var ieResize = new Boolean(true);
var isReset = new Boolean(false);
var isSimple = new Boolean(false);
var isPaused = new Boolean(false);
var isMultiPage = new Boolean(false);
var currentPage = 1;
var imagesArray = new Array();
var preloadNum = 3;
var loadCounter = 0;
		
//properties
var wWidth = 0;
var wHeight = 0;
var ssWidth = 0;
var ssHeight = 0;
var stageWidth = 0;
var stageHeight = 0;
var stripHeight = 0;
var wCenterWidth = 0;
var wCenterHeight = 0;
var framePos = 0;

//localization values
var titleImgSrc = "title_slideshow.jpg";
var prevAlt = "Previous";
var nextAlt = "Next";
var playAlt = "Play/Pause Toggle";
var sliderTxt =  "speed";
var cartTxt = "view cart";
var addAllTxt = "Add all";
var multiPageAlt = "Multipage View";
var expandAlt = "Expand";
var closeImgOffSrc = "btn_close_off.gif";
var advImgOnSrc = "btn_advanced_on.jpg";
var advImgOffSrc = "btn_advanced_off.jpg";
var simImgOnSrc = "btn_simple_on.jpg";
var simImgOffSrc = "btn_simple_off.jpg";
var viewLrgTxt = "View Larger";
var addCartTxt = "Add to Cart";


function setFrame(){
	//set modifiers
	var hHeight = 0;
	if (showFull==false){ 
	//set height of header and strip elements
		hHeight = 85;
		stripHeight = 120;
		$("#fullscreenhdrRight").hide();
	} else {	
		hHeight = 0;
		stripHeight = 0;
		$("#fullscreenhdrRight").show();
	}
	
	
	wHeight = $(window).height();
	if ($.browser.msie==true && $.browser.version=="6.0"){
		wHeight = wHeight - 80;
	}	
	wWidth = $(window).width();
	ssHeight = wHeight - stripHeight;
	ssWidth = wWidth-24; //width modifier
	stageHeight = ssHeight - hHeight;
	stageWidth = ssWidth*.95;
	if (cropImages==true){
	//constrain stage Height and Width to 16:9 (1.77777778) based upon smaller value
		if (stageWidth < stageHeight) {
			stageHeight = stageWidth*.5625;
		} else {
			stageWidth = stageHeight*1.77777778;
			if (stageWidth > wWidth){
				stageWidth = wWidth;
				stageHeight = stageWidth*.5625;
			}
		}
	}
	wCenterWidth = wWidth/2;
	wCenterHeight = wHeight/2;
	framePos = wCenterWidth-(stageWidth/2);
}

$(document).ready
(
	function()
	{
		$.ajaxSetup
		(
			{
	    			cache: false
			}
		); 
		setFrame();
		hook.slideshow = function slideshow(url)
		{
			resetValues();
			showSlideshow(url);
		};
		hook.storybook = function storybook(url)
		{
			//you can set custom storybook CSS styles here if wanted
			resetValues();
			myTemplate  = 4;
			isSimple    = new Boolean(true);
			isMultiPage = new Boolean(false);
			showSlideshow(url);
			$("#multipage img").hide();
		};
		$(window).bind('resize', function()
		{
			if ((mySlideShow!=0)&&(ieResize==true)&&(showFull==false))
			{
				resetTemplate(myTemplate);
				//$("#"+templateArray[myTemplate]).hide();
				ieResize=false;
				isReset=true;
				if (($.browser.msie==true) && ($.browser.version<8))
				{
					//IE 6/7 weirdness
				}
				else 
				{
					showSlideshow(mySlideShow);
					resetFrame();
				}
			}
		});

		//function resetValues needed to reinitialize slideshow window between views
		function resetValues()
		{
			mySlideShow = 0;
			loadedImages = new Array();
			standardInterval = 1000;
			currentImg = 0;
			currentStoryPage = 0;
			currentSlot = 0;
			myTemplate = 1;
			templateStickiness = 3; 
			templateCounter = 0;
			showFull = new Boolean(false);
			runShow = new Boolean(false);
			ieResize = new Boolean(true);
			isReset = new Boolean(false);
			isSimple = new Boolean(false);
			isPaused = new Boolean(false);
			isMultiPage = new Boolean(false);
			currentPage = 1;
			loadedImages = new Array();
			imgWidths = new Array();
			imgHeights = new Array();
			imgRatios = new Array();
			imagesArray = new Array();
			myURL = "";
			//properties
			wWidth = 0;
			wHeight = 0;
			ssWidth = 0;
			ssHeight = 0;
			stageWidth = 0;
			stageHeight = 0;
			stripHeight = 0;
			wCenterWidth = 0;
			wCenterHeight = 0;
			loadCounter = 0;
		}

		//Show slideshow modal window
		function showSlideshow(url) 
		{
			if (myURL =="")myURL = url;
			//resetValues();
			setFrame();
			mySlideShow = 1;
			$(".dropShadow").hide();
			//Set height and width to mask to fill up the whole screen
			$(maskSelector).css({'width':$(document).width(),'height':$(document).height()});

			$(maskSelector).fadeIn('fast');         //Show mask
			$(maskSelector).fadeTo('fast',0.8);     //Set mask opacity
			$("#slideshow").fadeIn('slow',loadSlideshow);        //Show slideshow content
			$("#slider").slider('option', 'value', DEFAULT_DELAY_SECONDS);
		}

		function loadSlideshow() 
		{
			$("#slider").animate({left:wCenterWidth+100,top:40},"slow","swing");
			$("#sscontrols").animate({left:wCenterWidth-65,top:35},"slow","swing");
			$("#slideshow").animate({left:0,width:ssWidth,top:0,height:ssHeight+10},"slow","swing");
			$("#slideshowframe").animate({left:0,width:ssWidth,top:0,height:stageHeight+10},"slow","swing",getSlideshowJSON);
		};
	
		function showControls()
		{
			$("#slider").fadeIn('fast');
			$("#expand").fadeIn('fast');
			$("#multipage").fadeIn('fast');
			if (showFull==false)$("#slideCtrl").fadeIn('slow');
			$("#slideshowTlt").fadeIn('fast');
			$("#sscontrols").fadeIn('fast');
			$("#multipage").fadeIn('fast');
			$("#expand").fadeIn('fast');
		}

		function getSlideshowJSON() 
		{
			//$("#photoBar").empty();
			ieResize=true;
			showControls();
			$.getJSON
			(
				myURL,
				function(data)
				{
					//set localized values
					titleImgSrc = data.titleImgSrc;
					prevAlt = data.prevAlt;
					nextAlt = data.nextAlt;
					playAlt = data.playAlt;
					sliderTxt = data.sliderTxt;
					cartTxt =  data.cartTxt;
					addAllTxt = data.addAllTxt;
					multiPageAlt = data.multiPageAlt;
					expandAlt = data.expandAlt;
					closeImgOffSrc = data.closeImgOffSrc;
					advImgOnSrc = data.advImgOnSrc;
					advImgOffSrc = data.advImgOffSrc;
					simImgOnSrc = data.simImgOnSrc;
					simImgOffSrc = data.simImgOffSrc;
					viewLrgTxt = data.viewLrgTxt;
					addCartTxt = data.addCartTxt;
					$("#slideshowHdrImg").attr("src",titleImgSrc);
					$("#prev").attr("title",prevAlt);
					$("#next").attr("title",nextAlt);
					$("#play").attr("title",playAlt);
					$("#sliderTxt").html(sliderTxt);
					$("#cartTxt").html(cartTxt);
					$("#slideshowTlt").html(data.nme);
					$("#multipage img").attr("title",multiPageAlt);
					$("#expand").attr("title",expandAlt);
					$("#slideshowClose").attr("src",closeImgOffSrc);
					//$("#simple").attr("src",simImgOffSrc);
					//$("#advanced").attr("src",advImgOnSrc);
					$("#slideshowhrdLeft").fadeIn("fast");
					$("#slideshowhrdRight").fadeIn("fast");
					if (data.cartURL.length>0){
						$("#crtLnk").attr("href",(data.cartURL));
						$("#crtLnk").html(cartTxt);
					} else {
						$("#crtLnk").html("");
					}
					$.each(data.itm, function(i,item){
						//populate imagesArray
						imagesArray[i] = data.itm[i];
					});
					//launch photo preload batch
					 ajaxBatch();
					 updateFilmStrip(currentPage);
				}
			);
		}

		function ajaxBatch()
		{
			var startImg = 0;//(whichPage-1)*8;
			var endImg = imagesArray.length;//whichPage*8;
			for(i=startImg;i<endImg;i++)
			{
				if (imagesArray[i].mSrc != '')
				{
					var image = new Image;
					image = $('<img />').attr('src', imagesArray[i].mSrc).attr('index', i).attr('alt', imagesArray[i].nme).load
					(
						function()
						{
							$("myImg").append(this);
							updateImages(this);
							// Your other custom code
						}
					);
					if ($.browser.msie)
					{
						if(image[0].complete==true)
						{
							$("myImg").append(image[0]);
							updateImages(image[0]);
						}
					}
				}
			}
		}	
	
		function updateImages(img){
			//can be modified for aggregator pattern (asap async img loading)
			var i = img.index;
			loadedImages[i] = img;
			imgWidths[i] = loadedImages[i].width;
			imgHeights[i] = loadedImages[i].height;
			//ratio value 2 = landscape, 1 = portrait, square defaults to portrait;
			imgRatios[i] = (imgWidths[i]/imgHeights[i])>1?2:1;		
			//alert(loadedImages.length);
			//update loadProgress
			if (i < preloadNum){
				//alert(loadedImages[j].width+":"+j);
				loadCounter++;
				if (loadCounter==preloadNum){
					createSlide();
				}
			}
		}
	
		function createSlide(){
			if (isReset==true){
				isReset=false;
				$("#ssloader").hide();
				resetFrame();
				play();
				return false;
			}
			//if ((loadedImages.length>3)&&(runShow!=true)) {
				runShow=true;
				//show layout
				$("#ssloader").hide();
				resetFrame();
				//queue animations
				play();
			//}
		}
	
		function resetFrame()
		{
			//set constraint values
			$("#t"+templateArray[myTemplate]).attr("width",stageWidth);
			$("#t"+templateArray[myTemplate]).attr("height",stageHeight);
			//for each spot in template array, get attrbutes and multiply times stage width/height appropriately
			for(i=0;i<numImageSlots[myTemplate];i++){
				var widthAttr = $("#t"+templateArray[myTemplate]+i).attr("width");
				var heightAttr = $("#t"+templateArray[myTemplate]+i).attr("height");
				widthAttr = (widthAttr.replace('%','')/100);
				heightAttr = (heightAttr.replace('%','')/100);
				if (heightAttr == '') heightAttr = 1;
				eval(templateArray[myTemplate]+i+"imageConstX = stageWidth*widthAttr");
				eval(templateArray[myTemplate]+i+"imageConstY = stageHeight*heightAttr");		
				$("#"+templateArray[myTemplate]+i+" img").attr("width",eval(templateArray[myTemplate]+i+"imageConstX"));	
			}
			$("#"+templateArray[myTemplate]+"").show();
			for(i=0;i<numImageSlots[myTemplate];i++){	
				if ($("#"+templateArray[myTemplate]+i+" img").height()>eval(templateArray[myTemplate]+i+"imageConstY")) {
					$("#"+templateArray[myTemplate]+i+" img").attr("height",eval(templateArray[myTemplate]+i+"imageConstY"));
					$("#"+templateArray[myTemplate]+i+" img").attr("width");
				} else {
					$("#"+templateArray[myTemplate]+i+" img").attr("width",eval(templateArray[myTemplate]+i+"imageConstX"));	
				}		
				$("#"+templateArray[myTemplate]+i).css( {height: eval(templateArray[myTemplate]+i+"imageConstY")} );
				swapPhoto(currentImg,i,i);
				incrementImg();
			}
			$("#"+templateArray[myTemplate]+"").css( {position:"absolute",left:framePos,width: stageWidth-20,height: stageHeight} );
		}
	
		function updatePhoto(i){
			swapTemplate(i);
		}

		function prevPhoto(){
			var lowImage = 0;
			lowImage = (currentImg-numImageSlots[myTemplate])-1;
			if (lowImage < 0) lowImage = lowImage+loadedImages.length;
			currentImg = lowImage;
			resetFrame();
		}
	
		function swapPhoto(i,div,dir){	
			$("#"+templateArray[myTemplate]+div).empty();
			$("#"+templateArray[myTemplate]+div).css({background:'#000'});
			var myDivWidth = $("#"+templateArray[myTemplate]+div).width();
			var myDivHeight = $("#"+templateArray[myTemplate]+div).height();
			/*if ($.browser.msie!=true){
				loadedImages[i].removeAttr('width');
				loadedImages[i].removeAttr('height');
			}*/
			var myWidth = imgWidths[i];
			var myHeight = imgHeights[i];
			var wScale = myDivWidth/myWidth;
			var hScale = myDivHeight/myHeight;
			var scale = wScale>hScale?hScale:wScale;
			if ((eval(templateArray[myTemplate]+"rImageSlots["+div+"]") != imgRatios[i])&&(eval(templateArray[myTemplate]+"rImageSlots["+div+"]") > 0)){
				//alert(eval(templateArray[myTemplate]+"rImageSlots["+div+"]"));
				updatePhoto(i);
			} else {	
				if (myWidth>0){
					var mySSImage = loadedImages[i];
					//mySSImage.removeAttr('width');
					//mySSImage.removeAttr('height');
					if ((isSimple==true)||(cropImages==false)){
						mySSImage.width = myWidth*scale;
						mySSImage.height = myHeight*scale;
						$("#"+templateArray[myTemplate]+div).append(mySSImage);
					} else {
							var imgPosX = -((myWidth-myDivWidth)/2);
							var imgPosY = -((myHeight-myDivHeight)/2);
							if ((hScale > 1) || (wScale > 1)){
								//image too small for space - take smaller dimension and resize image maintaining scale
								scale = wScale>hScale?wScale:hScale;
								myWidth = myWidth*scale;
								myHeight = myHeight*scale;
								mySSImage.width = myWidth;
								mySSImage.height = myHeight;
								$("#"+templateArray[myTemplate]+div).append(mySSImage);	
								//using CSS clip (top, right, bottom, left)
								//set clip box top position as half difference between myHeight and myDivHeight
								var clipTop = parseInt((myHeight-myDivHeight)/2);
								//set clip box left position as half difference between myWidth and myDivWidth
								var clipLeft = parseInt((myWidth-myDivWidth)/2);
								var clipRight = parseInt(clipLeft+myDivWidth);
								var clipBottom = parseInt(clipTop+myDivHeight);
								//set css left to the negative of the clip box left position
								//set css top to the negative of the clip box top position
								$("#"+templateArray[myTemplate]+div).css({background:'#000'});
								$("#"+templateArray[myTemplate]+div+" img").css({background:'#000',position:'absolute',left:'-'+clipLeft+'px',top:'-'+clipTop+'px',clip:'rect('+clipTop+'px,'+clipRight+'px,'+clipBottom+'px,'+clipLeft+'px)'});	
							} else {
								//alert(mySSImage.attr("src"));
								//using background-image
								$("#"+templateArray[myTemplate]+div).css({height:myDivHeight,width:myDivWidth,background:"url("+mySSImage.src+") no-repeat #000 "+imgPosX+"px "+imgPosY+"px"});
							}
					}
					$("#"+templateArray[myTemplate]+div).show('slide', {direction: dirArray[dir]}, 1000);
				}
			}

			if ((currentPage*8)<=currentImg)
			{
				if ((currentPage*8)<loadedImages.length) currentPage++;
				updateFilmStrip(currentPage);
			} 
			else
			{
				if (((currentPage*8)>loadedImages.length)&&(currentImg==1))
				{
					//alert("test");
					currentPage=1;
					updateFilmStrip(currentPage);
				}
			}
		}
	
		function redrawSite(){
			$(".dropShadow").show();
			$(window).resize();
		}
	
		function incrementImg(){	
			currentImg++;
			if (isSimple == true) {
				if (currentImg>=loadedImages.length){
					currentImg=0;
				}
			} else {
				if (currentImg>loadedImages.length){
					currentImg=0;
				}
			}
		}

		function incrementSlot(){
			currentSlot++;
			if (currentSlot>=numImageSlots[myTemplate]) currentSlot = 0;
		}
	
		function swapTemplate(i)
		{
			// alert("swapT:"+i);
			var validateRatio = new Boolean(false);
			//templateStickiness becomes a hard variable for how many frames to show before changing templates
			//if currentImg resets, reset all counters for predictable template rotations
			templateCounter++;
			if (currentImg==0){
				resetTemplate(myTemplate);
				//$("#"+templateArray[myTemplate]).hide();
				if (isSimple == true){
					myTemplate = 4;		
				} else {					
					myTemplate=1;
					currentSlot=0;
					templateCounter=0;
				}
				resetFrame();
			} else 
			{
				if((templateCounter==templateStickiness)&&(isSimple == false)){

					resetTemplate(myTemplate);
					//$("#"+templateArray[myTemplate]).hide();
					myTemplate++;
					if (myTemplate>=templateArray.length) myTemplate=0;
					var ratTest = new Boolean(false);
					while (validateRatio!=true){
					//validate current template ratios against current image ratios
						for(i=0;i<eval(templateArray[myTemplate]+"rImageSlots").length;i++){
							if (eval(templateArray[myTemplate]+"rImageSlots["+i+"]") == imgRatios[currentImg+i]){
								ratTest = true;
							} else {
								ratTest = false;
							}
							if (eval(templateArray[myTemplate]+"rImageSlots["+i+"]")==0) ratTest = true;
							if ((currentImg+i)>=loadedImages.length){
								 //if you've reached the last image, set template to 4
								 myTemplate = 4;
								 ratTest = true;
							}
						}
						if (ratTest == true){
							validateRatio = true;
						} else {
							ratTest=false;
							myTemplate++;
							if (myTemplate>=templateArray.length) myTemplate=0;
						}
					}
					templateCounter=0;
					if (myTemplate>=templateArray.length)myTemplate=0;
					resetFrame();
				} else {
					//var randImg=(Math.ceil(numImageSlots[myTemplate]*Math.random()))-1;
					incrementSlot();
					var randDir=(Math.ceil(dirArray.length*Math.random()))-1;
					swapPhoto(i,currentSlot,randDir);
					incrementImg();
				}
			}
		}
	
		function resetTemplate(tempNum){
				//ensure template is hidden
				$("#"+templateArray[tempNum]).hide();
				//loop through divs of template and clear
				for(i=0;i<eval(templateArray[tempNum]+"rImageSlots").length;i++){
					$("#"+templateArray[tempNum]+i).empty();
					$("#"+templateArray[tempNum]+i).css({background:"url('/includes/sites/cm/images_websolutions/slideshow/ajax-loader.gif') no-repeat center #000"});
				}
		}
	
		function toggleSimple(){
			pause();
			resetTemplate(myTemplate);
			//$("#"+templateArray[myTemplate]).hide();
			if (isSimple == true) {
				//imgOff("#simple");
				//imgOn("#advanced");
				$("#multipage img").attr("src", $("#multipage img").attr("src").replace("_off","_on"));
				isSimple = false;
				resetTemplate(myTemplate);
				myTemplate=1;
				currentSlot=0;
				templateCounter=0;		
				currentImg = 0;
				templateStickiness = 3; 
			} else {
				//imgOn("#simple");
				//imgOff("#advanced");
				$("#multipage img").attr("src", $("#multipage img").attr("src").replace("_on","_off"));
				isSimple = true;
				myTemplate = 4;
				templateStickiness = 0; 
			}
			resetFrame();
		}
	
		function toggleMulti(){
			pause();
			resetTemplate(myTemplate);
			//$("#"+templateArray[myTemplate]).hide();
			isSimple = true;
			if (isMultiPage!=false){
				isMultiPage = false;
				$("#multipage img").attr("src", $("#multipage img").attr("src").replace("_on","_off"));
			} else {
				isMultiPage = true;
				currentStoryPage = 0;
				$("#multipage img").attr("src", $("#multipage img").attr("src").replace("_off","_on"));
			}
			//imgOn("#simple");
			//imgOff("#advanced");		
			templateStickiness = 0; 
			currentImg = 0;
			myTemplate = 4;		
			resetFrame();
		}

		function showSingle(i){
			pause();
			resetTemplate(myTemplate);
			//$("#"+templateArray[myTemplate]).hide();
			isSimple = true;		
			isMultiPage = false;
			$("#multipage img").attr("src", $("#multipage img").attr("src").replace("_on","_off"));		
			//imgOn("#simple");
			//imgOff("#advanced");		
			templateStickiness = 0; 
			currentImg = i;
			myTemplate = 4;	
			resetFrame();			
		}

		function page(dir){

			resetTemplate(myTemplate);
			//$("#"+templateArray[myTemplate]).hide();
			//controls multipage storybook pagination
			//dir 0 = previous storybook page
			//dir 1 = next storybook page
			if (dir==0){
				currentStoryPage--;
				if (currentStoryPage<0)currentStoryPage=(Math.ceil(loadedImages.length/2));
				//page back
				if (currentStoryPage==0){
					currentImg=0;
					myTemplate = 4;		
				} else {
					currentImg=(currentStoryPage*2)-1;
					if (currentImg>=loadedImages.length-1){
						myTemplate = 4;
					} else {
						myTemplate = 0;
					}
				}
			} else {
				currentStoryPage++;
				if (currentStoryPage>(loadedImages.length/2))currentStoryPage=0;
				//page next
				if (currentImg>=loadedImages.length-1){
					myTemplate = 4;
				} else {
					if (currentImg==0){
						myTemplate = 4;		
					} else {
						myTemplate = 0;
					}
				}
			}
			resetFrame();
		}	

		function imgOn(id){
			if ($(id).attr("src"))
			{
				$(id).attr("src", $(id).attr("src").replace("_off","_on"));
			}
		}
	
		function imgOff(id){
			if ($(id).attr("src"))
			{
				$(id).attr("src", $(id).attr("src").replace("_on","_off"));
			}
			else
			{
				// alert(id);
			}
		}

		function pause(){
			isPaused = true;
			for (i=0;i<templateArray.length;i++){
				$("#"+templateArray[i]+"").stopTime();
			}
			$("#play").attr("src", "/includes/sites/cm/images_websolutions/slideshow/btn_pause.jpg");
		}

		function play(){
			isPaused = false;
			$("#play").attr("src", "/includes/sites/cm/images_websolutions/slideshow/btn_play.jpg");
			delayValue = 1000 * $('#slider').slider('option', 'value');
			$("#"+templateArray[myTemplate]+"").everyTime
			(
				delayValue,
				function() 
				{
					updatePhoto(currentImg)
				}
			);
		}

		$("#play").click(function (e) {
			if (isPaused==false){
				pause();
			} else {
				play();
			}
		});

		$("#multipage img").click(function (e) {
			toggleSimple();
		});

		$("#prev").click(function (e) {
			pause();
			if (isMultiPage == false){
				prevPhoto();
			} else {
				page(0);
			}
		});

		$("#next").click(function (e) {			   
			pause();
			if (isMultiPage == false)
			{
				updatePhoto(currentImg);
			}
			else
			{
				page(1);
			}
		});	

		$("#slider").slider({
			min: 1,
			max: 15,
			orientation: "horizontal",
			slide: function(event, ui) 
			{
				// do nothing.
			},
			stop: function(event,ui)
			{
				for (i=0;i<templateArray.length;i++)
				{
					$("#"+templateArray[i]+"").stopTime();
				}
				play();
			}
		});

		$("#simple").click(function (e) {
			toggleSimple();
		});
	
		$("#advanced").click(function (e) {
			toggleSimple();
		});	

		$("#expand").click(function (e) {
			fullScreen();
		});	

		$("#slideshowClose").click(function (e) {
			for (i=0;i<templateArray.length;i++){
				$("#"+templateArray[i]+"").stopTime();
			}										 
			//imgOn("#advanced");
			//imgOff("#simple");		

			resetTemplate(myTemplate);
			//$("#"+templateArray[myTemplate]).hide();
			$("#multipage img").attr("src", $("#multipage img").attr("src").replace("_on","_off"));
			mySlideShow = 0;
			$("#photoBar").empty();
			$(maskSelector + ', ' + "#slideshow").fadeOut('fast',redrawSite);
		});
	
		$("#fullscreenClose").click
		(
			function(e)
			{
				showFull = false;
				setFrame();
				$("#slideshowhdr").show();
				$("#slideCtrl").show();
				$("#slideshow").animate({left:0,width:ssWidth,top:0,height:ssHeight+10},"slow","swing");
				$("#slideshowframe").animate({left:0,width:ssWidth,top:0,height:stageHeight+10},"slow","swing",getSlideshowJSON);
				resetFrame();
				$("#slideshowframe").unbind("click");
			}
		);

		function fullScreen(){
			//use window.open for true fullscreen (IE only)... would require a special page to launch slideshow
			//window.open('http://www.google.com', 'File', 'fullscreen=yes', 'resizable,scrollbars'); return false;
			showFull = true;
			setFrame();
			$("#slideshowhdr").hide();
			$("#slideCtrl").hide();
			//$("#slideshow").animate({left:-5,width:wWidth,top:-5,height:wHeight},"slow","swing");
			//$("#slideshowframe").animate({left:0,width:wWidth,top:0,height:wHeight},"slow","swing",getSlideshowJSON);
			$("#slideshow").animate({left:0,width:ssWidth,top:0,height:ssHeight+10},"slow","swing");
			$("#slideshowframe").animate({left:0,width:ssWidth,top:0,height:stageHeight+10},"slow","swing",getSlideshowJSON);
			resetFrame();
			$("#slideshowframe").click(function (e) {
				showFull = false;
				setFrame();
				$("#slideshowhdr").show();
				$("#slideCtrl").show();
				$("#slideshow").animate({left:0,width:ssWidth,top:0,height:ssHeight+10},"slow","swing");
				$("#slideshowframe").animate({left:0,width:ssWidth,top:0,height:stageHeight+10},"slow","swing",getSlideshowJSON);
				resetFrame();
				$("#slideshowframe").unbind("click");
			});
		}
	
		function updateFilmStrip(whichPage)
		{
			$("#photoBar").empty();
			var addMargin = 0;
			var dataStart = (8*(whichPage-1));
			addMargin = Math.ceil(((wWidth-1024)/9))+2;
			var str = "";

			//write out divs
			for(myVal=0;myVal<8;myVal++)
			{
				var myDiv = new Array();
				var thisImg = dataStart+myVal;
				if (thisImg < imagesArray.length)
				{
					myDiv.push('<div style="height:90px;width:115px;float:left;margin-left:',addMargin,'px" id="t',myVal,'" class="ssthumb">');
					myDiv.push('<div id="assetNmet',myVal,'" style="display:none;padding:3px;">',imagesArray[thisImg].nme,'</div>');
					myDiv.push('<div id="lrgBtnt',myVal,'" style="display:none;"><a href="',imagesArray[thisImg].lSrc,'" target=_blank class="thumbLnk">&nbsp;',viewLrgTxt,'&nbsp;</a></div>');
					myDiv.push('<center><table cellpadding="0" cellspacing="0" border="0" width="70" height="70"><tr><td style="width:70px;height:90px" align="center"><img src="',imagesArray[thisImg].mSrc,'" style="max-height:70px;max-width:70px;height:expression(this.height > 70 ? 70: true);" id="',thisImg,'"></td></tr></table></center>');
					if (imagesArray[thisImg].atc != '')
					{
						atcHREF = imagesArray[thisImg].atc;
						myDiv.push('<div id="addCrtt',myVal,'" style="display:none; padding:2px; border:1px solid #fff; margin:4px;"><a href="',atcHREF,'" class="thumbLnk">&nbsp;',addCartTxt,'&nbsp;</a></div>');
					}
					if (imagesArray[thisImg].pAlt != '')
					{
						myDiv.push('<div id="promot',myVal,'" style="font-style:italic;display:none;">',imagesArray[thisImg].pAlt,'</div>');
					}
					myDiv.push('</div>');
				}
				str = myDiv.join('');
				$("#photoBar").append(str);
				$("#t"+myVal+" img").click
				(
					function (e) 
					{
						pause();
						showSingle($(this).attr("id"));
					}
				);
			}

			// Bind events
			$(".ssthumb").live
			(
				"mouseover",
				function()
				{
					var myId = $(this).attr("id");
					$(this).css("border", "2px solid #fff");
					$(this).css( {color:'#fff',background:'#5c4f47',width:111,height:150,position:'relative',top:-65} );
					$("#"+myId+" #assetNme"+myId).show();
					$("#"+myId+" #lrgBtn"+myId).show();
					$("#"+myId+" #promo"+myId).show();
					$("#"+myId+" #addCrt"+myId).show();
				}
			);
			$(".ssthumb").live
			(
				"mouseout",	
				function()
				{
					var myId = $(this).attr("id");
					$(this).css("border", "0px");
					$(this).css( {background:'',width:115,height:90,position:'relative',top:0} );
					$("#"+myId+" #assetNme"+myId).hide();	
					$("#"+myId+" #lrgBtn"+myId).hide();
					$("#"+myId+" #promo"+myId).hide();
					$("#"+myId+" #addCrt"+myId).hide();
				}
			);		
		}
		$("#slideLess").click
		(
			function (e) 
			{
				currentPage--;
				if (currentPage < 1) currentPage = 1;
				updateFilmStrip(currentPage);
			}
		);
		$("#slideMore").click
		(
			function (e) 
			{
				if ((currentPage*8)<imagesArray.length) currentPage++;
				updateFilmStrip(currentPage);
			}
		);	
		$(document).keyup
		(
			function(event)
			{
				if (showFull == true)
				{
					if (event.keyCode == 27)
					{
						showFull = false;
						setFrame();
						$("#slideshowhdr").show();
						$("#slideCtrl").show();
						$("#slideshow").animate({left:0,width:ssWidth,top:0,height:ssHeight+10},"slow","swing");
						$("#slideshowframe").animate({left:0,width:ssWidth,top:0,height:stageHeight+10},"slow","swing",getSlideshowJSON);
						resetFrame();
						$("#slideshowframe").unbind("click");
					}
				}
			}
		);
		$("#slider").slider('option', 'value', DEFAULT_DELAY_SECONDS);
	}
);

function addToCart(myId, productid, quantity, attrString)
{
	var postData;
	var index;
	
	index = myId % 8;
	
	$("#addCrtt"+index+" a").css('color', 'yellow');
	$("#addCrtt"+index+" a").text('ADDING...');
	postData = 'productid='+productid+'&quantity='+quantity+'&attr='+attrString;
	$.ajax
	(
		{
			type: "POST",
			url:  "/handlers/asyncAddToCart.php",
			data: postData,
			success: function(response)
			{
				// TODO
				// feedback: positive
				$("#addCrtt"+index+" a").css('color', 'white');
				$("#addCrtt"+index+" a").text('ADDED');
			},
			error: function(xmlHttpRequest, textStatus, errorThrown)
			{
				// TODO
				// feedback: negative
			}
		}
	);
}