<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>device manager</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/mootools.js"></script>

<style type="text/css">
	div{
		position:absolute;
	}

	.control a{
			font-size:16px;
			color:#ffffff;
				
			}
	.control a:hover{
			font-size:16px;
			color:#00ffff;
			}
	#div_dm{left:0px;}
	
</style>

<script type="text/javascript">
	
	var lan;
	var str,str1,str2,str3,str4,str5;
	var winParent = window.parent;
	var ocx;
	var selChn;
	function add(){
		//先将内容清空
		$("UUID").value = "";
		$("deviceName").value = "";
		$("deviceUserName").value = "";
		$("devicePwd").value = "";
		//显示小窗口
		$("deviceInfo").style.display = "block";
		$("hidInput").value = "0"; //设置成0 ，作为添加功能标识

		$("UUID").disabled = false;
		$("selChn").disabled = false;
	}

	function cancle_btn(){
		$("deviceInfo").style.display = "none";
	}


	//添加、修改设备功能
	function ok_btn(){

		//获取设备参数
		var UUID = $("UUID").value;
		var deviceName = $("deviceName").value;
		var deviceUserName = $("deviceUserName").value;
		var devicePwd = $("devicePwd").value;
		var pDevID =$("deviceIDHid").value;
		var hidInput = $("hidInput").value;
		selChn = parseInt($('selChn').options[$('selChn').selectedIndex].value);

		if (UUID == "")
		{
			alert(str2);
			return ;
		}
		if (deviceName == "")
		{
			alert(str3);
			return ;
		}
		if (deviceUserName == "")
		{
			alert(str4);
			return ;
		}

		if(hidInput == "0") // 添加设备
		{
			var rtn = ocx.AddDeviceToServerWithChnSum(UUID,deviceName,deviceUserName,devicePwd,1,0,1,selChn);

			if(rtn == 1)//添加成功
			{
				//成功后清除内容
				$("UUID").value = "";
				$("deviceName").value = "";
				$("deviceUserName").value = "";
				$("devicePwd").value = "";
				
				fenye();
				refreshList(lastPageNum);
				curPage = lastPageNum/num;
				winParent.dm_num = lastPageNum;				
			}
		}
		else //修改设备
		{	
			var rtn = ocx.ModifyDevInfo(pDevID ,deviceName, UUID, deviceUserName, devicePwd);
			if(rtn == 1)
			{
				refreshList(curPageNum);
			}
		}
		
		$("deviceInfo").style.display = "none";
	}

	function myLoad(val)
	{
		ocx = winParent.getOcx();
		lan = val;

		changeLan(lan);

		refreshList(winParent.dm_num);
		
		divHeight = $('dm_list').style.height;
		fenye();

	}

	function changeLan(lan)
	{
		var th1 = $('th1');
		var th2 = $('th2');
		var th3 = $('th3');
		var dm_btn = $('dm_btn');
		var s1 = $('s1');
		var s2 = $('s2');
		var s3 = $('s3');
		var s4 = $('s4');
		var okBtn = $('okBtn');
		var canBtn = $('canBtn');
		var prePage = $('pre');
		var nextPage = $('next'); 
		var s5 = $('s5');
		switch(lan)
		{
			case "English":
				th1.innerHTML = "Device Name";
				th2.innerHTML = "Cloud ID";
				th3.innerHTML = "Operation";
				dm_btn.innerHTML = "AddDevice";
				s1.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cloud ID";
				s2.innerHTML = "DeviceName";
				s3.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;UserName";
				s4.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;Password";
				s5.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;Channels";
				okBtn.innerHTML = "OK";
				canBtn.innerHTML = "Cancel";
				str = "Confirm to delete the device？";
				str1 = "Device is in connection,please disconnect first.";
				str2 = "Cloud ID can not be empty!";
				str3 = "DeviceName can not be empty!";
				str4 = "UserName can not be empty!";
				str5 = "Delete device Success!";
				prePage.innerHTML = "PrePage";
				nextPage.innerHTML = "NextPage";
				break;
			case "简体中文":
				th1.innerHTML = "设备名称";
				th2.innerHTML = "设备序列号";
				th3.innerHTML = "设备操作";
				dm_btn.innerHTML = "添&nbsp;加";
				s1.innerHTML = "设备序列号";
				s2.innerHTML = "&nbsp;&nbsp;&nbsp;设备名称";
				s3.innerHTML = "设备用户名";
				s4.innerHTML = "&nbsp;&nbsp;&nbsp;设备密码";
				s5.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;通道数";
				okBtn.innerHTML = "确&nbsp;定";
				canBtn.innerHTML = "取&nbsp;消";
				str = "是否确认删除设备？";
				str1 = "设备连接中，请先断开连接。";
				str2 = "云ID不能为空!";
				str3 = "设备名不能为空！";
				str4 = "用户名不能为空！";
				str5 = "删除成功！";
				prePage.innerHTML = "上一页";
				nextPage.innerHTML = "下一页";
				break;
			case "Portugal":
				th1.innerHTML = "Nome do dispositivo";
				th2.innerHTML = "ID de nuvem";
				th3.innerHTML = "Operação";
				dm_btn.innerHTML = "Adicionar";
				s1.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ID de nuvem";
				s2.innerHTML = "Nome do dispositivo";
				s3.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nome de usuário";
				s4.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Senha";
				s5.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Canais";
				okBtn.innerHTML = "OK";
				canBtn.innerHTML = "Cancelar";
				str = "Confirmar para excluir o device？";
				str1 = "Dispositivo estiver ligado, desligue-o, por favor.";
				str2 = "Nuvem ID não pode ser vazio!";
				str3 = "Nomedispositivo não pode estar vazio!";
				str4 = "Nome de usuário não pode estar vazio!";
				str5 = "Exclua o dispositivo de sucesso!";
				prePage.innerHTML = "PrePage";
				nextPage.innerHTML = "NextPage";
				break;
			default:;
				
		}
	}

