Fire JS Bin - ThinVnc

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

// win.js
var running;
var basUrl;
var deskDiv;
var toolbar;
var clipbrd;
var clipbrdVisible = false;
var ie;
var iphone;
var supportsCanvas;
var supportsZoom;
var supportsScale;
var scale = 1;
var scaled = true;
var startPending = true;
var jsonTimeoutValue = 15000;
var jsonTimeout;

sessionStatus = {
  id: 0,
  active: false,
  monitor: 0,
  monitorCount: 0,
  viewLeft: 0,
  viewTop: 0,
  viewWidth: 0,
  viewHeight: 0,
  mouseControl: false,
  kbdControl: false,
  quality: 90,
  pixelFormat: 0,
  grayscale: false,
  remotePointer: false
}

function getBodyHeight() {
  if (!ie) return window.innerHeight;
  else return document.body.offsetHeight;
}

function getBodyWidth() {
  if (!ie) return window.innerWidth;
  else return document.body.offsetWidth;
}

function getScale() {
  if (!scaled) return 1;

var top = 0;
  var c1 = (getBodyHeight() - top) / sessionStatus.viewHeight;
  var c2 = getBodyWidth() / sessionStatus.viewWidth;
  if ((c1 > 1) && (c2 > 1)) return 1;
  else {
    if (c2 < c1) return c2;
    else return c1;
  }
}

function zoomDesktop() {
  scale = getScale();
    
  deskDiv.style.marginLeft = getDeltaX() + 'px';
  deskDiv.style.marginTop = getDeltaY() + 'px';
  if (supportsScale) {
    deskDiv.style.MozTransform = "scale(" + scale + ")"; 
  } else deskDiv.style.zoom = scale;
}

function createImg(win, imgpart, div) {
  var img = document.createElement("img");
  img.visibility = 'visible';
  img.display = 'block';
  img.style.position = 'absolute';
  img.style.zIndex = win.zidx;
  img.left = imgpart.x;
  img.top = imgpart.y;
  img.style.left = imgpart.x + 'px';
  img.style.top = imgpart.y + 'px';
  div.appendChild(img);
  return img;
}

function createCanvasIE(win) {
  var canvas = document.createElement("div");
  canvas.visibility = 'visible';
  canvas.display = 'block';
  canvas.style.position = 'absolute';
  canvas.style.left = (win.left - sessionStatus.viewLeft + getDeltaX()) + 'px';
  canvas.style.top = (win.top - sessionStatus.viewTop + getDeltaY()) + 'px';
  canvas.style.zIndex = win.zidx;
  canvas.width = win.width;
  canvas.height = win.height;
  canvas.id = "canvas" + win.hwnd;
  deskDiv.appendChild(canvas);
  return canvas;
}

function discardElement(element) {
  var garbageBin = document.getElementById('IELeakGarbageBin');
  if (!garbageBin) {
    garbageBin = document.createElement('DIV');
    garbageBin.id = 'IELeakGarbageBin';
    garbageBin.style.display = 'none';
    document.body.appendChild(garbageBin);
  }

// move the element to the garbage bin
  garbageBin.appendChild(element);
  garbageBin.innerHTML = '';
}

function processWindowIE(win) {
  var canvasid = "canvas" + win.hwnd;
  var canvas = document.getElementById(canvasid);
  if (!canvas) canvas = createCanvasIE(win);

if ((win.width == 0) || (win.height == 0)) {
    canvas.style.visibility = "hidden";
    canvas.style.zIndex = -1;
  } else {
    if ((win.width != canvas.width) ||
    (win.height != canvas.height)) {
      if ((win.width < canvas.width) ||
          (win.height < canvas.height)) {
        $('img', '#' + canvas.id).each(function (index, item) {
          if (((item.left + item.width) > win.width) ||
              ((item.top + item.height) > win.height)) {
            var aux = "rect(" + item.top + "px " + (win.width - item.left) + "px " + (win.height - item.top) + "px " + item.left + "px)";
            item.style.clip = aux;
          }
        })
      }
      canvas.width = win.width;
      canvas.height = win.height;
    }
    canvas.style.left = (win.left-sessionStatus.viewLeft) + 'px';
    canvas.style.top = (win.top-sessionStatus.view) + 'px';
    canvas.style.visibility = "visible";
    canvas.style.zIndex = win.zidx;
  }

if (win.imgs != null) {
    $.each(win.imgs, function (i, imgpart) {
      var img = null;
      $('img', '#' + canvas.id).each(function (index, item) {
        if ((item.left >= imgpart.x) && (item.top >= imgpart.y) &&
            ((item.width + item.left) <= (imgpart.w + imgpart.x)) &&
            ((item.height + item.top) <= (imgpart.y + imgpart.h))) {
          if ((item.left == imgpart.x) && (item.top == imgpart.y) &&
              (item.left == imgpart.x) && (item.top == imgpart.y)) {
            img = item;
          } else {
            discardElement(item);
            canvas.removeChild(item);
          }
        }
      });
      if (!img) img = createImg(win, imgpart, canvas);
      img.src = imgpart.img;
    })
  }
};

