// JavaScript Document

var pageOverlay = {
	
	target: null,
	index: 0,
	url: null, // 'http://cccstyled.q30stage.com/components/handleCaseStudy.php', // default for testing
	
	fixTargetLayer: function(){
		
		if(typeof document.body.style.maxHeight != "undefined"){
			
			// we have a new browser
			
		}else{
			
			// we probably have 1e 6 or lower
			
		}
		
	},
	
	createBackgroundLayer: function(){
		
		var editLayer = document.createElement("div");
		editLayer.setAttribute("id","pageOverlay");
	
		document.getElementById(this.target).appendChild(editLayer);
		document.getElementById("pageOverlay").className = "pageOverlay";
		
		delete editLayer;
		
		
	},
	
	createContentLayer: function(){
		
		// grab content via agax (use stand in for now)
		
		var editLayer = document.createElement("div");
		editLayer.setAttribute("id","pageOverlayContent");
	
		document.getElementById("pageOverlay").appendChild(editLayer);
		document.getElementById("pageOverlayContent").className = "pageOverlayContent";
		
		// add background layer
		
		var editLayer = document.createElement("div");
		editLayer.setAttribute("id","pageOverlayBackground");
	
		document.getElementById("pageOverlay").appendChild(editLayer);
		document.getElementById("pageOverlayBackground").className = "pageOverlayBackground";
		
		delete editLayer;
		
		// horizon
		
		var editLayer = document.createElement("div");
		editLayer.setAttribute("id","horizon");
	
		document.getElementById("pageOverlayContent").appendChild(editLayer);
		document.getElementById("horizon").className = "horizon";
		
		delete editLayer;
		
		// horizon content
		
		var editLayer = document.createElement("div");
		editLayer.setAttribute("id","horizonContent");
	
		document.getElementById("horizon").appendChild(editLayer);
		document.getElementById("horizonContent").className = "horizonContent";
		
		delete editLayer;
		
		var editLayer = document.createElement("div");
		editLayer.setAttribute("id","contentOverlay");
		
		document.getElementById("horizonContent").appendChild(editLayer);
		
		/*
		
		var html = "";
		
		html += "<div align=\"right\"><input type=\"button\" name=\"close_btn\" id=\"close_btn\" value=\"close\" onClick=\"pageOverlay.closeOverlay('" + this.target + "');\" /></div>\n";
		
		html += "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pulvinar justo sit amet dui. Donec sodales est sed lorem. Quisque tellus nisi, rhoncus et, scelerisque ullamcorper, venenatis convallis, erat. Pellentesque eu ante quis nibh tempor faucibus. Duis porttitor neque eu magna. Donec at nunc nec nunc ultricies laoreet. Nullam facilisis, orci id semper posuere, lectus tortor convallis diam, id fermentum sapien mauris ac magna. Etiam vitae erat sit amet lacus ullamcorper semper. Pellentesque turpis. Morbi non mi. Praesent sed lectus at nunc elementum consectetuer. Ut id ante et ligula eleifend volutpat. Sed blandit quam quis diam. Phasellus scelerisque dignissim diam. In non turpis. Nunc malesuada, neque ac sagittis convallis, nibh elit lacinia neque, non dictum ligula urna vitae orci.</p>";
		
		document.getElementById("contentOverlay").innerHTML = html;
		
		*/
		
		document.getElementById("contentOverlay").className = "contentOverlay";
		
	},

	clearOverlayTarget: function(obj){
		
		var obj = obj || this.target;
		
		while(document.getElementById(obj).firstChild){
			
			document.getElementById(obj).removeChild(document.getElementById(obj).firstChild);
			
		}
		
	},
	
	createOverlay: function(target, index){
		
		this.url = String(location.href).split(String(location.pathname))[0];
	
		if(this.url != "http:"){
			
			this.url += '/components/handleCaseStudy.php';
			
		}else{ // we are at root level
			
			this.url = 'components/handleCaseStudy.php';
			
		}
		
		this.target = target;
		this.index = index || 0;
		
		this.fixTargetLayer();
		this.createBackgroundLayer();
		this.createContentLayer();
		
		// fill content
		
		this.getContent(this.index); // default
		
	},
	
	closeOverlay: function(obj){
		
		this.clearOverlayTarget(obj);
		
	},
	
	/* functions, controls for case studies */
	
	nextCaseStudy: function(){

		this.xmlHttp = this.GetXmlHttpObject(); // make HTTP Request
	
		if(this.xmlHttp == null){
			alert("Browser does not support HTTP Request")
			return;
		}
		
		var getURL = this.url + "?index=" + this.index + "&next=1";
		
		this.xmlHttp.onreadystatechange = pageOverlay.populateContent; // set listener
		this.xmlHttp.open("GET", getURL, true);
		this.xmlHttp.send(null);
		
	},
	
	previousCaseStudy: function(){
		
		this.xmlHttp = this.GetXmlHttpObject(); // make HTTP Request
	
		if(this.xmlHttp == null){
			alert("Browser does not support HTTP Request")
			return;
		}
		
		var getURL = this.url + "?index=" + this.index + "&previous=1";
		
		this.xmlHttp.onreadystatechange = pageOverlay.populateContent; // set listener
		this.xmlHttp.open("GET", getURL, true);
		this.xmlHttp.send(null);
		
	},
	
	selectCaseStudy: function(index){
		
		this.index = index;
		
		this.getContent(this.index);
		
	},
	
	/* AJAX FUNCTIONS */
	
	GetXmlHttpObject: function(){
		
		var xmlHttpRequest = null;
		
		try {
			
			// Firefox, Opera 8.0+, Safari
			
			xmlHttpRequest = new XMLHttpRequest();
			
		}
		
		catch(e) {
			
			// Internet Explorer
			
			try {
				
				xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
				
			}
			
			catch (e){
				
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
				
			}
			
		}
		
		return xmlHttpRequest;
		
	},
	
	getContent: function(index){
		
		this.index = index;
		this.xmlHttp = this.GetXmlHttpObject(); // make HTTP Request
	
		if(this.xmlHttp == null){
			alert("Browser does not support HTTP Request")
			return;
		}
		
		var splitURL = String(location.href).split(String(location.pathname))[0] + '/components/handleCaseStudy.php';
		
		var getURL = this.url + "?index=" + this.index;
		
		this.xmlHttp.onreadystatechange = pageOverlay.populateContent; // set listener
		this.xmlHttp.open("GET", getURL, true);
		this.xmlHttp.send(null);
		
		// scroll page to top
		
		window.scrollTo(0, 0);
			
	},
	
	populateContent: function(){
		
		// content
		
		if(pageOverlay.xmlHttp.readyState == 4 || pageOverlay.xmlHttp.readyState == "complete"){
			
			// document.getElementById("contentOverlay").innerHTML = pageOverlay.xmlHttp.responseText;
			
			document.getElementById("contentOverlay").innerHTML = pageOverlay.formatOutputAsHTML(pageOverlay.xmlHttp.responseXML.documentElement);
			
			pageOverlay.xmlHttp = null;
			
		}
		
	},
	
	formatOutputAsHTML: function(xmlDoc){
		
		var outputHTML = "";
		
		$image = xmlDoc.getElementsByTagName("image")[0].childNodes[0].nodeValue;
		$company = xmlDoc.getElementsByTagName("company")[0].childNodes[0].nodeValue;
		$service = xmlDoc.getElementsByTagName("services_provided")[0].childNodes[0].nodeValue;
		$description = xmlDoc.getElementsByTagName("description")[0].childNodes[0].nodeValue;
		 
		/* COLUMN 1 */
		
		outputHTML += '<div id="caseStudyContent">' + "\n";
		outputHTML += '<div class="col_1">' + "\n";
		outputHTML += '<div class="title"><img src="../images/overlay_case_study.gif" border="0" /></div>' + "\n";
		outputHTML += '<div class="image">' + "\n";
		
		outputHTML += '<img src="../images/tombstones/' + $image + '" border="0" />' + "\n";
		
		outputHTML += '</div>' + "\n";
		outputHTML += '</div>' + "\n";
		
		/* COLUMN 2 */
		
		outputHTML += '<div class="col_2">' + "\n";
		outputHTML += '<div class="controls">' + "\n";
		
		outputHTML += '<a href="javascript: pageOverlay.previousCaseStudy();"><img src="../images/overlay_previous.gif" border="0" /></a>' + "\n";
		outputHTML += '<a href="javascript: pageOverlay.nextCaseStudy();"><img src="../images/overlay_next.gif" border="0" /></a>' + "\n";
		outputHTML += '<a href="javascript: pageOverlay.closeOverlay();"><img src="../images/overlay_close.gif" border="0" /></a>' + "\n";
		
		outputHTML += '</div>' + "\n";
		outputHTML += '<div class="content">' + "\n";
				
		outputHTML += '<h2>Company</h2>' + "\n";
		outputHTML += '<p>' + $company + '</p>' + "\n";
				  
		outputHTML += '<h2>Services Provided</h2>' + "\n";
		outputHTML += '<p><u>' + $service + '</u></p>' + "\n";
					
		outputHTML += '<h2>DESCRIPTION</h2>' + "\n";
		outputHTML += '<p>' + $description + '</p>' + "\n";
				
		outputHTML += '</div>' + "\n";
		outputHTML += '<div class="reference">' + "\n";
		
		// add numbers
		
		outputHTML += '<ul class="numbers">' + "\n";
		
		// outputHTML += '<li>' + xmlDoc.getElementsByTagName('number').length + '</li>' + "\n";
		
		for(q=0;q<xmlDoc.getElementsByTagName('number').length;q++){
			
			var element = xmlDoc.getElementsByTagName('number')[q];
			
			// outputHTML += '<li>' + element.attributes[0].value + '</li>' + "\n";
			
			if(element.attributes[0].value == "true"){
				
				outputHTML += '<li><span class="active">' + element.childNodes[0].nodeValue + '</span></li>' + "\n";
				
				this.index = parseInt(element.attributes[1].value);
				
			}else{
				
				outputHTML += '<li><a href="javascript: pageOverlay.selectCaseStudy(\'' + element.attributes[1].value + '\');">' + element.childNodes[0].nodeValue + '</a></li>' + "\n";
				
			}
			
		}
		
		outputHTML += '</ul>' + "\n";
				
		outputHTML += '</div>' + "\n";
		outputHTML += '</div>' + "\n";
		outputHTML += '</div>' + "\n";
		
		return outputHTML;
		
	}

}