//获取设备列表
	function getDevInfoList(val)
	{
		var	deviceInfoListStr = ocx.GetDevInfo();
		winParent.deviceListInfo = deviceInfoListStr;
		
		if(deviceInfoListStr != "null\n")
		{
			var tbody = $("tbody");
			var _tr;
			var _td1;
			var _td2;
			var _td3;
			var _td4;
			var deviceInfoList = eval(deviceInfoListStr);
			
			var n = Math.floor((parseInt($('dm_list').style.height) - 40)/41);
			var len = deviceInfoList.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);
				_td3.align = "center";
				_td4 = _tr.insertCell(-1);
				//给每一列添加内容
				_td1.innerHTML = deviceInfoList[i].NodeName;
				_td2.innerHTML = deviceInfoList[i].UUID;
				_td3.innerHTML = "<span id='span_m" + i + "' class='mod'></span>&nbsp;&nbsp;&nbsp;<span id='span_d" + i + "' class='del'></span>";

				_td4.innerHTML = deviceInfoList[i].NodeID;
				_td4.style.display = "none";
				
				//为图片添加事件
				var span_1 = $("span_m" + i);
				var span_2 = $("span_d" + i);

				span_1.onclick = function() //修改设备
				{	
					var j = this.parentNode.parentNode.rowIndex - 1 + val;
					$("deviceInfo").style.display = "block";
					$("hidInput").value = "1";  //设置成1 ，作为修改功能标识

					$("UUID").value = deviceInfoList[j].UUID;
					$("deviceName").value = deviceInfoList[j].NodeName;
					$("deviceUserName").value = deviceInfoList[j].Account;
					
					$("devicePwd").value = deviceInfoList[j].Pwd;
					$("deviceIDHid").value = deviceInfoList[j].NodeID;

					//get channels of device
					var selChn = $("selChn");
					for(var i=0;i<5;i++)
					{
						if((selChn.options[i].value) == deviceInfoList[j].Channels)
						{
							selChn.options[i].selected = true;
						}
					}
					selChn.disabled = true;


					var ConnFlag = winParent.getFrmByName("dl_frm").ConnFlag;
					var nodeID = this.parentNode.parentNode.cells[3].innerHTML;
					
					if (ConnFlag == 1 && nodeID == winParent.tempNodeID)
					{
						$("UUID").disabled = true;
					}
					else
					{
						$("UUID").disabled = false;
					}
				}

				span_2.onclick = function() //删除设备
				{
					
					var ConnFlag = winParent.getFrmByName("dl_frm").ConnFlag;
					var nodeID = this.parentNode.parentNode.cells[3].innerHTML;
					
					if (ConnFlag == 1 && nodeID == winParent.tempNodeID)
					{
						alert(str1);
						return false;
					}

					if (window.confirm(str))
					{
						var j = this.parentNode.parentNode.rowIndex + val;
						var rtn = ocx.DeleteDeviceByNodeID(deviceInfoList[j - 1].NodeID);
						
						if(rtn == 1)
						{
							//tbody.deleteRow(j-1); //删除节点
							
							fenye();
							//alert("curPageNum = " + curPageNum + ", lastPageNum = " + lastPageNum);
							if (curPageNum <= lastPageNum)
							{
								refreshList(curPageNum);
							}
							else
							{
								refreshList(lastPageNum);
								curPageNum = lastPageNum;
							}
							
							//curPage = curPageNum/num;
							
							winParent.dm_num = curPageNum; //删除后再从header中点击进入

							alert(str5);
							//add by chj 20141209
							//var devListSer = ocx.GetDevListFromServer();

							//if (devListSer != "null\n")
							//{
								//winParent.deviceListInfo = devListSer;
							//}
						}

					}
				}
				_tr.onmouseover = function()
				{
					//this.style.background = "#2adcc6";
					this.cells[0].style.background = "#2adcc6";
					this.cells[1].style.background = "#2adcc6";
					this.cells[2].style.background = "#2adcc6";

					this.cells[2].childNodes[0].style.background = "url(img/modify_2.png)";
					this.cells[2].childNodes[2].style.background = "url(img/delete_2.png)";
				}
				_tr.onmouseout = function()
				{
					//this.style.background = "#a0a0a0";
					this.cells[0].style.background = "#a0a0a0";
					this.cells[1].style.background = "#a0a0a0";
					this.cells[2].style.background = "#a0a0a0";

					this.cells[2].childNodes[0].style.background = "url(img/modify_1.png)";
					this.cells[2].childNodes[2].style.background = "url(img/delete_1.png)";
				}

			}

		}
	}
	
