$(document).ready(function () {

    //options( 1 - ON , 0 - OFF)
    var auto_slide = 0;
    var hover_pause = 0;
    var key_slide = 0;

    //speed of auto slide(
    var auto_slide_seconds = 5000;
    /* IMPORTANT: i know the variable is called ...seconds but it's 
    in milliseconds ( multiplied with 1000) '*/

    /*move he last list item before the first item. The purpose of this is 
    if the user clicks to slide left he will be able to see the last item.*/
    $('#carousel_ul li:first').before($('#carousel_ul li:last'));

    //check if auto sliding is enabled
    if (auto_slide == 1) {
        /*set the interval (loop) to call function slide with option 'right' 
        and set the interval time to the variable we declared previously */
        var timer = setInterval('slide("right")', auto_slide_seconds);

        /*and change the value of our hidden field that hold info about
        the interval, setting it to the number of milliseconds we declared previously*/
        $('#hidden_auto_slide_seconds').val(auto_slide_seconds);
    }

    //check if hover pause is enabled
    if (hover_pause == 1) {
        //when hovered over the list 
        $('#carousel_ul').hover(function () {
            //stop the interval
            clearInterval(timer)
        }, function () {
            //and when mouseout start it again
            timer = setInterval('slide("right")', auto_slide_seconds);
        });

    }
    //The click event on an li under carousel_ul
    $('#carousel_ul > li').click(function () {
        //Removing selected from all child elements
        $('#carousel_ul > li').removeClass('selected');
        //Adding selected to the clicked li
        $(this).addClass('selected');
        //Hiding all divs with no animation
        $('#carouselContentDisplay div').hide();
        //taking out ID of selected li
        var name = $(this).attr('id');
        //removing 'carouselThumb' so we are left with a number
        name = name.replace('carouselThumb', '');
        //creating a new var with the selected content class
        var contentId = '#carouselContent' + name;
        //Showing selected content class with a fadein animation
        $(contentId).show();
        return false;


    });

    //check if key sliding is enabled
    if (key_slide == 1) {

        //binding keypress function
        $(document).bind('keypress', function (e) {
            //keyCode for left arrow is 37 and for right it's 39 '
            if (e.keyCode == 37) {
                //initialize the slide to left function
                slide('left');
            } else if (e.keyCode == 39) {
                //initialize the slide to right function
                slide('right');
            }
        });

    }


});

//FUNCTIONS BELLOW

//slide function  
function slide(where) {

    //get the item width
    var item_width = $('#carousel_ul li').outerWidth() + 0;

    /* using a if statement and the where variable check 
    we will check where the user wants to slide (left or right)*/
    if (where == 'left') {
        //...calculating the new left indent of the unordered list (ul) for left sliding
        var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
    } else {
        //...calculating the new left indent of the unordered list (ul) for right sliding
        var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

    }


    //make the sliding effect using jQuery's animate function... '
    $('#carousel_ul:not(:animated)').animate({ 'left': left_indent }, 500, function () {

        /* when the animation finishes use the if statement again, and make an ilussion
        of infinity by changing place of last or first item*/
        if (where == 'left') {
            //...and if it slided to left we put the last item before the first item
            $('#carousel_ul li:first').before($('#carousel_ul li:last'));
        } else {
            //...and if it slided to right we put the first item after the last item
            $('#carousel_ul li:last').after($('#carousel_ul li:first'));
        }

        //...and then just get back the default left indent
        $('#carousel_ul').css({ 'left': '-246px' });
    });
            
            
            
             
 
}