$(function() {
	$("#snapshot-view").click(function() {
		if ($("#snapshot-content").is(":hidden")) {
			$("#snapshot-content").slideDown(800);
			$("#snapshot-view").text("Close Project Snapshot");
			stopLoop();
		} else {
			$("#snapshot-content").slideUp(600);
			$("#snapshot-view").text("View Project Snapshot");
			startLoop();
		}
		return false;
	});
});


/*** Display client name, description, and snapshot image ***/
function displayCurrentClient() {
	$("#client-name").html('<a href="client.php?id='+clients[currentClient]['id']+'">'+clients[currentClient]['name']+'<\/a>');
	$("#snapshot-desc").html(clients[currentClient]['snapshotDesc']);
	$("#snapshot-image").html('<img src="images/clients/'+clients[currentClient]['id']+'/'+clients[currentClient]['snapshotImage']+'" alt="" />');
	$("#snapshot-portfolio").attr('href','client.php?id='+clients[currentClient]['id']);
}

var clients = new Array();	/* Array to store client info */
var currentClient = 0;		/* Traversing - current */
var nextClient = 1;			/* Traversing - next */
var prevClient;				/* Traversing - previous */
var t = null;				/* Timer */
var speed = 15000;			/* Speed of loop in milliseconds */
var busy = false;			/* To check if fading is in progress */

/*** Start loop timer ***/
function startLoop() {
	if (t==null) {
		t = setTimeout(function() { getNextClient() },speed);
	} else {
		stopLoop();
		startLoop();
	}
}

/*** Stop loop timer ***/
function stopLoop() {
	clearTimeout(t);
	t=null;
}

/*** Get next client to display ***/
function getNextClient() {
	busy=true;	/* Fading in progress */
	var oldCurrentClient = currentClient; /* Set local variable of current client */
	
	/* If next client image has not loaded, display ajax loader icon, else hide */
	if ($("#index-bg"+nextClient).find("img").length==0)
		$("#ajax_loader").show();
	else
		$("#ajax_loader").hide();
		
	$("#index-bg"+nextClient).show();	/* Display next client div to fade into */
	
	/* Update positions */
		prevClient = currentClient;
		currentClient = nextClient;
		if (nextClient>=clients.length-1)
			nextClient=0;
		else
			nextClient++;
			
	displayCurrentClient();	/* Display client name, snapshot description, and snapshot image */
	
	$("#index-bg"+prevClient).fadeOut("normal",function() { /* Fade out client */

		$("#index-bg"+currentClient).css('z-index','2');	/* Current client to front */
		$("#index-bg"+prevClient).css('z-index','1');		/* Previous client to back */
		
		if ($("#bg-list").find("#index-bg"+nextClient).length==0) { /* If next client div is not in DOM */
			/* Add next client div to DOM */
			var clientDiv = '<div id="index-bg'+nextClient+'" class="index-bg"><\/div>';
			$("#index-bg"+currentClient).after(clientDiv);
			
			/* Load image for next client */
			var src = 'images/clients/'+clients[nextClient]['id']+'/'+clients[nextClient]['image'];
			var i = new Image();
			var oldNextClient = nextClient;
			i.onload = function() {
				$("#index-bg"+oldNextClient).append(i);
				if ($("#index-bg"+oldNextClient).is(":visible")) {	/* If loaded client is visible, hide ajax loader icon */
					$("#ajax_loader").hide();
				}
				/* If snapshot is hidden and the next client is the same before and after loading the image (the positions have not changed), start loop */
				if ($("#snapshot-content").is(":hidden") && oldNextClient == nextClient)
					startLoop();
			}
			i.src = src;
		} else {
			/* If snapshot is hidden and the current client image has loaded, start loop */
			if ($("#snapshot-content").is(":hidden") && $("#index-bg"+currentClient).find("img").length>0)
				startLoop();
		}

		busy=false;	/* Fading ended */
	});
}

