<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		
		<link rel="stylesheet" href="css/style.css" />
		<style type="text/css">
			div{
				position:absolute;
			}
			#div3{
				text-align:center;
				color:#ffffff;
				font-size:20px;
				font-weight:bold;
			}
			
			#refreshBtnDiv a{
				font-size:16px;
				color:#ffffff;
				
			}
			#refreshBtnDiv a:hover{
				font-size:16px;
				color:#00ffff;
				
			}
			#div_dl{left:0px;}
			#div1,#div2,#list_th,#listDiv,#refreshBtnDiv,#pagingDiv,#refresh,.td_div{position:relative;}
		</style>
		<script type="text/javascript" src="js/mootools.js"></script>

		<script type="text/javascript">
		var ConnFlag = 0,nIsObjInstalled = false;//设备连接成功为1，断开连接为0
		var lan;
		var str,str1,str2,str3;
		var clkFlg = 10000;
		var ocx;
		var div3;

		var chromeFlg;

		var winParent = window.parent;
		
		var dlFrm = winParent.getFrmById("dlFrm");
		var headerFrm = winParent.getFrmById("headerFrm");
		var dmFrm = winParent.getFrmById("dmFrm");
		var uInfoFrm = winParent.getFrmById("uinfoFrm");

		var div2Width;
		var div2Height;
		var div_dlWidth;
		var div_dlHeight;
		var div1Height;
		var listDiv;
 
		var times = 0; //remember times about the function refreshDevState

		function setWH()
		{	
			winParent.findDimensions();
			
			var width = winParent.winWidth;
			var height = winParent.winHeight - 40;
			
			div_dlHeight = height - 4;
			div1Height = div_dlHeight - 15;
			div2Height = div_dlHeight - 15;
		
			div2Width = width - 210;
			div_dlWidth = width - 4;
			if (width < 1356)
			{
				div_dlWidth = 1352;
				div2Width = div_dlWidth - 210;
			}
			
			$("div_dl").style.width = div_dlWidth.toString() + "px";
			div1.style.width = "200px";

			headerFrm.width = div_dlWidth.toString() + "px";
			dmFrm.width = div_dlWidth.toString() + "px";
			uInfoFrm.width = div_dlWidth.toString() + "px";
			
			if(height < 727)
			{
				div_dlHeight = 727;
				div1Height = 712;
				div2Height = 712;
			}
			
			if(winParent.pageFlg == "dlFrm")
			{
				dlFrm.width = div_dlWidth.toString() + "px";
				dlFrm.height = div_dlHeight.toString() + "px";
				dlFrm.style.top = "40px";
			}

			listDiv = div1Height - 129;
			
			div1.style.height = div1Height.toString() + "px";
			$("div_dl").style.height = div_dlHeight.toString() + "px";
			$("listDiv").style.height = listDiv.toString() + "px";
			
			dmFrm.height = div_dlHeight.toString() + "px";
			uInfoFrm.height = div_dlHeight.toString() + "px";
			
			if(ConnFlag)
			{
				div2.style.width = div2Width.toString() + "px";
				div2.style.height = div2Height.toString() + "px";
			}

			//set div3 width ,height and position 
			div3 = $('div3');
			var div3Width = div2Width -250;
			div3.style.width = div3Width.toString() + "px";
			div3.style.height = "30px";
			div3.style.top = ((div_dlHeight - 30)/2).toString() + "px";
			div3.style.left = ((div_dlWidth - div3Width)/2).toString() + "px";
			
			divHeight = $('listDiv').style.height;
			fenye();
			
		}
			
		function changeLan(lan)
		{
			var th1 = $('th1');
			var th2 = $('th2');
			var bRefresh = $('bRefresh');
			var prePage = $('pre');
			var nextPage = $('next');
			switch(lan)
			{
				case "English":
					th1.innerHTML = "Name";
					th2.innerHTML = "Status";
					bRefresh.innerHTML = "Refresh";
					str = "The device isn't online,please refresh.";
					str3 = "Click on the device list to connect ,the process may take you some time, please be patient.";
					prePage.innerHTML = "PrePage";
					nextPage.innerHTML = "NextPage";
					break;
				case "简体中文":
					th1.innerHTML = "名称";
					th2.innerHTML = "状态";
					bRefresh.innerHTML = "刷新状态";
					str = "当前设备不在线，请刷新确认。";
					str3 = "点击左侧列表，连接设备;连接的过程可能需要花费您一些时间，请耐心等待。";
					prePage.innerHTML = "上一页";
					nextPage.innerHTML = "下一页";
					break;
				case "Portugal":
					th1.innerHTML = "Nome";
					th2.innerHTML = "Status";
					bRefresh.innerHTML = "Atualização";
					str = "O dispositivo não é on-line, por favor, atualize.";
					str3 = "Clique na lista de dispositivos para se conectar, o processo pode levar algum tempo, por favor, seja paciente.";
					prePage.innerHTML = "PrePage";
					nextPage.innerHTML = "NextPage";
					break;
				default:;
			}
		}

		function rtnEvt(ocx,nResult,iID)
		{
			if(nResult == 1)//登陆成功
			{
					ocx.iID = iID;

					//点击设备列表项，设备在线，则显示控件（将宽度和高度释放出来）
					div2.style.width = div2Width.toString() + "px";
					div2.style.height = div2Height.toString() + "px";
					div3.style.display = "none";
					ocx.sLanguage2 = lan;
					ConnFlag = 1;
					
					for (var i = 0; i < tbody.rows.length ;i++ )
					{
						if(tbody.rows[i].id == clkFlg)
						{
							tbody.rows[i].style.background = "#2adcc6";
							break;
						}
					}
					
				}
				else
				{
					if (nResult!=-2)
					{
						alert(ocx.GetNetSDKLastErrorStr());
					}

					for (var i = 0; i < tbody.rows.length ;i++ )
					{
						tbody.rows[i].style.background = "#a0a0a0";
					}
					clkFlg = 999;
					
				}	
		}

		function myLoad(selValue)
		{
			winParent.pageFlg = "dlFrm";
			
			ocx = $("ocx");
			setWH();
			
			lan = selValue;
			changeLan(lan);

			div3.innerHTML = str3;

			winParent.deviceListInfo = "null\n";
			times = 0;
			//fisrt clear the table and then get the device list
			for (var i = 0; i < tbody.rows.length ; )
			{
				tbody.deleteRow(i);
			}

			setTimeout("refreshDevState(0)",100);
			
			/*
			divHeight = $('listDiv').style.height;
			curPage = 0;
			curPageNum = 0;
			fenye();
			*/
			

		}

		function pluginLoaded() {

			nIsObjInstalled = true;
			ocx = $("ocx");

			ocx.addEventListener('loginresult2',function(nResult, sIP, lPort, sName, sPassword, iID){
				
				if(winParent.resEvtFlg == "login")
				{
					resEvtLogin(ocx,nResult,iID);
				}
				else
				{
					chromeFlg = 'login';
					rtnEvt(ocx,nResult,iID);
				}
			},false);

			ocx.addEventListener('logout2',function(nID){
				
				if(winParent.resEvtFlg == "login")
				{
					resEvtLoginOut();
				}
				else
				{
					chromeFlg = 'logout';
					ConnFlag = 0;//在线标志设置成0，不在线
					//隐藏控件，将其高度宽度设置成0
					div2.style.width = "0px";
					div2.style.height = "0px";
					for (var i = 0; i < tbody.rows.length ;i++ )
					{
						tbody.rows[i].style.background = "#a0a0a0";
					}

					div3.style.display = "block";
				}
			},false);
		}

		function getDeviceList(val)
		{
			var deviceListStr = "";
			if (times == 0 || times == 999)
			{
				deviceListStr = ocx.GetDevListFromServer();
				winParent.deviceListInfo = deviceListStr;
			}
			else
			{
				deviceListStr = winParent.deviceListInfo;
			}

			/*加载左侧设备列表*/
			if(deviceListStr != "null\n")
			{
				var _tr;
				var _td1;
				var _td2;
				var _td3;
				
				var deviceList = eval(deviceListStr);
				
				var listDivHeight = $('listDiv').style.height;
				var n = Math.floor(parseInt(listDivHeight)/41);
				var len = deviceList.length
				
				if ((val + n) <= len)
				{
					len = val + n;
				}
				
				for(var i=val;i<len;i++)
				{
					_tr = tbody.insertRow(-1); //插入一行
					_td1 = _tr.insertCell(-1);//插入一列
					_td2 = _tr.insertCell(-1);
					_td3 = _tr.insertCell(-1);
					
					_tr.style.background = "#a0a0a0";
					//_tr.id = i;
					_tr.id = deviceList[i].NodeID;
					_td1.align = "center";
					_td2.align = "center";

					_td1.innerHTML = deviceList[i].NodeName;
					_td2.innerHTML = "<div class='td_div' id='td_div"+i+"'></div>";
					
					var td_div = $("td_div"+i);

					//"0"表示设备不在线，"1"表示设备在线，同时显示背景图
					if(deviceList[i].Online == "0")
					{
						td_div.style.background = "url(img/line_down.png)";
						//ConnFlag = 0;
					}
					else
					{
						td_div.style.background = "url(img/line_up.png)";

						//点击刷新后，如果有设备是连接的，则显示亮的
						if((_tr.id == clkFlg) && (chromeFlg != 'logout'))
						{
							ConnFlag = 1;
							_tr.style.background = "#2adcc6";
						}
					}

					_td3.innerHTML = deviceList[i].NodeID;
					_td3.style.display = "none";

					//为_tr添加onclick事件,作为连接设备的操作，同时背景色会改变
					_tr.onclick = function()
					{	
						if(deviceList[val + this.rowIndex].Online == "0")
						{
							this.style.background = "#a0a0a0";
							alert(str);
						}
						else
						{
							if(clkFlg != this.id || chromeFlg == 'logout')
							{	
								winParent.resEvtFlg = "loginEx";
								winParent.tempNodeID = this.cells[2].innerHTML;
								
								//连接设备方法LoginEx
								var rtn = ocx.LoginEx(this.cells[2].innerHTML);
								if(rtn == 1)
								{
									clkFlg = this.id;
									
								}
							}
						}
						
					}

					//为每个tr添加onmouseover和onmouseout事件
					_tr.onmouseover = function()
					{
						this.style.background = "#2adcc6";
					}
					
					_tr.onmouseout = function()
					{
						if(clkFlg != this.id || chromeFlg == 'logout')
						{
							this.style.background = "#a0a0a0";
						}
				
					}

				}
			}
		}

		//刷新设备
		function refreshDevState(val)
		{	
			for (var i = 0; i < tbody.rows.length ; )
			{
				tbody.deleteRow(i);
			}

			getDeviceList(val);

			winParent.indexNum = val;
			
			if(times == 0)
			{
				divHeight = $('listDiv').style.height;
				curPage = 0;
				curPageNum = 0;
				fenye();
			}

			times++;
		}

		function mousedown()
		{
			$("bRefresh").style.background = "url(img/reg_btn2.png)";
			$("bRefresh").style.color = "#000000";
		}
		function mouseup()
		{
			$("bRefresh").style.background = "url(img/refresh_btn1.png)";
			$("bRefresh").style.color = "#ffffff";
		}

	    function resEvtLogin(ocx,nResult,iID)
		{
			if(nResult == 1)//登陆成功
			{
				ocx.iID = iID;
				//ocx.sLanguage2 = lan;
				changeLan(ocx.sLanguage2);
				//只释放出device_list中的控件区域
				winParent.ifrmHidden("loginFrm");
				
				div1 = $('div1');
				div2 = $('div2');
				div1.style.display = "none";
				dlFrm.style.top= "0px";
				
				setDevLoginWH();
				winParent.onresize = setDevLoginWH;
			
			}
			else
			{
				if (nResult!=-2)
				{
					alert(ocx.GetNetSDKLastErrorStr());
				}
			}	
		}

	function resEvtLoginOut()
	{
		//只释放出device_list中的控件区域
		winParent.ifrmShow("loginFrm");
		div1 = $('div1');
		div2 = $('div2');
		winParent.getFrmById("dlFrm").width =  "0px";
		winParent.getFrmById("dlFrm").height = "0px";
		div2.style.width = "0px";
		div2.style.height = "0px";
		div1.style.display = "block";
	}

	function load()
	{
		installOcx();
	}
		
