//setup the left to keep track of position
var left = 0;

jQuery(document).ready(function($){
	//initialize the container width
	var container_width = 0;
	
	//get the containers width'
	$("#video_container").find("ul").each(function(){
		container_width += $(this).outerWidth()+50;
	});
	
	//set the containers width
	$("#video_container").width(container_width);
});

function animate(direction){
	//check if it is animated
	if($("#video_container").is(":animated")){
		return false;
	}

	//get the ul width
	var ul_width = $("#video_container").find("ul:first").outerWidth();
	
	//go the direction
	switch(direction){
		case 'left':
			//check that it doesnt go past the start
			if($("#video_container").css("left") == "0px"){
				return false;
			} else {	
				//animate the container
				$("#video_container").animate({"left": "+="+ul_width+"px"}, "slow", function(){
					checkButtons('left');
				});
			}	
			break;
		
		case 'right':
			//initialize the total_width
			var total_width = 0;
			
			//get the total width
			$("#video_container").find("ul").each(function(){
				total_width += $(this).outerWidth();
			});
			
			//if the offset is greater than than the total_width dont move
			if($("#video_container").css("left") == (ul_width*3)-total_width+"px"){
				return false;
			} else {
				$("#video_container").animate({"left": "-="+ul_width+"px"}, "slow", function(){
					checkButtons('right');
				});
			}
			break;
	}
}

function checkButtons(direction){
	//set the variables needed
	var total_width = 0;
	var ul_width = $("#video_container").find("ul:first").outerWidth()-25;
	
	//add to the left
	if(direction == 'left'){
		left += ul_width;
	} else {
		left -= ul_width;
	}
	
	//get the number of ul's
	var total_ul = $("#video_container").children().size();
	
	//get the total width
	$("#video_container").find("ul").each(function(){
		total_width += $(this).outerWidth();
	});

	//check that it is at the last image row
	if(left-(ul_width*2) <= -total_width){
		$("#videos_next").css("display","none");
	} else {
		$("#videos_next").css("display","");
	}
	
	//check that it is at first image row
	if(left >= 0){
		$("#videos_prev").css("display","none");
	} else {
		$("#videos_prev").css("display","");
	}
	
}