$(document).ready(function()
{
	// DEBUG
	//alert(list.outerWidth(true));
	
	var ul = $('.products');
	var list = $('.product');
	
	var position = 0;
	
	// Ul
	// Wrapper
	ul.css('width' , (list.outerWidth(true) * list.length));
	ul.wrap('<div class="products_wrapper" />');
	var wrapper = $('.products_wrapper');
	
	wrapper_setting = {
		width : list.outerWidth(true) + 'px',
		overflow : 'hidden'
	}
	
	wrapper.css(wrapper_setting);
	
	// Slider
	wrapper.wrap('<div class="products_slider" />');
	var slider = $('.products_slider');
	
	// Le damo el ancho de la lista para que flote en medio de su contendor
	// La posicion y el margen estan en la hoja de estilos
	slider.css('width' , list.outerWidth(true));
	
	slider.prepend('<a href="#" class="arrow" id="arrow_left" />')
	.append('<a href="#" class="arrow" id="arrow_right" />');
	
	// Mostramos las flechas
	displayArrow();
	
	// Onclick
	var arrow = $('.arrow');
	arrow.click(function(event) {
		event.preventDefault();
		postion = ($(this).attr('id') == 'arrow_right') ?  position++ : position--;
		
		ul.animate({marginLeft : -(list.outerWidth(true)*position)}, 'slow', function() {
			displayArrow();
		});
	});
	
	function displayArrow()
	{
		if(position == 0) { $('#arrow_left').hide("fast"); }
			else { $('#arrow_left').show("fast"); }
			
		if(position == list.length - 1) { $('#arrow_right').hide("fast"); }
			else { $('#arrow_right').show("fast"); }
	}
	
	
});