//刷新列表
	function refreshList(num)
	{
		var tbody = $("tbody");
			
		for (var i = 0; i < tbody.rows.length ; )
		{
			tbody.deleteRow(i);
		}
		getDevInfoList(num);
	}

	function mousedown(obj)
	{
		obj.style.background = "url(img/reg_btn2.png)";
		obj.style.color = "#000000";
	}

	function mouseup(obj)
	{	
		obj.style.background = "url(img/reg_btn1.png)";
		obj.style.color = "#ffffff";	
	}

	var dmWidth;
	var dmHeight;
	function setDMWH(width,height)
	{
		dmWidth = parseInt(width);
		if (width < 1356)
		{
			dmWidth = 1352;
		}
		$('div_dm').style.width = dmWidth.toString() + "px";
		$('dm_list').style.width = dmWidth.toString() + "px";
		
		dmHeight = parseInt(height);
		if (height < 727)
		{
			dmHeight = 727;
		}
		$('div_dm').style.height = dmHeight.toString() + "px";
		$('dm_list').style.height = (dmHeight - 115).toString() + "px";
		
		if (winParent.pageFlg == "dmFrm")
		{
			divHeight = $('dm_list').style.height;
			fenye();
		}
		

	}

</script>
</head>
<body bgcolor="#434343">
<div id="div_dm" class="container" style="z-index:0;background:#434343;" >
	<div id="dm_list" style="overflow:hidden;z-index:0;position:relative;">
	<table class="list" id="devMan_tb" align="center" cellspacing="0" cellpadding="0">
	<thead>
		<tr id="tr1">		
			<th id="th1" class="deviceName">Device Name</th>
			<th id="th2" class="deviceID">Cloud ID</th>
			<th id="th3" class="deviceOperator">Operation</th>
		</tr>
	</thead>
	<tbody id="tbody"></tbody>
	</table>
	</div>

	<div class="control" style="z-index:0;position:relative;padding-top:10px;">
		<a id="pre" href="javascript:void(0)">上一页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="next" href="javascript:void(0)">下一页</a>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<button id="dm_btn" class="button" type="button" onclick="add()" onmousedown="mousedown(this)" onmouseup="mouseup(this)">AddDevice</button>
	</div>
