var index = 0;

$(document).ready(function() {

    //Speed of the slideshow
    var speed = 10000;
    //var index = 1;
    setHighlight();
    //You have to specify width and height in #slider CSS properties
    //After that, the following script will set the width and height accordingly
    $('#mask-gallery, #gallery li').width($('#slider').width());
    $('#gallery').width($('#slider').width() * $('#gallery li').length);
    $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());

    //Assign a timer, so it will run periodically
    var run = setInterval('newsscoller(0)', speed);
    //var run = setInterval('newsscoller(0,' + index + ')', speed);
    $('#gallery li:first, #excerpt li:first').addClass('selected');


    //Slider active image tracing - KC
    //    $('#imageSelection li:first a').addClass('active');
    //    var run2 = setInterval('setImageSelection(' + index + ')', (speed + 100));

    //Pause the slidershow with clearInterval
    $('#btn-pause').click(function() {
        clearInterval(run);
        return false;
    });

    //Continue the slideshow with setInterval
    $('#btn-play').click(function() {
        run = setInterval('newsscoller(0)', speed);
        return false;
    });

    //Next Slide by calling the function
    $('#btn-next').click(function() {
        newsscoller(0);
        return false;
    });

    //Previous slide by passing prev=1
    $('#btn-prev').click(function() {
        newsscoller(1);
        return false;
    });

    $('#imageSelection a').click(function() {
        //Set selected class for active image
        //setActiveImage();

        if ($(this).attr('rel') == "item1") {
            index = 0;
        }
        else if ($(this).attr('rel') == "item2") {
            index = 1;
        }
        else if ($(this).attr('rel') == "item3") {
            index = 2;
        }
        else if ($(this).attr('rel') == "item4") {
            index = 3;
        }
        else if ($(this).attr('rel') == "item5") {
            index = 4;
        }
        else if ($(this).attr('rel') == "item6") {
            index = 5;
        }

        //stop the slide show  
        clearInterval(run);

        //go to the item  
        gotoItem("." + $(this).attr('rel'));
        //resume the slideshow


        run = setInterval('newsscoller(0)', speed);
        setHighlight();

        return false;
    });


});


function newsscoller(prev) {
    $("#bottomWhiteBox").fadeOut("fast",
        function() {
            $("#bottomWhiteBox").fadeIn("slow");
        }
    );
    $("#topWhiteBox").slideUp("fast", 
        function() {
            $("#topWhiteBox").slideDown("slow");
        }
    );
    

    
    //$("#bottomWhiteBox").slideDown("fast");
//    $("#topWhiteBox").slideDown("slow");
//    $("#bottomWhiteBox").slideUp("slow");
    
    //Get the current selected item (with selected class), if none was found, get the first item
    var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
    var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

    //if prev is set to 1 (previous item)
    if (prev) {

        //Get previous sibling
        var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
        var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');

        //if prev is set to 0 (next item)
    } else {

        //Get next sibling
        var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
        var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
    }

    //clear the selected class
    $('#excerpt li, #gallery li').removeClass('selected');


    //alert(next_image.length)
    //reassign the selected class to current items
    next_image.addClass('selected');
    next_excerpt.addClass('selected');

    //Scroll the items
    $('#mask-gallery').scrollTo(next_image, 800);
    $('#mask-excerpt').scrollTo(next_excerpt, 800);


    index++;
    if (index > 2) {
        index = 0;
    }
    
    setHighlight();
}

function setHighlight() {
    $("#imageSelection a").removeClass("active");
    if (index == 0) {
        $("#imageSelection a[rel='item1']").addClass("active");
    }
    else if (index == 1) {
        $("#imageSelection a[rel='item2']").addClass("active");
    }
    else if (index == 2) {
        $("#imageSelection a[rel='item3']").addClass("active");
    }
    else if (index == 3) {
        $("#imageSelection a[rel='item4']").addClass("active");
    }
    else if (index == 4)  {
        $("#imageSelection a[rel='item5']").addClass("active");
    }
    else {
        $("#imageSelection a[rel='item6']").addClass("active");
    }
    
}

//Add this function after newslider function
function gotoItem(item) {
    //clear the selected class
    $('#excerpt li, #gallery li').removeClass('selected');
    
    $('#mask-gallery').scrollTo(item, 800);       
    $('#mask-excerpt').scrollTo(item, 800);   
    $(item).addClass('selected');
}