/*
 * Dynamic utilities including tabs, autoExpand/Collapse, etc
 */

// General Function to ensure that a given textarea does not exceed the maximum length
// TODO: Add ability to have multiple textareas on the same page
var previousValue = "";
function ensureMaxLength(formValue, maxLength) {
	var length = formValue.value.length;	
	if (length > maxLength) {
		formValue.value = previousValue;
	} else {
		previousValue = formValue.value;
	}
}

/*
 * Dynamic Required indicators (by group id)
 * NOTE: Use styleId in place of id attribute for struts tags
 * 
 * Example:
 *   <input id="addressGroup_1" onKeyup="updateRequired('addressGroup')" ...
 *
 *   <select id="addressGroup_5" 
 *    onclick="updateRequired('addressGroup')" 
 *    onKeyup="updateRequired('addressGroup')" ...
 *
 *   <span id="addressGroup_indicator" class="requiredEntryAsterisk"></span>
 */
function updateRequired(groupId) {
	var elementIndex = 0;
	var flagIndex = 0;	
	var fieldElements = new Array();
	var flagElements = new Array();
	
	var inputs = document.getElementsByTagName('input');
	var selects = document.getElementsByTagName('select');
	var spans = document.getElementsByTagName('span');	
	
	for (var i=0;i<inputs.length;i++) {		
		var prefix = inputs[i].id.substring(0,groupId.length);		
		if (groupId == prefix) {			
			fieldElements[elementIndex++] = inputs[i];			
		}
	}	
	for (var i=0;i<selects.length;i++) {
		var prefix = selects[i].id.substring(0,groupId.length);			
		if (groupId == prefix) {			
			fieldElements[elementIndex++] = selects[i];			
		}
	}	
	for (var i=0;i<spans.length;i++) {
		if (spans[i].id == groupId + "_indicator") {
			flagElements[flagIndex++] = spans[i];
		}
	}			
	required = false;
	var fieldElementNames = "";
	for (var i=0;i<fieldElements.length;i++) {	 
	  var theElement = fieldElements[i]; 
	  fieldElementNames += theElement.id;

	  if (theElement.value.length > 0) {
		required = true;
	  }
	}
				
	for (var i=0;i<flagElements.length;i++) {	  
	  if (required) {
	    flagElements[i].innerHTML='*';
	  }
	  else {			    
	    flagElements[i].innerHTML='';
	  }	
	}
}

/**
 * Mouse Capture Routine
 */
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousedown = getMouseXY;
var mousePosX = 0;
var mousePosY = 0;

function getMouseXY(e) {
	mousePosX = 0;
	mousePosY = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		mousePosX = e.pageX;
		mousePosY = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		mousePosX = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		mousePosY = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
}

/*
 * Simple image swapping routine with experimental photo layer functionality
 */
var imgBuffer = new Array();

function hideLayer(layerId) {
	var theLayer = document.getElementById(layerId);
	if (theLayer) {
		theLayer.style.visibility="hidden";
		theLayer.innerHTML="";
	}
}

