$(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'));

    var beltWidth = $('#carousel_ul').outerWidth();

    //when user clicks the image for sliding right
    $('#right_scroll').click(function(){
        
    	var portalWidth = $('#carousel_inner').outerWidth();
    	var pageCount = (beltWidth/portalWidth) - 1;

    	if (CAROUSEL_CURRENT_PAGE < pageCount)
    	{
	        //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_width = $('#carousel_ul li').outerWidth() + 10;
	
	        //calculate the new left indent of the unordered list
	        var left_indent = parseInt($('#carousel_ul').css('left')) - portalWidth;
	
	        //make the sliding effect using jquery's anumate function '
	        $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},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').after($('#carousel_ul li:first'));
	
	            //and get the left indent to the default -210px
	            $('#carousel_ul').css({'left' : '-210px'});
	        });
	        CAROUSEL_CURRENT_PAGE += 1;
	        $('#left_scroll').removeClass('carouselButtonArrowDisabled');
	        if (CAROUSEL_CURRENT_PAGE > pageCount-1)
	        	$('#right_scroll').addClass('carouselButtonArrowDisabled');
    	}
    });

    //when user clicks the image for sliding left
    $('#left_scroll').click(function(){

    	if (CAROUSEL_CURRENT_PAGE > 0)
    	{
    		var portalWidth = $('#carousel_inner').outerWidth();
	
	        /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
	        var left_indent = parseInt($('#carousel_ul').css('left')) + portalWidth;
	
	        $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){
	
	        /* when sliding to left we are moving the last item before the first item */
	        $('#carousel_ul li:first').before($('#carousel_ul li:last'));
	
	        /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
	        $('#carousel_ul').css({'left' : '-210px'});
	        });
	        CAROUSEL_CURRENT_PAGE -= 1;

	        $('#right_scroll').removeClass('carouselButtonArrowDisabled');
	        if (CAROUSEL_CURRENT_PAGE == 0)
	        	$('#left_scroll').addClass('carouselButtonArrowDisabled');
    	}
    });
});