<!--
  - Copyright (c) 2007 Joost N.V.
  - 
  - Licensed under the Joost Open Widget License (Version 1.0) (the "License"); you 
  - may not use this widget software except in compliance with the License. You may 
  - obtain a copy of the License at http://dev.joost.com/licenses/JOWL-LICENSE-1.0. 
  - Software distributed under the License is distributed on an "AS IS" BASIS, 
  - WITHOUT WARRANTIES OF ANY KIND, either express or implied. See the License for 
  - the specific language governing permissions and limitations under the License.
  -
  - $Revision$
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns='http://www.w3.org/1999/xhtml'
      xmlns:jwl='http://joost.com/ns/jewel#' id='krabbel'>

<head>
  <title>Krabbel</title>
  <style type='text/css'>
  </style>

</head>
<body onload="on_load()" style="padding-left:15px">
  <script><![CDATA[
    var ctx; var canvas;
    var ctx_compare; var canvas_compare; 
    var topic;
    var current_topic;
    var editbuttons;
    var strokecount = 0;
    var host = "http://krabbbel.will-code-joost-widgets-for-fame.net:4166";

    function on_load() {
      canvas = document.getElementById("canvas_draw");
      canvas_compare = document.getElementById("canvas_compare");
      ctx = canvas.getContext("2d");

      topic = document.getElementById("topic").firstChild;
      editbuttons = document.getElementById("editbuttons");
      init_topic();
    }

    function init_topic() {
      editbuttons.style.display = "inline";
      canvas_compare.style.display = "none";
      canvas.style.display = "block";

      clear();

      var req = new XMLHttpRequest();
      req.open("GET", host + "/topic", true);
      req.onreadystatechange = function () {
        req.overrideMimeType("text/plain");
        if (req.readyState == 4) {
          var resp = req.responseText;
          var pos = resp.indexOf(" ");

          current_topic = resp.substring(0, pos);
          topic.textContent = resp.substring(pos);
        }
      }
      req.send(null);
    }

    function start_stroke(x, y) {
      ctx.lineWidth  = 3;
      ctx.strokeStyle="white";
      ctx.beginPath();
      ctx.moveTo(x-canvas.offsetLeft-0.5, y-canvas.offsetTop-0.5);

      function on_mousemove(e) {
        ctx.lineTo(e.clientX-canvas.offsetLeft, e.clientY-canvas.offsetTop);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.clientX-canvas.offsetLeft, e.clientY-canvas.offsetTop);
      }

      function on_mouseup(e) {
        strokecount++;
        ctx.lineTo(e.clientX-canvas.offsetLeft, e.clientY-canvas.offsetTop);
        ctx.stroke();
        canvas.removeEventListener("mousemove", on_mousemove, false);
        canvas.removeEventListener("mouseout", on_mouseup, false);
        canvas.removeEventListener("mouseup", on_mouseup, true);
      }

      canvas.addEventListener("mousemove", on_mousemove, false);
      canvas.addEventListener("mouseout", on_mouseup, false);
      canvas.addEventListener("mouseup", on_mouseup, true);
    }

    function submit_pic() {
      if (strokecount < 2) {
        var old = topic.textContent;
        topic.textContent = "Please try harder!";
        setTimeout(function () { topic.textContent = old; }, 2000);
        return;
      }

      editbuttons.style.display = "none";
      topic.textContent = "Submitting picture...";
      var png = canvas.toDataURL();
      var req = new XMLHttpRequest();
      req.open("POST", host + "/" + current_topic, true);
logMessage("url is "+host + "/" + current_topic);
      req.onreadystatechange = function () {
        if (req.readyState == 4) {
          if (req.status != 200) {
            topic.textContent = "Something went wrong: " + req.status;
logMessage(req.responseText);
            return;
          }
          var arr = [];
          var images = new XML(req.responseText);
          for each (baseimg in images)
              arr.push(baseimg);
          drawImages(arr, png);
        }
      }
      req.send(png);
    }

    function drawImages (images, mine) {
      topic.textContent = "Compare with what others have drawn";

      //document.getElementById("img1").setAttribute("src", images[1]);
      document.getElementById("img2").setAttribute("src", images[3]);
      document.getElementById("img3").setAttribute("src", images[0]);
      document.getElementById("img4").setAttribute("src", images[2]);
      document.getElementById("mine").setAttribute("src", mine);

      canvas_compare.style.display = "block";
      canvas.style.display = "none";
    }

    function clear() {
      strokecount = 0;
      ctx.clearRect(0,0,canvas.width,canvas.height);
    }
  ]]>
  </script>
  <p id="topic" style='color:white; margin: 5px 0 0 10px; text-align:center; font-size: 14px; font-family:"Trebuchet MS"'>Wait for it...</p>
  <div id="canvas_parent" style="height:380px;background:rgba(255,255,255,0.08);-moz-border-radius:10px;margin: 10px 0 10px 0">
    <canvas id="canvas_draw" height="380px" width="380px" onmousedown="start_stroke(event.clientX, event.clientY);"/> 
    <div id="canvas_compare" height="380px" width="380px">
      <!-- using relative breaks images :( ... -->
      <img id="img4" style="position:absolute;top:225px;left:210px;   width:190px;height:190px"/>
      <img id="mine" style="position:absolute;top:35px; left:20px;     width:190px;height:190px"/>
      <img id="img2" style="position:absolute;top:35px; left:210px;    width:190px;height:190px"/>
      <img id="img3" style="position:absolute;top:225px;left:20px;    width:190px;height:190px"/> 
    </div> 
  </div>
  <div style="text-align:center">
  <jwl:button id="bnew" label="New subject" onclick="init_topic()"/>
  <span id="editbuttons">
    <jwl:button id="bok" label="Clear" onclick="clear()"/>
    <jwl:button id="bok" label="Ready" onclick="submit_pic()"/>

  </span>
  </div>
</body>

</html>
