/* 
========================================================================================================= CREDITS
Copyright 	: Copyright (c) 2008 JPL. All Rights Reserved.
Author(s) 	: Larry Daughenbaugh - ldaugh@jplcreative.com 
Date    	: 2/24/2009
Notes     	: JavaScript file for handling all things relative to modals.
            : Based off of a script created by Chris Campbell - http://particletree.com
            : Based off of an adapted script created by  Simon de Haan - http://blog.eight.nl
========================================================================================================= CHANGE LOG
Date		Name			Desc
---			---				---
========================================================================================================= BEGIN JAVASCRIPT
*/

/* ------------------------------------------------------------------------------ VARIABLES */

var browserInfo 	= navigator.userAgent.toLowerCase();	// browser info
var modalBase 		= "modal"; 								// name of the IDs used to activate the modals
var overlayDivId 	= "overlay"; 							// name of the Overlay Div that is created
var modalSuffix 	= "_open";								// suffix used to activate the modals

/* ------------------------------------------------------------------------------ USED PASSED STRING TO CHECK BROWSER TYPE AND OS */

function getType(str) {
	loc = browserInfo.indexOf(str) + 1;
	return loc;
}

/* ------------------------------------------------------------------------------ GET BROWSER TYPE */

function getBrowser() {
	if (getType("msie")) {
		return "Internet Explorer";
	} else if (getType("firefox")) {
		return "Firefox";
	} else if (getType("compatible")) {
		return "Netscape Navigator";
	} else if (getType("safari")) {
		return "Safari";
	} else if (getType("opera")) {
		return "Opera";
	} else if (getType("konqueror")) {
		return "Konqueror";
	} else if (getType("omniweb")) {
		return "OmniWeb";
	} else if (getType("webtv")) {
		return "WebTV";
	} else if (getType("icab")) {
		return "iCab";
	} else if (getType("webtv")) {
		return "WebTV";
	} else {
		return "Unknown";
	}
}

/* ------------------------------------------------------------------------------ GET OS TYPE */

function getOS() {
	if (getType("win")) {
		return "Windows";
	} else if (getType("mac")) {
		return "Mac";
	} else if (getType("x11")) {
		return "Unix";
	} else if (getType("linux")) {
		return "Linux";
	} else {
		return "Unknown";
	}
}


/* ------------------------------------------------------------------------------ MODAL OBJECT/CLASS */
/* init_modal should be called on page load witin the event-handlers.js file */
function init_modal() {
	/* CREATE NEW MODAL OBJECT AND ACTIVATE THE MODAL */
	function openModal() {
		var getHref = this.href.split("#");
		var whichModalToOpen = getHref[1];

		if (whichModalToOpen != "" && whichModalToOpen != null) {
			eval('new_' + this.id.replace(modalSuffix,"") + ' = new modal("' + whichModalToOpen + '",true);');
			eval('new_' + this.id.replace(modalSuffix,"") + '.activate();');
			return false;
		}
	}
	
	/* IF PAGE CONTAINS ANY MODALS, LOOP THROUGH AND ATTACH EVENT LISTENERS */
	var i = 0;
	if (document.getElementById(modalBase + i + modalSuffix) != "") {
		while(document.getElementById(modalBase + i + modalSuffix)) {
			document.getElementById(modalBase + i + modalSuffix).onclick = openModal;
			i++;
		}
	}

	/* CREATE OVERLAY DIV */
	var overlayDiv = document.createElement("div");
	overlayDiv.id = overlayDivId;
	document.getElementsByTagName('body')[0].appendChild(overlayDiv);

	/* OPEN MODAL VIA QUERYSTRING - example.html?modal=modal0 */
	var pageQuerystring = window.location.search;
	if (pageQuerystring != "") {
		var openModalQuery = pageQuerystring.indexOf("modal=");
		if (openModalQuery >= 0) {
			/* GET QUERYSTRING PARAMETER'S VALUE */
			function getQuerystring(key) {
				key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
				var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
				var qs = regex.exec(window.location.href);
				if (qs == null) {
					return "";
				} else {
					return qs[1];
				}
			}
			var openModalValue = getQuerystring('modal');
			if (openModalValue != "") {
				// MAKE SURE THERE IS AN ITME WITH IS ID BEFORE OPENING
				if (document.getElementById(openModalValue) != null) {
					new_url_modal = new modal(openModalValue,false);
					new_url_modal.activate();
				}
			}
		}
	}
}

/* ------------------------------------------------------------------------------ MODAL OBJECT/CLASS */

