/**
 * @author: Augustianne Laurenne L. Barreta
 * custompopup.js
 * 7 November 2008
**/
var CustomPopup = {
	actionpath: null, // path to where the form will submit
	actionbutton: null, // string for submit button
	header: null, // header of prompt
	message: null, // message for prompt
	confirmation: null,
	popuptype: null, // prompt or confirm
	submittype: null, // 0 = button, 1 = link
	lastob: null,
	lastop: null,
	js: false,
	HTML: false,
	customCancel: false,
	customCancelText: "",
	customCancelFunc: null,
	
	initialize: function(header,confirmation,path,action,type,message){
		//alert(header+"\n"+message+"\n"+confirmation+"\n"+path+"\n"+action+"\n"+type);
		this.actionpath   = path;
		this.actionbutton = action;
		this.header       = header;
		this.confirmation = confirmation;
		this.submittype   = type;
		this.message      = null;
		if( typeof message != "undefined") {
			this.message = message;
		}
	},
	initPrompt: function(confirmation,header,action){
		this.actionbutton = (typeof action != "undefined") ? action : null;
		this.header = (typeof header != "undefined") ? header : null;
		this.confirmation = confirmation;
		this.popuptype = 1;
	},
	setCustomCancel: function(text,fxn){
		// quick add for custom cancel. custom function.
		// accepts custom cancel javascript function only.
		if(typeof fxn != "undefined")
			this.customCancelFunc = fxn;
		
		this.customCancel = true;
		this.customCancelText = text;
	},
	setJS: function(){ // if submit is JS or AJAX
		this.js = true;
	},
	isJS: function(){
		return this.js;
	},
	setHTML: function(bool){
		this.HTML = bool;
	},
	isHTML: function(){
		return this.HTML;
	},
	setActionPath: function(action){
		this.actionpath = action;
	},
	getActionPath: function(){
		return this.actionpath;
	},
	setActionButton: function(action){
		this.actionbutton = action;
	},
	getActionButton: function(){
		return this.actionbutton;
	},
	setHeader: function(header){
		this.header = header;
	},
	getHeader: function(){
		return this.header;
	},
	setMessage: function(message){
		this.message = message;
	},
	getMessage: function(){
		return this.message;
	},
	setConfirmation: function(confirmation){
		this.confirmation = confirmation;
	},
	getConfirmation: function(){
		return this.confirmation;
	},
	setPopupType: function(type){
		this.popuptype = type;
	},
	getPopupType: function(){
		return this.popuptype;
	},
	setSubmitType: function(type){
		this.submittype = type;
	},
	getSubmitType: function(){
		return submittype;
	},
	createPopup: function(){
		if(document.getElementById("popup") != null){
			return;
		}
		
		this.createPopUpUsingLayout1(this.loadInterface(), 400, 100, 'popup_dimmer', 'popup');
		
		if(this.actionbutton == null){
			this.mEffectOut(document.getElementById("popup"),this.actionpath);
		}
		return false;
	},	
	mEffectOut:function(ob,actionpath){
		this.lastob = ob;
		this.lastop = 1;
		
		ob.style.opacity = 1;
		ob.style.MozOpacity = 1;
		
		setTimeout(function(){
			for (var i = 10; i >= 1; i--){
				setTimeout(function(){
					CustomPopup.decreaseOpacity(ob,actionpath);
				}, i * 100);
			}	
		}, 1500);
	},
	decreaseOpacity:function(ob,actionpath){
		var current = ob.style.opacity;
			current = current * 10;
			var downone = current - 1;
			CustomPopup.setOpacity(ob, downone, actionpath);
			this.lastob = ob;
			this.lastop = downone / 10;
	},
	setOpacity:function(ob, level, actionpath){
		if(level < 1){
			CustomPopup.removePopup();
			//window.location.href = actionpath;
		}
		if(ob){
			//level is between 0 and 10; need to convert to decimal for standard
			var standard = level / 10;
			//need to convert to 0-100 scale for IE filter
			var ie = level * 10;
			ob.style.opacity = standard;
			ob.style.MozOpacity = standard;
			ob.style.filter = "alpha(opacity="+ie+")";
		}
	},
	removePopup: function(){
		if(this.customCancelFunc != null)
			this.customCancelFunc();
		
		// remove dimmer and popup and its style
		var dimmer = document.getElementById("popup_dimmer");
		var popup = document.getElementById("popup");
		document.body.removeChild(popup);
		document.body.removeChild(dimmer);
		this.reinit();
		//this.unloadCss();
	},
	disable: function(){
		if(document.getElementById("a_submit") != null){
			if(this.isJS())
				this.actionpath();
			else	
				window.location.href=this.actionpath; // directs to link and disables buttons
			document.getElementById("a_submit").setAttribute("disabled","disabled");
			document.getElementById("a_cancel").setAttribute("disabled","disabled");
		}else{ // disable button after first click	
			document.frmConfirm.submit();
			document.getElementById("input_submit").setAttribute("disabled","disabled");
			document.getElementById("input_cancel").setAttribute("disabled","disabled");
		}
		this.removePopup();
	},
	reinit: function(){
		this.actionpath = null; // path to where the form will submit
		this.actionbutton = null; // string for submit button
		this.header = null; // header of prompt
		this.message = null; // message for prompt
		this.confirmation = null;
		this.popuptype = null; // prompt or confirm
		this.submittype = null; // 0 = button, 1 = link
		this.js = false;
		this.HTML = false;
		this.customCancelFunc = null;
		this.customCancel = false;
		this.customCancelText = "";
		
	},
	loadInterface: function(){
		// create innerhtml for popup div
		var cancel = "Cancel";
		var content = "";
		var added_class = "";
		// check if action = 'Yes'; should be partnered with 'No'
		if(this.actionbutton == "Yes")
			cancel = "No";
		
		if(this.header != null)	
			content = 	'<h4 id = "popup_header" class = "header"><strong>'+this.header+'</strong></h4>';
		else
			added_class = "success";
			
		if(this.isHTML())
			added_class = "allow_overflow";
			
		if( this.message != null )
			content += '<div id="popup_message" class = "confirm">'+
						'<p>'+this.message+'</p>'+
					'</div>';
					
		content += '<div id="popup_confirm" class = "confirm '+added_class+'">'+
					this.confirmation+
				'</div>';
				
		if(this.actionbutton != null){
			content +=	'<div id="popup_buttons" class = "buttons_box">';
		
			if(this.popuptype == 1){
				content += '<div id="popup_links" class="link">'+						
								'<input id="a_submit" type="button" class="prompt_button" onclick="CustomPopup.removePopup();return false;" value="'+this.actionbutton+'">'+				
							'</div>';
			}else{	
				if(this.submittype == "0"){
					if( this.customCancel ){
						content += '<form action="'+this.actionpath+'" method="post" id = "frmConfirm" name = "frmConfirm">'+
									'<p>'+
										'<input class = "prompt_button" type="button" value="'+this.actionbutton+'" onclick="CustomPopup.disable();" name = "btnConfirm" id = "input_submit">'+
										'<input class = "prompt_button" type="button" value = "'+this.customCancelText+'" onclick = "CustomPopup.removePopup();return false;" id="input_cancel">'+
									'</p>'+
								'</form>';
					}else{
					content += '<form action="'+this.actionpath+'" method="post" id = "frmConfirm" name = "frmConfirm">'+
								'<p>'+
									'<input class = "prompt_button" type="button" value="'+this.actionbutton+'" onclick="CustomPopup.disable();" name = "btnConfirm" id = "input_submit">'+
									'<input class = "prompt_button" type="button" value = "'+cancel+'" onclick = "CustomPopup.removePopup();return false;" id="input_cancel">'+
								'</p>'+
							'</form>';
					}
				}else{
					if( this.customCancel ){
						content +=  '<input id="a_submit" type="button" class="prompt_button" value="'+this.actionbutton+'" onclick="CustomPopup.disable();">'+
									'<input id="a_cancel" type="button" class="prompt_button" onclick="CustomPopup.removePopup();" value="'+this.customCancelText+'">';
					}else{
						content +=  '<input id="a_submit" type="button" class="prompt_button" value="'+this.actionbutton+'" onclick="CustomPopup.disable();">'+
									'<input id="a_cancel" type="button" class="prompt_button" onclick="CustomPopup.removePopup();" value="'+cancel+'">';
						
					}
				}
			}				
			content += '</div>';
		}
					
		return content;		
	},
	loadCss: function(){
		// create style for popup
		style = document.createElement("link");
		style.setAttribute("rel", "stylesheet");
		style.setAttribute("type", "text/css");
		style.setAttribute("href", "/css/custompopup.css");
		style.setAttribute("id","prompt_style");
		document.getElementsByTagName("head")[0].appendChild(style);
	},
	unloadCss: function(){
		// remove style after removing popup
		if(document.getElementById("popup") == null){
			var style = document.getElementById("prompt_style");
			document.getElementsByTagName("head")[0].removeChild(style);
		}
	},
	initiateSuccessMessage: function(action){
		CustomPopup.initPrompt("Header","You have successfully ");
		CustomPopup.createPopup();
	},
	pageWidth:function(){
		return window.innerWidth != null? window.innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body != null? document.body.clientWidth:null;
	},
	pageHeight:function(){
		return window.innerHeight != null? window.innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body != null? document.body.clientHeight:null;
	},
	posLeft:function(){
		return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement && document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;
	},
	posTop:function(){
		return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement && document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;
	},
	
	helpHasFocus: false,
	/*****Login Bubble*****/	
	fetchEmailBubble: function(show_login){
		var text = 'Please type in the email address that you used to register.';
		if(!show_login)
			 text += '<a onmouseover="CustomPopup.focusOnHelp();" onmouseout="CustomPopup.removeFocusOnHelp();" href="http://'+location.host+'/login.php"><strong class="login_popup_link">&nbsp;Need help?</strong></a>';
		this.removeBubble();
		this.showBubble(text,true,show_login);
	},
	fetchPasswordBubble: function(show_login){
		var text = "<p style='padding-top:8px;'>Please type in your old password.<p>";
		this.removeBubble();
		this.showBubble(text,false,show_login);
	},
	showBubble: function(text,email,show_login){
		var div = document.createElement("div");
		div.className = "bubble";
		div.setAttribute("id","bubble");
		div.innerHTML = "<span class='login_popup_content'>"+text+"</span>";
		div.setAttribute("style","display:none;background-color:#fcf0a3;padding:2px;font-size:11px;width:225px;opacity:0.93;-webkit-border-radius:7px;-moz-border-radius:7px;border-top:1px solid #eeeeee;border-left:1px solid #dddddd;border-bottom:1px solid #d4d4d4;border-right:1px solid #e4e4e4;");
		
		// set position of bubble
		var field;
		
		if(email){
			field = document.getElementById("txtEmailLogin");
		}else
			field = document.getElementById("pwdPasWrdLogin");
			
		var pos = this.findPos(field);

		div.style.left 	= (pos.x)+"px";
		div.style.top = (pos.y + 25)+"px";
	 
		document.body.appendChild(div);
		jQuery(div).animate({opacity: "show"}, "slow");
	},
	removeBubble: function(){
		var bubble = document.getElementById("bubble");
		if(bubble != null){
			if(!this.helpHasFocus)
				document.body.removeChild(bubble);
		}
		this.helpHasFocus = false;	
	},
	focusOnHelp: function(){
		this.helpHasFocus = true;
	},
	removeFocusOnHelp: function(){
		this.helpHasFocus = false;
	},
	findPos: function(obj) {
		var curleft = obj.offsetLeft || 0;
		var curtop = obj.offsetTop || 0;
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
		return {x:curleft,y:curtop};
	},
	
	/****"new" help text bubble****/	
	fetchNewBubble: function(text,obj){
		this.removeBubble();
		this.showNewBubble(text,obj);
	},
	showNewBubble: function(text,obj){
		var div = document.createElement("div");
		div.className = "bubble";
		div.setAttribute("id","bubble");
		div.innerHTML = "<span class='login_popup_content'>"+text+"</span>";
		div.setAttribute("style","display:none;background-color:#fcf0a3;padding:2px;font-size:11px;width:225px;opacity:0.93;-webkit-border-radius:7px;-moz-border-radius:7px;border-top:1px solid #eeeeee;border-left:1px solid #dddddd;border-bottom:1px solid #d4d4d4;border-right:1px solid #e4e4e4;");
		
		// set position of bubble
			
		var pos = this.findPos(obj);
	
		div.style.left 	= (pos.x + 30)+"px";
		div.style.top = (pos.y + 10)+"px";
		 
		document.body.appendChild(div);
		jQuery(div).animate({opacity: "show"}, "slow");
	},
	
	fetchEventBubble:function(text,obj){
		this.removeBubble();
		this.showEventBubble(text,obj);
	},
	
	showEventBubble: function(text,obj){
		var div = document.createElement("div");
		div.className = "bubble";
		div.setAttribute("id","bubble");
		div.innerHTML = "<span class='login_popup_content'>"+text+"</span>";
		div.setAttribute("style","display:none;background-color:#fcf0a3;padding:2px;font-size:11px;width:225px;opacity:0.93;-webkit-border-radius:7px;-moz-border-radius:7px;border-top:1px solid #eeeeee;border-left:1px solid #dddddd;border-bottom:1px solid #d4d4d4;border-right:1px solid #e4e4e4;");
		
		// set position of bubble
			
		var pos = this.findPos(obj);
	
		div.style.left 	= (pos.x + 30)+"px";
		div.style.top = (pos.y + 10)+"px";
		 
		document.body.appendChild(div);
		jQuery(div).animate({opacity: "show"}, "slow");
	},
	/**
	 * Creates a popup using layout 1.
	 * 
	 * @param string content   The content of the popup.
	 * @param int		 wd        The width of the popup.
	 * @param int 	 ht   	   The height of the popup.
	 * @param string dimmerID  The id of the dimmer.
	 * @param string promptID  The id of the prompt.
	 */
	createPopUpUsingLayout1: function(content, wd, ht, dimmerID, promptID){
		var html = '<table class="table_popbox">'+
						'<tbody>'+
							'<tr>'+
								'<td class="popbox_topLeft"></td>'+
								'<td class="popbox_border"></td>'+
								'<td class="popbox_topRight"></td>'+
							'</tr>'+
							'<tr>'+
								'<td class="popbox_border"></td>'+
								'<td class="popbox_content">'+content+'</td>'+
								'<td class="popbox_border"></td>'+
							'</tr>'+
							'<tr>'+
								'<td class="popbox_bottomLeft"></td>'+
								'<td class="popbox_border"></td>'+
								'<td class="popbox_bottomRight"></td>'+
							'</tr>'+
						'</tbody>'+
					'</table>';
		this.showPopUp(html, wd, ht, dimmerID, promptID);
	},
	/**
	 * Shows a popup.
	 * 
	 * @param string content   The content of the popup.
	 * @param int		 wd        The width of the popup.
	 * @param int 	 ht   	   The height of the popup.
	 * @param string dimmerID  The id of the dimmer.
	 * @param string promptID  The id of the prompt.
	 */
	showPopUp: function(content, wd, ht, dimmerID, promptID){
		var dimmer = document.createElement("div");
		dimmer.className = "prompt_dimmer";
		dimmer.setAttribute("id", dimmerID);
		var div = document.createElement("div");
		div.className = "prompt";
		div.setAttribute("id",promptID);
		div.innerHTML = content;	
		var p = 'px';
		var tp = this.posTop() + ((this.pageHeight()-ht)/2);
		var lt = this.posLeft() + ((this.pageWidth()-wd)/2);
		tp = (tp < 0) ? 10 : tp;
		div.style.top = tp + p;
		div.style.left = lt + p;
		document.body.appendChild(dimmer);
		document.body.appendChild(div);
		document.getElementById(promptID).style.width = wd + p;	
	}
}