// JavaScript Document
var gap = 200;
var speed = 200;
$(document).ready(function(){
	$images = $(".img_product");
	//alert($images.length);
	/*$("#container").css({
		overflow: 'scroll',
		border: '1px solid gray'
	});*/
	/*$("#ctrl_box img").css({
		opacity : 0		
	});
	$images.hover(function(){
									 $("#ctrl_box img").css('opacity', 0.8);
									 }, function(){
										 $("#ctrl_box img").css('opacity', 0);
									 });
	$("#ctrl_box img").hover(function(){
									  $(this).css('opacity', 0.8);
									  }, function(){
										  $(this).css('opacity', 0);
									  });*/
	$(".img_product").css({
		position: 'absolute',
		float:'none',
		left: 1000+'px'
	});	
	$(".img_product:eq(0)").css('left', 0);
	$(".img_product:eq(1)").css('left', gap);
	$(".img_product:eq(2)").css('left', 2*gap);
});


function float_left(){
	var $contents = $(".img_product");
	var cnt = $contents.length;
	
	$contents.eq(0)
	.animate({
		left: -gap+'px'
	}, speed);
	$contents.eq(1)
	.animate({
		left: 0 + 'px'
	}, speed);
	$contents.eq(2).
	animate({
		left: gap+'px'
	}, speed);
	$contents.eq(3).css('left', 3*gap+'px').animate({
		left: 2*gap+'px'
	}, speed);
	$contents.eq(0).appendTo($("#featured2"));	
};

function float_right(){
	var $contents = $(".img_product");
	var cnt = $contents.length;
	
	$contents.eq(0)
	.animate({
		left: gap+'px'
	}, speed);
	$contents.eq(cnt-1)
	.css('left', -gap+'px')
	.animate({
		left: 0 + 'px'
	}, speed);
	/*$contents.eq(cnt-2)
	.css('left', -2*gap+'px')
	.animate({
		left: -gap + 'px'
	}, speed);
	$contents.eq(cnt-3)
	.css('left', -3*gap+'px')
	.animate({
		left:  -2*gap + 'px'
	}, speed);*/
	$contents.eq(1).animate({
		left: 2*gap + 'px'
	}, speed);
	$contents.eq(2).animate({
		left: 3*gap + 'px'
	}, speed);
	//.css('left', gap * 2+'px');
	$contents.eq(cnt-1).prependTo($("#featured2"));
	//$contents.eq(2).prependTo($("#featured2"));
};