var _interval = 2000;
var _clickedIndex = 0;
var _clickedThumb = null;
var _timeoutTimer = null;

function displaySlideShow(url) {
    
    $("div#slideShow").load("psp_frame.html", function(responseText, textStatus, XMLHttpRequest) {
        $.get(url, parseXmlFile);
    });

}

function parseXmlFile(data) {
    //            debugger;

    
    var myTemplate = '<li><img class="slideshowThumbnail" src="#{imgSrc}" ' +
                     'name="#{toolTip}" alt="#{altText}" timing="#{timing}" ' +
                     'clickThroughUrl="#{clickThroughUrl}" clickThroughTarget="#{clickThroughTarget}" ' +
                     'onmouseover="javascript:return mouseoverThumb(this);" ' +
                     'onmouseout="javascript:return mouseoutThumb(this);" ' +
                     'onclick="javascript:return showPhoto(this);" ' +
                     '/></li>';

    $(data).find('item').each(function() {
        //var items = data.documentElement.getElementsByTagName("item");
        //for (var i = 0; i < items.length; i++) {

            // get the type: image, swf, flv
            var type = extractAttribute($(this), "type");

            // extract the src of the image
            var url = '';
            if (type == "image") {
                url = extractAttribute($(this), "url");
            }
            else {
                url = extractAttribute($(this), "imageUrl");
            }
//            if (url == null || url == '')
//                continue;

            // clickthroughs are optional
            var clickThroughUrl = extractAttribute($(this), "clickThroughUrl");
            var clickThroughTarget = extractAttribute($(this), "clickThroughTarget");

            // alttext & tooltip are also optional
            var altText = extractAttribute($(this), "altText");
            var toolTip = extractAttribute($(this), "toolTip");

            // need timing
            var timing = extractAttribute($(this), "timing");


            var myValues = {
                imgSrc: url,
                altText: altText,
                toolTip: toolTip,
                clickThroughUrl: clickThroughUrl,
                clickThroughTarget: clickThroughTarget,
                timing: timing
            };
            var myResult = $.tmpl(myTemplate, myValues);
            $("ul.slideshow").append(myResult);

        //}

        
    });
    
    initializeSlideshow();
}

function extractAttribute(item, attribute) {
    //var value = item.getAttribute(attribute);
    var value = $(item).attr(attribute);
    if (value == null)
        value = '';
    return value;
}

function initializeSlideshow() {
    refreshSelectedImage();
    startSlideshow();
}

function setTimerInterval(interval) {
    _interval = interval;
}

function startSlideshow() {
    _timeoutTimer = setTimeout(slideShow_interval, _interval);
}

function stopSlideshow() {
    clearTimeout(_timeoutTimer);
}

function slideShow_interval() {
    showNextPhoto();
    refreshSelectedImage();
    startSlideshow();
}

function mouseoverThumb(thumb) {

    if (!$(thumb).hasClass("thumbOver"))
        $(thumb).addClass("thumbOver");

    return false;
}

function mouseoutThumb(thumb) {
    
    $(thumb).removeClass("thumbOver");

    return false;
}


function showPreviousPhoto() {
    _clickedIndex--;
    if (_clickedIndex < 0)
        _clickedIndex = $("img.slideshowThumbnail").length - 1;

    refreshSelectedImage();

    return false;
}

function showNextPhoto() {

    _clickedIndex++;
    if (_clickedIndex >= $("img.slideshowThumbnail").length)
        _clickedIndex = 0;

    refreshSelectedImage();
        
    
    return false;
}

function showPhoto(thumb) {

    stopSlideshow();

    $("img.slideshowThumbnail").removeClass("activeThumb");
    $("img.slideshowThumbnail").removeClass("thumbOver");
    
    
    if (!$(thumb).hasClass("activeThumb"))
        $(thumb).addClass("activeThumb");

    var index = 0;
    $("img.slideshowThumbnail").each(function() {
        if ($(this).hasClass("activeThumb")) {
            _clickedIndex = index;
            return;
        }
        index++;
    });

    refreshSelectedImage();    
 
    return false;
}

function refreshSelectedImage() {
    

    clickedThumb = $("img.slideshowThumbnail").get(_clickedIndex);

    $("img.slideshowThumbnail").removeClass("activeThumb");

    if (!$(clickedThumb).hasClass("activeThumb"))
        $(clickedThumb).addClass("activeThumb");

    $("#photoImage").attr("src", $(clickedThumb).attr("src"));
    $("#photoImage").attr("alt", $(clickedThumb).attr("alt"));
    $("#photoImage").attr("title", $(clickedThumb).attr("name"));
    //$("#photoTitle").html($(clickedThumb).attr("name"));
    //$("#photoDescription").html($(clickedThumb).attr("alt"));

    if ($(clickedThumb).attr("clickThroughUrl")) {
        $("#photoLink").attr("href", $(clickedThumb).attr("clickThroughUrl"));
    }
    else {
        $("#photoLink").attr("href", "");
    }

    if ($(clickedThumb).attr("clickThroughTarget")) {
        $("#photoLink").attr("target", $(clickedThumb).attr("clickThroughTarget"));
    }
    else {
        $("#photoLink").attr("target", "");
    }

    setTimerInterval($(clickedThumb).attr("timing") * 1000);

}