function iniocx(){
;
}
function showlogin(){
	$('l').style.top="0px";
}
function ld()
{
	//var ip = $("ip").value;
	var ip = location.hostname;
	var username = $("username").value;
	var password = $("password").value;
	var r=ocx.LoginDevice(ip,0,username,password);
	if (r==1){
		chkdev();
		resize();
		getcl();
		$('password').value="";
		$('l').style.display="none";
		$('m').style.top="0px";
		settings['username'] = username;
		savesetting();
	}
}
function lo()
{
	ocx.LogoutDevice();
	$('m').style.top="-10000px";
	$('l').style.display="";
	closemu();
	if (gdj==1){
		gdj=0;
		$('xdj').innerText=tl('AudioTalk');
	}
	ocx.CloseLocalPlay();	
}
function ca(o,ch)
{
	if ($(o).hasClass('cl1')){
		if (ocx.ConnectRealVideo(ch,1)){
			;
		}
	}
	else{
		if (!ocx.DisConnectRealVideo(ch)){
			;
		}
	}
	closemu();
}

function cptz(){
	if (gptz==0) 
	{
		gptz=1;
		ocx.ControlPtz(51,0,0,0,0); 
	}
	else{
		gptz=0;
		ocx.ControlPtz(51,0,0,0,1);
	}
}

function cxh(o,ts,tb){
	if (gxh==0) 
	{		
		if (ocx.ControlPtz(13,$('pv').value,0,76,0))
		{
			gxh=1;
			o.innerText=ts;
		}
	}
	else{		
		if (ocx.ControlPtz(13,$('pv').value,0,96,0))
		{
			gxh=0;
			o.innerText=tb;
		}
	}
}
function cxz(o,ts,tb){
	if (gxz==0) 
	{		
		if (ocx.ControlPtz(39,0,0,0,0))
		{
			gxz=1;
			o.innerText=ts;
		}
	}
	else{		
		if (ocx.ControlPtz(40,0,0,0,0))
		{
			gxz=0;
			o.innerText=tb;
		}	
	}
}
function cxs(o,ts,tb){
	if (gxs==0) 
	{		
		if (ocx.ControlPtz(43,0,0,0,0))
		{
			gxs=1;
			o.innerText=ts;
		}
	}
	else{		
		if (ocx.ControlPtz(44,0,0,0,0))
		{
			gxs=0;
			o.innerText=tb;
		}
	}
}

function cxj(o,ts,tb){
	if (gxj==0)
	{		
		if (ocx.ControlPtz(47,$('pv').value,0,0,0))
		{
			gxj=1;
			o.innerText=ts;
		}
	}
	else{		
		if (ocx.ControlPtz(48,$('pv').value,0,0,0))
		{
			gxj=0;
			o.innerText=tb;
		}
	}
}

function cdj(o,ts,tb){
	var ret;
	if (gdj==0)
	{	
		if (ocx.ControlTalking(1))
		{
			gdj=1;
			o.innerText=ts;
		}
	}
	else{		
		if (ocx.ControlTalking(0))
		{
			gdj=0;
			o.innerText=tb;
		}
	}
}

function cdg(o,ts,tb){
	if (gdg==0)
	{	
		if (ocx.ControlPtz(14,1,0,0,0))
		{
			gdg=1;
			o.innerText=ts;
		}
	}
	else{		
		if (ocx.ControlPtz(14,0,0,0,0))
		{
			gdg=0;
			o.innerText=tb;
		}
	}	
}

function sldtopos(sld,step){
	sld.knob.setStyle('left', sld.toPosition(step));
}
function txreset(){
	gslda.set(64);
	gsldb.set(64);
	gsldc.set(64);
	gsldd.set(64);
}

function getcolors(){
	var colors="";
	colors=ocx.GetColor();
	var t= new Array();
	if (colors !="")
		t=colors.split(',');
	sldtopos(gslda,parseInt(t[0]));
	sldtopos(gsldb,parseInt(t[1]));
	sldtopos(gsldc,parseInt(t[2]));
	sldtopos(gsldd,parseInt(t[3]));
	setcolorsv(1,parseInt(t[0]));
	setcolorsv(2,parseInt(t[1]));
	setcolorsv(3,parseInt(t[2]));
	setcolorsv(4,parseInt(t[3]));
}
function setcolorsv(f,v){
		switch (f)
		{
			case 1: gca=v;
					$('ska').title=v;
					break;
			case 2: gcb=v;
					$('skb').title=v;
					break;
			case 3: gcc=v;
					$('skc').title=v;
					break;
			case 4: gcd=v;
					$('skc').title=v;
					break;
		}	
}
function setcolors(){
	ocx.SetColor(0,gca,gcb,gcc,gcd);
}

