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>";

  }