<?php
//------Declaracion de variables que intervienen en la interfaz
$altura = 70; //este es el salto que da tras pintar cada incidencia hacia abajo
$radio = 20; //El radio de las bolitas
$ancho = 150; //espaciamiento horizontal entre cada columna
?>
<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <h1 align='center'><?php echo $titulo ?></h1>
        <p id="texto" align="center">Roll over</p>
        <table width='100%' align='center' height='100%'>
            <tr>
                <td  align='center' valign='middle'>
            <canvas id="myCanvas" class="canvas" width="<?php echo ($ancho * count($estados)) ?>" height="<?php echo $altura + ($altura * count($orden)) ?>" style="border:1px solid #c3c3c3;" onmouseout="out()" onmousemove="getMouseCoordinates(event)">
                Your browser does not support the canvas element.
            </canvas>
        </td>
    </tr>
</table>
<br>
<div id="datos" align="center">
</div>
<p id="log"></p>
<script type="text/javascript">
    var tipo_documento='<?php echo $documento ?>';//Este me indica por medio de que documento entro al sistema, debe ser dinamico, php
    var numero_documento='<?php echo $numero ?>';//debe ser tambien dinamico
    var flag=false;//bandera que indica si se han pintado datos
    var ctx = document.getElementById("myCanvas").getContext("2d");
    var radio=20;//Se deja global para calculos de posicion, para imagenes debe ser proporcional
    var x=80;//posicion inicial
    var objetos=new Array();//Arreglo para almacenar la info de los objetos dibujados

    //Data que debe llegar de php  ----- Base de datos
    var valores=new Array();
<?PHP
$i = 0;
foreach ($estados as $est) {
    echo "valores[$i]='" . $est . "'; ";
    $i++;
}
?>

    var orden=new Array();
<?php
$i = 0;
foreach ($orden as $o) {
    echo "orden[$i]='" . $o . "';";
    $i++;
}
?>

    var matriz=Array();