function showmu(o,cid){
	if (gcid==cid){
		closemu();
	}
	else{
		gcid=cid;
		$('cmu').setProperty('title', cid); 
		$('cmu').injectAfter($(o).getParent());
		$('cmu').setStyle('height', 35);	
	}
}
function closemu(){
	gcid=-1;
	$('cmu').injectAfter($('cl')); 
	$('cmu').setStyle('height', '0'); 	
}
function onmu(f){
	var cid=$('cmu').getProperty('title'); 
	ocx.ConnectRealVideo(parseInt(cid),f)
	closemu();
}

function tl(s){
	var ret;
	ret=ocx.Translate(s);
	return ret;
}

function chkdev(){
	var strhtm="";
	var sret="";
	
	sret=ocx.GetDevConfig(1);
	if (sret.substring(0,1)=="1") strhtm="<a id='xzml' href='javascript:;' onclick='onmu(1)' >"+ tl('MainStream') +"</a>";
	if (sret.substring(1,2)=="1") strhtm=strhtm+"<a id='xfml' href='javascript:;' onclick='onmu(2)'>"+ tl('SecondStream') +"</a>";
	$('cmu').setHTML(strhtm);
	
	//sret=ocx.GetDevConfig(2);
	//if (sret!='0')
	//{
		//$('xptjr').style.display="";
	//}
}
function savesetting(){
	HashCookie.extend(settings);
}
function getsetting(){
	if (HashCookie.get('username')) {
		settings['username'] = HashCookie.get('username');
	} else {
		settings['username'] = '';
	}
	$('username').setProperty('value', settings['username']); 
}

function reps(str){
	var strReg1 =/"/g;
	var strReg2=/'/g;
	var strReg3=/</g;
	var strReg4=/>/g;
	var ret=str.replace(strReg1, "&quot;");
	ret=ret.replace(strReg2, "&acute;");
	ret=ret.replace(strReg3, "&lt;;");
	ret=ret.replace(strReg4, "&gt;");
	return ret;
}

function showmu1(){
	if (gfmu1==0)
	{	
		gfmu1=1;
		$('smu1').style.display="";			
	}
	else{
		closemu1();	
	}	
}
function closemu1(){
	gfmu1=0;
	$('smu1').style.display="none";
}
function onmu1(v){
	$('ps').value=v;
	closemu1();
}
function getcl(){	
	var t= new Array();
	var ts=new Array();
	var shtml="";
	var strsplita=String.fromCharCode(9);
	var strsplitb=String.fromCharCode(16);
	var sc;
	sc=ocx.GetChannelName();
	if (sc !=""){
		sc=sc.substr(0, sc.length-1);
		t=sc.split(strsplita);
		
		for (var i =0; i<t.length;i++ ){
			ts=t[i].split(strsplitb);
			ts[1]=reps(ts[1]);
			shtml+="<li title='" + ts[1]+ "' ><div id='c" + ts[0] + "' class='cl1' onclick='ca(this," + ts[0] +")' >" + ts[1] + "</div><a class='ca1' href='javascript:;' onclick='showmu(this," + ts[0] + ")'></a></li>"
			t[i]=ts;
		}
		$("cl").innerHTML=shtml;
		var ls = $$('#cl li');
		ls.each(function(element) { 
			var fx = new Fx.Styles(element, {duration:100, wait:false}); 
	
			element.addEvent('mouseenter', function(){
				fx.start({
					'opacity':1
				});
			}); 
			element.addEvent('mouseleave', function(){
				fx.start({
					'opacity':0.001
				});
			}); 
		});
	}	
}

