$(document).ready(function() {

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

        //speed of auto slide(
        var auto_slide_seconds = 1;
        /* 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.*/
        $('#ulCarousel li:first').before($('#ulCarousel 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);
        }

        //check if hover pause is enabled
        if(hover_pause == 1){
            //when hovered over the list
            $('#ulCarousel').hover(function(){
                //stop the interval
                clearInterval(timer)
            },function(e){
				if(e.pageX > ($(document).width() / 2)) {
                	timer = setInterval('slide("right")', auto_slide_seconds);
				} else {
					timer = setInterval('slide("left")', auto_slide_seconds);
				}
            });

        }
  });

//FUNCTIONS BELLOW

//slide function
function slide(where){

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

            /* 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($('#ulCarousel').css('left')) + item_width;
            }else{
                //...calculating the new left indent of the unordered list (ul) for right sliding
                var left_indent = parseInt($('#ulCarousel').css('left')) - item_width;

            }

            //make the sliding effect using jQuery's animate function... '
            $('#ulCarousel:not(:animated)').animate({'left' : left_indent},4999,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
                    $('#ulCarousel li:first').before($('#ulCarousel li:last'));
                }else{
                    //...and if it slided to right we put the first item after the last item
                    $('#ulCarousel li:last').after($('#ulCarousel li:first'));
                }

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

}