function createCanvas(win) {
  var canvas = document.createElement("canvas");
  
  canvas.visibility = 'visible';
  canvas.display = 'block';
  canvas.style.position = 'absolute';
  canvas.style.left = (win.left-sessionStatus.viewLeft)+'px';
  canvas.style.top = (win.top-sessionStatus.viewTop)+'px';
  canvas.style.zIndex = win.zidx;
  canvas.width = deskDiv.offsetWidth+8; // +8 because of maxinimized windows
  canvas.height = deskDiv.offsetHeight+8;
  canvas.id = "canvas" + win.hwnd;
  deskDiv.appendChild(canvas);
  return canvas;
}

function processWindow(win) {
  var canvasid = "canvas" + win.hwnd;
  var canvas = document.getElementById(canvasid);
  if (!canvas) canvas = createCanvas(win);

deskDiv.style.marginLeft = getDeltaX() + 'px';
  deskDiv.style.marginTop = getDeltaY() + 'px';
  if ((win.width == 0) || (win.height == 0)) {
    canvas.style.visibility = "hidden";
    canvas.style.zIndex = -1;
  } else {
    canvas.style.left = (win.left-sessionStatus.viewLeft) + 'px';
    canvas.style.top = (win.top-sessionStatus.viewTop) + 'px';
    canvas.style.clip = 'rect(0px,' + win.width + 'px,' + win.height + 'px,0px)';

canvas.style.visibility = "visible";
    canvas.style.zIndex = win.zidx;
  }
  
  if (win.imgs != null) {
    var context = canvas.getContext('2d');
    if (!context || !context.drawImage) {
      alert("there is no canvas");
      return;
    };

$.each(win.imgs, function (i, imgpart) {
      var img = new Image();
      img.id = "imgcanvas";
      img.style.display = "none";
      img.onload = function () {
        context.drawImage(img, imgpart.x , imgpart.y, img.width, img.height);
      }
      img.src = imgpart.img;
    })
  }
};

function sendServerCmd(cmd, query) {
  
  var url = baseUrl + cmd + "?" + query + "&id=" + sessionStatus.id;
  try {
    console.log(url);
    $.getJSON(url, function(obj) {
      sessionStatus.id = obj.id;
      if (sessionStatus.id == '-1') {
        window.location.href = '/';
        return;
      }

if (sessionStatus.active != obj.active) {
        if (obj.active) {
          document.getElementById("state").textContent = 'pause';
          $('#state').removeClass('resume').addClass('pause');
          reload();
        } else {
          document.getElementById("state").textContent = 'resume';
          $('#state').removeClass('pause').addClass('resume');
        }
      }

sessionStatus.active = obj.active;
      sessionStatus.monitor = obj.monitor;
      sessionStatus.monitorCount = obj.monitorCount;
      sessionStatus.viewLeft = obj.viewLeft;
      sessionStatus.viewTop = obj.viewTop;
      sessionStatus.viewWidth = obj.viewWidth;
      sessionStatus.viewHeight = obj.viewHeight;
      sessionStatus.mouseControl = obj.mouseControl;
      sessionStatus.kbdControl = obj.kbdControl;
      sessionStatus.quality = obj.quality;
      sessionStatus.pixelFormat = obj.pixelFormat;
      sessionStatus.grayscale = obj.grayscale;
      sessionStatus.remotePointer = obj.remotePointer;

deskDiv.style.marginLeft = getDeltaX() + 'px';
      deskDiv.style.marginTop = getDeltaY() + 'px';
      deskDiv.style.width = sessionStatus.viewWidth + 'px';
      deskDiv.style.height = sessionStatus.viewHeight + 'px';
      deskDiv.style.clip = 'rect(0px,' + sessionStatus.viewWidth + 'px,' + sessionStatus.viewHeight + 'px,0px)';

if (obj.ticket!='') {
        $('#mouse').addClass('hidden');
        $('#monitor').addClass('hidden');
        $('#cursor').addClass('hidden');
        $('#state').addClass('hidden');
        $('#clipbrd').addClass('hidden');
      } else {
        if (sessionStatus.active && sessionStatus.mouseControl) {
          $('#mouse').addClass('pressed');
          setTimeout(sendMouseMove, 100);
        } else $('#mouse').removeClass('pressed');

if (sessionStatus.active && sessionStatus.remotePointer) {
          $('#cursor').addClass('pressed');
        } else $('#cursor').removeClass('pressed');

if (sessionStatus.monitorCount>1) {
          $('#monitor').removeClass('hidden');
        }
      }

if (sessionStatus.pixelFormat==1) {
        document.getElementById("colors").textContent = 'FULL COLOR';
      } else {
        document.getElementById("colors").textContent = '256 COLOR';
      }

resetToolbarPosition();
      if (startPending) setTimeout(start, 1);
    });
  }
  catch (e) {
    alert(e);
  }
}

