/**
 * @fileOverview Define LoginLightBox to replace the original Pop up window
 * @author Justine.Huang
 * @version 1.0
 * @since 6.40, 2010-05-28
 */


/**
 * Creates an instance of LoginLightBox.
 * @constructor LoginLightBox
 * @this {LoginLightBox}
 * @param {Json} prop The Properties of LoginLightBox	
 */


function LoginLightBox(lboxprop){
	
	/**
	 * the urls for submit the login form
	 */
	this.loginUrl = loginLightboxCommProps.loginUrl;	
	
	/**
	 * the urls for forget login	 * 
	 */		
	this.forgetLoginUrl = loginLightboxCommProps.forgetLoginUrl;
	
	this.signupUrl = loginLightboxCommProps.signupUrl;
	
	this.mainPage = CookieUtil.getCookie("mainpage");	
	
	this.tellMeMoreType = lboxprop.tellMeMoreType;
	
	this.userStatus = lboxprop.userStatus;
	
	this.onloginSuccess = CryptUtil.encodeBase64(lboxprop.onloginSuccess);
	
	this.noSignUp = lboxprop.noSignUp;
	
	/**
	 * the requestPath to be set in cookie
	 */
	this.requestPath = lboxprop.requestPath;
	
	var DEFAULT_WIDTH = 267;
	var DEFAULT_COVER_COLOR = "#000";	
	
	this.width = lboxprop.width || DEFAULT_WIDTH;	
	this.covercolor = lboxprop.covercolor || DEFAULT_COVER_COLOR;	
	
	this.lbox = null;
	this.cover = null;
	
	/**
	 * Open the LoginLightBox
	 * @this {LoginLightBox}
	 */	
	this.open = function(){		
		if($j('.lbwrap ').size()==0){
			showCover(this);
			build(this);
		}		
	}
	
	/**
	 * Close the LoginLightBox
	 * @this {LoginLightBox}
	 */	
	this.close = function(){		
		hideCover(this);
		$j('.lbwrap').remove();
		CookieUtil.setCookie("mainpage","undefined");
	}
	
	
	/**
	 * Set the Width of the LoginLightBox
	 * @this {LoginLightBox}
	 * @param {Int} width  the new width of the LoginLightBox
	 */	
	this.setWidth = function(width){		
		this.lbox.css('width',width+'px');
		setCenter(this);
	}
	
	/**
	 * Place the LoginLightBox in the center of window
	 * @this {LoginLightBox}
	 */	
	var setCenter = function(obj){	
		var left = 0.5*$j(window).width()-0.5*obj.lbox.width()+$j(window).scrollLeft();
		if($j(window).height()< obj.lbox.height()){
			var top = $j(window).scrollTop()+14;
		}
		else {
			var top = 0.5*$j(window).height()-0.5*obj.lbox.height()+$j(window).scrollTop();
		}
		obj.lbox.css({
			'left': left + 'px',
			'top': top + 'px'
		});
	}	
	
	/**
	 * Show the cover when LoginLightBox displays
	 * @this {LoginLightBox}
	 */	
	var showCover = function(obj){
		var cover = $j('<div id="cover" />').css({
			'background-color':obj.covercolor,
			'width': $j(document).width()+'px',
			'height': $j(document).height()+'px',
			'position': 'absolute',
			'z-index': '99',
			'top': '0px',
			'left': '0px',
			'opacity':'0.6'
		});
		$j(document.body).append(cover);
		obj.cover = cover;
		
		//hide select for IE6 to fix the problem that select can't be covered.
		if($j.browser.msie && $j.browser.version == '6.0'){
			$j('select').each(function(){								
				$j(this).css('visibility','hidden');
			})
		}
	};
	
	/**
	 * Hide the cover when LoginLightBox is closed 
	 * @this {LoginLightBox}
	 */	
	var hideCover = function(obj){
		obj.cover.remove();		
		if($j.browser.msie && $j.browser.version == '6.0'){
			$j('select').each(function(){						
				$j(this).css('visibility','visible');
			})
		}	
	};
	
	/**
	 * Build a LoginLightBox
	 * @this {LoginLightBox}
	 */	
	var build = function(obj){	
		var needTellMeMore = true;
		if(tellMeMoreList[obj.tellMeMoreType].tellMeMoreUrl == "")
		{
			needTellMeMore = false;
		}
		else if(obj.userStatus == LOGIN_AND_SESSION_TIMEOUT)
		{
			if(obj.mainPage == "college_match" || obj.mainPage == "scholarship_results")
			{
				needTellMeMore = false;
			}
		}
		if(!obj.onloginSuccess){
			obj.onloginSuccess = '';
		}
					
		var wrapStart = (needTellMeMore)? '<div class="lbwrap loginwithtmm">' : '<div class="lbwrap">';
		
		var mainContent = '<div class="lb-top"><div><b></b></div></div>'
							+'<div class="lb-body">'
								+'<img width="27" height="27" id="close" class="close" alt="Close" src="/page/images/lightbox/close.png"/>'
								+'<div class="lb-cont">'					
									+'<h3>' + tellMeMoreList[obj.tellMeMoreType].title + '</h3>'
									+'<p>' + tellMeMoreList[obj.tellMeMoreType].getText(obj.mainPage, obj.userStatus) + '</p>'
									+'<div class="login clearfix">';
									
		var loginForm = 				'<form id="loginforminlightbox">'
										+'<input type="hidden" name="method" value="login" />'
										+'<input type="hidden" name="requestPath" value="'+obj.requestPath+'" />'
										+'<input type="hidden" name="previousAction" value="'+obj.onloginSuccess+'" />'
										+'<ul>'
											+'<li>'
												+'<label>User Name</label>'
												+'<input type="text" value="" size="11" maxlength="50" name="userName"/>'
											+'</li>'
											+'<li>'
												+'<label>Password </label>'
												+'<input type="password" value="" size="11" maxlength="25" name="password"/>'	
											+'</li>'
											+'<li class="loginbtn">'
												+'<input type="image" border="0" alt="LOG IN" src="/page/images/buttons/login.gif" name="" id="login"/>'												
											+'</li>'								
										+'</ul>'							
									+'</form>'
									+'</div>'
									+'<div class="forgetpsw"><a id="forgetlogininlightbox" href="'+obj.forgetLoginUrl+'">Forgot your log in?</a></div>';								
		
		var wrapEnd = 	'</div>'
						+'</div>'
						+'<div class="lb-btm"><div><b></b></div></div></div>';
		
		var tmmLink = '<a href="'+ tellMeMoreList[obj.tellMeMoreType].tellMeMoreUrl + '?previousAction=' + obj.onloginSuccess + '" id="tmm"><img src="/page/images/buttons/tell_me_more.gif" width="72" height="62" alt="Tell Me More" /></a>';
	
		var signupLink = '<div class="signup"><b>New User?</b> <a id="signupinlightbox" href="#">Sign Up now</a></div>';		
		
		if(needTellMeMore){
			var htmltemplate = wrapStart + mainContent + tmmLink + loginForm + wrapEnd;
		}
		else {
			if(obj.noSignUp){
				var htmltemplate = wrapStart + mainContent + loginForm + wrapEnd;
			} else {
				var htmltemplate = wrapStart + mainContent + loginForm + signupLink + wrapEnd;
			}						
		}
		
		$j(document.body).append(htmltemplate);
		obj.lbox = $j('.lbwrap');
		obj.lbox.css({
			'position':'absolute',
			'display':'block',
			'width':obj.width+'px'					
		});
		setCenter(obj);
		obj.lbox.pngFix();
		
		var currentScope = obj;		
		$j('.close').bind('click',function(e){
			e.preventDefault();
			currentScope.close();
		});		
		
		$j('#signupinlightbox').attr('href',obj.signupUrl + "?previousAction=" + obj.onloginSuccess);		
		
		$j("#signupinlightbox").click(function() {  
			setCookie('requestPath',obj.requestPath);  
		}); 
		$j("#tmm").click(function() {  
			setCookie('requestPath',obj.requestPath);  
		}); 
		$j("#forgetlogininlightbox").click(function() {  
			setCookie('requestPath',obj.requestPath);  
		}); 
		$j("#login").click(function() {  
			setCookie('requestPath',obj.requestPath);  
		}); 
		$j('#loginforminlightbox').attr('action', obj.loginUrl);
		$j('input[name="userName"]').focus();	
		
		
		$j('input[name="userName"],input[name="password"]').each(function(){			
			$j(this).keypress(function(e) {
				setCookie('requestPath', obj.requestPath);
				if($j.browser.msie){
					if(e.keyCode == '13') $j('#loginforminlightbox').submit();	
				}
			});			
		});
		
		
		return;		
		
	};	
}