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

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

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [{
    "title": "Stairs",
    "image": "resortSide.jpg",
    "url": "http://www.sxc.hu/photo/1271909",
    "firstline": "Going on",
    "secondline": "vacation?"
}, {
    "title": "Office Appartments",
    "image": "parkManavgat.jpg",
    "url": "http://www.sxc.hu/photo/1265695",
    "firstline": "Or still busy at",
    "secondline": "work?"
}, {
    "title": "Mountainbiking",
    "image": "clubManavgat.jpg",
    "url": "http://www.sxc.hu/photo/1221065",
    "firstline": "Get out and be",
    "secondline": "active"
}
];


$(document).ready(function () {

    // Backwards navigation
    $("#divClubManavgat").mouseover(function () {
        stopAnimation();
        resortSide();
    });

    // Forward navigation
    $("#divClubParkManavgat").mouseover(function () {
        stopAnimation();
        parkManavgat();
    });

    $("#divResortSide").mouseover(function () {
        stopAnimation();
        clubManavgat();
    });

    var interval;




    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[0], currentContainer, activeContainer);

//    };

    var clubManavgat = function () {
        // Check if no animation is running. If it is, prevent the action
        if (animating) {
            return;
        }
        // Check which container we need to use
        var currentContainer = activeContainer;
        if (activeContainer == 1) {
            activeContainer = 2;
        } else {
            activeContainer = 1;
        }
        showImage(photos[0], currentContainer, activeContainer);

    };

    var parkManavgat = function () {
        // Check if no animation is running. If it is, prevent the action
        if (animating) {
            return;
        }
        // Check which container we need to use
        var currentContainer = activeContainer;
        if (activeContainer == 1) {
            activeContainer = 2;
        } else {
            activeContainer = 1;
        }
        showImage(photos[1], currentContainer, activeContainer);
    };

    var resortSide = function () {
        // Check if no animation is running. If it is, prevent the action
        if (animating) {
            return;
        }
        // Check which container we need to use
        var currentContainer = activeContainer;
        if (activeContainer == 1) {
            activeContainer = 2;
        } else {
            activeContainer = 1;
        }
        showImage(photos[2], 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(../img/intro/" + photoObject.image + ")",
            "display": "block",
            "z-index": currentZindex
        });


        // Fade out the current container
        // and display the header text when animation is complete
        $("#headerimg" + currentContainer).fadeOut(function () {
            setTimeout(function () {

                animating = false;
            }, 0);
        });
    };

    var stopAnimation = function () {
        // Clear the interval
        clearInterval(interval);
    };

    // We should statically set the first image
    parkManavgat();

    // Start playing the animation
    interval = slideshowSpeed;

});