</script>

<script language="javascript" for="ocx" event="OnLoginResult2(nResult, sIP, lPort, sName, sPassword, iID)">
				if(winParent.resEvtFlg == "login")
				{
					resEvtLogin(ocx,nResult,iID);
				}
				else
				{
					rtnEvt(ocx,nResult,iID);
				}
				
</script>
<script language="javascript" for="ocx" event="OnLogout2(nID)">
	if(winParent.resEvtFlg == "login")
	{
		resEvtLoginOut();
	}
	else
	{
		ConnFlag = 0;//在线标志设置成0，表示不在线
		//隐藏控件，将其高度宽度设置成0
		div2.style.width = "0px";
		div2.style.height = "0px";
		for (var i = 0; i < tbody.rows.length ;i++ )
		{
			if(tbody.rows[i].id == clkFlg)
			{
				tbody.rows[i].style.background = "#a0a0a0";
				break;
			}
		}

		clkFlg = 999;

		div3.style.display = "block";
	}
	
</script>

	</head>
	<body bgcolor="#434343" style="margin:0px auto;padding:0px;text-align:center;" onload="load()">
	<center>
	<div id="div_dl" style="margin:0px auto;text-align:center;position:absolute;z-index:0;">
		<div id="div1"> 
			<div id="list_th" style="width:100%;height:40px;border:1px solid #d2d2d2;border-left:0;">
			<table id="titleTb" cellspacing="0" cellpadding="0" width="100%" height="100%">
				<thead>
				<tr>
					<th id="th1">Name</th>
					<th id="th2">Status</th>
				</tr>
				</thead>
			</table>
			</div>
			<div id="listDiv" style="width:100%;height:0px;overflow-y:hidden;text-align:center;border-right:1px solid #d2d2d2;border-left:0;overflow-pageINdex:hidden;">
			<table id="devList_tb" cellspacing="0" cellpadding="0" style="width:100%;">
			<thead></thead>
			<tbody id="tbody"></tbody>
			</table>
			</div>
			<div id="refreshBtnDiv" style="width:200px;height:70px;border:1px solid #d2d2d2;border-left:0;border-top:0;padding-top:15px;">
				<div id="pagingDiv" style="width:200px;height:29px;border-bottom:1px solid #d2d2d2;">
				<a id="pre" href="javascript:void(0)">PrePage</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="next" href="javascript:void(0)">NextPage</a>
				</div>
				<div id="refresh" style="width:200px;height:40px;padding-top:5px;">
				<button id="bRefresh" onmousedown="mousedown()" onmouseup="mouseup()">Refresh</button>
				</div>
			</div>
			
		</div>
		
		<div id="div2">
		</div>
		<div id="div3"></div>
		<div style="clear:both;"></div>
	</div>
	</center>
	</body>
	<script type="text/javascript">
	
	//控件未安装时调用
	var temp;
	if (navigator.language) {
		temp = navigator.language;
	}
	else {
		temp = navigator.browserLanguage;
	}
	var lan = temp.substring(0,2);
	
	switch (lan)
	{
	case 'zh':
		str1 = "请允许或者下载安装该控件。";
		str2 = "安装完成后，请重新打开浏览器。";
		break;
	case 'en':
		str1 = "Please allow or download and install the control.";
		str2 = "After the installation is complete, please open the browser again.";
		break;
	case 'fa':
		break;
	default:;
	}
	
	function installOcx()
	{
		try{ 
			if("ActiveXObject" in window)
			{
				if(document.all.ocx.object == null)
				{ 
					alert(str1);
					
				} 
			}
			else
			{
				var mimetype = navigator.mimeTypes["application/qv-web"];
				
				if(mimetype)
				{
					nIsObjInstalled = true;
					var plugin = mimetype.enabledPlugin;
					
				}
				else
				{
					alert(str1);
					
					if(navigator.userAgent.indexOf("Safari")>0 && navigator.userAgent.indexOf("Chrome") < 0)
					{
						alert(str2);
					}
				}
			}
			
		}
		catch(e)
		{  
				alert("error !");  
		} 
	}
		var tbody;
		var div1 = $("div1");
		var div2;
		//加载时先隐藏控件，将其高度宽度设置成0
		div2 = $("div2");
		div2.style.width = "0px";
		div2.style.height = "0px";
		
		tbody = $("tbody");

		function setDevLoginWH()
		{
			winParent.findDimensions();
			var width = winParent.winWidth;
			var height = winParent.winHeight;

			if (width < 1356)
			{
				width = 1356;
			}
			
			if (height < 767)
			{
				height = 767;
			}
			
			winParent.getFrmById("dlFrm").width =  (width - 4).toString() + "px";
			winParent.getFrmById("dlFrm").height = height.toString() + "px";
			div2.style.width = width.toString() + "px";
			div2.style.height = height.toString() + "px";
		}



	insertObj();
	function insertObj()
	{
		if (nIsObjInstalled)
		{
			return;
		}

		div2.innerHTML = "";
		if("ActiveXObject" in window)
		{
			FLAG = 0;

			//IE浏览器
			div2.innerHTML = "<object  name='ocx' id='ocx' width='100%' height='100%' classid='CLSID:7DA73544-34F7-4c96-A86F-F7E3F51A9D23' codebase='/OCXCtrl.CAB#Version=2,0,4,36'></object>";
			
			if(document.all.ocx.object == null)
			{
				window.setTimeout("insertObj()", 1000);
			}
			
		}
		else
		{
			FLAG = 1;

			//非IE浏览器
			div2.innerHTML = "<object id='ocx' type='application/qv-web' width='100%' height='100%'><param name='onload' value='pluginLoaded'/></object>";
			
			var mimetype = navigator.mimeTypes["application/qv-web"];
			
			if (mimetype)
			{
			}
			else
			{
				if(isSafari = navigator.userAgent.indexOf("Safari")>0 && navigator.userAgent.indexOf("Chrome") < 0)
				{
					return;
				}
				
				window.setTimeout("insertObj()", 1000);
			}
		
		}
	}
	</script>
	<script>
		var divHeight = 0;
		var curPage = 0;
		var curPageNum = 0;
		var num = 0;
		var pageCount = 0;
		function fenye()
		{
			$('bRefresh').onclick = function(){
				times = 0;//when click the "refresh" button then set "times" equal zero
				refreshDevState(winParent.indexNum); //进入列表页后，首次注册刷新按钮
				}
			
			if(winParent.deviceListInfo != "null\n")
			{
				var deviceList = eval(winParent.deviceListInfo);
				var length = deviceList.length;
				
				num = Math.floor(parseInt(divHeight)/41); //每一页能容纳的设备数

				pageCount = Math.ceil(length / num);  //页数
				
				if (num >= length)
				{
					curPage = 0;
					$('pre').onclick = function(){
						
						return false;
					}
					$('next').onclick = function(){
						
						return false;
					}
				}
				else
				{
					var i ; 
					
					$('pre').onclick = function(){
						curPage--;
						if (curPage < 0)
						{
							curPage++;
							return false;
						}

						i = parseInt(curPage * num);
						refreshDevState(i);

						$('bRefresh').onclick = function(){
							times = 999;
							refreshDevState(i);
						}
					}

					$('next').onclick = function(){
						curPage++;
						if ((curPage + 1) > pageCount)
						{
							curPage--;
							return false;
						}

						i = parseInt(curPage * num);
						refreshDevState(i);

						$('bRefresh').onclick = function(){
							times = 999;
							refreshDevState(i);
						}
					}
				}
			}
		}
		
	</script>
</html>