$(document).ready(function() {





// Carousel number 0

        //move the last list item before the first item.
        $('#carousel_ul_0 li:first').before($('#carousel_ul_0 li:last'));
        
        
        //when user clicks the image for sliding right        
        $('#right_scroll_0 img').click(function(){

	    //Cancel Auto rotate
            clearInterval(RotateTime_0);

            //get the width of the items from css
            var item_width = $('#carousel_ul_0 li').outerWidth() + 10;
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul_0').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul_0:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item
                $('#carousel_ul_0 li:last').after($('#carousel_ul_0 li:first')); 
                
                //and get the left indent to the default -154px
                $('#carousel_ul_0').css({'left' : '-154px'});
            }); 
        });
        
        //when user clicks the image for sliding left
        $('#left_scroll_0 img').click(function(){

	    //Cancel Auto rotate
            clearInterval(RotateTime_0);

            var item_width = $('#carousel_ul_0 li').outerWidth() + 10;
            
            var left_indent = parseInt($('#carousel_ul_0').css('left')) + item_width;
            
            $('#carousel_ul_0:not(:animated)').animate({'left' : left_indent},500,function(){    
                       
            $('#carousel_ul_0 li:first').before($('#carousel_ul_0 li:last')); 
            
            $('#carousel_ul_0').css({'left' : '-154px'});
            });
            
            
        });

        //Auto rotate        
        function AutoRotate_0(){
        
            //get the width of the items from css
            var item_width = $('#carousel_ul_0 li').outerWidth() + 10;
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul_0').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul_0:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item
                $('#carousel_ul_0 li:last').after($('#carousel_ul_0 li:first')); 
                
                //and get the left indent to the default -154px
                $('#carousel_ul_0').css({'left' : '-154px'});
            }); 
        };

RotateTime_0 = window.setInterval(AutoRotate_0, 3000);










// Carousel number 1

        //move the last list item before the first item.
        $('#carousel_ul_1 li:first').before($('#carousel_ul_1 li:last'));
        
        
        //when user clicks the image for sliding right        
        $('#right_scroll_1 img').click(function(){

	    //Cancel Auto rotate
            clearInterval(RotateTime_1);
        
            //get the width of the items from css
            var item_width = $('#carousel_ul_1 li').outerWidth() + 10;
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul_1').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul_1:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item
                $('#carousel_ul_1 li:last').after($('#carousel_ul_1 li:first')); 
                
                //and get the left indent to the default -154px
                $('#carousel_ul_1').css({'left' : '-154px'});
            }); 
        });
        
        //when user clicks the image for sliding left
        $('#left_scroll_1 img').click(function(){

	    //Cancel Auto rotate
            clearInterval(RotateTime_1);
            
            var item_width = $('#carousel_ul_1 li').outerWidth() + 10;
            
            var left_indent = parseInt($('#carousel_ul_1').css('left')) + item_width;
            
            $('#carousel_ul_1:not(:animated)').animate({'left' : left_indent},500,function(){    
                       
            $('#carousel_ul_1 li:first').before($('#carousel_ul_1 li:last')); 
            
            $('#carousel_ul_1').css({'left' : '-154px'});
            });
            
            
        });

        //Auto rotate        
        function AutoRotate_1(){
        
            //get the width of the items from css
            var item_width = $('#carousel_ul_1 li').outerWidth() + 10;
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul_1').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul_1:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item
                $('#carousel_ul_1 li:last').after($('#carousel_ul_1 li:first')); 
                
                //and get the left indent to the default -154px
                $('#carousel_ul_1').css({'left' : '-154px'});
            }); 
        };

RotateTime_1 = window.setInterval(AutoRotate_1, 4000);












// Carousel number 2

        //move the last list item before the first item.
        $('#carousel_ul_2 li:first').before($('#carousel_ul_2 li:last'));
        
        
        //when user clicks the image for sliding right        
        $('#right_scroll_2 img').click(function(){

	    //Cancel Auto rotate
            clearInterval(RotateTime_2);
        
            //get the width of the items from css
            var item_width = $('#carousel_ul_2 li').outerWidth() + 10;
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul_2').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul_2:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item
                $('#carousel_ul_2 li:last').after($('#carousel_ul_2 li:first')); 
                
                //and get the left indent to the default -154px
                $('#carousel_ul_2').css({'left' : '-154px'});
            }); 
        });
        
        //when user clicks the image for sliding left
        $('#left_scroll_2 img').click(function(){

	    //Cancel Auto rotate
            clearInterval(RotateTime_2);
            
            var item_width = $('#carousel_ul_2 li').outerWidth() + 10;
            
            var left_indent = parseInt($('#carousel_ul_2').css('left')) + item_width;
            
            $('#carousel_ul_2:not(:animated)').animate({'left' : left_indent},500,function(){    
                       
            $('#carousel_ul_2 li:first').before($('#carousel_ul_2 li:last')); 
            
            $('#carousel_ul_2').css({'left' : '-154px'});
            });
            
            
        });

        //Auto rotate        
        function AutoRotate_2(){
        
            //get the width of the items from css
            var item_width = $('#carousel_ul_2 li').outerWidth() + 10;
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul_2').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul_2:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item
                $('#carousel_ul_2 li:last').after($('#carousel_ul_2 li:first')); 
                
                //and get the left indent to the default -154px
                $('#carousel_ul_2').css({'left' : '-154px'});
            }); 
        };

