var direction = 1; // Initially set direction

$(document).ready(function(){
	$(".controls").html("<a href='#' class='pauseScroll'></a><a href='#' class='playScroll'></a><a href='#' class='prevItem'></a><a href='#' class='nextItem'></a><a href='#' class='closeCopy'></a><a href='#' class='openCopy'></a>");					   	
	initNav();
});

function initNav()
{
	var api = $("div.scrollable").scrollable({ 								 
		loop: true, 
		size: 1, 
		clickable: false,
		keyboard: false,
		onBeforeSeek: function() {
			changeBackgroundImage(this.getPageIndex(),this.getPageAmount());
		},
		onSeek: function() {
			direction = 1;
			updateImg(this.getPageIndex(),this.getPageAmount());   
		},
		speed : 600
	}).circular().autoscroll({autoplay: false, api: true, interval: 8000});
	$("a.closeCopy").click(function() {
		$(".clientCopy-inner").slideUp("slow", api.play);
		$(".closeCopy").css("display", "none");
		$(".pauseScroll,.openCopy").css("display", "inline");
		return false;
    });
	$("a.openCopy").click(function() {
		$(".clientCopy-inner").slideDown("slow", api.stop);
		$(".closeCopy").css("display", "inline");
		$(".pauseScroll,.playScroll,.openCopy").css("display", "none");
		return false;
    });
    $("a.prevItem").click(function() {				
		direction = -1;
		api.prev();
		return false
    });
	$("a.nextItem").click(function(){
		api.next(); 
		return false;
    });
	$("a.pauseScroll").click(function(){
		api.stop();
		$(".pauseScroll").css("display", "none");
		$(".playScroll").css("display", "inline");
		return false;
	});
	$("a.playScroll").click(function(){
		api.play();
		$(".pauseScroll").css("display", "inline");
		$(".playScroll").css("display", "none");
		return false;
	});
	preloadNextImage(0,null);
}

function updateImg(clientId,totalClients) {
	var divId = "#client" + clientId;
	var url = $(divId).find(".clientImg").html();
	var wrap = $("#image_wrap").find("img");
	var img = new Image();     
	img.onload = function() {         
		wrap.fadeTo("fast", 1);         
		wrap.attr("src", url);      
	};     
	img.src = url;
	preloadNextImage(clientId,totalClients);
}

function getNextClientPath(clientId,totalClients){
	totalClients = (totalClients-1);
	if((clientId == totalClients) && (direction>0))
		clientId = 0;
	else if((clientId == 0) && (direction<0))
		clientId = totalClients;
	else 
		clientId+=direction;
	var divId = "#client" + (clientId);
	var url = $(divId).find(".clientImg").html();
	return url;
}

function preloadNextImage(clientId,totalClients) {
	var url = getNextClientPath(clientId,totalClients)
	var img = new Image();
	//img.onload = function() {
	//	alert('Loaded');	
	//}
	img.src = url;
}

function changeBackgroundImage(clientId,totalClients) {
	var url = getNextClientPath(clientId,totalClients);
	var wrap = $("#image_wrap");
	wrap.css("background", "url("+ url +")"); 
	wrap.find("img").fadeTo("slow", 0);
	var img = new Image();
	img.onload = function() {}
	img.src = url;
}