#ifndef ____editview_h__
#define ____editview_h__

#include "HTTPPage.h"

namespace http {

   class __editview : public HTTPPage {

      int processCommand(std::string request, core::TCPSession *session, HTTPSession *httpSession, HTTPRequest &httpRequest, std::stringstream &data) override {

         data << "  <div style=\"position: relative;\">" << std::endl;
         data << "" << std::endl;
         data << "  <div id=\"window1\" style=\"position: absolute; left: 0px; top: 0px; border: 1pt solid black; display: inline-block; padding: 2px; background: #808080; color: #ffffff;\">" << std::endl;
         data << "" << std::endl;
         data << "  <span style=\"font: 20px bebasneue;\">View Editor</span>" << std::endl;
         data << "" << std::endl;
         data << "  <div id=\"mainpage\" " << std::endl;
         data << "       style=\"width: 600px; height: 600px; border: 1px solid black; position: relative; background: #ffffff;\" " << std::endl;
         data << "       onmousemove=\"mousemove(event); return true;\" " << std::endl;
         data << "       onmouseup=\"mouseup(); return true;\">" << std::endl;
         data << "" << std::endl;
         data << "    <canvas id=\"grid\" width=\"600px\" height=\"600px\" style=\"position: absolute; left: 0px; top: 0px; alpha: 0.5; cursor: normal;\"></canvas>" << std::endl;
         data << "" << std::endl;

         data << "<div id=\"__workspace__\"></div>" << std::endl;

         data << "" << std::endl;
         data << "  <div id=\"window3\" style=\"position:absolute; top: 235px; left: 610px;" << std::endl;
         data << "       border: 1pt solid black; display: inline-block; padding: 2px; background: #808080; color: #ffffff;\">" << std::endl;
         data << "" << std::endl;
         data << "  <span style=\"font: 20px bebasneue;\">OPTIONS</span>" << std::endl;
         data << "" << std::endl;
         data << "  <div style=\"width: 150px; height: 300px; color: #000000; border: 1px solid black; position: relative; background: #ffffff;\" " << std::endl;
         data << "       onmousemove=\"mousemove(event); return true;\" " << std::endl;
         data << "       onmouseup=\"mouseup(); return true;\">  " << std::endl;
         data << "" << std::endl;
         data << "  <div id=\"controls\">" << std::endl;
         data << "    <input type=\"checkbox\" name=\"grid\" onchange=\"showGrid = this.checked; drawGrid(); return true;\"><span style=\"font: 12px bebasneue; margin-bottom: 2px;\">Show Grid</span><br>" << std::endl;
         data << "    <input type=\"checkbox\" name=\"snaptogrid\" onchange=\"snapToGrid = this.checked; return true;\"><span style=\"font: 12px bebasneue; margin-bottom: 2px;\">Snap To Grid</span><br>" << std::endl;
         data << "    <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>" << std::endl;
         data << "  </div>" << std::endl;
         data << "" << std::endl;
         data << "  <div id=\"itemparameters\" style=\"font: 12px bebasneue;\"></div>" << std::endl;
         data << "" << std::endl;
         data << "  <div id=\"data\" style=\"font: 12px bebasneue;\">" << std::endl;
         data << "   <p>NO DATA</p>" << std::endl;
         data << "  </div>" << std::endl;
         data << "" << std::endl;
         data << "  </div>" << std::endl;
         data << "  </div>" << std::endl;
         data << "" << std::endl;
         data << "" << std::endl;
         data << "  <div id=\"window2\" style=\"position:absolute; top: 0px; left: 610px; border: 1pt solid black; display: inline-block; padding: 2px; background: #808080; color: #ffffff;\">" << std::endl;
         data << "" << std::endl;
         data << "  <span style=\"font: 20px bebasneue;\">Toolbar</span>" << std::endl;
         data << "" << std::endl;
         data << "  <div id=\"toolbar\" " << std::endl;
         data << "       style=\"width: 80px; height: 200px; border: 1px solid black; position: relative; background: #ffffff;\" " << std::endl;
         data << "       onmousemove=\"mousemove(event); return true;\" " << std::endl;
         data << "       onmouseup=\"mouseup(); return true;\">" << std::endl;
         data << "    <button id=\"button1\" " << std::endl;
         data << "       style=\"width: 40px; height: 40px; border: 2px solid green; position: absolute;\"" << std::endl;
         data << "       onmousedown=\"mousedown(this, event); return true;\">Press</button>" << std::endl;
         data << "" << std::endl;
         data << "  </div>" << std::endl;
         data << "  </div>" << std::endl;
         data << "  " << std::endl;
         data << "  </div>  " << std::endl;
         data << "" << std::endl;
         data << "  <script>" << std::endl;
         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;
         data << "</script>" << std::endl;

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

         return 0;
      }

   };

}

#endif