function imageSwap(imgId, secondaryImage, layer, description) {
	
	if (imgBuffer[imgId] == null) {
		imgBuffer[imgId] = secondaryImage;
	}
	var tmp = document.getElementById(imgId).src;
	
	if (!layer) {
		document.getElementById(imgId).src = imgBuffer[imgId];
	}
	imgBuffer[imgId] = tmp;
	
	if (layer) {
		var photoLayer = document.getElementById(layer); 
		var topRow = "<tr><td colspan='2' bgcolor='#ffffff'><table border=0 width='99%'><tr><td align='left'>" + 
			description + "</td><td align='right' valign='top'><a href=\"javascript:hideLayer('" + layer + 
			"')\"><img title='Close Photo' textalign='right' border=0 src='images/closeIcon.gif'></a></td></tr></table></td></tr>";
			
		photoLayer.innerHTML = "<table style=\"border-collapse:collapse;border-color:#000000\" width='240' border=1>" + topRow + 
			"<tr><td colspan=\"2\" bgcolor='#ffffff'><a href=\"javascript:hideLayer('" + layer + 
			"')\"><img id='" + layer + "_secondaryPhoto' border='0' src='" + secondaryImage + "'></a></td></tr>";		
		
		// Set unknown width & height to minimum for positioning (most likely not loaded yet)
		var photoElement = document.getElementById(layer + "_secondaryPhoto");
			
		var tmpWidth = photoElement.width;
		var tmpHeight = photoElement.height;
		
		var maxWidth = 400;
		var minWidth = 200;
		var minHeight = 100;
		var leftMin = 50;
		var topMin = 50;
		
		// Constrain minWidth
		if (tmpWidth == 0) {
			tmpWidth = minWidth;
			tmpHeight = minHeight;
		}
		
		// Constrain maxWidth
		if (tmpWidth > maxWidth) {
			tmpWidth = maxWidth;
			photoElement.width = maxWidth;
		}				
		
		var photoPosX = (mousePosX - tmpWidth / 2);
		var photoPosY = (mousePosY - tmpHeight / 2);
		
		if (photoPosX < leftMin) {
			photoPosX = leftMin;
		}
			
		if (photoPosY < topMin) {
			photoPosY = topMin;
		}
		
		photoLayer.style.left = photoPosX + "px";
		photoLayer.style.top = photoPosY + "px";
		photoLayer.style.visibility = "visible";
	}
}
 
/*
 * Auto Expand routine
 */
var autoExpandCache = new Array();

function expand(id) {
	var element = document.getElementById(id);
	expandElement(element, id);
}

function expandElement(element) {
	var content = element.innerHTML;
	var collapseLink = "&nbsp;<a href='javascript:collapse(\"" + element.id + "\")'>&laquo;&nbsp;less</a>";
	element.innerHTML = autoExpandCache[element.id] + collapseLink;
}

function collapse(id) {
	collapseElement(document.getElementById(id));
}

function collapseElement(element) {
	var moreLink = "&nbsp;...&nbsp;<a href='javascript:expand(\"" + element.id + "\")'>more&nbsp;&raquo;</a>";
	var maxLength = element.id.substring(element.id.indexOf(".") + 1);
	maxLength = maxLength.substring(0,maxLength.indexOf("."));

	if (autoExpandCache[element.id].length >= maxLength) {
		if (maxLength == 0) {
			if (autoExpandCache[element.id].length > 0) {				
				element.innerHTML = moreLink;
			}
			else {				
				element.innerHTML = "";
			}
		}
		else {
			var content = autoExpandCache[element.id];
			var splitPos = maxLength;
			while (splitPos > 0 && content.charAt( (--splitPos) + 1 ) != " ");
			
			if (splitPos < 1) {
				// set to maxLength, no place to gracefully split the string
				splitPos = maxLength - 1;
			}
			element.innerHTML = autoExpandCache[element.id].substring(0, splitPos + 1) + moreLink;
		}
	}
}

function updateAutoExpandControls() {
	var elements = new Array();
	elements = document.getElementsByTagName('span');

	for (var i in elements) {
		if (/autoExpand\./.test(elements[i].id)) {
			// Initialize this element's cache if not yet initialized
			if (autoExpandCache[elements[i].id] == null) {
				autoExpandCache[elements[i].id] = elements[i].innerHTML;
			}
			collapseElement(elements[i]);
		}
	}
}
// End autoExpand control

/*
 * Customized AJAX Tabs Javascript
 *
 * TODO: Add additional attributes for more control over rendered HTML styles, etc
 *
 * Known limitations:
 * 1) Does not reload "default" content tab via AJAX, uses original cached content
 * 2) May cause screen to shift up or down when tab clicked depending on screen & content length (causes page to scroll)
 */ 
var loadingMessage="<img src='images/loading.gif' /> Loading...</br></br>";
 
 
var tabControlArray = new Array();
var tabControlSize = 0;

