var myCarousel = null;
var myCarouselImageMap = "";
var contentXmlUrl = "slideshow.xml";
var transparentGifUrl = "transparent.gif";
var images = new Array();
var selectedImage = -1;
var lastImage = -1;
var timeout;
var scrollInterval = 5; //seconds
var thumbnailsDisplayed = 6;
var displayCarousel = true;
var isPaused = false;
var slideInAnimationDuration = null;
var slideInAnimationDirection = null;
var slideInAnimationType = null;

$(document).ready(function() 
{
    $("#PlayPauseButton").click(function(){ pausePlay(); return false; });
    $("#CarouselBack").click(function(){ prevClick(); return false; });
    $("#CarouselForward").click(function(){ nextClick(); return false; });
    $.ajax({type:"GET", url: contentXmlUrl, success: loadSlideshow, dataType: "xml"});
   
    function loadSlideshow(xml)
    {
        scrollInterval = parseInt($("slideshow", xml).attr("SecondsBetweenSlides"));
        displayCarousel = $("slideshow", xml).attr("DisplayCarousel") == "true";
        slideInAnimationDuration = parseInt($("slideIn", xml).attr("AnimationDuration"));
        slideInAnimationDirection = $("slideIn", xml).attr("AnimationDirection");
        slideInAnimationType = $("slideIn", xml).attr("AnimationType"); // can be slide or fade
        $("image", xml).each(function(){
	        var image = new Object();
	        image.url = $("url", this).text();
	        image.thumbUrl = $("thumbUrl", this).text();
	        image.activeThumbUrl = $("activeThumbUrl", this).text();
	        image.map = $("map", this).text();
	        images.push(image);});
	       
        // Preload all active thumb images for smooth transition
        for(var i=0; i<images.length; i++)
	        $("<img>").attr("src", images[i].activeThumbUrl);
	    // Preload all images for smooth transition
        for(var i=0; i<images.length; i++)
	        $("<img>").attr("src", images[i].url);    
		if(displayCarousel)
		    loadCarousel(xml);    
	    setTimeout(init, 1); // Fixes an Opera Issue
    }
    function init()
    {
	    selectImage(0, true);
    }
    function selectImage(num, init)
    {
	    var image = images[num];
	    if(displayCarousel)
	        selectCarouselItem(num);
    
	    if(init || isBrowserEarlyIE())
	    {
		    $("#Image").attr("src", escape(image.url));
		    $("#Image").css("display", "block");
		    if(!isBrowserEarlyIE())
			    $("#DummyImage").attr("src", escape(image.url));
	    }
	    else
	    {
		    $("#DummyImage").attr("src", escape(image.url));
		    $("#DummyImage").css("display", "block");
		    if(!init)
		    {
    		    $("#Image").animate(
	    		    getAnimationParam(),
	    		    slideInAnimationDuration,
	    		    "swing",
	    		    function(){replaceImage(num);});
    	    }
	    }
	    $("#ImageMapHolder").empty();
	    $("#ImageMapHolder").append("<map id='ImageMap" + num + "' name='ImageMap" + num + "'>" +  image.map + myCarouselImageMap + "</map>");
	    $("#Image").removeAttr("useMap");
	    $("#Image").attr("useMap", "#ImageMap" + num);
	    selectedImage = num;
	    startTimer();
	    if(isBrowserEarlyIE()) // IE 6 fixes
	    {
    	    $("#Slideshow span").remove();
    	    $(".jcarousel-item span").remove();
    	    $("#TransparentGif").remove();
    	    var img = $("<img id='TransparentGif' usemap='#ImageMap" + num + "' src='" + transparentGifUrl + "' alt=''/>");
    	    $("#Slideshow").prepend(img);
    	    $("#Slideshow").pngFix();	
	    }
    }
    function replaceImage(num)
    {
	    var image = images[num];
	    $("#Image").attr("src", escape(image.url));
	    $("#Image").css("left", "0");
	    $("#Image").css("right", "0");
	    $("#Image").css("top", "0");
	    $("#Image").css("bottom", "0");
	    $("#Image").css("opacity", "1.0");
	    $("#DummyImage").css("display", "none");
    }
    function scrollImage()
    {
        if(selectedImage == lastImage && myCarousel != null)
	        myCarousel.next();
    	
        var num = selectedImage + 1;
        num = num >= images.length ? 0 : num;
        selectImage(num);
    }
    function startTimer()
    {
	    if(timeout != null)
		    clearTimeout(timeout);
	    timeout = setTimeout(scrollImage, scrollInterval * 1000);
    }
    function isBrowserEarlyIE()
    {
	    var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
	    var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);
	    return $.browser.msie && (ie55 || ie6);
    }
    function getAnimationParam()
    {
        if(slideInAnimationType == "slide")
        {
            var width = $("#Image").css("width"); 
            var height = $("#Image").css("height");
            switch(slideInAnimationDirection)
            {
                case 'left':
                    return {'left': '-' + width};
                case 'right':
                    return {'left': width};
                case 'bottom':
                    return {'top': height};
                case 'top':
                    return {'top': '-' + height};
            }
        }
        else
            return {'opacity' : 0.0};
    }
    function loadCarousel(xml)
    {    
        thumbnailsDisplayed = parseInt($("carousel", xml).attr("ThumbnailsDisplayed"));
        horizontal = $("carousel", xml).attr("Horizontal") == "true";
        $('#Carousel').jcarousel({
		    wrap: 'circular',
    	    itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
   		    itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
   		    itemFirstInCallback: {onBeforeAnimation: mycarousel_itemFirstInCallback},
   		    itemLastInCallback: {onAfterAnimation: mycarousel_itemLastInCallback},
   		    initCallback: initCarousel,
   		    animation: 'slow',
   		    scroll: thumbnailsDisplayed,
   		    size: images.length,
   		    vertical: !horizontal});
	    
        if(images.length > thumbnailsDisplayed)
        {
            var prevShape = $("carousel>imageMap>prev", xml).attr("Shape");
            var nextShape = $("carousel>imageMap>next", xml).attr("Shape");
            var prevCoords = $("carousel>imageMap>prev", xml).attr("Coords");
            var nextCoords = $("carousel>imageMap>next", xml).attr("Coords");
            myCarouselImageMap += "<area href='javascript:prevClick()' shape='" + prevShape + "' coords='" + prevCoords + "' />";
            myCarouselImageMap += "<area href='javascript:nextClick()' shape='" + nextShape + "' coords='" + nextCoords + "' />"; 
        }   
	    if($.browser.safari) // Safari fix
		    myCarousel.setup();
    }
    function selectCarouselItem(num)
    {
        for(var i=0; i<images.length; i++)
	    {
		    $("#CarouselImage" + i).css("display", "block");
		    $("#ActiveCarouselImage" + i).css("display", "none");
	    }
	    $("#CarouselImage" + num).css("display", "none");
	    $("#ActiveCarouselImage" + num).css("display", "block");
    }
    function initCarousel(carousel, state)
    {
	    myCarousel = carousel;
    }
    function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
    {
        if(thumbnailsDisplayed >= images.length  && i > thumbnailsDisplayed)
            return;
            
        // The index() method calculates the index from a given index who is out of the actual item range.
        var idx = carousel.index(i, images.length) - 1;
        var element = carousel.add(i, '');
        var img = $("<img class='non-active-thumb-image' alt=''/>");
        img.attr("id", "CarouselImage" + idx);
        img.attr("src", images[idx].thumbUrl);
        element.bind('click', idx, function(e){selectImage(e.data, false);});
        var activeImg = $("<img class='active-thumb-image' alt=''/>");
        activeImg.attr("id", "ActiveCarouselImage" + idx);
        activeImg.attr("src", images[idx].activeThumbUrl);
        activeImg.css("display", "none");
        element.append(img);
        element.append(activeImg);
        startTimer();
    }
    function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
    {
        carousel.remove(i);
    }
    function mycarousel_itemLastInCallback(carousel, item, i, state)
    {
        lastImage = carousel.index(i, images.length) - 2;
		lastImage = lastImage < 0 ? images.length - 1 : lastImage;
	    
	    if(state == "prev" && !isBrowserEarlyIE())
	    {
		    for(var i=0; i<images.length; i++)
    	    {
    		    $("#CarouselImage" + i).css("display", "block");
    		    $("#ActiveCarouselImage" + i).css("display", "none");
    	    }
    	    $("#Slideshow").pngFix();
        }
    }
    function mycarousel_itemFirstInCallback(carousel, item, i, state)
    {
	    firstImage = carousel.index(i, images.length) - 1;
	    selectedImage = firstImage-1;
	    if($.browser.safari)
		    $("#ImageMapHolder").append($("#ImageMapHolder").html());
    }
    function nextClick()
    {
	    myCarousel.next();	
	    $("#Slideshow").pngFix();
    }
    function prevClick()
    {
	    myCarousel.prev();
	    $("#Slideshow").pngFix();
    }
    function pausePlay()
    {
        if(isPaused)
        {
            $("#PlayPauseButton img").attr("src", "images/pause.png");
            startTimer();
            selectImage(selectedImage, false);
            isPaused = false;
        }
        else
        {
            if(timeout != null)
		        clearTimeout(timeout);
            $("#PlayPauseButton img").attr("src", "images/play.png");
            isPaused = true;
        }
    }
});