<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" onload="inithandle();" onunload="if (newwin!=null)newwin.close();"> <script language="JavaScript"> <!-- var newwin=null; function inithandle() { handle.style.left=(box.offsetWidth-handle.offsetWidth)/2+10; handle.style.top=(box.offsetHeight-handle.offsetHeight)/2+10; if (newwin!=null) newwin.moveTo((screen.Width-newwin.window.document.body.offsetWidth)/2,(screen.Height-newwin.window.document.body.offsetHeight)/2); } var url='http://www.cctv.com'; function openwin() { inithandle(); if (newwin==null) { newwin=window.open(url,'newwin','fullscreen=yes');openbutton.disabled=true;closebutton.disabled=false;} var w=screen.Width/box.offsetWidth*handle.offsetWidth; var h=screen.Height/box.offsetHeight*handle.offsetHeight; newwin.resizeTo(w,h); var l=(screen.Width-w)/2; var t=(screen.Height-h)/2; newwin.moveTo(l,t); } var dragenable=0; var obj; var dx0; var dy0; function dragstart(objname) { obj=objname; dragenable=1; dx0=document.body.scrollLeft+event.clientX-obj.offsetLeft; dy0=document.body.scrollTop+event.clientY-obj.offsetTop; } function draglayer() { if (dragenable==1) { obj.setCapture(); var x=document.body.scrollLeft+event.clientX-dx0; var y=document.body.scrollTop+event.clientY-dy0; if (x>box.offsetLeft && x<box.offsetLeft+box.offsetWidth-obj.offsetWidth && y>box.offsetTop && y<box.offsetTop+box.offsetHeight-obj.offsetHeight) { obj.style.left=x; obj.style.top=y; } else if (x<box.offsetLeft) { obj.style.left=box.offsetLeft; if (y<box.offsetTop) { obj.style.top=box.offsetTop; } else if (y>box.offsetTop+box.offsetHeight-obj.offsetHeight) { obj.style.top=box.offsetTop+box.offsetHeight-obj.offsetHeight; } else { obj.style.top=y; } } else if (x>box.offsetLeft+box.offsetWidth-obj.offsetWidth) { obj.style.left=box.offsetLeft+box.offsetWidth-obj.offsetWidth; if (y<box.offsetTop) { obj.style.top=box.offsetTop; } else if (y>box.offsetTop+box.offsetHeight-obj.offsetHeight) { obj.style.top=box.offsetTop+box.offsetHeight-obj.offsetHeight; } else { obj.style.top=y; } } else { obj.style.left=x; if (y<box.offsetTop) { obj.style.top=box.offsetTop; } else if (y>box.offsetTop+box.offsetHeight-obj.offsetHeight) { obj.style.top=box.offsetTop+box.offsetHeight-obj.offsetHeight; } else { obj.style.top=y; } } if (newwin!=null) { newwin.moveTo((obj.offsetLeft-10)*screen.Width/box.offsetWidth,(obj.offsetTop-10)*screen.Height/box.offsetHeight); } } } function dragend() { dragenable=0; obj.releaseCapture(); } function changesize(zoomvalue) { if (zoomvalue=='+' && handle.offsetWidth<200) { handle.style.pixelWidth+=4; handle.style.pixelHeight=handle.offsetWidth/box.offsetWidth*box.offsetHeight; } if (zoomvalue=='-' && handle.offsetWidth>28) { handle.style.pixelWidth-=4; handle.style.pixelHeight=handle.offsetWidth/box.offsetWidth*box.offsetHeight; } if (zoomvalue=='0') { handle.style.width=28; handle.style.height=21; } if (newwin!=null) { var w=screen.Width/box.offsetWidth*handle.offsetWidth; var h=screen.Height/box.offsetHeight*handle.offsetHeight; newwin.resizeTo(w,h); } inithandle(); } function setbg() { if (newwin!=null) { if(bgcolorvalue.value!='') {newwin.document.body.style.backgroundColor="#"+bgcolorvalue.value;handle.style.backgroundColor="#"+bgcolorvalue.value;} newwin.document.body.style.backgroundImage='url('+bgimgvalue.value+')'; } } function setborder() { if (newwin!=null) { if(bordercolorvalue.value!='') {newwin.document.body.style.borderColor="#"+bordercolorvalue.value;handle.style.borderColor="#"+bordercolorvalue.value;} if(borderwidthvalue.value=='0') {newwin.document.body.style.borderWidth=borderwidthvalue.value;handle.style.borderWidth=0;} else if(borderwidthvalue.value!='') {newwin.document.body.style.borderWidth=borderwidthvalue.value;handle.style.borderWidth=1;} if(bordercolorvalue.value!='') {newwin.document.body.style.borderStyle=borderstylevalue.value;handle.style.borderStyle=borderstylevalue.value;} } } function setmargin() { if (newwin!=null) { if(marginvalue.value!='') {newwin.document.body.style.margin=marginvalue.value;} } } function setscroll() { if (newwin!=null) { if(checkscroll.checked) {newwin.document.body.scroll='yes';} else {newwin.document.body.scroll='no';} } } function setbgfix() { if (newwin!=null) { if(checkfix.checked) {newwin.document.body.style.backgroundAttachment='fixed';} else {newwin.document.body.style.backgroundAttachment='scroll';} } } function setbgrepeat() { if (newwin!=null) { if(checkrepeat.checked) {newwin.document.body.style.backgroundRepeat='no-repeat';} else {newwin.document.body.style.backgroundRepeat='repeat';} } } var trackrepeat; function showtrack() { handle.style.visibility='hidden'; trackbox.style.visibility='visible'; drawbox.style.visibility='visible'; } function playtrack() { handle.style.visibility='visible'; trackbox.style.visibility='hidden'; drawbox.style.visibility='hidden'; if (playtrackbutton.value=='Play Track') {showtrackbutton.disabled=true;playtrackbutton.value='Stop Track';playnode(axiscount2);} else {clearTimeout(trackrepeat);showtrackbutton.disabled=false;playtrackbutton.value='Play Track';} } var axis=new Array(); var axiscount=0; var axiscount2=0; var drawenable=0; var drawenable2=0; function initnode() { drawenable=1; } function drawnode() { if (drawenable==1 && drawenable2==1) { playtrackbutton.disabled=true; var tempx=document.body.scrollLeft+event.clientX-trackbox.offsetLeft; var tempy=document.body.scrollTop+event.clientY-trackbox.offsetTop; if (tempx>-1 && tempx<trackbox.offsetWidth-1 && tempy>-1 && tempy<trackbox.offsetHeight-1) { axis[axiscount]=tempx; axis[axiscount+1]=tempy; if (axiscount%4==0 && axiscount%20!=0) trackbox.innerHTML+='<img src=images/spacer.gif width=1 height=1 style="background-color:#999999;position:absolute;left:'+axis[axiscount]+';top:'+axis[axiscount+1]+'">'; if (axiscount%20==0) trackbox.innerHTML+='<img src=images/spacer.gif width=2 height=2 style="background-color:#FF0000;position:absolute;left:'+axis[axiscount]+';top:'+axis[axiscount+1]+'">'; axiscount+=2; trackbox.setCapture(); } } } function playnode(i) { if (i<axis.length) { handle.style.left=axis[i]-14+trackbox.offsetLeft; handle.style.top=axis[i+1]-11+trackbox.offsetTop; if (newwin!=null) { newwin.moveTo((handle.offsetLeft-10)*screen.Width/box.offsetWidth,(handle.offsetTop-10)*screen.Height/box.offsetHeight); } axiscount2+=2; trackrepeat=setTimeout('playnode('+axiscount2+')',10); } else {axiscount2=0;showtrackbutton.disabled=false;playtrackbutton.value='Play Track';clearTimeout(trackrepeat);} } function endnode() { drawenable=0; drawenable2=0; drawbox.style.visibility='visible'; trackbox.releaseCapture(); playtrackbutton.disabled=false; } function cleartrack() { axis=new Array(); axiscount=0; drawbox.style.visibility='hidden'; drawenable2=1; trackbox.innerHTML=''; } // --> </script> <style> .button2 { border:2px inset #FFFFFF} .button { background-color:menu;border:2px outset #FFFFFF} td,a,body,input {font-size:10px;font-family:Verdana} </style> <table width=220 cellspacing=0 cellpadding=0 border=0> <tr> <td height=170 align="center" class=button> <table width="204" border="0" cellspacing="0" cellpadding="0" class=button2> <tr> <td valign="top" height="150">กก</td> </tr> </table></td></tr> <tr> <td align=center> <input type="button" value="Open" onfocus="this.blur()" onclick="openwin()" style="width:100%" id=openbutton><br> <input type="button" value="Close" onfocus="this.blur()" onclick="if (newwin!=null)newwin.close();" style="width:100%" id=closebutton disabled><br> <input type="button" value="Size +" onfocus="this.blur()" onclick="changesize('+')" style="width:100%"><br> <input type="button" value="Size -" onfocus="this.blur()" onclick="changesize('-')" style="width:100%"><br> <input type="button" value="Restore" onfocus="this.blur()" onclick="changesize('0')" style="width:100%"><br> </td> </tr> <tr> <td align=center height=100 class=button valign="top"> <table width="100%" border="0" cellspacing="5" cellpadding="0"> <tr> <td valign="top" width="50%"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> <fieldset> <legend>Background</legend> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> Color</td><td><input type=textfield id=bgcolorvalue size=6 onkeypress="if (event.keyCode==13)setbg()" onblur="setbg()" value="666699"></td> </tr> <tr> <td> Image</td><td><input type=textfield id=bgimgvalue size=6 onkeypress="if (event.keyCode==13)setbg()" onblur="setbg()"></td> </tr> <tr> <td colspan=2><input type="checkbox" id="checkfix" value="checkbox" onclick="setbgfix()" onfocus="this.blur()"> Fix<input type="checkbox" id="checkrepeat" value="checkbox" onclick="setbgrepeat()" onfocus="this.blur()"> Tiled </td> </tr> </table> </fieldset> <fieldset> <legend>Margin</legend> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> Width</td><td><input type=textfield id=marginvalue size=6 onkeypress="if (event.keyCode==13)setmargin()" onblur="setmargin()" value=0></td> </tr> </table> </fieldset> </td> </tr> </table> </td> <td valign="top" width="50%"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> <fieldset> <legend>Border</legend> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> Color</td><td><input type=textfield id=bordercolorvalue size=6 onkeypress="if (event.keyCode==13)setborder()" onblur="setborder()" value="666699"></td> </tr> <tr> <td> Width</td><td><input type=textfield id=borderwidthvalue size=6 onkeypress="if (event.keyCode==13)setborder()" onblur="setborder()" value=0></td> </tr> <tr> <td> Style</td><td><input type=textfield id=borderstylevalue size=6 onkeypress="if (event.keyCode==13)setborder()" onblur="setborder()" value=solid></td> </tr> </table> </fieldset> <fieldset> <legend>Scroll</legend> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td><input type="checkbox" id="checkscroll" value="checkbox" onclick="setscroll();" onfocus="this.blur()"> Scroll </td> </tr> </table> </fieldset> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align=center> <input type="button" value="Show Track" onfocus="this.blur()" onclick="showtrack()" style="width:100%" id=showtrackbutton><br> <input type="button" value="Play Track" onfocus="this.blur()" onclick="playtrack()" style="width:100%" id=playtrackbutton><br> </td> </tr> </table> <div id="box" style="position:absolute; width:200px; height:150px; z-index:1; left: 10px; top: 10px; background-color: #FFFFFF; border: 1px none #000000"> </div> <div id="handle" style="font-size:5px;line-height:5px;position:absolute; width:28px; height:21px; z-index:2; left: 10px; top: 10px; background-color: #666699; border: 1px none #000000;cursor:move" onmousedown="dragstart(this)" onmousemove="draglayer()" onmouseup="dragend()"></div> <div id="trackbox" style="position:absolute; width:172px; height:129px; z-index:1; left: 24px; top: 21px; border: 1px solid #EAEAEA; background-color: #FAFAFA; visibility: hidden" onmousemove=drawnode() onmousedown=initnode() onmouseup=endnode()> <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center" style="color:#FF0000">(Empty)</td> </tr> </table> </div> <div id="drawbox" style="text-align:center;position:absolute; width:172px; height:14px; z-index:1; left: 24px; top: 136px; background-color: #CCCCCC; border: 1px none #EAEAEA; visibility: hidden; color: #FFFFFF" onclick="cleartrack()">ReDraw Track </div>