function rfc(){
	var t= new Array();
	var ts=new Array();
	var shtml="";
	var strsplita=String.fromCharCode(9);
	var strsplitb=String.fromCharCode(16);
	var sc;
	sc=ocx.GetChannelName();
	if (sc !=""){
		sc=sc.substr(0, sc.length-1);
		t=sc.split(strsplita);
		for (var i =0; i<t.length;i++ ){
			ts=t[i].split(strsplitb);
			ts[1]=reps(ts[1]);
			var temp='c' + ts[0];
			$(temp).setText(ts[1]);
			t[i]=ts;
		}
	}	
}
function reboot(){
	var ret;
	
	if (confirm(tl('w_rebootconfirm'))){	
		ret=ocx.Restart();
		if (ret==0)
		{
			alert(tl('w_rebootfail'));
		}
		else{
			lo();
		}
	}
	
}
function inilanguage(){
	$('xyhm').setText(tl('User Name')+":");
	$('xmm').setText(tl('Password')+":");
	$('lbt').setText(tl('Login'));
	showlogin();
	$('xxtpz').setText(tl('SysConfig'));
	$('xlxcx').setText(tl('RecQuery'));
	$('xbjsz').setText(tl('w_AlarmConfig'));
	$('xgy').setText(tl('About'));
	$('xtc').setText(tl('Logout'));
	//$('xzml').setText(tl('MainStream'));
	//$('xfml').setText(tl('SecondStream'));
	$('xdj').setText(tl('AudioTalk'));
	$('xhf').setText(tl('OpenRec'));
	$('xbb').setText(tl('Zoom'));
	$('xbj').setText(tl('Focus'));
	$('xgq').setText(tl('Iris'));
	$('xbc').setText(tl('w_Step'));	
	$('xz').setText(tl('w_SetValue'));
	$('xtld').setProperty('title', tl('Bright')); 
	$('xtdbd').setProperty('title', tl('Cont')); 
	$('xtbhd').setProperty('title', tl('Sat')); 
	$('xtsd').setProperty('title', tl('Hue')); 
	$('xcz').setText(tl('Reset'));
	$('xztlj').setText(tl('PicturePath'));
	$('xlxlj').setText(tl('RecordPath'));
	$('xztlj').setProperty('title', tl('SetPicturePath')); 
	$('xlxlj').setProperty('title', tl('SetRecordPath')); 
	$('taba1').setText(tl('Img Config'));
	$('taba2').setText(tl('Other Config'));
	$('xyzd').setText(tl('Preset'));
	$('xdjxh').setText(tl('Auto-Tour'));
	$('xspxz').setText(tl('Auto-Pan'));
	$('xxs').setText(tl('Auto-Scan'));
	$('xxuj').setText(tl('Pattern'));
	$('xfzk').setText(tl('AUX ON'));
	$('xfzg').setText(tl('AUX OFF'));
	$('xytsz').setText(tl('w_PTZsetting'));	
	//$('xptjr').setText(tl('w_ptjr'));
	//$('xptjr').setProperty('title', tl('w_ptjrtitle'));
	$('xsxt').setText(tl('w_refresh'));
	$('xsxt').setProperty('title', tl('w_trefresh'));
	$('xcqsb').setText(tl('w_reboot'));
	$('xcqsb').setProperty('title', tl('w_reboottitle'));

}
function resize(){
	var mbbw;
	var mbbh;
	wwidth =document.documentElement.clientWidth;
	wheight=document.documentElement.clientHeight;
	if (wheight<600) wheight=600;
	//ma:31;mc:18;plc:33;dra,b,c:24
	mbbh=wheight - (31+18+33+24+3+8);
	glhight=mbbh+33;
	grhight=mbbh+33-263-$('yt21').offsetHeight;
	mbbw=mbbh *64/51;
	$('mb').setStyle('width', mbbw+(145*2+8));
	$('mbb').setStyle('width', mbbw);
	$('mbb').setStyle('height', mbbh);
	$('mbal').setStyle('height', glhight);
	$('yt3').setStyle('height', grhight);
}

window.addEvent('resize',function(){
	resize();
});

window.addEvent('domready',function(){
//滑块
	gsld = new Slider($('sa'), $('sk'), {
	steps:1000,
	onComplete:function(step){ocx.SetPlayPos(step);}
	});
	
	gslda = new Slider($('saa'), $('ska'), {
	steps:128,
	onChange:function(step){setcolorsv(1,step);setcolors();}
	});

	gsldb = new Slider($('sab'), $('skb'), {
	steps:128,
	onChange:function(step){setcolorsv(2,step);setcolors();}
	});
	
	gsldc = new Slider($('sac'), $('skc'), {
	steps:128,
	onChange:function(step){setcolorsv(3,step);setcolors();}
	});
	
	gsldd = new Slider($('sad'), $('skd'), {
	steps:128,
	onChange:function(step){setcolorsv(4,step);setcolors();}
	});

	//gslde = new Slider($('sae'), $('ske'), {
	//steps:100,
	//onChange:function(step){;}
	//});
//主菜单
	var kwicks = $$('#kwick .kwick');
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition:Fx.Transitions.Back.easeOut});
	kwicks.each(function(kwick, i){
		kwick.addEvent('mouseenter', function(e){
			var obj = {};
			obj[i] = {
				'width': [kwick.getStyle('width').toInt(), 155]
			};
			kwicks.each(function(other, j){
				if (other != kwick){
					var w = other.getStyle('width').toInt();
					if (w != 80) obj[j] = {'width': [w,80]};
				}
			});
			fx.start(obj);
		});
	});
	
	$('kwick').addEvent('mouseleave', function(e){
		var obj = {};
		kwicks.each(function(other, j){
			obj[j] = {'width': [other.getStyle('width').toInt(), 95]};
		});
		fx.start(obj);
	});

