<HTML>
	<head>
		<title>Login</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script type="text/javascript" src="<?php echo PATH_TO_ROOT;?>_support/jquery.js"></script>
		<link rel="stylesheet" type="text/css" href="<?php echo PATH_TO_ROOT;?>extjs/resources/css/ext-all.css" />
		<style type="text/css">
			body, html {height: 100%;}
			#outer {height: 100%; overflow: visible;} /* or without overflow */

			.hole {
  				
 				padding: 0px;
				height: 600px;width: 800px;
				}
					
				.loginErrorMsgTitle {
					padding-top:2px;
					font: 26px tahoma,arial,helvetica,sans-serif
				}
				.loginErrorMsg{
				
					font: 14px tahoma,arial,helvetica,sans-serif
				}
				/* Z-index of #mask must lower than #boxes .window */
				#mask {
				  position:absolute;
				  z-index:9000;
				  background-color:#000;
				  display:none;
				}
				  
				#boxes .window {
				  position:absolute;
				  width:440px;
				  height:200px;
				  display:none;
				  z-index:9999;
				  
				   background-color:#ced9e7;
				}
				
				
				/* Customize your modal window here, you can add background image too */
				#boxes #dialog {
				  width:300px; 
				  height:150px;
				}
		</style>
		
	</head>
	<body>

<div id="boxes">

	
	<!-- #customize your modal window here -->

	<div id="dialog" class="window">
		<table width="100%" cellpadding="0" cellspacing="0">
			<tr>
				<td height="25" bgcolor="#a9c1e1" style="padding-right:5px; padding-top:3px"><div id="closeIcon" class="x-tool x-tool-close"></div>&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td align=center>
					<a href=mailto:<?php echo $emails['admin_email'];?>><img src="<?php echo PATH_TO_ROOT;?>_img/loginerror.png" border=0></a>
					<div class="loginErrorMsgTitle">Login Failed</div>
					<div class="loginErrorMsg">Please try again!</div>
				</td>
			</tr>
			
		</table>
	
	</div>

	
	<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->	
 	<div id="mask"></div>
</div>

<table cellpadding="5" cellspacing="5" height="100%" width="100%">
	<tr>
		<td>
			<table align="center" cellpadding="10" cellspacing="2">
				<tr>
					<td align="center" colspan="2" style="padding-bottom:30px"><img src="/webProjects/masmi_mystery_logo.jpg"></td>
				</tr>											
				<tr>
					<td><span class="x-form-item" style="text-align:right; padding-right:20px">Username:</span></td>
					<td><input type="text" name="user" id="username" class="x-form-text x-form-field"></td>
				</tr>
				<tr>
					<td><span class="x-form-item" style="text-align:right; padding-right:20px">Password:</span></td>
					<td><input type="password" name="pass" id="password" class="x-form-text x-form-field"></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td style="padding-top:10px">
						<table cellspacing="0" class="x-btn x-btn-noicon" id="loginBtn" style="width: 75px;">
							<tbody class="x-btn-small x-btn-icon-small-left">
								<tr>
									<td class="x-btn-tl"><i>&nbsp;</i></td>
									<td class="x-btn-tc"></td>
									<td class="x-btn-tr"><i>&nbsp;</i></td>
								</tr>
								<tr >
									<td class="x-btn-ml"><i>&nbsp;</i></td>
									<td class="x-btn-mc" id="Blogin" ><em unselectable="on" class="" >
										<button type="button" class=" x-btn-text" tabindex="-1">Login</button></em>
									</td>
									<td class="x-btn-mr"><i>&nbsp;</i></td>
								</tr>
								<tr>
									<td class="x-btn-bl"><i>&nbsp;</i></td>
									<td class="x-btn-bc"></td>
									<td class="x-btn-br"><i>&nbsp;</i></td>
								</tr>
							</tbody>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<script>
	// temp variable for checking if we need to focus password after pressing Enter key
	var usernameFocus = 1;			
    var showError = 0; 
	
	// if you click on button Login we check if login parameters are ok with function checkLogin 
    $('#loginBtn').click(checkLogin);

    // showing black screen with failure login window
    function ShowDialog() {
    		var id =  '#dialog';
			//Get the screen height and width
			var maskHeight = $(document).height();
			var maskWidth = $(window).width();
									
			//Set height and width to mask to fill up the whole screen
			$('#mask').css({'width':maskWidth,'height':maskHeight});
										
			//transition effect		
			$('#mask').fadeIn(1000);	
			$('#mask').fadeTo("fast",0.4);	
							
			//Get the window height and width
			var winH = $(window).height();
			var winW = $(window).width();
								              
			//Set the popup window to center
			$(id).css('top',  winH/2-$(id).height()/2);
			$(id).css('left', winW/2-$(id).width()/2);
									
			//transition effect
			$(id).fadeIn(2000);
			showError = 1; 
    }
     		
    // ajax function which checks if login parameters are correct
    function checkLogin() {
    	$.ajax({
         		url: "<?php echo PATH_TO_ROOT;?>_ajaxManipulators/ajax.Login.php", 
         		data: 'action=login&user='+$('#username').val()+'&pass='+$('#password').val()<?php if($tgi)  echo "+'&survey=true'";?>,     					
         		success: function(data){
         			if (data == 'true') {
         					document.location = 'index.php<?php if ($_GET['loadComment']) echo "?loadComment=".$_GET['loadComment'];?>';
         			} else {
	  						 ShowDialog();      								
         			}
      			}
         	});  	
    }

  
  	// some css changing effects  
	$('#closeIcon').mouseover(function(){ $(this).addClass("x-tool-close-over");})
	$('#closeIcon').mouseout(function(){ $(this).removeClass("x-tool-close-over"); })
	$('#loginBtn').mouseover(function(){ $(this).addClass("x-btn-over"); })
	$('#loginBtn').mouseout(function(){$(this).removeClass("x-btn-over");})
	
	// if you click on close image window with failure login closes
	$('#closeIcon').click(function(){ $('#mask, .window').hide(); })
	
	$(document).keydown(function(e){
		if (e.which == '13' && usernameFocus == 1 ) {
			// on Enter keydown and focus on username change focus to password field
			$('#password').focus().select();
			usernameFocus = 0			
		} else if (e.which == '13' && showError == 0 ) {
			// on Enter keydown take off focus from password and username fields
			$('#password').blur();
			$('#username').blur();
			checkLogin();
		} else if (e.which == '27' || ( e.which == '13' && showError == 1)) {
			// on ESC keydown close failed login window
			$('#mask').hide();
			$('.window').hide();
			showError = 0;
			$('#username').focus().select();
		} 
	})
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});	
	
	//on startup focus on username
	$('#username').focus();
	// if focus on username temp variable usernameFocus set to 1. If you click enter automaticaly focus password field
	$('#username').focusin(function(){ usernameFocus = 1;})
	$('#password').focusin(function(){ usernameFocus = 0;})
    
		       
</script>

	</body>
</HTML>