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

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

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [];

$(document).ready(function() {

    var slideshowInit = function(){
        var indexedNavigation = true;
        var slideshowId = 'headermarco';
        var navId = 'headernav';
        var slideshow = $('#'+slideshowId);
        var imageData = $('#'+slideshowId + ' #imagedata');
        imageData.css('display','none');
        var imageDataImages = imageData.children('.image');
        imageDataImages.each(function(elementIndex,element){
            element = $(element);
            var linkTitle = element.children('.link').html();
            var href = element.children('.link').attr('href');
            var imgSrc = element.children('.img').attr('src');
            var line1 = element.children('.line1').html();
            var line2 = element.children('.line2').html();
            var line3 = element.children('.line3').html();
            var bgColour = element.children('.bg_colour').html();
            photos.push({
                'title':linkTitle,
                'image':imgSrc,
                'url':href,
                'firstline':line1,
                'secondline':line2,
                'thirdline':line3,
                'bgColour':bgColour
            });
        });
        
        //Generate dot nav
        var nav = slideshow.find('#'+navId);
        nav.empty();
        var ul = $('<ul></ul>');
        console.log(ul);
        imageDataImages.each(function(elementIndex,element){
            element = $(element);
            var li = $('<li class="dot">'+elementIndex+'</li>');
            li.click(function(){
                stopAnimation();
                navigate(elementIndex);
            });
            ul.append(li);
        });
        nav.append(ul);
    }
    slideshowInit();

    var interval;
    $("#control").toggle(function(){
        stopAnimation();
    }, function() {
        // Change the background image to "pause"
        $(this).css({
            "background-image" : "url(/themes/click/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;
        }
		
        if(typeof(direction) == 'number'){
            currentImg = direction+1;
        }else{
            // 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;
                }
            }
        }

        //Shouldn't be in this location but...
        //make list element 'active' for navigation
        var dots = $('#headermarco #headernav li');
        dots.each(function(elementIndex,element){
            element = $(element);
            element.removeClass('active');
        });
        $(dots.get(currentImg-1)).addClass('active');
        
        

        // 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 + ")",
            "background-color" : "#"+photoObject.bgColour,
            "display" : "block",
            "z-index" : currentZindex
        });
		
        // Hide the header text
//        $("#headertxt").css({"display" : "none"});
        $("#headertxt").animate({"opacity" : "0"});
		
        // Set the new header text
        $("#firstline").html(photoObject.firstline);
        $("#secondline").html(photoObject.secondline);
        $("#thirdline").html(photoObject.thirdline);
        $("#pictureduri").attr("href", photoObject.url).html(photoObject.title);
        Cufon.replace('#headermarco .cufon');
		
		
        // Fade out the current container
        // and display the header text when animation is complete
        $("#headerimg" + currentContainer).fadeOut(function() {
            setTimeout(function() {
//                $("#headertxt").css({
//                    "display" : "block"
//                });
                $("#headertxt").animate({"opacity" : "1"});
                animating = false;
            }, 500);
        });
    };
	
    var stopAnimation = function() {
        // Change the background image to "play"
        $("#control").css({
            "background-image" : "url(/themes/click/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);
	
});