//拖动
	var container = $('mb');
	var drop = $('drb');
	var mba=$('mba');
	var mbb=$('mbb');
	var mbc=$('mbc');
	var dropFx = drop.effect('opacity', {wait: false}); // wait is needed so that to toggle the effect,
	var bedra= $('dra');
	var bedrc= $('drc');
	bedra.addEvent('mousedown', function(e) {
		e = new Event(e).stop();			
		var clone = this.clone()
			.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
			.setStyles({'opacity': 0.7, 'position': 'absolute'})
			.addEvent('emptydrop', function() {this.remove();drop.removeEvents();})						
			.inject(document.body);	
		drop.addEvents({
			'drop': function() {
				drop.removeEvents();
				clone.remove();							
				dropFx.start('1');											
				if (mbc.getStyle('left') !='0px')
				{
					mbc.setStyle('left','0');
					mbc.injectBefore(mba);
					mbb.injectBefore(mba);
				}
				else{
					mbc.setStyle('left','120');							
					mba.injectBefore(mbc);
					mbb.injectBefore(mbc);
				}
			},
			'over': function() {
				dropFx.start('0.7');
			},
			'leave': function() {
				dropFx.start('1');
			}						
		});
		var drag = clone.makeDraggable({
			'container':container,
			'droppables': [drop]
		}); // this returns the dragged element
		drag.start(e); // start the event manual	
	});


	bedrc.addEvent('mousedown', function(e) {
		e = new Event(e).stop();			
		var clone = this.clone()
			.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
			.setStyles({'opacity': 0.7, 'position': 'absolute'})
			.addEvent('emptydrop', function() {this.remove();drop.removeEvents();})						
			.inject(document.body);	
		drop.addEvents({
			'drop': function() {
				drop.removeEvents();
				clone.remove();							
				dropFx.start('1');											
				if (mbc.getStyle('left') !='0px')
				{
					mbc.setStyle('left','0');
					mbc.injectBefore(mba);
					mbb.injectBefore(mba);
				}
				else{
					mbc.setStyle('left','120');							
					mba.injectBefore(mbc);
					mbb.injectBefore(mbc);
				}
			},
			'over': function() {
				dropFx.start('0.7');
			},
			'leave': function() {
				dropFx.start('1');
			}						
		});
		var drag = clone.makeDraggable({
			'container':container,
			'droppables': [drop]
		}); // this returns the dragged element
		drag.start(e); // start the event manual	
	});
//收缩
	var hCyt21 = new Fx.Style('yt21', 'height',{duration:500});
	var hCyt3 = new Fx.Style('yt3', 'height',{duration:500});
	
	$('ayt22').addEvent('click', function(e){
		new Event(e).stop();
		if (this.hasClass('y1'))
		{
			this.removeClass(this.className);
			this.addClass('y2');
			hCyt21.start(0,160);
			
			hCyt3.start(grhight,grhight-160);
			grhight=grhight-160
		}
		else{
			this.removeClass(this.className);
			this.addClass('y1');
			hCyt21.start(160,0);
			hCyt3.start(grhight,grhight+160);
			grhight=grhight+160
		}
	});

	var taba1=$('taba1');
	var taba2=$('taba2');
	taba1.addEvent('click', function(e){
		new Event(e).stop();
		if (this.hasClass('t3'))
		{
			this.removeClass(this.className);
			this.addClass('t1');			
			taba2.removeClass(taba2.className);
			taba2.addClass('t2');
			$('yt3t1').style.display="";			
			$('yt3t2').style.display="none";			
		}
	});
	
	taba2.addEvent('click', function(e){
		new Event(e).stop();
		if (this.hasClass('t2'))
		{
			taba1.removeClass(taba2.className);
			taba1.addClass('t3');			
			this.removeClass(this.className);
			this.addClass('t4');
			$('yt3t1').style.display="none";			
			$('yt3t2').style.display="";			
		}
	});
	
//按键响应
	document.addEvent('keydown', function(event) {
		event = new Event(event);
		if (event.key == 'up') ocx.ControlPtz(0,0,$('ps').value,0,0);
		if (event.key == 'left') ocx.ControlPtz(2,0,$('ps').value,0,0);
		if (event.key == 'right') ocx.ControlPtz(3,0,$('ps').value,0,0);
		if (event.key == 'down') ocx.ControlPtz(1,0,$('ps').value,0,0);
	});
	document.addEvent('keyup', function(event) {
		event = new Event(event);
		if (event.key == 'up') ocx.ControlPtz(0,0,$('ps').value,0,1);
		if (event.key == 'left') ocx.ControlPtz(2,0,$('ps').value,0,1);
		if (event.key == 'right') ocx.ControlPtz(3,0,$('ps').value,0,1);
		if (event.key == 'down') ocx.ControlPtz(1,0,$('ps').value,0,1);
	});

	inilanguage();
	getsetting();
});
</script>

