$(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 = 4000;
        /* IMPORTANT: i know the variable is called ...seconds but it's
        in milliseconds ( multiplied with 1000) '*/

        /*move the 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);
            });

        }

        //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
// hide function
var hideListItems = function ()
{
	var listItems = $("#carousel_ul > li");
	for (var i=0; i<listItems.length; i++)
	{
		switch (i)
		{
			//case 0:	$(listItems.get(i)).css({"display":"none"}); break;
			//case 1:	$(listItems.get(i)).css({"display":"none"}); break;
			//case 2:	$(listItems.get(i)).css({"display":"block"}); break;
			//case 3:	$(listItems.get(i)).css({"display":"block"}); break;
			//case 4:	$(listItems.get(i)).css({"display":"block"}); break;
			case 5:	$(listItems.get(i)).css({"display":"none"}); break;
			//default:$(listItems.get(i)).css({"display":"none"}); break;
		}
	}
};
//slide function
var slide = function (where){
	//get the item width
	var item_width = $('#carousel_ul li').outerWidth() + 10;

	/* 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},400,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' : '-190px'});
	});	
};