/*** Copy Right Information ***
  * Please do not remove following information.
  * Modal Popup v1.0
  * Author: John J Kim
  * Email: john@frontendframework.com
  * URL: www.FrontEndFramework.com
  * 
  * You are welcome to modify the codes as long as you include this copyright information.
 *****************************/
 
 /*
 
    Istruzioni
     
HasBackground : 	(boolean) if it sets to false, no background will be added and it will discard all the background settings. The default value is true.
BackgroundColor : 	(string) The background color. You can use a word like "red", "black" or a HEX like "#990000", "#000000". If you use a HEX color, make sure to add "#" in front of the value. The default color is "#000000" (black).
BackgroundOpacity : 	(integer) The background transparent opacity setting, the value must be between 1 to 100, 1 is lightest and 100 is darkest. The default value is 60.
BackgroundOnClick : 	(function) If you add a function here, when a user clicks on the background (not the popup), the function will be executed it. The default is an empty function (nothing happens).
BackgroundCursorStyle : 	(string) This is the background cursor style setting, just like you would set it in a CSS. The default value is "default".
Zindex : 	(integer) The z-index of the background, the popup layer will be automatically set to this z-index plus 1 value. The default value is 90000.
AddLeft : 	(integer) If you want to adjust the popup layer position, you can use this option to move the popup left or right. You can add a positive integer pixel value to move the popup to right, and negative integer to move it left. Use only an integer value, do not add "px". The default value is 0.
AddTop : 	(integer) same as AddLeft option, except this moves the popup up or down (pixel value). The default value is 0.
*/

//With the window size & the element size functions built-in
ModalPopup = function (elem,options) {
	//option default settings
	options = options || {};
	var HasBackground = (options.HasBackground!=null)?options.HasBackground:true;
	var BackgroundColor = options.BackgroundColor || '#000000';
	var BackgroundOpacity = options.BackgroundOpacity || 60; // 1-100
	BackgroundOpacity = (BackgroundOpacity > 0) ? BackgroundOpacity : 1;
	var BackgroundOnClick = options.BackgroundOnClick || function(){};
	var BackgroundCursorStyle = options.BackgroundCursorStyle || "default";
	var Zindex = options.Zindex || 900;
	var AddLeft = options.AddLeft || 0; //in px
	var AddTop = options.AddTop || 0; //in px

	function _Convert(val) {
		if (!val) {return;}
		val = val.replace("px","");
		if (isNaN(val)) {return 0;}
		return parseInt(val);
	}
	var popup = document.getElementById(elem);
	if (!popup) {return;}
	//set the popup layer styles
	var winW = (document.layers||(document.getElementById&&!document.all)) ? window.outerWidth : (document.all ? document.body.clientWidth : 0);
	var winH = window.innerHeight ? window.innerHeight :(document.getBoxObjectFor ? Math.min(document.documentElement.clientHeight, document.body.clientHeight) : ((document.documentElement.clientHeight != 0) ? document.documentElement.clientHeight : (document.body ? document.body.clientHeight : 0)));
	//display the popup layer
	popup.style.display = "block";
	popup.style.visibility = "visible";
	var currentStyle;
	if (popup.currentStyle)	{ 
		currentStyle = popup.currentStyle; 
	}
	else if (window.getComputedStyle) {
		currentStyle = document.defaultView.getComputedStyle(popup, null);
	} else {
		currentStyle = popup.style;
	}

	var elemW = popup.offsetWidth -
		_Convert(currentStyle.marginLeft) -
		_Convert(currentStyle.marginRight) -
		_Convert(currentStyle.borderLeftWidth) -
		_Convert(currentStyle.borderRightWidth);

	var elemH = popup.offsetHeight -
		_Convert(currentStyle.marginTop) -
		_Convert(currentStyle.marginBottom) -
		_Convert(currentStyle.borderTopWidth) -
		_Convert(currentStyle.borderBottomWidth);

	popup.style.position = "fixed";
	popup.style.left = (winW/2 - elemW/2 + AddLeft) + "px";
	popup.style.top = (winH/2 - elemH/2 + AddTop - 10) + "px";
	popup.style.zIndex = Zindex + 1;	
	
	if (HasBackground) {		
		if (!ModalPopup._BackgroundDiv) {
			ModalPopup._BackgroundDiv = document.createElement('div');
			ModalPopup._BackgroundDiv.style.display = "none";
			ModalPopup._BackgroundDiv.style.width = "100%";
			ModalPopup._BackgroundDiv.style.height = "1800px";
			ModalPopup._BackgroundDiv.style.position = "absolute";
			ModalPopup._BackgroundDiv.style.top = "0px";
			ModalPopup._BackgroundDiv.style.left = "0px";
			document.body.appendChild(ModalPopup._BackgroundDiv);
		}
		ModalPopup._BackgroundDiv.onclick =  BackgroundOnClick;
		ModalPopup._BackgroundDiv.style.background = BackgroundColor;	
		//ModalPopup._BackgroundDiv.style.height = document.all ? Math.max(Math.max(document.documentElement.offsetHeight, document.documentElement.scrollHeight), Math.max(document.body.offsetHeight, document.body.scrollHeight)) : (document.body ? document.body.scrollHeight : ((document.documentElement.scrollHeight != 0) ? document.documentElement.scrollHeight : 0)) + "px";
		ModalPopup._BackgroundDiv.style.height = "1800px";
		ModalPopup._BackgroundDiv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + BackgroundOpacity +")";
		ModalPopup._BackgroundDiv.style.MozOpacity = BackgroundOpacity / 100;
		ModalPopup._BackgroundDiv.style.opacity = BackgroundOpacity / 100;
		ModalPopup._BackgroundDiv.style.zIndex = Zindex;
		ModalPopup._BackgroundDiv.style.cursor = BackgroundCursorStyle;

		//Display the background
		ModalPopup._BackgroundDiv.style.display = "";
	}

}

ModalPopup.Close = function(id) {
	if (id) {
		document.getElementById(id).style.display = "none";
		document.getElementById(id).style.visibility = "hidden";
	} 
	if  (ModalPopup._BackgroundDiv) {
		ModalPopup._BackgroundDiv.style.display = "none";
	}
}