function sendCmd(query) {
  var cmd = 'cmd-event.js';
  if (query.match('cmd=start')) {
    cmd = 'cmd-start.js';
  }
  return sendServerCmd(cmd, query); //"cmd"
}

function sendLocalCmd(query) {
  return sendServerCmd("cmd-open.js", query); //lcmd
}

function sendParams (mouseControl,remotePointer,pixelFormat){
  sendCmd("cmd=params&mouseControl=" + mouseControl + "&kbdControl=" + mouseControl + "&remotePointer=" + remotePointer+ "&pixelFormat=" + pixelFormat);
}

function toogleMouseControl() {
  sendParams(!sessionStatus.mouseControl,sessionStatus.remotePointer,sessionStatus.pixelFormat);
}

function toogleRemotePointer() {
  sendParams(sessionStatus.mouseControl, !sessionStatus.remotePointer,sessionStatus.pixelFormat);
}

function swicthPixelFormat() {
  var pf = 0;
  if (sessionStatus.pixelFormat==0) pf = 1;
  sendParams(sessionStatus.mouseControl, sessionStatus.remotePointer,pf);
}

function setMonitor(m) {
  if (m>=sessionStatus.monitorCount) m = -1;
  sendCmd("cmd=params&monitor=" + m);
}

function disconnect() {
  sendLocalCmd("cmd=disconnect");
}

function stop() {
  sendCmd("cmd=stop");
}

function start() {
  startPending = false;
  var cmd = "cmd=start"
  if (ie) cmd = cmd + "&embeddedImage=false";
  cmd = cmd + "&mouseControl=" + sessionStatus.mouseControl + "&kbdControl=" + sessionStatus.mouseControl + "&remotePointer=" + sessionStatus.remotePointer;
  sendCmd(cmd);
}

function setDestAddr(destAddr) {
  var cmd = "cmd=params&destAddr=" + escape(destAddr);
  sendCmd(cmd);
}

function refresh() {
  deskDiv.innerHTML = '';
  sendCmd("cmd=refresh");
}

function queryStatus() {
  sendLocalCmd("cmd=queryStatus");
}

function onJsonTimeout() {
//  alert('timeout');
  setTimeout(reload, 1);
}

if (obj.status==9) {
        alert("This session has been terminated");
        disconnect();
        return;
      }

$.each(obj.windows, function (i, win) {
        if (supportsCanvas) processWindow(win);
        else processWindowIE(win);
      })

for (var i = deskDiv.children.length - 1; i >= 0; i--) {
        var found = false;
        var canvas = deskDiv.children[i];

$.each(obj.windows, function (i, win) {
          var canvasid = "canvas" + win.hwnd;
          if (canvas.id == canvasid) {
            found = true;
          }
        })
        if (!found) {
          canvas.style.display = "none";
          canvas.innerHTML = '';
          deskDiv.removeChild(canvas);
        }
      }

if (sessionStatus.remotePointer) {
        deskDiv.style.cursor = 'url(point.cur)';
      }

if (!sessionStatus.remotePointer && !sessionStatus.mouseControl) {
        deskDiv.style.cursor = 'default';
      }

if (sessionStatus.mouseControl && !sessionStatus.remotePointer) {
        deskDiv.style.cursor = obj.cursor;
      }
      zoomDesktop();
      if (obj.status==3) start();
      else if (sessionStatus.active) setTimeout(reload, 1);
      
    }
    catch (err) {
      if (sessionStatus.active) {
        setTimeout(reload, 1);
      }
    }
  });
}