function addTabControl(tabControlId, selectedTab, tabDivId, tabContentDivId, selectedStyle, defaultContent) {
	tabControlArray[tabControlSize++] = new TabControl(tabControlId, selectedTab, tabDivId, tabContentDivId, selectedStyle, defaultContent);
}

function TabControl(tabControlId, selectedTab, tabDivId, tabContentDivId, selectedStyle, defaultContent) {
	this.tabControlId = tabControlId;
	this.selectedTab = selectedTab;
	this.tabDivId = tabDivId;
	this.tabContentDivId = tabContentDivId;
	this.selectedStyle = selectedStyle;
	this.defaultContent = defaultContent;
		
	this.tabSize = 0;
	this.tabArray = new Array();
}

function Tab(id, label, url) {
	this.id = id;
	this.label = label;
	this.url = url;
}

function addTab(tabControlId, id, label, url) {
	var tabControl = getTabControl(tabControlId);
	tabControl.tabArray[tabControl.tabSize++] = new Tab(id, label, url);
}

function getTabControl(tabControlId) {
	for (var i=0;i<tabControlSize;i++) {
		if (tabControlId == tabControlArray[i].tabControlId) {
			return tabControlArray[i];
		}
	}
}

function selectTab(tabControlId, selectedTabId) {
	renderTabs(tabControlId, selectedTabId);
}

function initTabs(tabControlId, selectedTab, tabDivId, tabContentDivId, selectedStyle) {
	var defaultContent=document.getElementById(tabContentDivId).innerHTML;
	addTabControl(tabControlId, selectedTab, tabDivId, tabContentDivId, selectedStyle, defaultContent);
}

function renderTabs(tabControlId, selectedTab) {
	var tabControl = getTabControl(tabControlId);
	
	var renderedHtml = "";
	
	var selectedUrl = "";
	for (var i=0;i<tabControl.tabSize;i++) {
		var selectedContent = "";
		var hrefContent = "javascript:selectTab(\"" + tabControlId + "\", \"" + tabControl.tabArray[i].id + "\")";
		
		if (selectedTab == tabControl.tabArray[i].id) {
			selectedUrl = tabControl.tabArray[i].url;
			selectedContent = "class='" + tabControl.selectedStyle + "' ";
		}
			
		renderedHtml += "\t<li><a " + selectedContent + "href='" + hrefContent + "'>" + tabControl.tabArray[i].label + "</a></li>\n";
	}
	
	setDivContent(tabControl.tabDivId, renderedHtml);
	
	if (selectedUrl == "#") {
		setDivContent(tabControl.tabContentDivId, tabControl.defaultContent);
		// Refresh all existing page controls since the DOM has probably changed
		initPage();
	}
	else {
		loadAjaxUrl(selectedUrl, tabControl.tabContentDivId);
	}
}

function setDivContent(targetDiv, content) {
	document.getElementById(targetDiv).innerHTML=content;
}

function loadAjaxPage(page_request, targetDiv){
	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
		setDivContent(targetDiv, page_request.responseText);
		// Refresh all existing page controls since the DOM has probably changed
		initPage();
	}
}

function loadAjaxUrl(url, targetDiv) {
	if (window.XMLHttpRequest) // if Mozilla, Safari etc
		page_request = new XMLHttpRequest()
	else if (window.ActiveXObject){ // if IE
		try {
			page_request = new ActiveXObject("Msxml2.XMLHTTP")
		} 
		catch (e){
			try {
				page_request = new ActiveXObject("Microsoft.XMLHTTP")
			} catch (e){}
		}
	}
	else {
		return false;
	}		
	
	setDivContent(targetDiv, loadingMessage);
	
	page_request.onreadystatechange=function(){
		loadAjaxPage(page_request, targetDiv)
	}
	
	var bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime();
	
	page_request.open('GET', url+bustcacheparameter, true)
	page_request.send(null)
}

/*
 * Invoke with body onLoad method to ensure proper refreshing
 */
function initPage() {
	hideLayer("photoLayer"); // hide any previous photo layer
	updateAutoExpandControls();	
}