RotateTime_2 = window.setInterval(AutoRotate_2, 3500);









// Carousel number 3

        //move the last list item before the first item.
        $('#carousel_ul_3 li:first').before($('#carousel_ul_3 li:last'));
        
        
        //when user clicks the image for sliding right        
        $('#right_scroll_3 img').click(function(){

	    //Cancel Auto rotate
            clearInterval(RotateTime_3);
        
            //get the width of the items from css
            var item_width = $('#carousel_ul_3 li').outerWidth() + 10;
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul_3').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul_3:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item
                $('#carousel_ul_3 li:last').after($('#carousel_ul_3 li:first')); 
                
                //and get the left indent to the default -154px
                $('#carousel_ul_3').css({'left' : '-154px'});
            }); 
        });
        
        //when user clicks the image for sliding left
        $('#left_scroll_3 img').click(function(){

	    //Cancel Auto rotate
            clearInterval(RotateTime_3);
            
            var item_width = $('#carousel_ul_3 li').outerWidth() + 10;
            
            var left_indent = parseInt($('#carousel_ul_3').css('left')) + item_width;
            
            $('#carousel_ul_3:not(:animated)').animate({'left' : left_indent},500,function(){    
                       
            $('#carousel_ul_3 li:first').before($('#carousel_ul_3 li:last')); 
            
            $('#carousel_ul_3').css({'left' : '-154px'});
            });
            
            
        });

        //Auto rotate        
        function AutoRotate_3(){
        
            //get the width of the items from css
            var item_width = $('#carousel_ul_3 li').outerWidth() + 10;
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul_3').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul_3:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item
                $('#carousel_ul_3 li:last').after($('#carousel_ul_3 li:first')); 
                
                //and get the left indent to the default -154px
                $('#carousel_ul_3').css({'left' : '-154px'});
            }); 
        };

RotateTime_3 = window.setInterval(AutoRotate_3, 4000);












// Carousel number 4

        //move the last list item before the first item.
        $('#carousel_ul_4 li:first').before($('#carousel_ul_4 li:last'));
        
        
        //when user clicks the image for sliding right        
        $('#right_scroll_4 img').click(function(){

	    //Cancel Auto rotate
            clearInterval(RotateTime_4);
        
            //get the width of the items from css
            var item_width = $('#carousel_ul_4 li').outerWidth() + 10;
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul_4').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul_4:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item
                $('#carousel_ul_4 li:last').after($('#carousel_ul_4 li:first')); 
                
                //and get the left indent to the default -154px
                $('#carousel_ul_4').css({'left' : '-154px'});
            }); 
        });
        
        //when user clicks the image for sliding left
        $('#left_scroll_4 img').click(function(){

	    //Cancel Auto rotate
            clearInterval(RotateTime_4);
            
            var item_width = $('#carousel_ul_4 li').outerWidth() + 10;
            
            var left_indent = parseInt($('#carousel_ul_4').css('left')) + item_width;
            
            $('#carousel_ul_4:not(:animated)').animate({'left' : left_indent},500,function(){    
                       
            $('#carousel_ul_4 li:first').before($('#carousel_ul_4 li:last')); 
            
            $('#carousel_ul_4').css({'left' : '-154px'});
            });
            
            
        });

        //Auto rotate        
        function AutoRotate_4(){
        
            //get the width of the items from css
            var item_width = $('#carousel_ul_4 li').outerWidth() + 10;
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul_4').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul_4:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item
                $('#carousel_ul_4 li:last').after($('#carousel_ul_4 li:first')); 
                
                //and get the left indent to the default -154px
                $('#carousel_ul_4').css({'left' : '-154px'});
            }); 
        };

RotateTime_4 = window.setInterval(AutoRotate_4, 3000);

















});