<script language="javascript" for="ocx" event="ReturnWindInfo(wid,cid,ps,sit)">
	gptz=sit;
	if (ps!=0)
	{
		if (ps==5 || ps==4){
			$('pbh').setStyle('display','none');
		}
		else{
			$('pbh').setStyle('display','');
		}
		getcolors();
	}
</script>

<script language="javascript" for="ocx" event="ReturnPlayState(pos)">
	sldtopos(gsld,pos);
</script>

<script language="javascript" for="ocx" event="StateChanged(ci,ps)">
	var oc;
	if (ci !=-1 && ci!=19){
		oc=$('c' + ci);
		if (ps==0){
			oc.removeClass(oc.className);
			oc.addClass('cl1');
		}
		if (ps==1){
			oc.removeClass('cl1');
			oc.addClass('cl2');
		}
		if (ps==3){
			oc.removeClass('cl1');
			oc.addClass('cl3');
		}
	}
	if (ps==3||ps==5){$('pbh').setStyle('display','none');}else{$('pbh').setStyle('display','');}
	getcolors();
</script>
<script language="javascript" for="ocx" event="DeviceDisconnected(ip,pt)">
	lo();
</script>

</head>
<body>
<div id='l'>
	<div id='lx'>
		<div id='lb'></div>
		<div id='la'>
			<div id='lal'></div>
			<div id='lar'></div>
			<div id='lalogo'></div>
			<div id='lainput'>
				<div><span id='xyhm'>用户名:</span><input type='text' maxlength='8' id='username' onKeyDown="javascript:if (event.keyCode==13) event.keyCode=9;"></div>
				<div><span id='xmm'>密码:</span><input type="password" maxlength="20" id="password" onKeyDown="javascript:if (event.keyCode==13) ld();"></div>
				<div style="display:none"><span>IP:</span><input type="text" id="ip" onKeyDown="javascript:if (event.keyCode==13) event.keyCode=9;" value="10.7.4.32"></div>
			</div>
			<div id='labt'><button id='lbt' onClick="ld()">登录</button></div>
		</div>
		<div id='lc'></div>
	</div>
</div>