function resetToolbarPosition() {
  var ww = getBodyWidth();
  toolbar.style.left = ((ww - toolbar.offsetWidth) / 2)+'px';
  $('#toolbarHandle')[0].style.top = (toolbar.offsetHeight + toolbar.offsetTop - 1)+'px';
  $('#toolbarHandle')[0].style.left = (toolbar.offsetLeft + toolbar.offsetWidth - 18) + 'px';
}

function hideToolbar() {
  toolbar.style.top = -toolbar.offsetHeight + 'px';
  resetToolbarPosition();
  zoomDesktop();
}

function showToolbar() {
  toolbar.style.top = 0 + 'px';
  resetToolbarPosition();
  zoomDesktop();
}

$(document).ready(function() {
  var agent = navigator.userAgent.toLowerCase();
  iphone = ((agent.indexOf('iphone')!=-1) || (agent.indexOf('ipod')!=-1) || (agent.indexOf('ipad')!=-1));

deskDiv = document.getElementById("desk");
  toolbar = document.getElementById("toolbar");   
  clipbrd = document.getElementById("clipboard");

supportsZoom = ((deskDiv.style.MozTransform == undefined) && !iphone);
  supportsCanvas = !!document.createElement('canvas').getContext;
  supportsScale = ((deskDiv.style.MozTransform !== undefined) && !iphone);
  ie = !supportsCanvas;
  
  resetToolbarPosition();

baseUrl = '/assets/thinvnc/';//document.location.pathname;
  if (baseUrl.charAt(baseUrl.length - 1) != '/') {
    baseUrl = baseUrl + '/';
  }

var pinned = 0;
  $('#toolbarHandle').click(function(event) {
    pinned = pinned ^ 1;

if (toolbar.offsetTop < 0) showToolbar();
    else hideToolbar();
  });

$('#mouse').click(function(event) {
    toogleMouseControl();
  });

$('#cursor').click(function(event) {
    toogleRemotePointer();
  });

$('#refresh').click(function(event) {
    start();
  });

$('#monitor').click(function(event) {
    setMonitor(sessionStatus.monitor+1);
  });
  $('#monitor').addClass('hidden');

$('#scale').click(function(event) {
    scaled = !scaled;
    if (scaled) $('#scale').addClass('pressed');
    else $('#scale').removeClass('pressed');
    zoomDesktop();
  });

$('#state').click(function(event) {
    if (sessionStatus.active) stop();
    else start();
  });

$('#colors').click(function(event) {
    swicthPixelFormat();
  });

$('#clipbrd').click(fn2 = function(event) {
    delete fn2;
    if (clipbrdVisible == true) {
      clipbrdVisible = false;
      $('#clipbrd').removeClass('pressed');
      $('#clipboard').addClass('hidden');
    } else {
      clipbrdVisible = true;
      $('#clipbrd').addClass('pressed');
      $('#clipboard').css('top', $('#clipbrd').offset().top + 22);
      $('#clipboard').css('left', $('#clipbrd').offset().left);
      $('#clipbremcopy').click();
      $('#clipboard').removeClass('hidden');
    }
  });

$('#disconnect').click(function(event) {
    disconnect();
  });

if (!supportsScale && !supportsZoom) {
    scaled = 0;
    $('#scale').addClass('hidden');
  } else {
    scaled = 1;
    $('#scale').addClass('pressed');

$(window).bind('resize', function() {
      resetToolbarPosition();
      zoomDesktop();
    });
  }

hookKM();
  startClipboard();
  queryStatus();;
});

// km.js
var mouseX = -1;
var mouseY = -1;
var mouseMoved = false;

function clearMouse() {
  mouseMoved = false;
}

function sendKey(key, action) {
  if (sessionStatus.active && sessionStatus.kbdControl) {
    var url = baseUrl + "cmd-event.js" + "?cmd=keyb&key=" + key + "&action=" + action + "&id=" + sessionStatus.id;
    console.log(url);
    $.get(url, function (data) { })
  }
}

function sendMouseMove() {
  if (sessionStatus.active && sessionStatus.mouseControl) {
    if (mouseMoved) sendMouse(mouseX,mouseY,0,"move");
    setTimeout(sendMouseMove, 100);
  }
}

