//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 = 1;
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
			}
		}
	);
}