<div id="m">
	<div id="ma">
		<div id="maa"></div>
		<div id="mab"></div>
		<div id="mac"></div>
		<div id="mad"></div>
		<div id=kwick>
			<ul class=kwicks>
			  <li><span id='xlxcx' class="kwick b" onclick="ocx.ShowPlayback()">录像查询</span></li>
			  <li><span id='xbjsz' class="kwick c" onclick="ocx.ShowAlarm()">报警设置</span></li>
			  <li><span id='xxtpz' class="kwick a" onclick="ocx.ShowDeviceConfig()">系统配置</span></li>
			  <li><span id='xgy' class="kwick d" onclick="ocx.AboutBox()">关于</span></li>
			  <li><span id='xtc' class="kwick e" onclick="lo()">退出</span></li>
			</ul>
		</div>
		<div id="mae"></div>
	</div>
	
	<div id="mb">
		<div id="mba" style="float:left;padding:0 0 0 5px;">
			<div  class="mpad">
				<div id='dra' style="height:24px;background:url(th2.png); position:relative;">
					<div style="height:24px;width:5px;background:url(th1.png); float:left"></div>
					<div style="height:24px;width:5px;background:url(th3.png); float:right"></div>
					<div style="height:24px;width:11px;background:url(th4.png); float:right; margin:0 8px 0 0; cursor:move;"></div>
				</div>
				<div id='mbal' style="height:533px;position:relative; overflow:hidden;">
					<div id='dcl'>
						<ul id='cl'></ul>
						<div id='cmu' title=''></div>
					</div>
					<div id='ddj' style="width:100%; height:100px;">
						<div style=" width:100px;padding:10px 0 0 4px; float:left"><a id='xsxt' class="cbt" href="javascript:;" onclick="rfc()">刷新</a></div>
						<div style=" padding:10px 0 0 4px; float:left"><a id='xdj' class="cbt" href="javascript:;" onclick="cdj(this,tl('StopTalk'),tl('AudioTalk'))">开始对讲</a></div>
						<div style=" padding:10px 0 0 4px; float:left"><a id='xhf' class="cbt" href="javascript:;" onclick="ocx.QuickOperation(0)">本地回放</a></div>
						<!--
						<div style="margin:5px 0 0 4px;">
							<div style='width:21px; height:21px;background:url(yl.png);float:left' title='音量'></div>
							<div style="margin:4px 0 0 4px;float:left"><a class="sal" href="javascript:;" onclick="gslde.set(gslde.step-1)"></a></div>
							<div id='sae' style="width:70px;height:13px;margin:4px 0 0 4px;float:left;background:url(sas.png) repeat-x">
								<div id='ske' style="width:6px;height:13px;background:url(sks.png) no-repeat; cursor:pointer;"></div>
							</div>
							<div style="margin:4px 0 0 4px; float:left;"><a class="sar" href="javascript:;" onclick="gslde.set(gslde.step+1)"></a></div>
						</div>
						-->
					</div>
				</div>
			</div>
		</div>
		<div id="mbb" style="width:650px;height:500px;float:left; left:120px;padding:0 0 0 5px;">
			<div id="drb" style="height:24px;background:url(th2.png)">
				<div style="height:24px;width:5px;background:url(th1.png); float:left"></div>
				<div style="height:24px;width:5px;background:url(th3.png); float:right"></div>
				<div style="height:24px;width:11px;background:url(th4.png); float:right; margin:0 8px 0 0;"></div>
			</div>
			<div id='pla' style=" padding:0"><script type="text/javascript" src="olp.js"></script></div>			
			<div id='plc' style="height:33px;background:url(plcb.png); ">
				<div style="width:7px;height:33px;float:left; background:url(plcbl.png);"></div>
				<div id='pbh' style="background:url(plcb.png);width:580px;height:33px;position:absolute;z-index:10;"></div>
				<div id='pb' style="height:26px;margin:3px 0 0 10px;position:absolute;z-index:9;">
					<div id='sa'>
						<div id='sk'></div>
					</div>
					<div id='pc' style="float:left;">
						<div style="margin:0 0 0 5px"><a class="p1" href="javascript:;" onclick="ocx.PlayVideo(1)" ></a></div>
						<div style="margin:0 0 0 10px"><a class="p2" href="javascript:;" onclick="ocx.PlayVideo(2)"></a></div>
						<div style="margin:0 0 0 10px"><a class="p3" href="javascript:;" onclick="ocx.PlayVideo(3)"></a></div>
						<div style="margin:0 0 0 10px"><a class="p4" href="javascript:;" onclick="ocx.PlayVideo(5)"></a></div>
						<div style="margin:0 0 0 10px"><a class="p5" href="javascript:;" onclick="ocx.PlayVideo(4)"></a></div>
						<!--<div style="margin:0 0 0 10px"><a class="p6" href="javascript:;"></a></div>
						<div style="margin:0 0 0 10px"><a class="p7" href="javascript:;"></a></div>-->
					</div>
				</div>
				<div style="width:7px;height:33px;float:right; background:url(plcbr.png);"></div>
			</div>
		</div>
		<div id="mbc" style="float:left;padding:0 0 0 5px;">
			<div  class="mpad">
				<div id='drc' style="height:24px;background:url(th2.png); position:relative;">
					<div style="height:24px;width:5px;background:url(th1.png); float:left"></div>
					<div style="height:24px;width:5px;background:url(th3.png); float:right"></div>
					<div style="height:24px;width:11px;background:url(th4.png); float:right; margin:0 8px 0 0; cursor:move;"></div>
				</div>
				<div id='yt' style="height:120px;position:relative;padding:0 10px 0 10px ">
					<div style="width:33px;height:26px;padding:14px 0 0 7px;"><a class="y1" href="javascript:;" onmousedown="ocx.ControlPtz(32,5,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(32,5,$('ps').value,0,1)"></a></div>
					<div style="width:33px;height:26px;padding:14px 0 0 7px;"><a class="y2" href="javascript:;" onmousedown="ocx.ControlPtz(0,0,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(0,0,$('ps').value,0,1)"></a></div>
					<div style="width:33px;height:26px;padding:14px 0 0 7px;"><a class="y3" href="javascript:;" onmousedown="ocx.ControlPtz(33,5,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(33,5,$('ps').value,0,1)"></a></div>
					<div style="width:33px;height:33px;padding:7px 0 0 7px;"><a class="y4" href="javascript:;" onmousedown="ocx.ControlPtz(2,0,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(2,0,$('ps').value,0,1)"></a></div>
					<div style="width:40px;height:40px;"><a class="y5" href="javascript:;" onclick="cptz()" ></a></div>
					<div style="width:33px;height:33px;padding:7px 0 0 7px;"><a class="y6" href="javascript:;" onmousedown="ocx.ControlPtz(3,0,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(3,0,$('ps').value,0,1)"></a></div>
					<div style="width:33px;height:40px;padding:0 0 0 7px;"><a class="y7" href="javascript:;" onmousedown="ocx.ControlPtz(34,5,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(34,5,$('ps').value,0,1)"></a></div>
					<div style="width:33px;height:40px;padding:0 0 0 7px;"><a class="y8" href="javascript:;" onmousedown="ocx.ControlPtz(1,0,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(1,0,$('ps').value,0,1)"></a></div>
					<div style="width:33px;height:40px;padding:0 0 0 7px;"><a class="y9" href="javascript:;" onmousedown="ocx.ControlPtz(35,5,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(35,5,$('ps').value,0,1)"></a></div>
				</div>
				<div style="height:20px;padding:0 0 0 8px;position:relative;">
					<div id='xbc' class="divt">步长(1-8):</div>
					<div style="width:53px;height:18px; background:url(ytabg.png); padding:0 0 0 3px">
						<input class="inputyt" type="text" id="ps" value="5" maxlength="1" onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
						<a href="javascript:;" class="yta1" onclick="showmu1()"></a>
					</div>
				</div>
				<div  id="smu1"  style="display:none">
					<ul>
						<li ><a href='javascript:;' onclick='onmu1(1)'>1</a></li>
						<li ><a href='javascript:;' onclick='onmu1(2)'>2</a></li>
						<li ><a href='javascript:;' onclick='onmu1(3)'>3</a></li>
						<li ><a href='javascript:;' onclick='onmu1(4)'>4</a></li>
						<li ><a href='javascript:;' onclick='onmu1(5)'>5</a></li>
						<li ><a href='javascript:;' onclick='onmu1(6)'>6</a></li>
						<li ><a href='javascript:;' onclick='onmu1(7)'>7</a></li>
						<li ><a href='javascript:;' onclick='onmu1(8)'>8</a></li>
					</ul>
				</div>
				<div id='yt1' style="height:90px;position:relative; margin:0 5px 0 5px;">
					<div style=" padding:0 0 5px 14px;"><a class="y1" href="javascript:;"  onmousedown="ocx.ControlPtz(4,0,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(4,0,$('ps').value,0,1)"></a></div>
						<div id='xbb' style="height:18px;width:50px;padding:8px 0 0 0; text-align:center;">变倍</div>
					<div style=" padding:0 0 5px 0;"><a class="y2" href="javascript:;" onmousedown="ocx.ControlPtz(5,0,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(5,0,$('ps').value,0,1)"></a></div>
					<div style=" padding:0 0 5px 14px;"><a class="y1" href="javascript:;" onmousedown="ocx.ControlPtz(6,0,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(6,0,$('ps').value,0,1)"></a></div>
						<div id='xbj' style="height:18px;width:50px;padding:8px 0 0 0; text-align:center;">变焦</div>						
					<div style=" padding:0 0 5px 0;"><a class="y2" href="javascript:;" onmousedown="ocx.ControlPtz(7,0,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(7,0,$('ps').value,0,1)"></a></div>
					<div style=" padding:0 0 5px 14px;"><a class="y1" href="javascript:;" onmousedown="ocx.ControlPtz(8,0,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(8,0,$('ps').value,0,1)"></a></div>
						<div id='xgq' style="height:18px;width:50px;padding:8px 0 0 0; text-align:center;">光圈</div>						
					<div style=" padding:0 0 5px 0;"><a class="y2" href="javascript:;" onmousedown="ocx.ControlPtz(9,0,$('ps').value,0,0)" onmouseup="ocx.ControlPtz(9,0,$('ps').value,0,1)"></a></div>
				</div>
				<div id='yt2' style="height:100%;position:relative;padding:0 0 0 4px;float:left;">
					<div id='yt21' style=" height:0;overflow:hidden;float:left;">
