/****************** 
This is a model of the DOM output for each client object 
<div id="popContentContainer1" style="display: block;">
	<div class="contentHeader">
		<div class="contentHeaderText">Client: [CLIENT NAME HERE]</div>
		<div class="contentHeaderNav">
			<a id="link1_1" class="locked" href="javascript: loadMedia('1')">1</a>
			<a id="link1_2" class="" href="javascript: loadMedia('2')">2</a>
		</div>
	</div>
	<div class="contentMediaContainer">
		<span id="c1_media1" style="display: inline;">
			<img src="[MEDIA PATH HERE]"/>
		</span>
		<span id="c1_media2" style="display: none;">
			<img src="[MEDIA PATH HERE]"/>
		</span>
	</div>
	<div id="contentDescription1">
		<div id="caption1_1" style="display: inline;">[CONTENT DESC HERE]</div>
		<div id="caption1_2" style="display: none;"/>
	</div>
</div>
******************/
var req;
var activeClientId;
var clientArray = new Array();
var isPopVisible = false;
var onPop = false;

/*****************************************
FUNCTION: loadXMLDoc()
******************************************/
function loadXMLDoc(url) {
	// add unique timestamp to ensure XML file isn't cached by the browser
	url = url + "?timestamp=" + new Date().getTime();
	
	// branch for native XMLHttpRequest object
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
		req.onreadystatechange = processReqChange;
		req.open("GET", url, true);
		req.send(null);
	// branch for IE/Windows ActiveX version
	} else if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");
		if (req) {
			req.onreadystatechange = processReqChange;
			req.open("GET", url, true);
			req.send();
		}
	} else {
	// The browser cannot support dynamic loading - say so
		alert("Your browser does not accept dynamic loading");
	}
}

/*****************************************
FUNCTION: processReqChange()
******************************************/
function processReqChange() {
	// only if req shows "loaded"
	if (req.readyState == 4) {
	// only if "OK"
		if (req.status == 200) {
			// ...processing statements go here...
			buildClientData();
		} else {
			// We had an error - keep the element disabled and write an error
			alert("Sorry, we had an error trying to load the client data");
		}
	}
}

/*****************************************
FUNCTION: buildClientData()
******************************************/
function buildClientData() {
	var clients = req.responseXML.getElementsByTagName("client");
	
	// build client objects and place them into the clientArray[]
	for (var i=0; i<clients.length; i++) {
		var clientId = getSubNodeValue(clients[i], "id");
		var clientName = getSubNodeValue(clients[i], "name");
		
		var clientMediaNode = clients[i].getElementsByTagName("media");
		var mediaArray = new Array();
		if (clientMediaNode.length >=1) {
			var clientMediaRef = clientMediaNode[0].getElementsByTagName("item");
			if (clientMediaRef.length >=1) {
				for (var j=0; j<clientMediaRef.length; j++) {
					//create multi-dimensional array with array[x][0] = path and array[x][1] = caption and array[x][2] = type
					mediaArray[j] = [getSubNodeValue(clientMediaRef[j], "path"), getSubNodeValue(clientMediaRef[j], "caption"), getSubNodeValue(clientMediaRef[j], "type")];
				}
			}
		}
		
		clientArray[i] = new clientObj(clientId, clientName, mediaArray);
	}
	
	// take the client objects out of the clientArray[] and build the DOM
	for (i=0; i<clientArray.length; i++) {
		var inPopContent = document.getElementById("popContent");
		
		var inPopContentContainerDiv = document.createElement("div");
		var inPopContentContainerDivId = "popContentContainer" + clientArray[i].clientId;
		inPopContentContainerDiv.setAttribute("id", inPopContentContainerDivId);
		
		var content = "";
		content = content + '<div class="contentHeader">';
			content = content + '<div class="contentHeaderText">Client: ' + clientArray[i].clientName + '</div>';
			content = content + '<div class="contentHeaderNav">';
			
				if (clientArray[i].mediaArray.length > 1){
					for (j=0; j<clientArray[i].mediaArray.length; j++) {
						content = content + '<a href="javascript: loadMedia(\'' + (j + 1) + '\')" id="link' + (i + 1) + '_' + (j + 1) + '">' + (j + 1) + '</a>';
					}
				}
			
			content = content + '</div>';
		content = content + '</div>';
		content = content + '<div class="contentMediaContainer">';
		
			if (clientArray[i].mediaArray.length >= 1){
				for (j=0; j<clientArray[i].mediaArray.length; j++) {
					content = content + '<span id="c' + (i + 1) +'_media' + (j + 1) + '"';
					if(j>0){ content = content + ' style="display:none;"';}
					content = content + '>';
					
					if (clientArray[i].mediaArray[j][2] == 'image'){
						content = content + '<img src="' + clientArray[i].mediaArray[j][0] + '" />';
					} else {
						content = content + '<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="' + clientArray[i].mediaArray[j][0] + '" /><embed src="' + clientArray[i].mediaArray[j][0] + '" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object>';
					}

					content = content + '</span>';					
				}
			}
			
		content = content + '</div>';
		content = content + '<div id="contentDescription' + clientArray[i].clientId + '">';
		
			for (j=0; j<clientArray[i].mediaArray.length; j++) {
				content = content + '<div id="caption' + (i+1) +'_' + (j + 1) + '"';
				if(j>0){ content = content + ' style="display:none;"';}
				content = content + '>' + clientArray[i].mediaArray[j][1] + '</div>';
			}
		
		content = content + '</div>';
		
		if (inPopContentContainerDiv != null){
			inPopContentContainerDiv.innerHTML = content;
			inPopContentContainerDiv.style.display = "none";
		}
		inPopContent.appendChild(inPopContentContainerDiv);
	}
	
	// define onclick and onmousedown event handlers
	document.onclick = onClickInit;
	document.getElementById('popContainer').onmousedown = onMouseDownPop;
	document.getElementById('close').onmousedown = popToggle;
}

