var POPUP_PANEL_MIN_LEFT = 120;
var POPUP_PANEL_MIN_TOP = (isIE6) ? 375 : 165;
var fadeOverlayPanel = null;
function showFade(layerId, useMousePosition) {
	if (fadeOverlayPanel == null) {
		fadeOverlayPanel = document.createElement("div");
		fadeOverlayPanel.id = fadeOverlayPanel.name = 'fadePanel';
		document.body.appendChild(fadeOverlayPanel);
		fadeOverlayPanel.style.width = parseInt(document.body.scrollWidth) + 'px';
		fadeOverlayPanel.style.height = parseInt(document.body.scrollHeight) + 'px';
		fadeOverlayPanel.onclick = function() {
			if (this.layerId != null) {
				hideFade(this.layerId);
			}
		}
	}
	if (fadeOverlayPanel != null) {
		fadeOverlayPanel.layerId = layerId;
		fadeOverlayPanel.style.display = 'block';
		if (layerId != null) {
			var showLayer = document.getElementById(layerId);

			// Panel does not exist, so create it
			if (showLayer == null || layerId == 'usermanuals') {
				showLayer = createPanel(layerId);
			}

			if (showLayer != null) {

				showLayer.style.zIndex = 100;
				showLayer.style.display = 'block';

				var panelLeft = (document.documentElement.clientWidth - showLayer.offsetWidth) / 2;
				var panelTop = (document.documentElement.clientHeight - showLayer.offsetHeight) / 3;
				var fadeLeft = (document.documentElement.clientWidth - fadeOverlayPanel.offsetWidth) / 2;
				if (useMousePosition) {
					if (window.event != null) {
						// Only Works in IE
						panelLeft = window.event.screenX - showLayer.offsetWidth - window.screenLeft;
						panelTop = window.event.screenY - showLayer.offsetHeight - window.screenTop;
					}
					if (panelLeft < POPUP_PANEL_MIN_LEFT) {
						panelLeft = POPUP_PANEL_MIN_LEFT;
					}
					if (panelTop < POPUP_PANEL_MIN_TOP) {
						panelTop = POPUP_PANEL_MIN_TOP;
					}
				}
				showLayer.style.left = panelLeft + 'px';
				showLayer.style.top = panelTop + 'px';
				
				fadeOverlayPanel.style.left = fadeLeft + 'px';
			}
		}

		// Ensures fade height matches any new page height
		fadeOverlayPanel.style.height = parseInt(document.body.scrollHeight) + 'px';
		fadeOverlayPanel.style.width = parseInt(document.body.scrollWidth) + 'px';
	}
}
function hideFade(hideLayer) {
	if (fadeOverlayPanel != null) {
		fadeOverlayPanel.style.display = 'none';
		if (hideLayer != null) {
			hideLayer = document.getElementById(hideLayer);
			hideLayer.style.display = 'none';
		}
	}
}
function createPanel(layerId) {
	if (layerId == 'usermanuals') {
		var obj = document.getElementById('usermanuals');
		if (obj != null) {
			document.body.removeChild(obj);
		}
	}
	var fadePanel = document.createElement("div");
	fadePanel.id = layerId;
	fadePanel.className = "fade-panel";
	fadePanel.style.width = (fadeContentWidths[layerId] + DEFAULT_PADDING) + 'px';
	
	var right = document.createElement("div");
	right.className = "fade-panel-right";
	
	var top = document.createElement("div");
	top.className = "fade-panel-top";
	
	var left = document.createElement("div");
	left.className = "fade-panel-left";
	
	var header = document.createElement("div");
	header.className = "fade-panel-header";
	
	var close = document.createElement("div");
	close.className = "close";
	close.layerId = layerId;
	close.onclick = function() {
		hideFade(this.layerId);
	};
	header.appendChild(close);
	
	var content = document.createElement("div");
	content.className = "fade-panel-content";
	if (layerId == 'demos') {
		content.className = "fade-panel-content demo-panel";
	}
	content.id = layerId + "Content";
	header.appendChild(content);
	
	left.appendChild(header);
	top.appendChild(left);
	right.appendChild(top);
	fadePanel.appendChild(right);
	
	// Bottom
	var bottomRight = document.createElement("div");
	bottomRight.className = "fade-panel-bottom-right";

	var bottom = document.createElement("div");
	bottom.className = "fade-panel-bottom";
	
	bottomRight.appendChild(bottom);
	fadePanel.appendChild(bottomRight);
	
	// Clear
	var clearDiv = document.createElement("div");
	clearDiv.className = "clear";
		
	// Add to Body	
	document.body.appendChild(clearDiv);
	document.body.appendChild(fadePanel);
	
	// ASync	
	fadeASync = new aSync();
	fadeASync.setLayerId( layerId );
	fadeASync.setReturnMethod( 'appendContentToPanel' );
	var urlPath = fadeContentURLs[layerId];
	if (layerId == 'usermanuals') {
		urlPath += genericId;
	} else if (layerId == 'demos') {
		urlPath += genericId;
	}
	fadeASync.getContent( urlPath );
	
	if (layerId == 'usermanuals') {
		updatePhoneSelectionList();
	}
	
	return fadePanel;
}
function appendContentToPanel(layerId, contentElement) {
	if (document.getElementById(layerId + "Content") == null) {
		var layer = document.getElementById(layerId);
		var cNodes = layer.getElementsByTagName("div");
		while (layer.getElementsByTagName("div").length > 0) {
			layer.removeChild(layer.getElementsByTagName("div")[0]);
		}
		layer.appendChild(contentElement);
	} else {
		document.getElementById(layerId + "Content").appendChild(contentElement);
	}
}
function setGenericId(id, hideFadeId, showFadeId, altHref) {
	genericId = id;
	if (fadeOverlayPanel != null) {
		hideFade(hideFadeId);
		showFade(showFadeId);
	} else if (altHref != null && altHref != '') {
		window.location.href = altHref;
	}
}

function updatePhoneSelectionList() {
	// ASync
	var pList = new aSync();
	pList.setLayerId( 'phone-selector-container' );
	pList.setReturnMethod( 'appendContentToPanel' );
	var url = fadeContentURLs['phone_selection_list'];
	var cookieValue = getCookie('phonelist');
	if (cookieValue.indexOf(genericId) != -1) {
		cookieValue = cookieValue.replace(genericId,'');
		cookieValue = cookieValue.replace(',,',',');
	}
	if (cookieValue.length > 0) {
		cookieValue += ',';
	}
	cookieValue += genericId;
	setCookie('phonelist',cookieValue);
	url += '&list=' + cookieValue;
	
	pList.getContent( url );
	initiatePhoneControls(true);
	generateGenericIdLinks( document.getElementById('phone-selector-container') );
}

var genericId;
var fadeASync;
var fadeContentURLs = new Array();
var fadeContentWidths = new Array();

fadeContentURLs['selectphone'] = 'apps/infocenter/custom/pages/usermanuals/c_selectphone.jsp';
fadeContentURLs['usermanuals'] = 'apps/infocenter/custom/components/usermanuals/c_usermanuals.jsp?phone=';
fadeContentURLs['demos'] = 'apps/infocenter/custom/pages/demos/c_demo.jsp?id=';
fadeContentURLs['phone_selection_list'] = 'apps/infocenter/custom/components/panels/c_phoneselector.jsp?ajaxRequest=true';

fadeContentWidths['selectphone'] = 760;
fadeContentWidths['usermanuals'] = 760;
fadeContentWidths['demos'] = 760;
var DEFAULT_PADDING = 31;