

  var mainpage;
  var result;
  var mousedownx;
  var mousedowny;
  var mouseDownWidth;
  var mouseDownHeight;
  var ismousedown = false;
  var dragobject;
  var dragHint = "move";
  var data;
  var showGrid = false;
  var snapToGrid = false;
  var gridSize = 10;
  var selected;
  var itemparameters;

  function init() {
    mainpage = document.getElementById("mainpage");
    data = document.getElementById("data");
    itemparameters = document.getElementById("itemparameters");
    var gridsize = document.getElementById("gridsize");
    gridsize.value = gridSize;
    drawGrid();
  }
  
  function drawGrid() {
    var grid = document.getElementById("grid");
    var context = grid.getContext("2d");
    if(showGrid == true) {
      context.clearRect(0,0,grid.width,grid.height);
      context.globalAlpha = 0.2;
      context.lineWidth = 0.5;    
      for(ix = 0; ix < grid.width; ix += gridSize) {
        context.beginPath();
        context.moveTo(ix, 0);
        context.lineTo(ix, grid.height);
        context.stroke();
        context.beginPath();
        context.moveTo(0, ix);
        context.lineTo(grid.width, ix);
        context.stroke();      
      }
    } else {
      context.clearRect(0,0,grid.width,grid.height);
    }
  }

  function setDragHint(hint) {
    dragHint = hint;
  }
  
  function getMouseX(e) {
    return e.clientX - mainpage.offsetLeft - parseFloat(mainpage.style.borderWidth);
  }
  
  function getMouseY(e) {
    return e.clientY - mainpage.offsetTop - parseFloat(mainpage.style.borderWidth);
  }

  function mousedown(obj, e) {
    var mouseX = getMouseX(e);
    var mouseY = getMouseY(e);
    mousedownx = mouseX - obj.offsetLeft;
    mousedowny = mouseY - obj.offsetTop;
    mouseDownLeft = parseFloat(obj.style.left);
    mouseDownTop = parseFloat(obj.style.top);
    mouseDownWidth = parseFloat(obj.style.width);
    mouseDownHeight = parseFloat(obj.style.height);
    dragobject = obj;
    selected = obj;
    ismousedown = true;
    displayParameters();
  }
  
  function mouseup() {
    ismousedown = false;
    dragobject = null;
    console.log(mainpage.innerHTML);
  }

  function mousemove(e) {
    var mouseX = getMouseX(e);
    var mouseY = getMouseY(e);
    if(ismousedown) {
    
      if(dragHint == "move") {
        if(snapToGrid == false) {
          dragobject.style.left = (mouseX - mousedownx) + "px";
          dragobject.style.top = (mouseY - mousedowny) + "px";
        } else {
          dragobject.style.left = (Math.round((mouseX - mousedownx) / gridSize) * gridSize) + "px";
          dragobject.style.top = (Math.round((mouseY - mousedowny) / gridSize) * gridSize) + "px";
	}
        if((mouseX - mousedownx) < 0)
	  dragobject.style.left = "0px";
	if((mouseY - mousedowny) < 0)
	  dragobject.style.top = "0px";
	if((mouseX - mousedownx + parseFloat(dragobject.style.width)) > parseFloat(mainpage.style.width)) 
	  dragobject.style.left = (mouseX - mousedownx) + "px"; 
      } else if(dragHint == "rightbottomresize") {      
        dragobject.style.width = (mouseX - mouseDownLeft) + "px";
        dragobject.style.height = (mouseY - mouseDownTop) + "px";
      } else if(dragHint == "rightresize") {      
        if(snapToGrid == false) {
          dragobject.style.width = (mouseX - mouseDownLeft) + "px";	
	} else {
          dragobject.style.width = (Math.round((mouseX - mouseDownLeft) / gridSize) * gridSize) + "px";	
	}
      } else if(dragHint == "bottomresize") { 
        if(snapToGrid == false) {
          dragobject.style.height = (mouseY - mouseDownTop) + "px";
	} else {
          dragobject.style.height = (Math.round((mouseY - mouseDownTop) / gridSize) * gridSize) + "px";
	}
      } else if(dragHint == "leftresize") {      
        dragobject.style.left = mouseX + "px";
        dragobject.style.width = (mouseDownWidth + (mouseDownLeft - mouseX)) + "px";
      } else if(dragHint == "topresize") {      
        dragobject.style.top = mouseY + "px";
        dragobject.style.height = (mouseDownHeight + (mouseDownTop - mouseY)) + "px";
      }
      
            data.innerHTML = "<p>" + dragobject.nodeName + "<br>" +  
	                       "Action: " + dragHint + "<br>" +
			       "MouseLocation: " + mouseX + ":" + mouseY + "<br>" +
			       "MouseOver Location: " + (mouseX - dragobject.offsetLeft) + ":" + (mouseY - dragobject.offsetTop) + "<br>" + 
			       "Location: " + dragobject.style.left + ":" + dragobject.style.top + "<br>" + 
			       "Size: " + dragobject.style.width + ":" + dragobject.style.height + "<br>" + 
                               "</p>";
    

    } else {
      var mouseabove = document.elementFromPoint(mouseX + mainpage.offsetLeft, mouseY + mainpage.offsetTop);

      if((mouseabove.id != "mainpage") && (mouseabove.id != "grid")) {
	
	data.innerHTML = "<p>" + mouseabove.nodeName + "<br>" +  
	                         "Action: " + dragHint + "<br>" +
 			         "MouseLocation: " + mouseX + ":" + mouseY + "<br>" +
				 "MouseOver Location: " + (mouseX - mouseabove.offsetLeft) + ":" + (mouseY - mouseabove.offsetTop) + "<br>" + 
				 "Location: " + mouseabove.style.left + ":" + mouseabove.style.top + "<br>" + 
				 "Size: " + mouseabove.style.width + ":" + mouseabove.style.height + "<br>" + 
                                 "</p>";
	
	if((mouseabove.nodeName == "DIV") || 
	   (mouseabove.nodeName == "IMG") || 
	   (mouseabove.nodeName == "BUTTON") ||
	   (mouseabove.nodeName == "INPUT") ||
	   (mouseabove.nodeName == "SPAN")) {
		
	  if((parseFloat(mouseabove.style.width) <= (mouseX - mouseabove.offsetLeft)) && 
             (parseFloat(mouseabove.style.height) <= (mouseY - mouseabove.offsetTop))) {
	    mouseabove.style.cursor = "nwse-resize";
	    dragHint = "rightbottomresize";	  
	  } else if((parseFloat(mouseabove.style.left) <= (mouseX - mouseabove.offsetLeft)) && 
                    ((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseY - mouseabove.offsetTop))) {
	    mouseabove.style.cursor = "nesw-resize";
	    dragHint = "righttopresize";	  
	  } else if(((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseX - mouseabove.offsetLeft)) && 
                    (parseFloat(mouseabove.style.height) <= (mouseY - mouseabove.offsetTop))) {
	    mouseabove.style.cursor = "nesw-resize";
	    dragHint = "leftbottomresize";	  
	  } else if(parseFloat(mouseabove.style.width) <= (mouseX - mouseabove.offsetLeft)) {
	    mouseabove.style.cursor = "ew-resize";
	    dragHint = "rightresize";
	  } else if(parseFloat(mouseabove.style.height) <= (mouseY - mouseabove.offsetTop)) {
	    mouseabove.style.cursor = "ns-resize";
	    dragHint = "bottomresize";
	  } else if((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseX - mouseabove.offsetLeft)) {
	    mouseabove.style.cursor = "ew-resize";
	    dragHint = "leftresize";
	  } else if((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseY - mouseabove.offsetTop)) {
	    mouseabove.style.cursor = "ns-resize";
	    dragHint = "topresize";
	  } else {
	    mouseabove.style.cursor = "move";
	    dragHint = "move";
	  }
	} else {
	  mouseabove.style.cursor = "default";
	}
      } else {
        mouseabove.style.cursor = "default";
        dragHint = "";
	data.innerHTML = "<p></p>";
      }
    }
    displayParameters();
  }
  
  function displayParameters() {

	itemparameters.innerHTML = "<p>" + selected.nodeName + ": " + selected.id + "<br>" + 
				 "Location: " + selected.style.left + ":" + selected.style.top + "<br>" + 
				 "Size: " + selected.style.width + ":" + selected.style.height + "<br>" + 
                                 "</p>";

  }