</div>

<!-- 下面是“添加” 功能的弹出框 -->
<center>
<div id="deviceInfo">
	<div style="width:100%;height:8px;background:url(img/pop_top.png);"></div><br/><br/>
	<div>
	<span id="s1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cloud ID</span>&nbsp;&nbsp;&nbsp;<input type="text" id="UUID" class="dmText"/><br/><br/>
	<span id="s2">DeviceName</span>&nbsp;&nbsp;&nbsp;<input type="text" id="deviceName" class="dmText" maxlength="10"/><br/><br/>
	<span id="s3">&nbsp;&nbsp;&nbsp;&nbsp;UserName</span>&nbsp;&nbsp;&nbsp;<input type="text" id="deviceUserName" class="dmText"/><br/><br/>
	<span id="s4">&nbsp;&nbsp;&nbsp;&nbsp;Password</span>&nbsp;&nbsp;&nbsp;<input type="password" id="devicePwd" class="dmText"/><br/><br/>
	<span id="s5">&nbsp;&nbsp;&nbsp;&nbsp;Channels</span>&nbsp;&nbsp;&nbsp;
	<select id="selChn" style="width:182px;height:30px;font-size:16px;margin-bottom:16px;font-weight:bold;">
		<option value="1">1</option>
		<option value="4">4</option>
		<option value="8">8</option>
		<option value="16">16</option>
		<option value="32">32</option>
	</select>
	<br/>
	<button id="okBtn" class="ok_can_btn" style="background:url(img/reg_btn1.png);color:#ffffff;" onclick="ok_btn()" onmousedown="mousedown(this)" onmouseup="mouseup(this)">OK</button>
	&nbsp;&nbsp;
	<button id="canBtn" class="ok_can_btn" style="background:url(img/reg_btn1.png);color:#ffffff;" onclick="cancle_btn()" onmousedown="mousedown(this)" onmouseup="mouseup(this)">Cancle</button>
	</div>
	<div style="width:100%;background-color:lightgray;height:35px;margin-top:10px;border-left:1px solid lightgray;"></div>
</div>
</center>
<!-- 0 表示是添加功能， 1表示是修改功能-->
<input type="hidden" id="hidInput" value="0"/>
<input type="hidden" id="deviceIDHid" value=""/>
</body>




 <script>
 
	var divHeight = 0;
	var curPage = 0;
	var pageCount = 0;
	var lastPageNum = 0;
	var curPageNum = 0;
	var num = 0; //device num
	var length = 0; //device lsit length
	
	function temp()
	{
		var	deviceInfoListStr = ocx.GetDevInfo();
		
		if(deviceInfoListStr != "null\n")
		{
			var deviceInfoList = eval(deviceInfoListStr);
			
			length = deviceInfoList.length;
			num = Math.floor((parseInt(divHeight) - 40)/41); //每一页能容纳的设备数
			pageCount = Math.ceil(length / num);  //页数
			
			lastPageNum = (pageCount - 1) * num;//last page
			curPageNum = curPage * num; //current page
			return true;
		}
		else
		{
			return false;
		}

	}

	function fenye()
	{
		var flag = temp();
		
		if (flag)
		{
			if (num >= length)
				{
					refreshList(0);
					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);
						curPageNum = i;
						refreshList(i);
						
						winParent.dm_num = i;
					}
					
					$('next').onclick = function(){
						curPage++;
						i = parseInt(curPage * num);
						if ((curPage + 1) > pageCount)
						{
							curPage--;
							return false;
						}
						curPageNum = i;
						refreshList(i);

						winParent.dm_num = i;
					}
					
			}
		}
		
	}
 </script>
</html>