// JavaScript Document

//carrossel

jQuery.noConflict();
(function($) {

$(document).ready(function() {
  
        //move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.  
        $('#carousel_ul li:first').before($('#carousel_ul li:last'));  
  
        //when user clicks the image for sliding right  
        $('#next_scroll a').click(function(){  
  
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '  
            var item_height = $('#carousel_ul li').outerHeight() + 1;  
  
            //calculate the new left indent of the unordered list  
            var top_indent = parseInt($('#carousel_ul').css('top')) - item_height;  
            //make the sliding effect using jquery's anumate function '  
            $('#carousel_ul').animate({'top' : top_indent}, 200, 'easeInOutCubic', function(){  
			
                //get the first list item and put it after the last list item (that's how the infinite effects is made) '  
                $('#carousel_ul li:last-child').after($('#carousel_ul li:first-child'));  
  
                //and get the left indent to the default -210px  
                $('#carousel_ul').css({'top' : '-72px'});  
            });  
        });  
  
        //when user clicks the image for sliding left  
        $('#prev_scroll a').click(function(){  
  
            var item_height = $('#carousel_ul li').outerHeight() + 1;  
  
            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */  
            var bottom_indent = parseInt($('#carousel_ul').css('top')) + item_height;  
  
            $('#carousel_ul').animate({'top' : bottom_indent}, 200, 'easeInOutCubic', function(){  
  
				/* when sliding to left we are moving the last item before the first item */  
				$('#carousel_ul li:first-child').before($('#carousel_ul li:last-child'));  
	  
				/* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */  
				$('#carousel_ul').css({'top' : '-72px'});  
            });  
  
        });  
		
});		
		
		
})(jQuery)