/*****************************************
FUNCTION: clientObj()
// Object to easily store client attributes
******************************************/
function clientObj(clientId, clientName, mediaArray) {
	this.clientId = clientId;
	this.clientName = clientName;
	this.mediaArray = mediaArray;
}

/*****************************************
FUNCTION: getSubNodeValue()
******************************************/
function getSubNodeValue(node, tagname) {
	var subNode = node.getElementsByTagName(tagname);
	if (subNode[0] != null) {
		if(subNode[0].firstChild != null) {
			return subNode[0].firstChild.nodeValue;
		}
	}
	return "";
}

/*****************************************
FUNCTION: loadPop()
******************************************/
function loadPop(id) {
	var ref = "popContentContainer" + id;
	
	// hide all data
	for (i=0; i<clientArray.length; i++) {
		var clientArrayRefId = "popContentContainer" + (i + 1);
		var clientArrayRef = document.getElementById(clientArrayRefId);
		clientArrayRef.style.display = "none";
	}
	
	if (clientArray[id - 1].mediaArray != null){
		for (j=0; j<clientArray[id - 1].mediaArray.length; j++) {		
			var media_id = "c" + id  + "_media" + (j + 1);
			var media_ref = document.getElementById(media_id);
			media_ref.src = clientArray[id-1].mediaArray[j][0];
		}
	}
	
	// show chosen data
	document.getElementById(ref).style.display = "block";
	
	activeClientId = id;
	resetActiveClient();
	popToggle();
}

/*****************************************
FUNCTION: loadMedia()
******************************************/
function loadMedia(id) {
	var imgRef ="c" + activeClientId + "_media" + id;
	var imgCaptionRef = "caption" + activeClientId + "_" + id;
	var linkRef = "link" + activeClientId + "_" + id;
	var arrayRef = activeClientId - 1;

	// hide all data
	for (j=0; j<clientArray[arrayRef].mediaArray.length; j++) {
		var mediaArrayRef = "c" + activeClientId + "_media" + (j + 1);
		var mediaArrayCaptionRef = "caption" + activeClientId + "_" + (j + 1);
		var mediaArrayLinkRef = "link" + activeClientId + "_" + (j + 1);
		
		
		if (clientArray[arrayRef].mediaArray[j][0] != null || clientArray[arrayRef].mediaArray[j][0] != ''){
			document.getElementById(mediaArrayRef).style.display = "none";
			document.getElementById(mediaArrayCaptionRef).style.display = "none";
			
			if (clientArray[arrayRef].mediaArray.length > 1){
				//remove locked class from all nav links
				document.getElementById(mediaArrayLinkRef).className = "";
			}
		}
	}
	
	if (clientArray[arrayRef].mediaArray.length >= 1){
		//show chosen data
		document.getElementById(imgRef).style.display = "inline";
		document.getElementById(imgCaptionRef).style.display = "inline";
		
		if (clientArray[arrayRef].mediaArray.length > 1){
			//set nav link locked state
			document.getElementById(linkRef).className = "locked";
		}
	}
}

/*****************************************
FUNCTION: popToggle()
******************************************/
function popToggle() {
	var ref = document.getElementById("popContainer");
	if (isPopVisible){
		ref.style.display = "none";
		isPopVisible = false;
	} else {
		ref.style.display = "block";
		isPopVisible = true;
	}
}

/*****************************************
FUNCTION: resetActiveClient()
******************************************/
function resetActiveClient() {
	loadMedia('1');
}

/*****************************************
FUNCTION: onClickInit()
******************************************/
function onClickInit(e){
	if (isPopVisible) {
		if (onPop == false) popToggle();
	}
	onPop = false;
} 

/*****************************************
FUNCTION: onMouseDownPop()
******************************************/
function onMouseDownPop(e) {
	onPop = true;
}

/*****************************************
FUNCTION: addLoadEvent()
// Onload event handler
******************************************/
addLoadEvent( function() {
	// Call the function and add this XML document
	loadXMLDoc('/done/client_data.xml');
} );