<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
    <meta content='width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0' name='viewport' />
    <!--link rel="stylesheet" href="jQuery/jquery.mobile-1.4.0.min.css" type="text/css"/ -->
    <script src='jQuery/jquery-1.7.1.min.js' type='text/javascript'></script>
    <!--script src="jQuery/jquery.mobile-1.4.0.min.js" type="text/javascript"></script-->
    <title>
      VPS Control
    </title>

    <style>
       html, body {
          width:  100%;
          height: 100%;
          margin: 0px;
          overflow: hidden;
       }
       canvas { display: block; }
    </style>

    <script type='text/javascript'>
      //<![CDATA[
        $(function() {
        
          //Initialize the canvas
          var canvas = $('#canvas')[0];
          var ctx = canvas.getContext('2d');
          canvas.width = $(window).width();
          canvas.height = $(window).height();

          var sliders = [ {{{CONTROLS}}} ];
          var sliderHt = canvas.height / sliders.length;
          var mdown = 0;
          var request = 0;
          var queue = 0;

          if (document.location.search) {
             var ss = document.location.search.substr(1).split("&");
             $.each(ss, function(index, parameter) {
               var kv = parameter.split("="); 
               $.each(sliders, function(idx, slider) {
                  if (slider.t === kv[0]) {
                     slider.v = kv[1];
                  }
               });
            });          
          }

          function circle(x, y, fill) {
             ctx.lineWidth = 1;
             ctx.strokeStyle = 'black';
             ctx.beginPath();
             ctx.moveTo(0, y);
             ctx.lineTo(canvas.width, y);
             ctx.moveTo(x, 0);
             ctx.lineTo(x, canvas.height);
             ctx.stroke();
             ctx.beginPath();
             ctx.arc(x, y, 5, 0, 2 * Math.PI, false);
             if (fill) {
                ctx.fillStyle = 'white';
                ctx.fill();
             }
             ctx.stroke();
          }

          function drawButton(x, y, fill) {
             ctx.beginPath();
             var w = canvas.width / 8;
             var h = sliderHt / 3;
             ctx.rect(x - w, y - h, w * 2, h * 2, 5);
             if (fill) {
                ctx.fillStyle = 'white';
                ctx.fill();
             }
             ctx.lineWidth = h / 8;
             ctx.strokeStyle = 'black';
             ctx.stroke();
             if (fill) {
                ctx.beginPath();
                ctx.moveTo(x - w, y - h);
                ctx.lineTo(x + w, y + h);
                ctx.moveTo(x - w, y + h);
                ctx.lineTo(x + w, y - h);
                ctx.stroke();
             }
          }

          function updateAll() {
             var qu = "?";
             $.each(sliders, function(sldridx, slider) {
                if (slider.s === "xy") {
                   qu += (slider.t + "=" + slider.v[0] + "_" + slider.v[1] + "&");
                } else {
                   qu += (slider.t + "=" + slider.v + "&");
                }
             });
             $.get( "/update" + document.location.pathname + q, 
                updateResponse );
          }
          
          function updateResponse( data ) {
             var arr = JSON.parse(data);
             $.each(arr, function(updindex, updated) {
                $.each(sliders, function(sldridx, slider) {
                   if (slider.t === updated.t) {
                      slider.v = updated.v;
                   }
               });
             });
             redraw();
             request = 0;
             if (queue) {
                queue = 0;
                setTimeout(updateAll, 1);
             }
          }
          
          function react(x, y, begin) {
            var idx = Math.floor(y / sliderHt);
            if (idx < sliders.length) {
               var ctl = sliders[idx];
               if (!begin && (ctl.s === "toggle")) return;
               if (request)
               {
               	   queue = 1;
	           if (ctl.s === "toggle") {
	              ctl.v = !ctl.v;
	           } else if (ctl.s === "slider") {
	              ctl.v = x / canvas.width;
	           } else if (ctl.s === "xy") {
	              ctl.v = [x, y];
	           } else if (ctl.s === "list") {
	              ctl.v = Math.floor(x * ctl.items.length / canvas.width);
	           }
	           return;
               }
               
               var newval;
               if (ctl.s === "toggle") {
                 newval = !ctl.v;
               } else if (ctl.s === "slider") {
                 newval = x / canvas.width;
               } else if (ctl.s === "xy") {
                 newval = x / canvas.width + "_" + (1 - y / canvas.height);
               } else if (ctl.s === "list") {
                 newval = Math.floor(x * ctl.items.length / canvas.width);
               }
               $.get( "/update" + document.location.pathname + "?"+ctl.t + "=" + newval, 
			      updateResponse );
            } 
          }
          
          //At first touch initialize a new entry in the fingers list
          $("#canvas").bind('touchstart', function(e) {
            e.preventDefault();
            react(event.touches[0].pageX, event.touches[0].pageY, 1);
          });

          //Track the location of the fingers
          $("#canvas").bind('touchmove', function(e) {
            e.preventDefault();
            react(event.touches[0].pageX, event.touches[0].pageY);
          });

          $("#canvas").bind('touchend', function(e) {
            e.preventDefault();
            react(event.touches[0].pageX, event.touches[0].pageY);
          });

          $("#canvas").bind('mousedown', function(e) {
            e.preventDefault();
            mdown = 1;
            react(e.clientX, e.clientY, 1);
          });

          $("#canvas").bind('mouseup', function(e) {
            e.preventDefault();
            mdown = 0;
          });

          $("#canvas").bind('mousemove', function(e) {
            e.preventDefault();
            if (mdown) { 
              react(e.clientX, e.clientY);
            }
          });

          function redraw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle="#AAAAAA";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.textBaseline="middle"; 
            ctx.font=(sliderHt / 2) + 'px Arial';
            $.each(sliders, function(index, value) {
               ctx.fillStyle="#000000";
               var needLabel = 1;
               if (value.s === "toggle") {
                  drawButton(canvas.width / 2, sliderHt * (index + 0.5), value.v ); 
               } else if (value.s === "slider") {
                  ctx.fillRect(0, sliderHt * index, value.v * canvas.width, sliderHt - 2);
               } else if (value.s === "xy") {
                  needLabel = 0;
                  circle(value.v[0] * canvas.width, (1 - value.v[1]) * canvas.height, true);
               } else if (value.s === "list") {
                  needLabel = 0;
                  var num = value.items.length;
                  var step = canvas.width / num;  
                  $.each(value.items, function(idx, val) { 
                     if (idx == value.v) {
                        ctx.fillRect(step * idx, sliderHt * index, step, sliderHt - 2);
                     }
                     ctx.fillStyle=(idx == value.v) ? "#DDDD55" : "#000000";
                     ctx.fillText(val, idx * step + 10, sliderHt * (index + 0.5)); 
                  });
               }
               if (needLabel) {
                  ctx.fillStyle="#DDDD55";
                  ctx.fillText(sliders[index].t, 10, sliderHt * (index + 0.5)); 
               }
            });
            //ctx.font='14px Arial';
            //ctx.fillText(canvas.width + " " + $(window).width() + " " + canvas.height + " " + $(window).height(), 20, 10);
          }

          function resizeScreen() {
             canvas.width = $(window).width();
             canvas.height = $(window).height();
             sliderHt = canvas.height / sliders.length;
             redraw();
          }

          window.addEventListener('resize', resizeScreen, false);
          window.addEventListener('orientationchange', resizeScreen, false);
          $(document).ready(function() { redraw(); });

        });
      //]]>
    </script>
  </head>
  <body>
    <canvas id='canvas' height='350' width='350'></canvas>
  </body>
</html>
