$(document).ready(function()
{


	var hoverBox;
	var originalPosition;


	function drop()
	{
		$('.box').unbind('mouseenter');
		
		hoverBox = $(this);
		
		hoverBox.css('background-image','url(/images/box_bg_h.png)');
		
		$('.box').stop(true,true);
		hoverBox.stop(true,true);
		$('#drop-' + hoverBox.attr('id')).stop(true,true);
		
		if(hoverBox.attr('id') == 'box_1')originalPosition = 0;
		if(hoverBox.attr('id') == 'box_2')originalPosition = 240;
		if(hoverBox.attr('id') == 'box_3')originalPosition = 480;
		if(hoverBox.attr('id') == 'box_4')originalPosition = 720;
		
		$('.box').each(function(index,element)
		{
			if(hoverBox.attr('id') != $(this).attr('id'))$(this).fadeOut();
		});
		
		$(this).animate({'left':0});
		
		$('#drop_' + hoverBox.attr('id')).fadeIn();
	}
	

	//Box Drop
	$('div.box').mouseenter(drop);

	$('#boxes').mouseleave(function()
	{
		$('.box').stop(true,true);
		hoverBox.stop(true,true);
		$('#drop_' + hoverBox.attr('id')).stop(true,true);
		
		hoverBox.animate({'left':originalPosition});
		$('#drop_' + hoverBox.attr('id')).fadeOut(function()
		{
			$('.box').fadeIn();
		});
		
		$('.box').css('background-image','');
		
		$('div.box').mouseenter(drop);	
		
	});

});