#ifndef ____editview_js_h__
#define ____editview_js_h__

#include "HTTPPage.h"

namespace http {

   class __editview_js : public HTTPPage {

      int processCommand(HTTPRequest *httpRequest, core::TCPSession *session, HTTPSession *httpSession, std::stringstream &data) override {
         data << "  var mainpage;" << std::endl;
         data << "  var result;" << std::endl;
         data << "  var mousedownx;" << std::endl;
         data << "  var mousedowny;" << std::endl;
         data << "  var mouseDownWidth;" << std::endl;
         data << "  var mouseDownHeight;" << std::endl;
         data << "  var ismousedown = false;" << std::endl;
         data << "  var dragobject;" << std::endl;
         data << "  var dragHint = \"move\";" << std::endl;
         data << "  var data;" << std::endl;
         data << "  var showGrid = false;" << std::endl;
         data << "  var snapToGrid = false;" << std::endl;
         data << "  var gridSize = 10;" << std::endl;
         data << "  var selected;" << std::endl;
         data << "  var itemparameters;" << std::endl;
         data << "" << std::endl;
         data << "  mainpage = document.getElementById(\"mainpage\");" << std::endl;
         data << "  data = document.getElementById(\"data\");" << std::endl;
         data << "  itemparameters = document.getElementById(\"itemparameters\");" << std::endl;
         data << "  var gridsize = document.getElementById(\"gridsize\");" << std::endl;
         data << "  gridsize.value = gridSize;" << std::endl;
         data << "  drawGrid();" << std::endl;
         data << "" << std::endl;
         data << "  function drawGrid() {" << std::endl;
         data << "    var grid = document.getElementById(\"grid\");" << std::endl;
         data << "    var context = grid.getContext(\"2d\");" << std::endl;
         data << "    if(showGrid == true) {" << std::endl;
         data << "      context.clearRect(0,0,grid.width,grid.height);" << std::endl;
         data << "      context.globalAlpha = 0.2;" << std::endl;
         data << "      context.lineWidth = 0.5;    " << std::endl;
         data << "      for(ix = 0; ix < grid.width; ix += gridSize) {" << std::endl;
         data << "        context.beginPath();" << std::endl;
         data << "        context.moveTo(ix, 0);" << std::endl;
         data << "        context.lineTo(ix, grid.height);" << std::endl;
         data << "        context.stroke();" << std::endl;
         data << "        context.beginPath();" << std::endl;
         data << "        context.moveTo(0, ix);" << std::endl;
         data << "        context.lineTo(grid.width, ix);" << std::endl;
         data << "        context.stroke();      " << std::endl;
         data << "      }" << std::endl;
         data << "    } else {" << std::endl;
         data << "      context.clearRect(0,0,grid.width,grid.height);" << std::endl;
         data << "    }" << std::endl;
         data << "  }" << std::endl;
         data << "" << std::endl;
         data << "  function setDragHint(hint) {" << std::endl;
         data << "    dragHint = hint;" << std::endl;
         data << "  }" << std::endl;
         data << "  " << std::endl;
         data << "  function getMouseX(e) {" << std::endl;
         data << "    return e.clientX - mainpage.offsetLeft - parseFloat(mainpage.style.borderWidth);" << std::endl;
         data << "  }" << std::endl;
         data << "  " << std::endl;
         data << "  function getMouseY(e) {" << std::endl;
         data << "    return e.clientY - mainpage.offsetTop - parseFloat(mainpage.style.borderWidth);" << std::endl;
         data << "  }" << std::endl;
         data << "" << std::endl;
         data << "  function mousedown(obj, e) {" << std::endl;
         data << "    var mouseX = getMouseX(e);" << std::endl;
         data << "    var mouseY = getMouseY(e);" << std::endl;
         data << "    mousedownx = mouseX - obj.offsetLeft;" << std::endl;
         data << "    mousedowny = mouseY - obj.offsetTop;" << std::endl;
         data << "    mouseDownLeft = parseFloat(obj.style.left);" << std::endl;
         data << "    mouseDownTop = parseFloat(obj.style.top);" << std::endl;
         data << "    mouseDownWidth = parseFloat(obj.style.width);" << std::endl;
         data << "    mouseDownHeight = parseFloat(obj.style.height);" << std::endl;
         data << "    dragobject = obj;" << std::endl;
         data << "    selected = obj;" << std::endl;
         data << "    ismousedown = true;" << std::endl;
         data << "    displayParameters();" << std::endl;
         data << "  }" << std::endl;
         data << "  " << std::endl;
         data << "  function mouseup() {" << std::endl;
         data << "    ismousedown = false;" << std::endl;
         data << "    dragobject = null;" << std::endl;
         data << "    console.log(mainpage.innerHTML);" << std::endl;
         data << "  }" << std::endl;
         data << "" << std::endl;
         data << "  function mousemove(e) {" << std::endl;
         data << "    var mouseX = getMouseX(e);" << std::endl;
         data << "    var mouseY = getMouseY(e);" << std::endl;
         data << "    if(ismousedown) {" << std::endl;
         data << "    " << std::endl;
         data << "      if(dragHint == \"move\") {" << std::endl;
         data << "        if(snapToGrid == false) {" << std::endl;
         data << "          dragobject.style.left = (mouseX - mousedownx) + \"px\";" << std::endl;
         data << "          dragobject.style.top = (mouseY - mousedowny) + \"px\";" << std::endl;
         data << "        } else {" << std::endl;
         data << "          dragobject.style.left = (Math.round((mouseX - mousedownx) / gridSize) * gridSize) + \"px\";" << std::endl;
         data << "          dragobject.style.top = (Math.round((mouseY - mousedowny) / gridSize) * gridSize) + \"px\";" << std::endl;
         data << "	}" << std::endl;
         data << "        if((mouseX - mousedownx) < 0)" << std::endl;
         data << "	  dragobject.style.left = \"0px\";" << std::endl;
         data << "	if((mouseY - mousedowny) < 0)" << std::endl;
         data << "	  dragobject.style.top = \"0px\";" << std::endl;
         data << "	if((mouseX - mousedownx + parseFloat(dragobject.style.width)) > parseFloat(mainpage.style.width)) " << std::endl;
         data << "	  dragobject.style.left = (mouseX - mousedownx) + \"px\"; " << std::endl;
         data << "      } else if(dragHint == \"rightbottomresize\") {      " << std::endl;
         data << "        dragobject.style.width = (mouseX - mouseDownLeft) + \"px\";" << std::endl;
         data << "        dragobject.style.height = (mouseY - mouseDownTop) + \"px\";" << std::endl;
         data << "      } else if(dragHint == \"rightresize\") {      " << std::endl;
         data << "        if(snapToGrid == false) {" << std::endl;
         data << "          dragobject.style.width = (mouseX - mouseDownLeft) + \"px\";	" << std::endl;
         data << "	} else {" << std::endl;
         data << "          dragobject.style.width = (Math.round((mouseX - mouseDownLeft) / gridSize) * gridSize) + \"px\";	" << std::endl;
         data << "	}" << std::endl;
         data << "      } else if(dragHint == \"bottomresize\") { " << std::endl;
         data << "        if(snapToGrid == false) {" << std::endl;
         data << "          dragobject.style.height = (mouseY - mouseDownTop) + \"px\";" << std::endl;
         data << "	} else {" << std::endl;
         data << "          dragobject.style.height = (Math.round((mouseY - mouseDownTop) / gridSize) * gridSize) + \"px\";" << std::endl;
         data << "	}" << std::endl;
         data << "      } else if(dragHint == \"leftresize\") {      " << std::endl;
         data << "        dragobject.style.left = mouseX + \"px\";" << std::endl;
         data << "        dragobject.style.width = (mouseDownWidth + (mouseDownLeft - mouseX)) + \"px\";" << std::endl;
         data << "      } else if(dragHint == \"topresize\") {      " << std::endl;
         data << "        dragobject.style.top = mouseY + \"px\";" << std::endl;
         data << "        dragobject.style.height = (mouseDownHeight + (mouseDownTop - mouseY)) + \"px\";" << std::endl;
         data << "      }" << std::endl;
         data << "      " << std::endl;
         data << "            data.innerHTML = \"<p>\" + dragobject.nodeName + \"<br>\" +  " << std::endl;
         data << "	                       \"Action: \" + dragHint + \"<br>\" +" << std::endl;
         data << "			       \"MouseLocation: \" + mouseX + \":\" + mouseY + \"<br>\" +" << std::endl;
         data << "			       \"MouseOver Location: \" + (mouseX - dragobject.offsetLeft) + \":\" + (mouseY - dragobject.offsetTop) + \"<br>\" + " << std::endl;
         data << "			       \"Location: \" + dragobject.style.left + \":\" + dragobject.style.top + \"<br>\" + " << std::endl;
         data << "			       \"Size: \" + dragobject.style.width + \":\" + dragobject.style.height + \"<br>\" + " << std::endl;
         data << "                               \"</p>\";" << std::endl;
         data << "    " << std::endl;
         data << "" << std::endl;
         data << "    } else {" << std::endl;
         data << "      var mouseabove = document.elementFromPoint(mouseX + mainpage.offsetLeft, mouseY + mainpage.offsetTop);" << std::endl;
         data << "" << std::endl;
         data << "      if((mouseabove.id != \"mainpage\") && (mouseabove.id != \"grid\")) {" << std::endl;
         data << "	" << std::endl;
         data << "	data.innerHTML = \"<p>\" + mouseabove.nodeName + \"<br>\" +  " << std::endl;
         data << "	                         \"Action: \" + dragHint + \"<br>\" +" << std::endl;
         data << " 			         \"MouseLocation: \" + mouseX + \":\" + mouseY + \"<br>\" +" << std::endl;
         data << "				 \"MouseOver Location: \" + (mouseX - mouseabove.offsetLeft) + \":\" + (mouseY - mouseabove.offsetTop) + \"<br>\" + " << std::endl;
         data << "				 \"Location: \" + mouseabove.style.left + \":\" + mouseabove.style.top + \"<br>\" + " << std::endl;
         data << "				 \"Size: \" + mouseabove.style.width + \":\" + mouseabove.style.height + \"<br>\" + " << std::endl;
         data << "                                 \"</p>\";" << std::endl;
         data << "	" << std::endl;
         data << "	if((mouseabove.nodeName == \"DIV\") || " << std::endl;
         data << "	   (mouseabove.nodeName == \"IMG\") || " << std::endl;
         data << "	   (mouseabove.nodeName == \"BUTTON\") ||" << std::endl;
         data << "	   (mouseabove.nodeName == \"INPUT\") ||" << std::endl;
         data << "	   (mouseabove.nodeName == \"SPAN\")) {" << std::endl;
         data << "		" << std::endl;
         data << "	  if((parseFloat(mouseabove.style.width) <= (mouseX - mouseabove.offsetLeft)) && " << std::endl;
         data << "             (parseFloat(mouseabove.style.height) <= (mouseY - mouseabove.offsetTop))) {" << std::endl;
         data << "	    mouseabove.style.cursor = \"nwse-resize\";" << std::endl;
         data << "	    dragHint = \"rightbottomresize\";	  " << std::endl;
         data << "	  } else if((parseFloat(mouseabove.style.left) <= (mouseX - mouseabove.offsetLeft)) && " << std::endl;
         data << "                    ((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseY - mouseabove.offsetTop))) {" << std::endl;
         data << "	    mouseabove.style.cursor = \"nesw-resize\";" << std::endl;
         data << "	    dragHint = \"righttopresize\";	  " << std::endl;
         data << "	  } else if(((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseX - mouseabove.offsetLeft)) && " << std::endl;
         data << "                    (parseFloat(mouseabove.style.height) <= (mouseY - mouseabove.offsetTop))) {" << std::endl;
         data << "	    mouseabove.style.cursor = \"nesw-resize\";" << std::endl;
         data << "	    dragHint = \"leftbottomresize\";	  " << std::endl;
         data << "	  } else if(parseFloat(mouseabove.style.width) <= (mouseX - mouseabove.offsetLeft)) {" << std::endl;
         data << "	    mouseabove.style.cursor = \"ew-resize\";" << std::endl;
         data << "	    dragHint = \"rightresize\";" << std::endl;
         data << "	  } else if(parseFloat(mouseabove.style.height) <= (mouseY - mouseabove.offsetTop)) {" << std::endl;
         data << "	    mouseabove.style.cursor = \"ns-resize\";" << std::endl;
         data << "	    dragHint = \"bottomresize\";" << std::endl;
         data << "	  } else if((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseX - mouseabove.offsetLeft)) {" << std::endl;
         data << "	    mouseabove.style.cursor = \"ew-resize\";" << std::endl;
         data << "	    dragHint = \"leftresize\";" << std::endl;
         data << "	  } else if((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseY - mouseabove.offsetTop)) {" << std::endl;
         data << "	    mouseabove.style.cursor = \"ns-resize\";" << std::endl;
         data << "	    dragHint = \"topresize\";" << std::endl;
         data << "	  } else {" << std::endl;
         data << "	    mouseabove.style.cursor = \"move\";" << std::endl;
         data << "	    dragHint = \"move\";" << std::endl;
         data << "	  }" << std::endl;
         data << "	} else {" << std::endl;
         data << "	  mouseabove.style.cursor = \"default\";" << std::endl;
         data << "	}" << std::endl;
         data << "      } else {" << std::endl;
         data << "        mouseabove.style.cursor = \"default\";" << std::endl;
         data << "        dragHint = \"\";" << std::endl;
         data << "	data.innerHTML = \"<p></p>\";" << std::endl;
         data << "      }" << std::endl;
         data << "    }" << std::endl;
         data << "    displayParameters();" << std::endl;
         data << "  }" << std::endl;
         data << "  " << std::endl;
         data << "  function displayParameters() {" << std::endl;
         data << "" << std::endl;
         data << "	itemparameters.innerHTML = \"<p>\" + selected.nodeName + \": \" + selected.id + \"<br>\" + " << std::endl;
         data << "				 \"Location: \" + selected.style.left + \":\" + selected.style.top + \"<br>\" + " << std::endl;
         data << "				 \"Size: \" + selected.style.width + \":\" + selected.style.height + \"<br>\" + " << std::endl;
         data << "                                 \"</p>\";" << std::endl;
         data << "" << std::endl;
         data << "  }" << std::endl;

         httpRequest->response.addHeader("Content-Type", "script/javascript");

         return 0;
      }

   };

}

#endif