// JavaScript 

$(document).ready(function(){	
													 
	/* --- BEGIN  Carusel --- */													 
	var $spacing = 216;
	var $frames = new Array();
	var $opacity = 0.8;

	$('#carusel ul li').each(function(){
		$(this).css({'position' : 'absolute', 'display' : 'block', 'left' : '1000px'});
		$('img', $(this)).animate({'opacity' : $opacity});
		$frames.push($(this));
	});

	if($frames[0]) { $frames[0].css('left', 0); }
	if($frames[1]) { $frames[1].css('left', $spacing); }
	if($frames[2]) { $frames[2].css('left', $spacing * 2); }
	
	if($frames.length > 3) {
		$('#carusel .left').click(function(event){
			toLeft(event);
		});
		
		$('#carusel .right').click(function(event){
			toRight(event);
		});
	}
		
	var toLeft = function(event) {		
		$frames[0].animate({'left' : $spacing}, 'slow');
		$frames[1].animate({'left' : $spacing * 2}, 'slow');
		$frames[2].animate({'left' : $spacing * 3}, 'slow');
		$frames[$frames.length - 1]
			.css('left', -$spacing)
			.animate({'left' : 0}, 'slow', function(){
				$frames.unshift($(this));
				$frames.pop();
			});
					
		event.preventDefault();
	}
	
	var toRight = function(event) {										
		$frames[0]
			.animate({'left' : -$spacing}, 'slow', function(){
				$frames.push($(this));
				$frames.shift();																												
			});	
				
		$frames[1].animate({'left' : 0}, 'slow');
		$frames[2].animate({'left' : $spacing}, 'slow');
		$frames[3]
			.css('left', $spacing * 3)
			.animate({'left' : $spacing * 2}, 'slow');
		event.preventDefault();
	}	
	/* --- END Carusel --- */
	
	/* --- Begin image hint and opacity : 1 --- */											 													 													 
	$('#carusel li img').each(function(){
		if($(this).attr('alt')) {
			var $hint = $('<div></div>').addClass('hint');
			$('<p>' + $(this).attr('alt') + '</p>').appendTo($hint);
			$($hint).insertAfter($(this));
		}
	});
	
	$('#carusel li img').mouseover(function(){
		$(this).animate({'opacity' : 1});																					
		$(this).next().fadeIn();
	});
	
	$('#carusel li img').mouseout(function(){
		$(this).animate({'opacity' : $opacity});																				 
		$(this).next().fadeOut();		
	});
	/* --- END image hint opacity : 1 --- */
})