canvas scheduler proto

by jpeter06

HTML

<div id="container">
  <canvas id="myCanvas" width="240" height="240" title="aa"/>
</div>

CSS

canvas {
    border: 0px solid #ccc;
    margin: 0px;
}
#bResize{ position:absolute; left: 10px;top:10px;}
#bRepos{ position:absolute; left: 100px;top:10px;}
#container{position:absolute; left:0px;top:0px; bottom:0px;right:0px;border:1px solid #eee;}

JavaScript

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    context = elem.getContext('2d'),
    elements = [],
    numHoras=24,
    scaleX=1.0,scaleY=1.0;

var datos=["0+01,11,21,31,41,51+*+*+*+?",
"0+00,15,30,45+*+*+*+?",
"0+16+07+*+*+?",
"0+12+07+*+*+?",
"0+00,15,30,45+*+*+*+?",
"0+08+*+*+*+?",
"0+27+07+*+*+?",
"0+14+07+*+*+?",
"0+02,12,22,32,42,52+1-4+*+*+?",
"0+02,12,22,32,42,52+*+*+*+?",
"0+03,08,13,18,23,28,33,38,43,48,53,58+1-4+*+*+?","0+15+07+*+*+?","0+25+*+*+*+?","0+28+01+*+*+?","0+24+*+*+*+?",
"0+08+*+*+*+?","0+14,29,44,59+1-4+*+*+?","0+14,29,44,59+*+*+*+?","0+14,29,44,59+1-4+*+*+?","0+14,29,44,59+*+*+*+?",
"0+24+01+*+*+?","0+ 14,29,44,59+0-23+*+*+?","0+10+01+*+*+?","0+10+05+*+*+?","0+40+13+*+*+?","0+40+21+*+*+?",
"0+10+01+*+*+?","0+10,45+1-23+*+*+?",
"0+55+05+*+*+?","0+14,29,44,59+*+*+*+?","0+02,17,32,47+*+*+*+?","0+21,32,52+*+*+*+?","0+10,30,50+*+*+*+?",
"0+00+01+*+*+?","0+02+03+*+*+?","0+00+04+*+*+?","0+11+07+*+*+?","0+13+07+*+*+?"];

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
//console.log(event.offsetX,event.offsetY,scaleX,scaleY,event);
    var x = event.offsetX,
        y = event.offsetY;
        x=x/scaleX;
        y=y/scaleY;
    elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height && x > element.left && x < element.left + element.width) {
            console.log('clicked an element: '+element.id);
        }
    });

}, false);

elem.addEventListener('mousemove', function(event) {
//console.log(event.offsetX,event.offsetY,scaleX,scaleY,event);
    var x = event.offsetX,
        y = event.offsetY;
        x=x/scaleX;
        y=y/scaleY;
    var aux=Math.floor(y*datos.length/100);
   // console.log(y,aux,datos[aux]);
   if(elem.title!=datos[aux])
   	 elem.setAttribute("title",datos[aux]);
    /*elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height &&...