function hookKM() {
  $("#desk").mousedown(function (e) {
    sendMouse(e.pageX, e.pageY, e.button, "down");
    e.stopPropagation();
    e.preventDefault();
  });

$("#desk").mouseup(function (e) {
    sendMouse(e.pageX, e.pageY, e.button, "up");
    e.stopPropagation();
    e.preventDefault();
  });

$("#desk").mousemove(function (e) {
    if ((mouseX != e.pageX) || (mouseY != e.pageY)) {
      mouseX = e.pageX;
      mouseY = e.pageY;
      mouseMoved = true
    }
  });

$(document).keydown(function (e) {
    sendKey(e.keyCode, "down");
    e.stopPropagation();
    e.preventDefault();
  });

$(document).keyup(function (e) {
    sendKey(e.keyCode, "up");
    e.stopPropagation();
    e.preventDefault();
  });

$("#desk").bind("contextmenu", function (e) {
    return false;
  });
}

// cli.js
/* Command-line interface */

function CommandLineInterface() {
  var type = "unknown";
  var div = null;

this.init = cliInit;
  this.dispose = cliDispose;
  this.show = cliShow;
  this.hide = cliHide;
  this.getText = cliGetText;
  this.setText = cliSetText;
  this.send = cliSend;
  this.recv = cliReceive;
}

function cliInit(element) {
  this.div = element;
  if (this.div == null || this.div == undefined)
   throw "Element with Id = '" + id + "' not found in the DOM";
}

function cliDispose() {
  this.div = null;
}

function cliShow() {
  div.style.display = 'inline';
}

function cliHide() {
  div.style.display = 'none';
}

function cliGetText() {
  return this.div.innerText;
}

function cliSetText(text) {
  this.div.innerText = text;
}

/* Clipboard */

function CLI4Clipboard() {
  this.inheritFrom = CommandLineInterface;
  this.inheritFrom();
  this.type = "clipboard";

this.getText = clipboardGetText;
  this.setText = clipboardSetText;
  this.copy = clipboardCopy;
  this.paste = clipboardPaste;
  this.clear = clipboardClear;
}

function clipboardGetText() {
  return $('textarea#clipboardText').val();
}

function clipboardSetText(text) {
  $('textarea#clipboardText').val(text);
}

function clipboardCopy() {
  this.recv("copy");
}

function clipboardPaste() {
  this.send("paste");
}

function clipboardClear() {
  $('textarea#clipboardText').val("");
}

/* Startup functions */
function startClipboard() {
  jQuery.ajaxSettings.contentType = 'text/plain';
  var clipboard = new CLI4Clipboard();
  clipboard.init($('#clipboard'));
  $('#clipbremcopy').click(fn2 = function() {
    delete fn2;
    clipboard.copy();
  });
  $('#clipbrempaste').click(fn2 = function() {
    delete fn2;
    clipboard.paste();
  });
  $('#clipblclclear').click(fn2 = function() {
    delete fn2;
    clipboard.clear();
  });
  $('#clipboardText').keydown(function (e) {
    e.stopPropagation();
  });
  $('#clipboardText').keyup(function (e) {
    e.stopPropagation();
  });
}

<html> 
<head>
<title>ThinVnc - HTML5 - Remote Desktop Client</title> 
<meta http-equiv="X-UA-Compatible" content="chrome=1">
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head> 
 
<body> 
<div id="toolbarHandle"> 
  <img alt="" id="pin" src="/assets/thinvnc/handle_up.png"/> 
</div> 
<div id="toolbar" class="toolbar"> 
    <div id="mouse"   class="btn icon mouse"   title="Enables mouse and keyboard control.">Control</div> 
    <div id="cursor"  class="btn icon cursor"  title="Shows the remote pointer.">Cursor</div> 
    <div id="state"  class="btn icon pause"  title="Pause">pause</div> 
    <div id="refresh" class="btn icon refresh" title="Request a full display update.">Refresh</div> 
    <div id="scale"   class="btn icon scale"   title="Scale the display to fit in the current window.">Scale</div> 
    <div id="colors"   class="btn icon colors"   title="Changes color depth.">Colors</div> 
    <div id="monitor"   class="btn icon monitor"   title="Next Monitor.">Monitor</div> 
    <div id="clipbrd"   class="btn icon clipbrd"   title="Shows the clipboard window.">Clipboard</div> 
    <div id="disconnect"   class="btn icon disconnect"   title="Scale the display to fit in the current window.">Disconnect</div> 