<?php
foreach ($orden as $o) {
    echo "matriz['$o']=Array();";
    foreach ($estados as $est) {
        echo "matriz['$o']['$est']=" . $matriz[$o][$est] . ";";
    }
}
?>

    ctx.font = "10px 'arial'";
    ctx.textAlign = "center";
    
    sav_est=null;
    var anterior=Array();//Arreglo que permite almacenar las posiciones del objeto
    anterior['x']=0;//que se dibujo antes
    anterior['y']=0;//por defecto en cero

    var c=0;//cuenta los elementos dibujados
    //TODO: Hacer esto al reves :S!
    for(i=0;i<valores.length;i++){//recorro los valores (Posibles Estados)
        ctx.fillStyle="#000000";
        y=25;//posicion inicial de Y
        var texto=valores[i];
        texto = texto.replace("_"," ");
        ctx.fillText(texto, x, y);//Dibujamos los estados
        for(j=0;j<orden.length;j++){//
            var pose=0;//se inicializa
            try{
                pose=matriz[orden[j]][valores[i]];//se obtiene el valor de la matriz de representacion
            }catch(err){//se hace catch por si no esta definida la posicion
                //si sale un error no hace nada
            }
            if(pose!=0){//si en la posicion
                //-----------Diagramacion de la imagen o representacion
                y+=<?php echo $altura ?>;
                if(pose==1)
                    ctx.fillStyle="#FF00F0";
                else
                    ctx.fillStyle="#FF0000";
                ctx.beginPath();
                ctx.arc(x,y,radio,0,Math.PI*2,true);//circulo en el caso
                ctx.closePath();
                ctx.fill();//dibuja
                objetos[c]=Array();//se crea una posicion en el arreglo de objetos
                objetos[c]['x']=x;
                objetos[c]['y']=y;//se guarda la posicion
                objetos[c]['state']=valores[i];//se almacena el estado en el que se dibujo
                c++;
                if(anterior['x']==0 && anterior['y']==0){
                    anterior['x']=x;
                    anterior['y']=y;
                }else{
                    canvas_arrow(ctx,anterior['x'],anterior['y'],x,y);
                    anterior['x']=x;
                    anterior['y']=y;
                }
            }else{
                y+=<?php echo $altura ?>;
            }
        }
        x+=150;
    }

    function canvas_arrow(context, fromx, fromy, tox, toy){
        context.beginPath();
        var headlen = 10;   // length of head in pixels
        var angle = Math.atan2(toy-fromy,tox-fromx);
        context.moveTo(fromx, fromy);
        context.lineTo(tox, toy);
        context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
        context.moveTo(tox, toy);
        context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
        context.stroke();
    }

    function over(){

        document.getElementById("texto").innerHTML="adentro";
    }
    function out(){
        document.getElementById("texto").innerHTML="afuera";
    }

    function getMouseCoordinates(event)
    {
        ev = event;
        cx=getOffset(document.getElementById("myCanvas"));


        var ofx=cx["x"];
        var ofy=cx["y"];
        var x=ev.pageX;
        var y=ev.pageY;


        var canvas = $('#canvas').get(0);
        var ctx = canvas.getContext('2d');
        ctx.fillText("****************", 10, 25, 60);

        document.getElementById("texto").innerHTML = "Mouse X:"+ev.pageX + "Mouse Y:"+ev.pageY;
        var sentinela=0;
        for(var n=0;n<objetos.length;n++){
            try{
                posx=objetos[n]['x']+ofx;
                posy=objetos[n]['y']+ofy;
                estado=objetos[n]['state'];
                //write_log(" **"+n+" x:"+posx+" y:"+posy+" cx:"+x+" cy:"+y+" flg:"+flag);
                if(  x>(posx-radio) && x<(posx+radio)
                    && y>(posy-radio) && y<(posy+radio)){//si la posicion esta dentro de algun objeto
                    //
                    //ya que llamaria un ajax muchas veces para el mismo objeto
                    draw_data(estado);//se dibuja
                    flag=true;//se indica que se
                    n=objetos.length;
                    sentinela=1;
                }
            }catch(err){

            }
        }
        if(sentinela!=1){
            document.getElementById("datos").innerHTML="";//se borran
            sav_est=null;
            flag=false;//se ponde la bandera en estado que indica que no hay datos pintado
        }
    }

    function draw_data(estado){
        var data=obtener_datos(estado);
        document.getElementById("datos").innerHTML=data;
    }

    function obtener_datos(estado){
        //TODO: Ajax que consulte, con base al estado, al documento y al numero de documento
        if(sav_est==null){//se almacena el estado
            write_log(estado+" ");
            sav_est=estado;
        }

        var data="";
        //------------Datos de ejemplo!!!, debe ir un ajax
        if(estado=="Notificacion"){
            data="Documento=Notificacion##No documento=1234##Fecha=28/08/2011##Usuario=pepe##Observaciones=El dia 27 de Agosto al señor pepe se me rompio un taladro y lo necesito urgente";
        }else if(estado=="Requisicion"){
            data="Documento=Requisicion##No documento=2485##Fecha=29/08/2011##Usuario=JuanO##Observaciones=Debido al problema de don pepe, se hace requisicion para compra de taladro";
        }else if(estado=="Autorizacion"){
            data="Documento=Aprobacion##No documento=8894##Fecha=29/08/2011##Usuario=Mario##Observaciones=Se autoriza la compra para que don pepe pueda trabajar";
        }else if(estado=="Compra"){
            data="Documento=Orden de Compra##No documento=1020##Fecha=02/09/2011##Usuario=Ray##Observaciones=Se compro el taladro para don pepe";
        }
        //-----------Fin datos ejemplo


        cadena=data.split("##");
        html="<table width='300' border='1'><tr><td align='center'>Datos</td></tr>";
        for(w=0;w<cadena.length;w++){
            html+="<tr><td>"+cadena[w]+"</td></tr>";
        }
        html+="</table>";
        return html;
    }

    function getOffset( el ) {
        var _x = 0;
        var _y = 0;
        /*
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }*/
        var cx=Array();
        cx["x"]=findPosX(el);
        cx["y"]=findPosY(el);

        return cx;
    }

    function write_log(mensage){

        inside=document.getElementById("log").innerHTML;
        document.getElementById("log").innerHTML=inside+mensage;
    }

    function findPosX(obj)
    {
        var curleft = 0;
        if(obj.offsetParent)
            while(1)
        {
            curleft += obj.offsetLeft;
            if(!obj.offsetParent)
                break;
            obj = obj.offsetParent;
        }
        else if(obj.x)
            curleft += obj.x;
        return curleft;
    }

    function findPosY(obj)
    {
        var curtop = 0;
        if(obj.offsetParent)
            while(1)
        {
            curtop += obj.offsetTop;
            if(!obj.offsetParent)
                break;
            obj = obj.offsetParent;
        }
        else if(obj.y)
            curtop += obj.y;
        return curtop;
    }
</script>
</body>
</html>