$(document).ready(function(){
    
    $("#viewable").css("overflow", "hidden");
    $("#viewable").css("height", 480);
    $("#movie").css("position", "absolute");
    
    total = $("#movie li").length;
    $("#movie").css("width", total*thumb);
    
    $("#viewable").after('<ul id="controls"><li class="first-child"><a href="#" id="prev">Предишна</a></li><li><a href="#" id="next">Следваща</a></li></ul>');
    
    $("#prev").click(function(e) {
    	 e.preventDefault();
    	 display("prev");
    });
    
    $("#next").click(function(e) {
    	 e.preventDefault();
    	 display("next");
    });
});

var current = 0;
var total = 0;
var thumb = 640;

function display(direction) {
	if(direction == "prev") {
		if(current == 0) {
			current = total-1;
		} else {
			current = current-1;
		}
	} else if(direction == "next") {
		if(current < total-1) {
			current = current+1;
		} else {
			current = 0;
		}
	} else {
		current = direction;
	}
	
	$("#movie").animate({left: 0-current*thumb}, 500);
}