<div class='cbtd'><div id='xz' class="divt">值(1-127):</div><input type="text" class="inputyt" id="pv" value="1" maxlength="3" onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"></div>
<div class='cbtd'><a id='xyzd' class="cbt" href="javascript:;" onclick="ocx.ControlPtz(10,0,$('pv').value,0,0)">预置点</a></div>
<div class='cbtd'><a id='xdjxh' class="cbt" href="javascript:;" onclick="cxh(this,tl('Stop'),tl('Auto-Tour'))">点间巡航</a></div>
<div class='cbtd'><a id='xspxz' class="cbt" href="javascript:;" onclick="cxz(this,tl('Stop'),tl('Auto-Pan'))">水平旋转</a></div>
<div class='cbtd'><a id='xxs' class="cbt" href="javascript:;" onclick="cxs(this,tl('Stop'),tl('Auto-Scan'))">线扫</a></div>
<div class='cbtd'><a id='xxuj' class="cbt" href="javascript:;" onclick="cxj(this,tl('Stop'),tl('Pattern'))">巡迹</a></div>
<div class='cbtd'><a id='xfzk' class="cbt" href="javascript:;" onclick="ocx.ControlPtz(52,$('pv').value,0,0,0)">辅助开</a></div>
<div class='cbtd'><a id='xfzg' class="cbt" href="javascript:;" onclick="ocx.ControlPtz(53,$('pv').value,0,0,0)">辅助关</a></div>
<div class='cbtd'><a id='xytsz' class="cbt" href="javascript:;" onclick="ocx.ShowSetptz">云台设置</a></div>
					</div>
					<div id='yt22' style="width:129px;height:9px;overflow:hidden; float:left;"><a id='ayt22' class="y1" href="javascript:;" ></a></div>
				</div>
			</div>
			
			<div id='taba' style="margin:3px 0 0 0; width:140px;">
				<div style="float:left"><a id='taba1' class="t1" href="javascript:;" >图像设置</a></div>
				<div style="float:left"><a id='taba2' class="t2" href="javascript:;" >其他设置</a></div>
			</div>
			<div class="mpad">
				<div id='yt3' style=" height:287px;position:relative; overflow:hidden; margin:0 0 0 4px;">
					<div id='yt3t1' style="height:100%;">
						<div id='yt3t1a'>
							<div style="margin:5px 0 0 0;">
								<div id='xtld' style='width:21px; height:21px; background:url(tx1.png)' title='亮度'></div>
								<div style="margin:4px 0 0 4px;"><a class="sal" href="javascript:;" onclick="gslda.set(gca-1)"></a></div>
								<div id='saa' class="sax">
									<div id='ska' class="skx"></div>
								</div>
								<div style="margin:4px 0 0 4px;"><a class="sar" href="javascript:;" onclick="gslda.set(gca+1)"></a></div>
							</div>
							<div style="margin:5px 0 0 0;">
								<div id='xtdbd' style='width:21px; height:21px;background:url(tx2.png)' title='对比度'></div>
								<div style="margin:4px 0 0 4px;"><a class="sal" href="javascript:;" onclick="gsldb.set(gcb-1)"></a></div>
								<div id='sab' class="sax">
									<div id='skb' class="skx"></div>
								</div>
								<div style="margin:4px 0 0 4px;"><a class="sar" href="javascript:;" onclick="gsldb.set(gcb+1)"></a></div>
							</div>
							<div style="margin:5px 0 0 0;">
								<div id='xtbhd' style='width:21px; height:21px;background:url(tx3.png)' title='饱和度'></div>
								<div style="margin:4px 0 0 4px;"><a class="sal" href="javascript:;" onclick="gsldc.set(gcc-1)"></a></div>
								<div id='sac' class="sax">
									<div id='skc' class="skx"></div>
								</div>
								<div style="margin:4px 0 0 4px;"><a class="sar" href="javascript:;" onclick="gsldc.set(gcc+1)"></a></div>
							</div>
							<div style="margin:5px 0 0 0;">
								<div id='xtsd' style='width:21px; height:21px;background:url(tx4.png)' title='色度'></div>
								<div style="margin:4px 0 0 4px;"><a class="sal" href="javascript:;" onclick="gsldd.set(gcd-1)"></a></div>
								<div id='sad' class="sax">
									<div id='skd' class="skx"></div>
								</div>
								<div style="margin:4px 0 0 4px;"><a class="sar" href="javascript:;" onclick="gsldd.set(gcd+1)"></a></div>
							</div>
						</div>
						<div style=" padding:5px 0 0 0;"><a id='xcz' class="cbt" href="javascript:;" onclick="txreset();" >重置</a></div>
					</div>
					<div id='yt3t2' style="height:100%;display:none;">
						<div class='cbtd'><a id='xztlj' class="cbt" href="javascript:;" onclick="ocx.SetConfigPath(1);" title="">抓图路径</a></div>
						<div class='cbtd'><a id='xlxlj' class="cbt" href="javascript:;" onclick="ocx.SetConfigPath(2);" title="">录像路径</a></div>
						<div class='cbtd'><a id='xcqsb' class="cbt" href="javascript:;" onclick="reboot();" title="">重启设备</a></div>
					</div>
				</div>
			</div>
		</div><!--mbc-->
	</div>
	<div id="mc" ><script type="text/javascript" src="ft.js"></script></div>
</div>
</body>
</html>