</script>

<style>
@font-face {
  font-family: bebasneue;
  src: url('http://68.108.72.78:8080/fonts/BebasNeue.otf');
}
</style>

</head>
<body ondragstart="return false;" 
      ondrop="return false;" 
      onload="init(); return true;">
      
  <div style="position: relative;">

  <div id="window1" style="position: absolute; left: 0px; top: 0px; border: 1pt solid black; display: inline-block; padding: 2px; background: #808080; color: #ffffff;">

  <span style="font: 20px bebasneue;">View Editor</span>

  <div id="mainpage" 
       style="width: 600px; height: 600px; border: 1px solid black; position: relative; background: #ffffff;" 
       onmousemove="mousemove(event); return true;" 
       onmouseup="mouseup(); return true;">

    <canvas id="grid" width="600px" height="600px" style="position: absolute; left: 0px; top: 0px; alpha: 0.5; cursor: normal;"></canvas>

    <img id="img1" style="position: absolute; user-select: none;" onmousedown="mousedown(this, event); return true;" src="images/barant_web_logo.png" width="336" height="69">

    <img id="img2" style="position: absolute; user-select: none;" onmousedown="mousedown(this, event); return true;" src="images/barant_web_logo.png" width="336" height="69">
    
    <button id="button1" 
       style="width: 100px; height: 50px; border: 2px solid green; position: absolute;"
       onmousedown="mousedown(this, event); return true;">Press</button>

    <div id="div1"
       style="width: 100px; height: 50px; border: 2px solid green; position: absolute;"
       onmousedown="mousedown(this, event); return true;">
    </div>

    <div id="div2"
       style="width: 100px; height: 50px; border: 0px; position: absolute; background: #404040;"
       onmousedown="mousedown(this, event); return true;">
    </div>

    <div id="div3"
       style="width: 100px; height: 100px; border: 10px solid red; position: absolute; background: #ffff80;"
       onmousedown="mousedown(this, event); return true;">
    </div>
  
    <span id="text1" onmousedown="mousedown(this, event); return true;"
       style="position: absolute; user-select: none; border: 1pt solid black; background: #8080c0;">This is a text label</span>

    <input id="input1" style="position: absolute;" onmousedown="mousedown(this, event); return true;" type="input" name="drag5" size="50">

  </div>
  </div>


  <div id="window3" style="position:absolute; top: 235px; left: 610px;
       border: 1pt solid black; display: inline-block; padding: 2px; background: #808080; color: #ffffff;">

  <span style="font: 20px bebasneue;">OPTIONS</span>

  <div style="width: 150px; height: 300px; color: #000000; border: 1px solid black; position: relative; background: #ffffff;" 
       onmousemove="mousemove(event); return true;" 
       onmouseup="mouseup(); return true;">  

  <div id="controls">
    <input type="checkbox" name="grid" onchange="showGrid = this.checked; drawGrid(); return true;"><span style="font: 12px bebasneue; margin-bottom: 2px;">Show Grid</span><br>
    <input type="checkbox" name="snaptogrid" onchange="snapToGrid = this.checked; return true;"><span style="font: 12px bebasneue; margin-bottom: 2px;">Snap To Grid</span><br>
    <span style="font: 12px bebasneue; margin-bottom: 2px;">Grid Size: </span><input type="text" name="gridsize" id="gridsize" style="width: 20px;" size="3" onchange="gridSize = parseInt(this.value); drawGrid(); return true;"><br>
  </div>

  <div id="itemparameters" style="font: 12px bebasneue;"></div>

  <div id="data" style="font: 12px bebasneue;">
   <p>NO DATA</p>
  </div>

  </div>
  </div>


  <div id="window2" style="position:absolute; top: 0px; left: 610px; border: 1pt solid black; display: inline-block; padding: 2px; background: #808080; color: #ffffff;">

  <span style="font: 20px bebasneue;">Toolbar</span>

  <div id="toolbar" 
       style="width: 80px; height: 200px; border: 1px solid black; position: relative; background: #ffffff;" 
       onmousemove="mousemove(event); return true;" 
       onmouseup="mouseup(); return true;">
    <button id="button1" 
       style="width: 40px; height: 40px; border: 2px solid green; position: absolute;"
       onmousedown="mousedown(this, event); return true;">Press</button>

  </div>
  </div>
  
  </div>  




</body>
</html>