<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>
		<title>web server</title>
		<link rel="stylesheet" href="css/style.css" />

		<script type="text/javascript" src="js/mootools.js"></script>

		<script type="text/javascript">

			/*全局变量，cookie保存的天数*/
			var DAYS = 30;

			var FLAG; //作为控制登录的标识,为0时是用户登录，为1时是设备登陆

			var selValue;//选择框中的语言

			var str1,str2,str3;

			var winParent = window.parent;
			
			var ocx;

			/*页面加载时调用loadIndex方法*/
			function loadIndex(){
				
				FLAG = 0; 

				//SetLans();//加载语言
				selValue = $('selectLan').options[$('selectLan').selectedIndex].value;
				switchLanguage(selValue);
				
				//ocx = winParent.getOcx();
				//ocx.sLanguage2 = selValue;
				
				if(checkCookie("c_username"))
				{
					$("username").value = getCookie("c_username");
					$("pwd").value = getCookie("c_pwd");
					$("deviceID").value = getCookie("c_deviceID");
					$('deviceUserName').value = getCookie("c_DUName");
					$('devicePwd').value = getCookie("c_DPwd");
					$("rember").checked = getCookie("c_rember");
				}
				else
				{
				}

				$("login_device").style.display = "none";
				$("btn_user").style.background = "#ffffff";
				$("btn_device").style.background = "url(img/btn_tab.png)";
				$("login_btn_user").style.background = "url(img/login_btn1.png)";
						
			}

			/**
				setCookie 设置cookie
				getCookie 获取cookie
				checkCookie 检查cookie是否存在
				deleteCookie 删除cookie
				setName 将用户名保存到cookie中
				setPassword 将密码保存到cookie中
			*/
			function setCookie(c_name,value,expiredays){
				var exdate = new Date();
				exdate.setDate(exdate.getDate() + expiredays);
				document.cookie = c_name + "=" + escape(value) +
				((expiredays == null) ? "" : ";expires = " + exdate.toGMTString());
			}

			function getCookie(c_name){
				if (document.cookie.length>0){
				  c_start=document.cookie.indexOf(c_name + "=");
				  if (c_start!=-1){ 
					c_start=c_start + c_name.length+1; 
					c_end=document.cookie.indexOf(";",c_start);
					if (c_end==-1) c_end=document.cookie.length;
					return unescape(document.cookie.substring(c_start,c_end));
					}	
				  }
				return ""
			}

			function checkCookie(c_name){
			   var username=getCookie(c_name);
				if (username!=null && username!=""){
					return true;
					}else {
					return false;
				  }
				}
			function deleteCookie(c_name){
				setCookie(c_name,1,-1);
			}

			function setName(){
				var username = $("username").value;
				setCookie("c_username",username,DAYS);
			}
			function getName()
			{
				return $("username").value;
			}
			function setDevice()
			{
				var deviceID = $('deviceID').value;
				var deviceUserName = $('deviceUserName').value;
				var devicePwd = $('devicePwd').value;
				setCookie("c_deviceID",deviceID,DAYS);
				setCookie("c_DUName",deviceUserName,DAYS);
				setCookie("c_DPwd",devicePwd,DAYS);
			}

			function setPassword(){
				var pwd = $("pwd").value;
				setCookie("c_pwd",pwd,DAYS);
			}
			
			
			function login()
			{
				selValue = $('selectLan').options[$('selectLan').selectedIndex].value;
				/*用户提交方法，同时保存和删除cookie*/
				if($("rember").checked){
					setName();
					setPassword();
					setCookie("c_rember",$("rember").checked,DAYS);
					setDevice();
				}else{
					deleteCookie("c_username");
				}

				if (FLAG == 0)//user login
				{
					var username = $("username").value;
					var pwd = $("pwd").value;
					ocx = winParent.getOcx();
					ocx.sLanguage2 = selValue;
					var rtn = ocx.LoginServer("qvcloud.net" , 8300 , username , pwd , "123" , 0);
					if(rtn == 1)
					{
						winParent.ifrmHidden("loginFrm");
						winParent.ifrmShow("headerFrm");
						
						winParent.getFrmByName("header_frm").headerLoad();
						winParent.getFrmByName("header_frm").changeLan(selValue);
						
						var dlFrmByName = winParent.getFrmByName("dl_frm");
						var uInfoFrm = winParent.getFrmById("uinfoFrm"); 
						var dmFrm = winParent.getFrmById("dmFrm");//add by chj
						var uInfoFrmByName = winParent.getFrmByName("uinfo_frm");
						var dmFrmByName = winParent.getFrmByName("dm_frm");//add by chj
						winParent.onresize = function(){
							
							dlFrmByName.setWH();
							uInfoFrmByName.setDivPos(uInfoFrm.width,uInfoFrm.height);
							dmFrmByName.setDMWH(dmFrm.width,dmFrm.height);//add by chj
						}
						dlFrmByName.myLoad(selValue);
						uInfoFrmByName.setDivPos(uInfoFrm.width,uInfoFrm.height);
						dmFrmByName.setDMWH(dmFrm.width,dmFrm.height);//add by chj
					}
				}
				else //device login
				{
					var deviceID = $("deviceID").value;
					var deviceUserName = $("deviceUserName").value;
					var devicePwd = $("devicePwd").value;
					ocx = winParent.getOcx();
					
					ocx.UUID = deviceID;
					ocx.strName = deviceUserName;
					ocx.strPassword = devicePwd;
					winParent.resEvtFlg = "login";
					ocx.sLanguage2 = selValue;
					var rtn = ocx.Login();  //通过设备登陆

				}
				
			}		
			
			/*login_user和login_device方法用于控制DIV的显示和隐藏以及tab标签的颜色变换*/
			function login_user(){

				FLAG = 0;
				$("btn_user").style.background = "#ffffff";
				$("btn_device").style.background = "url('img/btn_tab.png')";
				$("login_user").style.display = "block";
				$("login_device").style.display = "none";

			}
			function login_device(){

				FLAG = 1;
				$("btn_device").style.background = "#ffffff";
				$("btn_user").style.background = "url('img/btn_tab.png')";
				$("login_user").style.display = "none";
				$("login_device").style.display = "block";

			}

			/*鼠标点击用户名框，默认消失*/
			function user_focus(){
				$("username").value = "";
				$("username").style.color = "#000000";

			}
			
			/*register 用户注册方法*/
			function register(){
				selValue = $('selectLan').options[$('selectLan').selectedIndex].value;

				ocx = winParent.getOcx();
				ocx.sLanguage2 = selValue;

				winParent.ifrmHidden("loginFrm");
				winParent.ifrmShow("regFrm");
				winParent.getFrmById("regFrm").contentWindow.regLoad(selValue);
			
				
			}

			/*鼠标处理事件*/
			document.onkeydown = function(e){

				var theEvent = e || window.event;
				var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
				var activeElementId = document.activeElement.id;
				
				if (code == 13)
				{
					//validate();

					return false;
				}
				return true;
			}
			
			/*findPwd 找回密码*/
			function findPwd(){
				var username = $("username").value;
				if(username == "")
				{
					alert(str1);
					
				}
				else
				{
					ocx = winParent.getOcx();
					var rtn = ocx.ForgetPassword("qvcloud.net",8300,username);
					if(rtn != 0)
					{
						alert(str2);
					}
				}
			}
			function mousedown()
			{
				//点击时“登录”颜色变黑
				var loginBtn = $("login_btn_user");
				loginBtn.style.background = "url(img/login_btn2.png)";
				loginBtn.style.color = "#000000";
			}
			function mouseup()
			{	
				var loginBtn = $("login_btn_user");
				loginBtn.style.background = "url(img/login_btn1.png)";
				loginBtn.style.color = "#ffffff";
			}

			function switchLanguage(val)
			{
				var t1 = $('t1');
				var btn_user = $('btn_user');
				var btn_device = $('btn_device');
				var td1 = $('td1');
				var td2 = $('td2');
				var td3 = $('td3');
				var td4 = $('td4');
				var td5 = $('td5');
				var td6 = $('td6');
				var s1 = $('s1');
				var span2 = $('span2');
				var login_btn_user = $('login_btn_user');
				var a1 = $('a1');
				var a2 = $('a2');
				var a3 = $('a3');
				switch(val)
				{
					case "English":
						  t1.innerHTML = "Monitor Your Network";
						  btn_user.innerHTML = "By User";
						  btn_device.innerHTML = "By Device";
						  s1.innerHTML = "Language:";
						  td1.innerHTML = "Login & Preview";
						  td2.innerHTML = "UserName&nbsp;&nbsp;";
						  td3.innerHTML = "Password&nbsp;&nbsp;";
						  s2.innerHTML = "Save Password";
						  td4.innerHTML = "Device ID&nbsp;";
						  td5.innerHTML = "UserName&nbsp;";
						  td6.innerHTML = "Password&nbsp;";
						  login_btn_user.innerHTML = "iBall Cloud Login";
						  a1.innerHTML = "Register";
						  a2.innerHTML = "Download";
						  a3.innerHTML = "Get Password";
						  str1 = "User name can not be empty！";
						  str2 = "The password has sent to your E-Mail successfully!";
						  //str3 = "User name";
						break;
					case "简体中文":
						  t1.innerHTML = "远程网络视频浏览器";
						  btn_user.innerHTML = "按用户";
						  btn_device.innerHTML = "按设备";
						  s1.innerHTML = "语言:";
						  td1.innerHTML = "视频监控登录";
						  td2.innerHTML = "用&nbsp;&nbsp;户&nbsp;&nbsp;名&nbsp;&nbsp;&nbsp;";
						  td3.innerHTML = "密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;";
						  s2.innerHTML = "记住密码";
						  td4.innerHTML = "设&nbsp;&nbsp;&nbsp;备&nbsp;&nbsp;&nbsp;ID&nbsp;";
						  td5.innerHTML = "设备用户名";
						  td6.innerHTML = "设备密码&nbsp;&nbsp;&nbsp;";
						  login_btn_user.innerHTML = "登&nbsp;录";
						  a1.innerHTML = "注册";
						  a2.innerHTML = "控件下载";
						  a3.innerHTML = "找回密码";
						  str1 = "用户名不能为空！";
						  str2 = "密码已发送到注册时的邮箱！";
						  //str3 = "用户名";
						break;
					case "Portugal":
						  t1.innerHTML = "Monitor remoto da rede";
						  btn_user.innerHTML = "Por usuário";
						  btn_device.innerHTML = "Por dispositivo";
						  s1.innerHTML = "Idioma:";
						  td1.innerHTML = "Login de monitor";
						  td2.innerHTML = "Nome";
						  td3.innerHTML = "Senha";
						  s2.innerHTML = "Salvar senha";
						  td4.innerHTML = "ID";
						  td5.innerHTML = "Nome";
						  td6.innerHTML = "Senha";
						  login_btn_user.innerHTML = "Login";
						  a1.innerHTML = "Registre-se";
						  a2.innerHTML = "Baixar";
						  a3.innerHTML = "Obter senha";
						  str1 = "Nome de usuário não pode ser empty!";
						  str2 = "Senha foi enviada para o e-mail endereço quando registering!";
						  //str3 = "Nome";
						break;
					default:;
						
				}
				/*
				if(!checkCookie("c_username"))
				{
					$('username').style.color = "#cccccc";
					$('username').value = str3;
				}*/
				//ocx = winParent.getOcx();
				//ocx.sLanguage2 = val;
			}
		function SetLans() {

          ocx = winParent.getOcx();
		 
          var lanstr = ocx.GetSurportLangList();
          
          if (lanstr == undefined || lanstr == null) {
              return;          
          }

          var lanArray = lanstr.split(';');
          
          if (lanArray == undefined || lanArray == null || lanArray.length == 0) {
              return;
          }

          var rightLen = lanArray.length - 1;
          $('selectLan').length = rightLen;
          for (i = 0; i < rightLen; ++i) {
              $('selectLan').options[i].text = lanArray[i]; 
              $('selectLan').options[i].value = lanArray[i];
          }
      }
		
	</script>

	</head>
	<body onload="loadIndex()" bgcolor="#eeeeee">
	<center>
		<!--上层table -->
		<table width="1280px" cellspacing="0" cellpadding="0">
			<tr>
				<td style="width:73%;height:40px;"><div id="t1" class="div_title">Remote Monitor of Network</div></td>
				<td style="width:27%;height:40px;">
					<div style="width:100%;height:45px;"></div>
					<div class="div_td">	
						<span id="s1">Language:</span>
						<select id="selectLan" onchange="switchLanguage(this.value)" style="color:#3272B0;">
							<option value="English">English</option>
							<option value="简体中文">简体中文</option>
							<option value="Portugal">Portugal</option>
						</select>
					</div>
				</td>
			</tr>
		</table>

		<!--下层table -->
		<table id="tb_index" width="1280px" height="399px" cellspacing="0" cellpadding="0" background="img/login_bg.png">
			<tr>
				<td style="width:50%;padding-left:250px;" align="center">
					<div class="div_left" style="width:350px;height:350px;background:url(img/decolation.png);"></div>
				</td>
				<td style="width:50%;" align="center" cellspacing="0" cellpadding="0">
						<!--下层table中右侧最外层table -->
					<div id="login_div">
					<table align="left" width="100%" cellspacing="0" cellpadding="0">
							<tr>
								<td>
									<div id="btn_user" class="btn_tab" style="float:left;" onclick="login_user()">By User</div>
									<div id="btn_device" class="btn_tab" style="float:right;" onclick="login_device()">By Device</div>
								</td>
							</tr>
							<tr><td id="td1" align="left" style="padding:15px 0 5px 24px; font-size:18px; color:#ED1C24;font-weight:bold;">Log in monitoring system</td></tr>
							<tr>
								<td style="padding:0;" align="center"><!--此td中还有两个DIV，每个DIV中有一个table-->
								<center>
									<div id="login_user" class="login_hs">
								
									<table  width="100%" height="90%" cellspacing="0" cellpadding="0">
										<tr>
											<td id="td2">UserName&nbsp;&nbsp;</td>
											<td><input type="text" id="username" class="user_input" onkeydown="javascript:if (event.keyCode==13) event.keyCode=9;"/></td>
										</tr>
										<tr>
											<td id="td3">Password&nbsp;&nbsp;</td>
											<td><input type="password" id="pwd" class="user_input" onkeydown="javascript:if (event.keyCode==13) login();"/></td>
										</tr>
										<tr>
											<td colspan="2" align="right">
												<input type="checkbox" id="rember" style="vertical-align:middle;"/>&nbsp;
												<font size="2px"><span id="s2">Save Password</span></font>
											</td>
										</tr>
									</table>
									</div>
									<!--加载时此DIV是隐藏的，当点击“按设备”时显示，点击“按用户”时隐藏 -->
									<div id="login_device" style="display:none;" class="login_hs">
									
									<table width="100%" height="90%" cellspacing="0" cellpadding="0">
										<tr>
											<td id="td4">Device ID&nbsp;</td>
											<td><input type="text" class="deviceText" id="deviceID" onkeydown="javascript:if (event.keyCode==13) event.keyCode=9;"/></td>
										</tr>
										<tr>
											<td id="td5">UserName&nbsp;</td>
											<td><input type="text" class="deviceText" id="deviceUserName" onkeydown="javascript:if (event.keyCode==13) event.keyCode=9;"/></td>
										</tr>
										<tr>
											<td id="td6">Password&nbsp;</td>
											<td><input type="password" class="deviceText" id="devicePwd" onkeydown="javascript:if (event.keyCode==13) login();"/></td>
										</tr>
									</table>
									</div>
									<div style="margin-top:17px;">
										<button id="login_btn_user" class="login_btn" onclick="login()" onmousedown="mousedown()" onmouseup="mouseup()">Login</button>
									</div>
									<div id="bottom_login">
											<a id="a1" href="javascript:register()" style="padding-left:20px;" class="a_bottom">Register</a>&nbsp;&nbsp;&nbsp;&nbsp;
											<a id="a2" href="http://qv.iballcloud.com/update_web/vwebclient.exe" class="a_bottom">Download</a>&nbsp;&nbsp;&nbsp;&nbsp;
											<a id="a3" href="javascript:findPwd()" class="a_bottom">Get Password</a>
									</div>
									</center>
								</td>
							</tr>
						</table>
						</div>
				</td>
			</tr>
		</table>
		
		</center>
	</body>
</html>