/*** Get previous client to display ***/
function getPrevClient() {
	busy=true;	/* Fading in progress */
	var oldCurrentClient = currentClient;	/* Set local variable of current client */
	
	/* If previous client image has not loaded, display ajax loader icon, else hide */
	if ($("#index-bg"+prevClient).find("img").length==0)
		$("#ajax_loader").show();
	else
		$("#ajax_loader").hide();
		
	if ($("#bg-list").find("#index-bg"+prevClient).length==0) {	/* If previous client div is not in DOM */
		/* Add previous client div to DOM */
		var clientDiv = '<div id="index-bg'+prevClient+'" class="index-bg"><\/div>';
		$("#index-bg"+currentClient).before(clientDiv);
		
		/* Load image for previous client */
		var src = 'images/clients/'+clients[prevClient]['id']+'/'+clients[prevClient]['image'];
		var i = new Image();
		var oldPrevClient = prevClient;
		i.onload = function() {
			$("#index-bg"+oldPrevClient).append(i);
			if ($("#index-bg"+oldPrevClient).is(":visible")) {	/* If the client is visible after loading, hide ajax laoder icon */
				$("#ajax_loader").hide();
			}
			/* If snapshot is hidden and the previous client is the same before and after loading the image (the positions have not changed), start loop */
			if ($("#snapshot-content").is(":hidden") && oldPrevClient == prevClient) 
				startLoop();
		}
		i.src = src;
	}
	$("#index-bg"+prevClient).show();	/* Display previous client div to fade into */
	
	/* Update positions */
		nextClient = currentClient;
		currentClient = prevClient;
		if (prevClient<=0)
			prevClient=clients.length-1;
		else
			prevClient--;
			
	displayCurrentClient();	/* Display client name, snapshot description, and snapshot image */
	
	$("#index-bg"+nextClient).fadeOut("normal",function() {	/* Fade out current client */
		$("#index-bg"+currentClient).css('z-index','2');	/* Current client to front */
		$("#index-bg"+nextClient).css('z-index','1');	/* Next client to back */
		busy=false;	/* Fading ended */
	});
	if ($("#snapshot-content").is(":hidden"))	/* If snapshot is hidden, start loop */
		startLoop();
}

$(function() {
	$.get("ajax/ajax_get_clientlist.php",
		function(xml) {
			/* Fill client array */
			var clientList = $("clientList",xml);
			$("client",clientList).each(function(i) {
				clients[i] = new Array();
				clients[i]["id"] = $("id",this).text();
				clients[i]["name"] = $("name",this).text();
				clients[i]["image"] = $("image",this).text();
				clients[i]["snapshotDesc"] = $("snapshotDesc",this).text();
				clients[i]["snapshotImage"] = $("snapshotImage",this).text();
			});
			
			prevClient = clients.length-1;	/* Set previous client to last */
			
			/* Add second client to DOM */
			var clientDiv = '<div id="index-bg1" class="index-bg"><\/div>';
			$("#bg-list").append(clientDiv);
			
			/* Load image for second client */
			var src = 'images/clients/'+clients[1]['id']+'/'+clients[1]['image'];
			var i = new Image();
			i.onload = function() {
				$("#index-bg1").append(i);
				if ($("#snapshot-content").is(":hidden"))	/* If snapshot is hidden, start loop */
					startLoop();
				$("#ajax_loader").hide();	/* Hide ajax loader icon */
			}
			i.src = src;
		},
		'xml'
	);
	
	/*** Next client clicked ***/
	$("#client-nav-next").click(function() {
		if (!busy) {			/* If no fading in progress, stop loop and get next client */
			stopLoop();
			getNextClient();
		}
		return false;
	});
	
	/*** Previous client clicked ***/
	$("#client-nav-back").click(function() {
		if (!busy) {			/* If no fading in progress, stop loop and get previous client */
			stopLoop();
			getPrevClient();
		}
		return false;
	});
});