/*
 * 
 * INSTRUCTIONS:
 * 
 * 1. Add the following HTML to the page in which the popup will appear:
 * 		<div id="-id-" style="position:fixed;left:0px;right:0px;visibility:hidden;z-index:9999;
 * 		width:-width-px;height:-height-px;">
 * 			-content-
 * 		</div>
 * where -id- is a string identification and -content- is the HTML of the
 * popup. -width- and -height- are self-explanatory.
 * 
 * 2. In the function or the link that is to open a popup insert:
 * 		OpenPopup(-type-,"-id-",{ -data- },{ -options- },{ -input- });
 * where -type- is one of the types listed below, -id- is given in step one,
 * -data- is the information that should be inserted into the HTML code, and
 * -options- is the configuration of the popup.  -input- is an array whose
 * keys are ids of INPUT elements in the popup and whose contents are the
 * initial state of the INPUT elements' values.
 * 
 * Call ClosePopup() to close the popup.
 * 
 * 3. -data- is an array of the form { "id1":id1, "id2":id2, ... }.  The
 * Popup class searches for elements with id "id1", "id2", etc. and appends
 * a text node to it with content id1, id2, etc.
 * 
 * 4. Each Popup has at most one image.  One can set the URL of the image by creating an entry
 * "media" in the data array with data["media"] containing the URL of the image.
 * 
 * 5. Each Popup has at most one form.  The id of this form becomes POPUP_FORM_ID given below.
 * 
 * OPTIONS:
 * fade - Default is false.  When this flag is set, the cover and popup will fade in and out
 * rather than simply appearing.
 * 
 * autocomplete - Array of strings.  The strings are ids of elements whose autocomplete function
 * should be set using jQuery.  The user should set two global variables AUTOCOMPLETE_URL and
 * AUTOCOMPLETE_OPTIONS that are then passed into autocomplete.
 * 
 * Template - "autocomplete":["id1","id2", ... ]
 * 
 */

/*
 * Global constants.
 */
var POPUP_ID = "popup_id_145345";//popup id
var POPUP_COVER_ID = "popup_cover_145345";//cover id
var POPUP_FORM_ID = "popup_form_145345";//form id
var DOCUMENT = (document.documentElement) ? document.documentElement : document.body;
var FADE_RATE = "slow";	//rate at which to adjust opacity
						//can be a number 0-1000 or one of the strings:
						//"slow", "normal" or "fast"

/*
 * Global variables.
 */
var show_active = false;//is a popup currently displayed?

/*
 * Popup object.
 */
function Popup(type,root,data,options,input) {
	this.type = type;
	this.InitializePopup(root,data);
	this.InitializeCover("default_cover");
	var me = this;
	window.onresize = null;
	AddEvent(window,'resize',function() { me.ResizeCover(); });
	AddEvent(window,'resize',function() { me.CenterPopup(); });
	this.ProcessInputElements(this.content,input);
	this.ConfigureOptions(options);
}

/*
 * Popup properties.
 */
var popup_type = {"DEFAULT":0,"IMAGE":1,"PURCHASE":2,"TROPHY":3};
Popup.prototype.content = null;//pointer to the DOM node of the popup content
Popup.prototype.type = popup_type.DEFAULT;//type of popup
Popup.prototype.cover = null;//pointer to the DOM node of the cover
Popup.prototype.fade = false;//whether to fade in/out

/*
 * Popup methods.
 */
Popup.prototype.OpenPopup = function() {
	if(show_active) return;
	show_active = true;
	this.CenterPopup();
	if(!this.fade) {
		this.cover.style.visibility = "visible";
		this.content.style.visibility = "visible";
	} else {
		$(document.getElementById(POPUP_COVER_ID)).fadeIn(FADE_RATE,function() {
			$(document.getElementById(POPUP_ID)).fadeIn(FADE_RATE);
		});
	}
}

Popup.prototype.ClosePopup = function() {
	if(!this.fade) {
		this.content.style.visibility = "hidden";
		this.cover.style.visibility = "hidden";
	} else {
		$(document.getElementById(POPUP_ID)).fadeOut(FADE_RATE,function() {
			$(document.getElementById(POPUP_COVER_ID)).fadeOut(FADE_RATE);
		});
	}
	show_active = false;
}

