$(document).ready(function(){

    //Load all gallery elements into an array
    var items = new Array();

    $(".highlights li").each(function(i){
        items[i] = $(this);
    });

    /* Show first element */
    $(".highlights li").hide();
    items[0].show();

    var clicked = false;
    var clickable_button = true;
    var current_item_number = 0;
    var total_items = items.length;

    if(total_items > 1) {

        //Add single button slides
        $(".highlight_navigation").append("<p class='slide-buttons'></p>");
        
        for (j = 0; j < total_items; j++) {
            $(".slide-buttons").append("<span class='" + j + "'><img src='/whads_resources/images/slide-off.png' alt='' /></span>");
        }
        
        $(".slide-buttons").css("font-size","14px");
        
        $(".slide-buttons > span").each(function () {
            $(this).click(function(){
                if(clickable_button) {
                    clicked = true;
                    $(".slide-buttons > span").find("img").attr("src","/whads_resources/images/slide-off.png");
                    $(this).find("img").attr("src","/whads_resources/images/slide-on.png");
                    changeSlide($(this).attr("class"));
                }
            });
        });
        
        //Leave the first slide button selected
        $(".slide-buttons > span:first-child").find("img").attr("src","/whads_resources/images/slide-on.png");

        //Add Next / Previous arrows
        $(".highlight_navigation").append("<p class='next'><img src='/whads_resources/images/arrow-next.png' alt='' /></p>");
        $(".highlight_navigation").append("<p class='prev'><img src='/whads_resources/images/arrow-previous.png' alt='' /></p>");
    
        $(".next").click(function() {
            if (clickable_button) {
                clicked = true;
                changeSlide('next');
            }
        });

        $(".prev").click(function() {
            if (clickable_button) {
                clicked = true;
                changeSlide('prev');
            }
        });
        
        /* Play next element automatically */
        setInterval(function() {
            if(clickable_button && !clicked){
                changeSlide('next');
            }
        }, 8000);
    }
    
    function updateSlideButtons(){
        var counter = 0;        
        $(".slide-buttons > span").each(function () {
            $(this).find("img").attr("src","/whads_resources/images/slide-off.png");
            if(counter == parseInt(current_item_number)){
                $(this).find("img").attr("src","/whads_resources/images/slide-on.png");
            }
            counter++;
        });
    }
    
    function changeSlide(next_slide_number){
        clickable_button = false;
        current_item_number = parseInt(current_item_number);
        var current_item = items[current_item_number];
        
        if( next_slide_number == "next" ) {
            if(current_item_number < total_items - 1){
                next_item = items[current_item_number + 1];
                current_item_number = current_item_number + parseInt(1);                
            }else{
                next_item = items[0];
                current_item_number = 0;
            }
        }else if( next_slide_number == "prev" ) {
            if(current_item_number > 0){
                next_item = items[current_item_number - 1];
                current_item_number = current_item_number - 1;
            }else{
                next_item = items[total_items - 1];
                current_item_number = total_items - 1;
            }
        }else{
            next_item = items[next_slide_number];
            current_item_number = next_slide_number;
        }
        
        //Show next item and hide current one        
        current_item.fadeOut(1000, function() {
            clickable_button = true;
        });

        next_item.fadeIn(1000, function() {
            clickable_button = true;
        });
        
        updateSlideButtons();
    }
});