// JavaScript Document
var ajaxCallCompleted;
var request;
var workTimer;
var lastFile;

function displayClientLoader(element) {
				
	while (element.hasChildNodes()) {
		element.removeChild(element.lastChild);
	}
	
	var image = document.createElement("img");
	image.setAttribute("src", "assets/images/global/loader.gif");
	element.appendChild(image);
}

function grabFile(file) {
		
	lastFile = file;
	request = getHTTPObject();
	
	if(request) {
		displayClientLoader(document.getElementById("client-project"));
		request.onreadystatechange = function() {
			parseClientContentResponse(request);
		};
		request.open("GET", file, true);
		request.send(null);
		ajaxCallCompleted = false;
		workTimer = setTimeout("ajaxTimerExpired()", 60000);
		return true;
	} else {
		return false;
	}
}

function ajaxTimerExpired() {
	
	if(!ajaxCallCompleted) {
		
		request.onreadystatechange = function() {};
		request.abort();
		// Ajax call took too long, indicate to the user the service is unavailable
		document.getElementById("detail").innerHTML = "We apologize, but your request timed out. Click <a href='#' onclick='grabFile(lastFile);return false;'>here</a> to try again.";
		document.getElementById("detail").style.display ="";
	}
}
		
function parseClientContentResponse(request) {
	
	if(request.readyState == 4) {
		if(request.status == 200 || request.status == 304) {
			
			clearTimeout(workTimer);
			ajaxCallCompleted = true;
			
			var data = eval('('+request.responseText+')');
			var numberOfImagesToDisplay = data.work.totalNumberofScreenShots;
			var workTitle = data.work.workTitle;
			var workServiceType = data.work.workService;
			var workURL = data.work.workURL;
			var workBrief = data.work.workBrief;
			var workDisclaimer = data.work.disclaimer;
			var imagesToDisplay = data.work.screenShotPaths;
			var imagesHeight = data.work.imagesHeight;
						
			var clientContainer = document.getElementById("client-project");
			
			while(clientContainer.hasChildNodes()) {
				
				clientContainer.removeChild(clientContainer.lastChild);
			}
			
			var clientProjectName = document.createElement("dt");
			var clientImageWrapper = document.createElement("dd");
			var imageContainer = document.createElement("img");
			var imageNavWrapper = document.createElement("dd");
			var imageNavContainer = document.createElement("ol");
			var clientTitleLabel = document.createElement("dd");
			var serviceTypeLabel = document.createElement("dd");
			var clientLinkLabelWrapper = document.createElement("dd");
			var clientLinkLabel = document.createElement("a");
			var clientDescriptionWrapper = document.createElement("dd");
			var clientDescription = document.createElement("p");
			var clientDisclaimerWrapper = document.createElement("dd");
			var clientDisclaimer = document.createElement("p");
			
			var clientProjectNameText = document.createTextNode(workTitle);
			clientProjectName.appendChild(clientProjectNameText);
			
			clientImageWrapper.setAttribute("class", "image");
			clientImageWrapper.setAttribute("className", "image");
		
			clientImageWrapper.style.cssText = 'display: block; height:'+imagesHeight;
			clientImageWrapper.setAttribute("style", "display:block; height:"+imagesHeight);
				
			imageContainer.setAttribute("id", "imagePlaceHolder");
			imageContainer.setAttribute("src", imagesToDisplay[0]);							  
			clientImageWrapper.appendChild(imageContainer);
						
			imageNavWrapper.setAttribute("class", "navigation");
			imageNavWrapper.setAttribute("className", "navigation");

			imageNavContainer.setAttribute("id","client-project-nav");
			
			var imageNavLabelCounter = 1;
			
			for(var i=0; i < numberOfImagesToDisplay; i++) {
				
				var imageNavButton = document.createElement("li");
				
				imageNavButton.setAttribute("id","0"+imageNavLabelCounter);
				
				if(i == 0) {
					
					imageNavButton.setAttribute("class","selected");
					imageNavButton.setAttribute("className","selected");
				}
			
				var imageNavLink = document.createElement("a");
				
				imageNavLink.setAttribute('onclick', "rotateImageToDisplay('"+imagesToDisplay[i]+"', this.parentNode.getAttribute('id'));return false;");
								
				var imageNavText = document.createTextNode("0"+imageNavLabelCounter);
			
				imageNavLink.appendChild(imageNavText);
				imageNavButton.appendChild(imageNavLink);
				
				/*IE Hack to accept the navLink.setAttribute('onclick') handler*/
				imageNavLink.parentNode.innerHTML = imageNavLink.parentNode.innerHTML;
				
				imageNavContainer.appendChild(imageNavButton);
				
				imageNavLabelCounter++;
			}

			imageNavWrapper.appendChild(imageNavContainer);
						
			clientTitleLabel.setAttribute("class", "name");
			clientTitleLabel.setAttribute("className", "name");
			clientTitleLabel.appendChild(clientProjectNameText);
			
			var serviceTypeText = document.createTextNode(workServiceType);
			serviceTypeLabel.appendChild(serviceTypeText);

			if (workURL.length > 0) {
			
				serviceTypeLabel.setAttribute("class", "title");
				serviceTypeLabel.setAttribute("className", "title");
				
				var clientLinkText = document.createTextNode(workURL);
				clientLinkLabelWrapper.setAttribute("class", "link");
				clientLinkLabelWrapper.setAttribute("className", "link");
				clientLinkLabel.setAttribute("href", "http://"+workURL);
				clientLinkLabel.setAttribute("title", "Click to view the live project");
				clientLinkLabel.setAttribute("target","_blank");
				clientLinkLabel.appendChild(clientLinkText);
				clientLinkLabelWrapper.appendChild(clientLinkLabel);
			
			} else {
				
				serviceTypeLabel.setAttribute("class", "title last");
				serviceTypeLabel.setAttribute("className", "title last");
			}
			
				
			var clientDescriptionText = document.createTextNode(workBrief);
			clientDescriptionWrapper.setAttribute("class", "description");
			clientDescriptionWrapper.setAttribute("className", "description");
			clientDescription.appendChild(clientDescriptionText);
			clientDescriptionWrapper.appendChild(clientDescription);			

			if (workDisclaimer.length > 0) {
				
				var clientDisclaimerText = document.createTextNode(workDisclaimer);
				clientDisclaimerWrapper.setAttribute("class", "disclaimer");
				clientDisclaimerWrapper.setAttribute("className", "disclaimer");
				clientDisclaimer.appendChild(clientDisclaimerText);
				clientDisclaimerWrapper.appendChild(clientDisclaimer);
			}
			
			clientContainer.appendChild(clientProjectName);
			clientContainer.appendChild(clientImageWrapper);
			clientContainer.appendChild(imageNavWrapper);
			clientContainer.appendChild(clientTitleLabel);
			clientContainer.appendChild(serviceTypeLabel);
			clientContainer.appendChild(clientLinkLabelWrapper);
			clientContainer.appendChild(clientDescriptionWrapper);
			
			if (workDisclaimer.length > 0) {
				
				clientContainer.appendChild(clientDisclaimerWrapper);
			}
		} else {
			
			// Got a status other than 200/304, indicate to the user the service is unavailable
			document.getElementById("detail").innerHTML = "We apologize, but our portfolio gallery is currently unavailable";
			document.getElementById("detail").style.display ="";
		}
	}
}
	
function rotateImageToDisplay(path, anchorID) {
		
	new Effect.Fade('imagePlaceHolder');
	setTimeout("setNewImageSource('"+path+"')", 1400);
	setTimeout("new Effect.Appear('imagePlaceHolder')", 2000);
	
	var navContainer = document.getElementById("client-project-nav");
	
	var aNavTags = navContainer.getElementsByTagName("li");
	
	for(i = 0; i < aNavTags.length; i++) {
		
		aNavTags[i].setAttribute("class","");
		aNavTags[i].setAttribute("className","");
	}
	
	var currentSelectedNav = document.getElementById(anchorID);
	
	currentSelectedNav.setAttribute("class","selected");
	currentSelectedNav.setAttribute("className","selected");

}

function setNewImageSource(imageSource) {
	
	var imagePlacement = document.getElementById("imagePlaceHolder");
	
	imagePlacement.setAttribute("src", imageSource);
}