$(document).ready(function() {
        
        //options( 1 - ON , 0 - OFF)
        var auto_slide = 1;
            var hover_pause = 1;
        var key_slide = 1;
        
        //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); 
            });
  
        }
  
        //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() + 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},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' : '-324px'});
            });
         
}





$(document).ready(function() {
        
        //options( 1 - ON , 0 - OFF)
        var auto_slide1 = 1;
            var hover_pause1 = 1;
        var key_slide1 = 1;
        
        //speed of auto slide(
        var auto_slide_seconds1 = 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.*/
        $('.carousel1_ul li:first').before($('.carousel1_ul li:last')); 
        
        //check if auto sliding is enabled
        if(auto_slide1 == 1){
            /*set the interval (loop) to call function slide with option 'right' 
            and set the interval time to the variable we declared previously */
            var timer1 = setInterval('slide1("right1")', auto_slide_seconds1); 
            
            /*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_seconds1').val(auto_slide_seconds1);
        }
  
        //check if hover pause is enabled
        if(hover_pause1 == 1){
            //when hovered over the list 
            $('.carousel1_ul').hover(function(){
                //stop the interval
                clearInterval(timer1)
            },function(){
                //and when mouseout start it again
                timer1 = setInterval('slide1("right1")', auto_slide_seconds1); 
            });
  
        }
  
        //check if key sliding is enabled
        if(key_slide1 == 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
                        slide1('left1');
                }else if(e.keyCode==39){
                        //initialize the slide to right function
                        slide1('right1');
                }
            });

        }
        
        
  });

//FUNCTIONS BELLOW

//slide function  
function slide1(where){
    
            //get the item width
            var item_width1 = $('.carousel1_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 == 'left1'){
                //...calculating the new left indent of the unordered list (ul) for left sliding
                var left_indent1 = parseInt($('.carousel1_ul').css('left')) + item_width1;
            }else{
                //...calculating the new left indent of the unordered list (ul) for right sliding
                var left_indent1 = parseInt($('.carousel1_ul').css('left')) - item_width1;
            
            }
            
            
            //make the sliding effect using jQuery's animate function... '
            $('.carousel1_ul:not(:animated)').animate({'left' : left_indent1},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 == 'left1'){
                    //...and if it slided to left we put the last item before the first item
                    $('.carousel1_ul li:first').before($('.carousel1_ul li:last'));
                }else{
                    //...and if it slided to right we put the first item after the last item
                    $('.carousel1_ul li:last').after($('.carousel1_ul li:first')); 
                }
                
                //...and then just get back the default left indent
                $('.carousel1_ul').css({'left' : '-324px'});
            });
         
}


$(document).ready(function() {
        
        //options( 1 - ON , 0 - OFF)
        var auto_slide2 = 1;
            var hover_pause2 = 1;
        var key_slide2 = 1;
        
        //speed of auto slide(
        var auto_slide_seconds2 = 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.*/
        $('.carousel2_ul li:first').before($('.carousel2_ul li:last')); 
        
        //check if auto sliding is enabled
        if(auto_slide2 == 1){
            /*set the interval (loop) to call function slide with option 'right' 
            and set the interval time to the variable we declared previously */
            var timer2 = setInterval('slide2("right2")', auto_slide_seconds2); 
            
            /*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_seconds2').val(auto_slide_seconds2);
        }
  
        //check if hover pause is enabled
        if(hover_pause2 == 1){
            //when hovered over the list 
            $('.carousel2_ul').hover(function(){
                //stop the interval
                clearInterval(timer2)
            },function(){
                //and when mouseout start it again
                timer2 = setInterval('slide2("right2")', auto_slide_seconds2); 
            });
  
        }
  
        //check if key sliding is enabled
        if(key_slide2 == 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
                        slide2('left2');
                }else if(e.keyCode==39){
                        //initialize the slide to right function
                        slide2('right2');
                }
            });

        }
        
        
  });

//FUNCTIONS BELLOW

//slide function  
function slide2(where){
    
            //get the item width
            var item_width2 = $('.carousel2_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 == 'left2'){
                //...calculating the new left indent of the unordered list (ul) for left sliding
                var left_indent2 = parseInt($('.carousel2_ul').css('left')) + item_width2;
            }else{
                //...calculating the new left indent of the unordered list (ul) for right sliding
                var left_indent2 = parseInt($('.carousel2_ul').css('left')) - item_width2;
            
            }
            
            
            //make the sliding effect using jQuery's animate function... '
            $('.carousel2_ul:not(:animated)').animate({'left' : left_indent2},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 == 'left2'){
                    //...and if it slided to left we put the last item before the first item
                    $('.carousel2_ul li:first').before($('.carousel2_ul li:last'));
                }else{
                    //...and if it slided to right we put the first item after the last item
                    $('.carousel2_ul li:last').after($('.carousel2_ul li:first')); 
                }
                
                //...and then just get back the default left indent
                $('.carousel2_ul').css({'left' : '-324px'});
            });
         
}


$(document).ready(function() {
        
        //options( 1 - ON , 0 - OFF)
        var auto_slide3 = 1;
            var hover_pause3 = 1;
        var key_slide3 = 1;
        
        //speed of auto slide(
        var auto_slide_seconds3 = 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.*/
        $('.carousel3_ul li:first').before($('.carousel3_ul li:last')); 
        
        //check if auto sliding is enabled
        if(auto_slide3 == 1){
            /*set the interval (loop) to call function slide with option 'right' 
            and set the interval time to the variable we declared previously */
            var timer3 = setInterval('slide3("right3")', auto_slide_seconds3); 
            
            /*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_seconds3').val(auto_slide_seconds3);
        }
  
        //check if hover pause is enabled
        if(hover_pause3 == 1){
            //when hovered over the list 
            $('.carousel3_ul').hover(function(){
                //stop the interval
                clearInterval(timer3)
            },function(){
                //and when mouseout start it again
                timer3 = setInterval('slide3("right3")', auto_slide_seconds3); 
            });
  
        }
  
        //check if key sliding is enabled
        if(key_slide3 == 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
                        slide3('left3');
                }else if(e.keyCode==39){
                        //initialize the slide to right function
                        slide3('right3');
                }
            });

        }
        
        
  });

//FUNCTIONS BELLOW

//slide function  
function slide3(where){
    
            //get the item width
            var item_width3 = $('.carousel3_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 == 'left3'){
                //...calculating the new left indent of the unordered list (ul) for left sliding
                var left_indent3 = parseInt($('.carousel3_ul').css('left')) + item_width3;
            }else{
                //...calculating the new left indent of the unordered list (ul) for right sliding
                var left_indent3 = parseInt($('.carousel3_ul').css('left')) - item_width3;
            
            }
            
            
            //make the sliding effect using jQuery's animate function... '
            $('.carousel3_ul:not(:animated)').animate({'left' : left_indent3},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 == 'left3'){
                    //...and if it slided to left we put the last item before the first item
                    $('.carousel3_ul li:first').before($('.carousel3_ul li:last'));
                }else{
                    //...and if it slided to right we put the first item after the last item
                    $('.carousel3_ul li:last').after($('.carousel3_ul li:first')); 
                }
                
                //...and then just get back the default left indent
                $('.carousel3_ul').css({'left' : '-324px'});
            });
         
}