$(document).ready(function() {
	var carousel   = $('#intro');
    var slider       = carousel.find('ul.slider');
    var controls   = null; // Will hold the ul with the controls
    var timer      = null; // Will hold the timer div
    var wait       = 4000; // Milliseconds to wait for auto-switching
    var heights     = [];   // Will hold the heights of each image
    var items_size = slider.find('li').length;
    var initialized = false;
    var stoptimer = 0;

    if (!items_size) { return; }

    // Controls html to append
    var controls_str = '<ul class="controls">';
    slider.find('li img').each(function(i, e) {
        controls_str += '<li><a href="#" id="' + i + '">' + $(e).attr('alt') + '</a></li>';
    })
    controls_str += '</ul>';

    // Cache the controls list
    controls = $('#slidercontrol').append(controls_str).find('ul.controls');

    // Make the first button in controls active
    controls.find('li:first a').addClass('active');

    // Hook to the controls' click events
    controls.find('li a').click(function(event) {
        $('.timer').hide();
        stoptimer = 1;
        move_slider( $(this) );
        return false;
    });

    // Append the timer and cache it
    timer = carousel.append('<div class="timer"></div>').find('div.timer');

    // Store each item's width and calculate the total width
    slider.find('li img').each(function(i, e) {
        heights[i] = $(e).height();
        if(all_images_loaded()) {
            init_carousel();
        }
    })
    .load(function(e) {
        var i = slider.find('li img').index(this);
        heights[i] = $(this).height();
        if(all_images_loaded()) {
            init_carousel();
        }
    });
    
    $('#intro').click(function() {
        location.href = '/vergelijken';
    });
    
    function all_images_loaded() {
        return (items_size == heights.length) && (jQuery.inArray(0, heights) < 0);
    }

    function move_slider( new_active ) {

        // Move unless it is already moving
        if($('#intro ul.slider:animated').length > 1) {
            return false;
        }

        var current_active = controls.find('li a.active');

        if (new_active == 'next') {
            var next = current_active.parent().next().find('a');

            if(!next.length) {
                next = controls.find('li:first a');
            }

            new_active = next;
        }

        var current_index = parseInt(current_active.attr('id'), 10);
        var new_index     = parseInt(new_active.attr('id'), 10);
        var move_to       = new_index - current_index;

        if(!move_to) { return false; }

        var direction = (move_to > 0)? '-=': '+=';

        var move   = 0;
        var bottom = Math.min(current_index, new_index);
        var top    = Math.max(current_index, new_index);

        while (bottom < top) {
            move += heights[bottom];
            bottom++;
        }

        slider.animate({marginTop: direction + move }, 900);
        new_active.addClass('active');
        current_active.removeClass('active');
    }

    function animate_timer() {
        timer.stop().css({width: '50px'}).animate({width: '1px'}, wait);
    }

    // Initializer, called when all images are loaded
    function init_carousel() {
        if(initialized) {
            return false;
        }

        // Set the slider ul total width
        var width = 0;
        for( var i = 0; i < heights.length; i++) {
            width += heights[i];
        }
        slider.height(width);

        // Make the slider change every X seconds
        setInterval(function() {
            if(stoptimer != 1) {
                move_slider('next');
                animate_timer();
            }
        }, wait);

        animate_timer();

        initialized = true;
    }
});