function modal(obj, setAttributes) {
	/* GET CURRENT POSITION OF SCROLLBARS ON THE PAGE */
	var modalObject = this;
	this.obj = obj;
	this.setAttributes = setAttributes;
	this.closeObj = obj.replace(obj,obj+'_close');
	this.overlay = overlayDivId; 
	this.yPos = 0;
	this.browser = getBrowser();
	this.user_os = getOS();

	/* GET CURRENT POSITION OF SCROLLBARS ON THE PAGE */
	modal.prototype.getScrollBarPos = function() {
		if (document.documentElement && document.documentElement.scrollTop){
			this.yPos = document.documentElement.scrollTop; 
		} else if (document.body) {
			this.yPos = document.body.scrollTop;
		}
	}

	/* HIDE SCROLLBARS */
	modal.prototype.scrollbarDisplay = function(height,overflow) {
		document.getElementsByTagName('body')[0].style.height = height;
		document.getElementsByTagName('body')[0].style.overflow = overflow;
	}

	/* RESET THE POSITION OF THE PAGE TO THE TOP */
	modal.prototype.setScrollPos = function(x, y) {
		window.scrollTo(x, y); 
	}

	/* HIDE SELECTS (THEY SHOW THROUGH IN IE */
	 modal.prototype.displaySelects = function(visibility) {
		selects = document.getElementsByTagName("select");
		for (i = 0; i < selects.length; i++) {
			selects[i].style.visibility = visibility;
		}
	}

	/* ACTIVATE THE MODAL */
	modal.prototype.activate = function() {
		if (this.setAttributes) {
			this.setWidthHeight();
		}
		if (this.browser == "Internet Explorer") {
			this.getScrollBarPos();
			this.scrollbarDisplay("100%", "hidden");
			this.setScrollPos(0,0);
			this.displaySelects("hidden");
		}
		this.displayModal("block");
	}

	/* TURN MODAL DISPLAY ON/OFF */
	modal.prototype.displayModal = function(display) {
		document.getElementById(this.overlay).style.display = display;
		document.getElementById(this.obj).style.display = display;
		if (display != "none") {
			this.addCloseListeners();	
		}
	}

	/* TURN MODAL DISPLAY ON/OFF */
	modal.prototype.addCloseListeners = function() {
		var modal_close_links = this.closeObj;
		/* CREATE NEW MODAL OBJECT AND ACTIVATE THE MODAL */
		function closeModal() {
			modalObject.deactivate();
			return false;
		}

		/* IF PAGE CONTAINS ANY MODAL CLOSE BUTTONS, LOOP THROUGH AND ATTACH EVENT LISTENERS */
		var i = 0;
		if (document.getElementById(modal_close_links) != "" && document.getElementById(modal_close_links) != null) {
			document.getElementById(modal_close_links).onclick = closeModal;
		}
	}

	/* TURN MODAL DISPLAY ON/OFF */
	modal.prototype.deactivate = function() {
		if (this.browser == "Internet Explorer") {
			this.scrollbarDisplay("auto", "auto");
			this.displaySelects("visible");
			this.setScrollPos(0,this.yPos);
		}
		this.displayModal("none");
	}
	
	/* DETERMINE HEIGHT/WIDTH OF MODAL AND SET HERE INSTEAD OF WITHIN YOUR CSS */
	modal.prototype.setWidthHeight = function() {
		var modalContainer = document.getElementById(this.obj);
		var divIEheightAdjust = 10;
		var divIEwidthAdjust = 10;
		
		if (modalContainer != null) {
			// set visibility to hidden so we can't see it once we set it's display type to block
			modalContainer.style.visibility = "hidden";
			modalContainer.style.display = "block";

			/* WITH ITS DISPLAY TYPE AS "BLOCK" WE CAN GET ITS WIDTH/HEIGHT VALUES */
			var divHeight = modalContainer.offsetHeight;
			var divWidth = modalContainer.offsetWidth;

			/* WE NEED TO SUBTRACT ANY PADDING USED WITHIN THE DIV FOR IE/OPERA */
			if (this.browser == "Internet Explorer" || this.browser == "Opera") {
				divHeight = divHeight - divIEheightAdjust;
				divWidth = divWidth - divIEwidthAdjust;
			}
				
			if (divHeight > 0) {
				modalContainer.style.height = divHeight;
				modalContainer.style.marginTop = "-" + Math.ceil(divHeight / 2) + "px";
			}

			if (divWidth > 0) {
				modalContainer.style.width = divWidth;
				modalContainer.style.marginLeft = "-" + Math.ceil(divWidth / 2) + "px";
			}
			/* RESET VISITBILITY AND DISPLAY ATTRIBUTES */
			modalContainer.style.visibility = "";
			modalContainer.style.display = "none";
		}
	}
}