Popup.prototype.CenterPopup = function() {
	var dim = GetScreenDimensions();
	var width = dim[0];
	var height = dim[1];
	if(width < 0 || height < 0) {
		this.content.style.top = "0px";
		this.content.style.left = "0px";
		return;
	}
	var revert = false;
	if(document.getElementById(POPUP_ID).style.display == "none") {
		document.getElementById(POPUP_ID).style.visibility = "hidden";
		document.getElementById(POPUP_COVER_ID).style.visibility = "hidden";
		document.getElementById(POPUP_ID).style.display = "inline";
		document.getElementById(POPUP_COVER_ID).style.display = "inline";
		revert = true;
	}
	if(jQuery.browser.msie) {
		this.content.style.top = (height/2-this.content.offsetHeight/2)+DOCUMENT.scrollTop+"px";
		this.content.style.left = (width/2-this.content.offsetWidth/2)+DOCUMENT.scrollLeft+"px";
	} else {
		this.content.style.top = (window.pageYOffset+DOCUMENT.clientHeight/2-this.content.offsetHeight/2)+"px";
		this.content.style.left = (window.pageXOffset+DOCUMENT.clientWidth/2-this.content.offsetWidth/2)+"px";
	}
	if(revert) {
		document.getElementById(POPUP_ID).style.display = "none";
		document.getElementById(POPUP_COVER_ID).style.display = "none";
		document.getElementById(POPUP_ID).style.visibility = "visible";
		document.getElementById(POPUP_COVER_ID).style.visibility = "visible";
	}
}

Popup.prototype.InitializePopup = function(root,data) {
	if(document.getElementById(POPUP_ID) != null) {//start fresh
		var element = document.getElementById(POPUP_ID);
		var parent = element.parentNode;
		parent.removeChild(element);
	}
	var clone = $("#"+root).clone(true);
	if(data["media"] != null)//user is sending a url for the image
		clone.find("img").attr("src",data["media"]);
	var form = clone.find("form");
	if(form != null) form.attr("id",POPUP_FORM_ID);
	clone.attr("id",POPUP_ID);
	clone.appendTo(document.body);
	var binder = new DataBinder();
	this.content = document.getElementById(clone.attr("id"));
	this.content.style.position = "absolute";
	if(jQuery.browser.msie && jQuery.browser.version < 7)
		this.content.style.position = "absolute";
	binder.bindData(this.content,data);
}

Popup.prototype.ConfigureOptions = function(options) {
	if(options == null) return;
	if(options.fade != null) {
		this.fade = options.fade;
		if(this.fade) {
			document.getElementById(POPUP_ID).style.display = "none";
			document.getElementById(POPUP_COVER_ID).style.display = "none";
			document.getElementById(POPUP_ID).style.visibility = "visible";
			document.getElementById(POPUP_COVER_ID).style.visibility = "visible";
		}
	}
	if(options.autocomplete != null) {
		for(var i = 0; i < options.autocomplete.length; i++) {
			$(document.getElementById(POPUP_ID)).find("#"+options.autocomplete[i]).autocomplete(
				AUTOCOMPLETE_URL,
				AUTOCOMPLETE_OPTIONS
				);
		}
	}
}

Popup.prototype.InitializeCover = function(class_name) {
	if(document.getElementById(POPUP_COVER_ID) != null) {//need only one cover
		this.cover = document.getElementById(POPUP_COVER_ID);
		return;
	}
	this.cover = document.createElement("DIV");
	this.cover.id = POPUP_COVER_ID;
	if(!IE) {
		this.cover.setAttribute("class",class_name);
		this.cover.style.opacity = "0.9";
	} else {
		this.cover.className = class_name;
		this.cover.style.filter = "alpha(opacity=90)";
	}
	document.body.appendChild(this.cover);
	this.cover = document.getElementById(POPUP_COVER_ID);
	if(!(jQuery.browser.msie && jQuery.browser.version < 7))
		this.cover.style.position = "fixed";
	else {
		this.cover.style.width = DOCUMENT.scrollWidth+"px";
		this.cover.style.height = DOCUMENT.scrollHeight+"px";
	}
	if(jQuery.browser["safari"])
		this.cover.style.height = DOCUMENT.clientHeight+"px";
}

Popup.prototype.ResizeCover = function() {
	if(document.getElementById(POPUP_COVER_ID) == null) return;
	if(jQuery.browser["safari"])
		document.getElementById(POPUP_COVER_ID).style.height = DOCUMENT.clientHeight+"px";
	if(jQuery.browser.msie && jQuery.browser.version < 7) {
		document.getElementById(POPUP_COVER_ID).style.width = document.body.scrollWidth+"px";
		document.getElementById(POPUP_COVER_ID).style.height = document.body.scrollHeight+"px";
	}
}

Popup.prototype.ProcessInputElements = function(root,input) {
	if(input == null) return;
	for(var i = 0; i < root.childNodes.length; i++) {
		var child = root.childNodes[i];
		if(child.nodeName.toLowerCase() == "input" && input[child.id] != null)
			child.value = input[child.id];
		else if(input[child.id] != null)
		{
			child.innerHTML = input[child.id];
		}
		else this.ProcessInputElements(child,input);
	}
}

var popup = null;
function OpenPopup(type,id,data,options,input) {
	popup = new Popup(type,id,data,options,input);
	popup.OpenPopup();
}

function ClosePopup() {
	if(popup != null) popup.ClosePopup();
}