/* Slideshow */
var slideshowSpeed = 5000;

// temp data array - to be replaced w/ service call:
var photos = [];

// global vars:	
var interval;
var activeContainer = 1;
var currentImg = 0;
var animating = false;
var thumbItems = [];
var activeThumb;
var listWidth = 0;

// init method:
function init() {
    // setup navigation:
    if (photos.length > 1) {
        for (i = 0; i < photos.length; i++) {
            addLink(photos[i].idNum);
            listWidth += 28; // magic number: css width + padding-right
        }

        // set ul width:
        $("#thumbsList").width(listWidth);

        // set first image:
        navigate(currentImg);

        // start animation:
        interval = setInterval(function() { navigate(currentImg); }, slideshowSpeed);
    } else {
        navigate(currentImg);
    }
}

function navigate(imgNum) {
    // check if animation is running - if so, prevent action:
    if (!animating) {
        animating = true;

        // check container;
        var currentContainer = activeContainer;
        if (activeContainer == 1) {
            activeContainer = 2;
        } else {
            activeContainer = 1;
        }

        showImage(photos[imgNum], currentContainer, activeContainer);
        setThumb(imgNum);

        // increment image number:
        currentImg = imgNum;
        currentImg++;
        if (currentImg >= photos.length) {
            currentImg = 0;
        }
    }
};

function showImage(photoObject, currentContainer, activeContainer) {
    // push next container to lowest z-index:
    // currentZindex--;

    // set background imf of next container:
    var containerIn = "#galleryImg" + activeContainer;
    $(containerIn).html('<img src="' + photoObject.image + '" />');
    $(containerIn).css("z-index", 1);
    $(containerIn).css("opacity", 1);

    var containerOut = "#galleryImg" + currentContainer;
    $(containerOut).css("z-index", 2);
    $(containerOut).stop().animate({ opacity: 0 }, 1000, "easeOutQuad", function() { animating = false; });
};

function setThumb(imgNum) {
    // activate correct thumb:
    var nextThumb = $(thumbItems[imgNum]);
    if (activeThumb != undefined || activeThumb != null) {
        activeThumb.removeClass("activeThumb").addClass("inactiveThumb");
    }
    nextThumb.removeClass("inactiveThumb").addClass("activeThumb");
    activeThumb = nextThumb;
}

function addLink(idNum) {
    var jParent = $("#thumbsList");
    var jListItem = $("<li></li>");
    var jLink = $("<a>link</a>");

    // set link properties:
    jLink.data("myData", { myIdNum: idNum });
    jLink.attr("href", "javascript:void(0)").click(clickHandler);
    jLink.addClass("inactiveThumb");

    // add the link to the list item and then add the list item to the DOM:
    jParent.append(jListItem.append(jLink));

    // store ref:
    thumbItems.push(jLink);

    // return new link:
    return (jLink);
}

function clickHandler(objEvent) {
    if (!animating) {
        // get the property data for this element that was associated when creating the element:
        var objData = $(this).data("myData");

        // clear interval & setup for new navigation::
        clearInterval(interval);
        var nextNum = objData.myIdNum;
        navigate(nextNum);
    } 

    // prevent default:
    objEvent.preventDefault();
    return (false);
}