/* proxy function for flash */

function createOverlay(index){
	
	pageOverlay.createOverlay('overlay', index)
	
}

/* underline links */

function underlineLink(startNode){

	// process links
	
	var node = document.getElementById(startNode);
	
	var nodeLink = node.getElementsByTagName("a");
	
	for(q=0;q<nodeLink.length;q++){
		
		if(nodeLink[q].href == location.href){
		
			nodeLink[q].style.textDecoration = "underline";
			
		}
		
	}
	
}

function activeNav(startNode){

	// process links
	
	var node = document.getElementById(startNode);
	
	var nodeLink = node.getElementsByTagName("a");
	
	for(q=0;q<nodeLink.length;q++){
		
		var loc = location.pathname.split("/")[1];
		var lnk = String(nodeLink[q].rel).split("/")[1];
		
		if(loc == lnk){
		
			nodeLink[q].className = "activelink";
			
		}
		
	}
	
}

/* pop up window */

var siteextern = null;

function popup(width, height, url){
	if(!siteextern || siteextern.closed){
		var popupwidth = width;
		var popupheight = height;
		var xpos = (screen.availWidth-popupwidth)/2;
		var ypos = (screen.availHeight-popupheight)/2;
		siteextern = window.open(url, "popupextern", "width="+popupwidth+",height="+popupheight+",screenX="+xpos+",screenY="+ypos+",scrollbars=1,status=0");
		siteextern.resizeTo(popupwidth, popupheight);
		siteextern.moveTo(xpos, ypos);
		siteextern.resizeTo(popupwidth, popupheight);
	}else{
		siteextern.location = url;
	}
	siteextern.focus();
}