</div> 
<div id="clipboard" class="commandline hidden"> 
    <div id="cliToolbar"> 
      <div id="clipbremcopy"  class="btn icon copy"  title="Copy the remote clipboard here">Refresh</div> 
      <div id="clipbrempaste" class="btn icon paste" title="Paste the text below in the remote clipboard">Paste</div> 
      <div id="clipblclclear" class="btn icon clear" title="Clear the text below">Clear</div> 
    </div> 
    <div id="cliCmdLine"><textarea id="clipboardText" class="clipboardText" wrap="soft">

body {
  padding: 0;
  margin: 0;
  text-align: center;
  background-color: black;
}

#toolbarHandle 
{
  background-color: #dceaf9;
  border-left: 1px solid #AAD3FF;
  border-right: 1px solid #AAD3FF;
  border-bottom: 1px solid #AAD3FF;
  position: absolute;
  z-index: 1001;
  margin: 0px 0px 0px 0px;
  padding: 0px 4px 0px 4px;
  cursor: pointer;
}

.toolbar {
  text-align: center;
  background-color: #dceaf9;
  white-space:nowrap;

border-left: 1px solid #AAD3FF;
  border-top: 1px solid #AAD3FF;
  border-right: 1px solid #AAD3FF;
  border-bottom: 1px solid #AAD3FF;
  
  padding: 3px 5px 5px 5px;
  position: absolute;
  z-index: 1000;
}

.toolbar div {
  display: inline;  
}

.icon {
  background-repeat: no-repeat;
  padding-left: 24px;
}

.btn {
  width: 75px;
  
  border: 1px solid #c5d0e8;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  
  background-color: #f1f6fd ;
  background-position: 5px 50%;
  
  cursor: pointer;
  
  padding: 5px 10px 5px 24px;
  font-size: 8px;
  font-weight: bold;
  font-family: tahoma, serif;
  text-transform: uppercase;
  color: #3f5c90;
}

.btn:hover {
  border-color: #b1bcdf #75819e #75819e #b1bcdf;
  background-color: #e4ecf3;
  color: #285dbb;
}

.btn.pressed
{
    border-color: #75819e #b1bcdf #b1bcdf #75819e;
    background-color: #ADC5DA;
/*    color: #285dbb;*/
}

.btn.hidden { display: none; }

.mouse { background-image: url(/assets/thinvnc/mouse.png); }
.cursor { background-image: url(/assets/thinvnc/cursor.png); }
.pause { background-image: url(/assets/thinvnc/pause.png); }
.resume { background-image: url(/assets/thinvnc/resume.png); }
.refresh { background-image: url(/assets/thinvnc/refresh.png); }
.scale { background-image: url(/assets/thinvnc/scale.png); }
.colors { background-image: url(/assets/thinvnc/colors.png); }
.monitor { background-image: url(/assets/thinvnc/monitor.png); }
.clipbrd { background-image: url(/assets/thinvnc/clipboard.png); }
.disconnect { background-image: url(/assets/thinvnc/connect.png); }

#desk {
  position:absolute;
  left: 0;
  top: 0;
  z-index: 255;
  overflow:hidden;
}

.commandline {
  background-color: #ffffff;
  white-space:nowrap;

border-left: 1px solid #AAD3FF;
  border-top: 1px solid #AAD3FF;
  border-right: 1px solid #AAD3FF;
  border-bottom: 1px solid #AAD3FF;

margin: 0px 0px 0px 0px;
  padding: 3px 5px 5px 5px;
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 170px;
  z-index: 1100;
  overflow:hidden;
}

.commandline#clipboard {
  width: 300px;
  height: 400px;
}

.commandline.hidden { display: none; }

.commandline div {
  display: inline;  
}

.copy { background-image: url(/assets/thinvnc/clipbrd_copy.png); }
.paste { background-image: url(assets/thinvnc/clipbrd_paste.png); }
.clear { background-image: url(assets/thinvnc/clipbrd_clear.png); }

.commandline#clipboard #cliToolbar {
  height: 26px;
  float:left;
}

.commandline#clipboard #cliCmdLine {
  height: 92%;
  width: 100%;
  float:left;
}

.clipboardText {
  padding: 3px 5px 5px 5px;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  white-space: pre;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: auto;
  overflow: -moz-scrollbars-horizontal;
  font-size: 9px;
  font-weight: normal;
  font-family: tahoma, serif;
  border: 0 0 0 0;
  resize: none;
}

Pop out