/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow
var slideshowSpeed = 5000;

// Variable to store the images we need to set as background
// which also includes some text and url's.

/*
var photos = [ {
        "title" : "Stairs",
        "image" : "vacation.jpg",
        "url" : "http://www.sxc.hu/photo/1271909",
        "firstline" : "Going on",
        "secondline" : "vacation?"
    }, {
        "title" : "Office Appartments",
        "image" : "work.jpg",
        "url" : "http://www.sxc.hu/photo/1265695",
        "firstline" : "Or still busy at",
        "secondline" : "work?"
    }, {
        "title" : "Mountainbiking",
        "image" : "biking.jpg",
        "url" : "http://www.sxc.hu/photo/1221065",
        "firstline" : "Get out and be",
        "secondline" : "active"
    }, {
        "title" : "Mountains Landscape",
        "image" : "nature.jpg",
        "url" : "http://www.sxc.hu/photo/1271915",
        "firstline" : "Take a fresh breath of",
        "secondline" : "nature"
    }, {
        "title" : "Italian pizza",
        "image" : "food.jpg",
        "url" : "http://www.sxc.hu/photo/1042413",
        "firstline" : "Enjoy some delicious",
        "secondline" : "food"
    }
];
*/


shuffle = function(o){
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

/*
var photos = [
      {"image" : "template/img/header/top_1.jpg"},
      {"image" : "template/img/header/top_2.jpg"},
      {"image" : "template/img/header/top_3.jpg"},
      {"image" : "template/img/header/top_4.jpg"},
      {"image" : "template/img/header/top_5.jpg"},
      {"image" : "template/img/header/top_6.jpg"},
      {"image" : "template/img/header/top_7.jpg"},
      {"image" : "template/img/header/top_8.jpg"},
      {"image" : "template/img/header/top_9.jpg"},
      {"image" : "template/img/header/top_10.jpg"},
      {"image" : "template/img/header/top_11.jpg"},
      {"image" : "template/img/header/top_12.jpg"},
      {"image" : "template/img/header/top_13.jpg"},
      {"image" : "template/img/header/top_14.jpg"},
      {"image" : "template/img/header/top_15.jpg"},
      {"image" : "template/img/header/top_16.jpg"},
      {"image" : "template/img/header/top_17.jpg"},
      {"image" : "template/img/header/top_18.jpg"},
      {"image" : "template/img/header/top_19.jpg"},
      {"image" : "template/img/header/top_20.jpg"}
];
*/

shuffle(photos);


$(document).ready(function() {

    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(" + photoObject.image + ")",
            "display" : "block",
            "z-index" : currentZindex
        });
        
        // Fade out the current container
        // and display the header text when animation is complete
        $("#headerimg" + currentContainer).fadeOut(1600,function() {
            setTimeout(function() {
                animating = false;
            }, 500);
        });
    };

    // We should statically set the first image
    navigate("next");
    
    // Start playing the animation
    interval = setInterval(function() {
        navigate("next");
    }, slideshowSpeed);
    
});