<!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>
      Remote MIDI Controller
    </title>

	<style>
	html, body {
	  width:  100%;
	  height: 100%;
	  margin: 0px;
	  overflow: hidden;
	}
	</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() - $('#returndiv').height();

          var sliders = [  {"v":0.500,"t":"gain","s":"false"} , {"v":0.500,"t":"d","s":"false"} , {"v":0.250,"t":"v","s":"false"} , {"v":0.396,"t":"LPF cutoff","s":"false"} , {"v":0.100,"t":"LPF Q","s":"false"}  ];
          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) {
             ctx.beginPath();
             ctx.arc(x, y, sliderHt / 2 - 4, 0, 2 * Math.PI, false);
             ctx.fillStyle = 'green';
             ctx.fill();
             ctx.lineWidth = 0;
             ctx.strokeStyle = 'green';
             ctx.stroke();
          }

          function updateAll() {
             var qu = "?";
		     $.each(sliders, function(sldridx, slider) {
		         qu += (sliders[idx].t + "=" + sliders[idx].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) {
            var idx = Math.floor(y / sliderHt);
            if (idx < sliders.length) {
               if (request)
               {
               	   queue = 1;
	               if (sliders[idx].s === "true") {
	                 sliders[idx].v = !sliders[idx].v;
	               } else {
	                 sliders[idx].v = x / canvas.width;
	               }
	               return;
               }
               
               var newval;
               if (sliders[idx].s === "true") {
                 newval = !sliders[idx].v;
               } else {
                 newval = x / canvas.width;
               }
               
			   $.get( "/update" + document.location.pathname + "?"+sliders[idx].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);
          });

          //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);
          });

          $("#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="#555555";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            $.each(sliders, function(index, value) {
               ctx.fillStyle="#333355";
               if (sliders[index].s === "true") {
                  if (sliders[index].v) circle(canvas.width / 2, sliderHt * (index + 0.5) ); 
               } else {
                  ctx.fillRect(0, sliderHt * index, sliders[index].v * canvas.width, sliderHt - 2);
               }
               ctx.fillStyle="#BBBB55";
               ctx.font=(sliderHt / 2) + 'px Arial';
               ctx.textBaseline="middle"; 
               ctx.fillText(sliders[index].t, 10, sliderHt * (index + 0.5)); 
            });
          }

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

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

        });
      //]]>
    </script>
  </head>
  <body onload="redraw()">
    <canvas id='canvas' height='350' width='350'></canvas>
  <!-- div id="returndiv">
    <a href="/" class="ui-btn">Home</a>
  </div-->
  </body>
</html>
