/** $Id: imageSlider.js 76 2010-09-30 17:50:51Z josh $
 ** $Author: josh $
 ** $Date: 2010-09-30 12:50:51 -0500 (Thu, 30 Sep 2010) $
 ** $Revision: 76 $
 ** $HeadURL: http://svn.visualade.net/MOA/trunk/scripts/js/imageSlider.js $
 *
 * Visualade
 *
 * @package    Mall of America
 * @copyright  Copyright (c) 2010 Visualade Inc. http://www.visualade.com
 *
 * scripts/js/iamgeSlider.js - image slider javascript for home page
 *
 *  Javascript image slider with external AJAX XML configuration file load
 *  CSS modifications and layout by Visualade http://visualade.com
 *  AJAX and XML loading added 8/23/2010 by Colin Anderson colin.anderson@wem.ca
 *  Script source originally from Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow

var slideshowSpeed = 8000;

// Initialize multidimensional associative array

var photos = [ {
        "title" : "",
        "image" : "",
        "url" : "",
        "firstline" : "",
        "secondline" : ""
    }
];

$(document).ready(function() {

// AJAX XML document load from relative directory 'XML'

$.ajax({
    type: "GET",
    url: "home-slider.xml",
    dataType: "xml",
    success: function(xml) {
        var currentPhoto = 0;
        

        //Use jquery to do an XPATH style query, isolating a <photo> element

        $(xml).find('photo').each(function(){

            // Javascript associative arrays are not really proper associative arrays, they are objects
            // Instead of multidimentional keys, they are implemented as properties of the object
            // Therefore to add to the multidimensional pseudo-associative array you make a blank object
            // assign properties to the object, set the property's values, then add the object to
            // the array. Stupid, I know...

            var thisArray=new Object();
            thisArray["title"]="";
            thisArray["image"]="";
            thisArray["url"]="";
            thisArray["firstline"]="";
            thisArray["secondline"]="";
            photos[currentPhoto]= new Object(thisArray);
            photos[currentPhoto]["title"]=$(this).attr('title');
            photos[currentPhoto]["image"]=$(this).attr('image');
            photos[currentPhoto]["url"]=$(this).attr('url');
            photos[currentPhoto]["firstline"]=$(this).attr('firstline');
            photos[currentPhoto]["secondline"]=$(this).attr('secondline');
            currentPhoto=currentPhoto+1;
        });
        $("#back").click(function() {
        stopAnimation();
        navigate("back");
    });

    // Forward navigation
    $("#next").click(function() {
        stopAnimation();
        navigate("next");
    });

    var interval;
    $("#control").toggle(function(){
        stopAnimation();
    }, function() {
        // Change the background image to "pause"
        $(this).css({ "background-image" : "url(images/btn_pause.png)" });

        // Show the next image
        navigate("next");

        // Start playing the animation
        interval = setInterval(function() {
            navigate("next");
        }, slideshowSpeed);
    });


    var activeContainer = 1;
    var currentImg = 0;
    var animating = false;
    var navigate = function(direction) {
        // Check if no animation is running. If it is, prevent the action
        if(animating) {
            return;
        }

        // Check which current image we need to show
        if(direction == "next") {
            currentImg++;
            if(currentImg == photos.length + 1) {
                currentImg = 1;
            }
        } else {
            currentImg--;
            if(currentImg == 0) {
                currentImg = photos.length;
            }
        }

        // Check which container we need to use
        var currentContainer = activeContainer;
        if(activeContainer == 1) {
            activeContainer = 2;
        } else {
            activeContainer = 1;
        }

        showImage(photos[currentImg - 1], currentContainer, activeContainer);

    };

    var currentZindex = -1;
    var showImage = function(photoObject, currentContainer, activeContainer) {
        animating = true;

        // Make sure the new container is always on the background
        currentZindex--;

        // Set the background image of the new active container
        $("#headerimg" + activeContainer).css({
            "background-image" : "url(picture/slideshow/" + photoObject.image + ")",
            "display" : "block",
            "z-index" : currentZindex,
            "left"    : 0
        });

        // Hide the header text
        $("#headertxt").css({"display" : "none"});

        // Set the new header text
        $("#firstline").html(photoObject.firstline);
        $("#secondline")
            .attr("href", photoObject.url)
            .html(photoObject.secondline);
        $("#pictureduri")
            .attr("href", photoObject.url)
            .html(photoObject.title);


        // Fade out the current container
        // and display the header text when animation is complete
        $("#headerimg" + currentContainer).fadeOut(function() {
            setTimeout(function() {
                $("#headertxt").css({"display" : "block"});
                animating = false;
            }, 500);
        });
    };

    var stopAnimation = function() {
        // Change the background image to "play"
        $("#control").css({ "background-image" : "url(images/btn_play.png)" });

        // Clear the interval
        clearInterval(interval);
    };

    // We should statically set the first image
    navigate("next");

    // Start playing the animation
    interval = setInterval(function() {
        navigate("next");
    }, slideshowSpeed);

    }
    });
});