$("#video_next").live("click", slideRight);
$("#video_prev").live("click", slideLeft);

$("#video_next a").show();

var slideIndex	=	0;		// slideIndex*viewportW = slideX
var slideX		=	0;		// Current X position
var viewportW	=	924;	// Width of viewport
var nextMargin	=	12;		// Margin between "viewports", so nextMargin*slideIndex is added.
var perViewport	=	4;		// items each viewport
var videos		=	$("#thumbs ul li").size();
var maxIndex	=	Math.ceil(videos/perViewport)-1;	// -1 for 0 based index

$("#display #video_t").html(videos);
$("#display #video_s").html("1");
$("#display #video_e").html(perViewport);
$("#display").show();

function slideRight() {
	if (slideIndex < maxIndex) {
		slideIndex++;
	goSlide();
	}
	return false;
}
function slideLeft() {
	if (slideIndex > 0) {
		slideIndex--;
	goSlide();
	}
	return false;
}

function goSlide() {
	if (maxIndex == slideIndex) {
		$("#video_next a").hide();
	}
	if (slideIndex == 0) {
		$("#video_prev a").hide();
	}
	if ((slideIndex > 0) && (slideIndex <= maxIndex)) {
		$("#video_prev a").show();
	}
	if ((slideIndex >= 0) && (slideIndex < maxIndex)) {
		$("#video_next a").show();
	}
	updateDisplay();
	slideX = slideIndex * (viewportW + nextMargin);
	//$("#thumbs ul").css("marginLeft", "-"+slideX+"px");
	$("#thumbs ul").animate({ marginLeft: "-"+slideX+"px" }, { duration: 600, queue: false });
}
function updateDisplay() {
	$("#display #video_s").html(slideIndex * perViewport+1);
	$("#display #video_e").html(slideIndex * perViewport+perViewport);
}