$(document).ready(function() {
	
	/*$("#content-right").css( {
				visibility : 'visible',
				paddingTop : '20px'
	});
	$('#load-images').removeClass('waiting');*/
	var firstImage = $('#carousel_ul li:first a img').attr('src');
	$('#main-image').html('<img src="'+firstImage+'" />');
	$('#carousel_ul li a img').click(function() {
		$("#main-image").html('<img src="'+($(this).attr('src'))+'" />');										  
	});
	
	//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  
        $('#right_scroll img').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_width = $('#carousel_ul li').outerWidth() + 10;  
  
            //calculate the new left indent of the unordered list  
            var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;  
  
            //make the sliding effect using jquery's anumate function '  
            $('#carousel_ul').animate({'left' : left_indent},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' : '-90px'});  
            });  
        });  
  
        //when user clicks the image for sliding left  
        $('#left_scroll img').click(function(){  
  
            var item_width = $('#carousel_ul li').outerWidth() + 10;  
  
            /* 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')) + item_width;  
  
            $('#carousel_ul').animate({'left' : left_indent},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' : '-90px'});  
            });  
  
        });  
	$("a.grouped_elements").fancybox({
			'transitionIn'	:	'fade',
			'transitionOut'	:	'fade',
			'speedIn'		:	600, 
			'speedOut'		:	200, 
			'overlayShow'	:	true
	});
	
	$('#datepicker').datepicker({ 
		beforeShowDay: $.datepicker.noWeekends,
		dateFormat: 'D d M yy', 
		minDate: +1, maxDate: '+1Y', 
		showAnim: 'blind', 
		duration: 1000 
	});
	
});