$(document).ready(function(){
	var anchoSlide = 560;
	var numSlides = $('.slide').length;
	var currentSlide = 0;
	var movimiento = 0;
	
	$('#slideContainer').css('overflow', 'hidden');
	$('.slide').wrapAll('<div id="slideInner"></div>').css({ 'float' : 'left', 'width' : '560px'});
	$('#slider').prepend('<span class="control" id="leftControl">Left</span>').append('<span class="control" id="rightControl">Right</span>');
	$('#slideInner').css('width', anchoSlide * numSlides);
	hideControls(currentSlide);
	
	$('.control').bind('click',function(){
		movimiento = next(this);
		$('#slideInner').animate({
			'marginLeft' : movimiento
		});
		hideControls(currentSlide);
		//alert('mov: ' + movimiento + ' numslide: ' + currentSlide);
	});
	
	function hideControls(current){
		if(current == 0){
			$('#leftControl').hide();
		}else if(current == numSlides-1){
			$('#rightControl').hide();
		}else{
			$('#leftControl').show();
			$('#rightControl').show();
		}
	}
	
	function next(control){
		var mov = 0;
		if($(control).attr('id') == 'leftControl'){
			currentSlide--;
		}else{
			currentSlide++;
		}
		mov = currentSlide * (-anchoSlide);
		return mov;
	}
});