#ifndef ____workflow_js_h__
#define ____workflow_js_h__

#include "HTTPPage.h"

namespace http {

   class __workflow_js : public HTTPPage {

      int page(HTTPParameters &p) override {

         p.data << "var mouseDownX;"
                   "var mouseDownY;"
                   "var isMouseDown = false;"
                   "var dragObject;"
                   "var dragHint = \"move\";"
                   "var selected;"
      	          "listSource();"
                   ""
                   "function listSource() {"
                   " var connectors = document.getElementsByTagName(\"path\");"
                   " for(var i = 0; connectors[i]; ++i) {"
                   "  var source = connectors[i].getAttribute(\"data-source\");"
                   "  var sourceElem = source.split(\":\");"
                   "  var sourceId = document.getElementById(sourceElem[0]);"
                   "  var offset = 0;"
                   "  if(sourceElem.length > 1) {"
                   "   var options = sourceId.getElementsByTagName(\"div\");"
                   "   for(var o = 0; options[o]; ++o) {"
                   "	 var option = options[o];"
                   "	 if(sourceElem[1] == options[o].getAttribute(\"data-name\")) {"
                   "	    offset = option.offsetTop + (parseInt(option.style.height) / 2);"
                   "	 }"
                   "   }"
                   "  }"
                   ""
                   "  var dest = connectors[i].getAttribute(\"data-dest\");"
                   "  var destId = document.getElementById(dest);"
                   "  var d = \"M\" + getPos(sourceId, sourceId.offsetWidth, offset) +"
                   "          \" L\" + getPos(sourceId, sourceId.offsetWidth + 30, offset) + "
                   "          \" L\" + getPos(destId, destId.offsetWidth / 2, -30) + "
                   "          \" L\" + getPos(destId, destId.offsetWidth / 2);"
                   "  connectors[i].setAttribute(\"d\", d);"
                   "//  console.log(d);"
                   " } "
                   "}"
                   ""
                   "function getMouseX(e) {"
                   " return e.clientX;"
                   "}"
                   ""
                   "function getMouseY(e) {"
                   " return e.clientY;"
                   "}"
                   ""
                   "function getPos(item, offsetX = 0, offsetY = 0) {"
                   " var pos = \" \" + (parseInt(item.style.left) + offsetX);"
                   " pos += \" \" + (parseInt(item.style.top) + offsetY);"
                   " return pos;	"
                   "}"
                   ""
                   "function mousedown(obj, e) {"
                   " var mouseX = getMouseX(e);"
                   " var mouseY = getMouseY(e);"
                   " mouseDownX = mouseX - obj.offsetLeft;"
                   " mouseDownY = mouseY - obj.offsetTop;"
                   " dragObject = obj;"
                   " selected = obj;"
                   " isMouseDown = true;"
                   "}"
                   ""
                   "function mouseup(e) {"
                   " isMouseDown = false;"
                   " dragObject = null;"
                   "}"
                   ""
                   "function mousemove(e) {"
                   " var mouseX = getMouseX(e);"
                   " var mouseY = getMouseY(e);"
                   " if(isMouseDown) {"
                   "  if(dragHint == \"move\") {"
                   "   dragObject.style.left = (mouseX - mouseDownX) + \"px\";"
                   "   dragObject.style.top = (mouseY - mouseDownY) + \"px\";  "
                   "   listSource();"
                   "  } "
                   " }"
                   "}";

      	p.httpRequest.response.addHeader(coreutils::IMFHeader("Content-Type", "script/javascript"));
         return 1;

      }

   };

}

#endif