var carto = {
    data:null,
    carte: null,
    pathLib : "tiles/haut/",
    spec :{
        'tileH' : 30 ,
        'tileL':60,
        'carteX':370,
        'carteY':50
    },
    
    buildLoad : function (response){
        eval("carto.data="+response);
        carto.build(carto.data.level);
    },
    
    build: function (map){
        carto.carte.clear();        
        carto.draw(map)        
        
        var bottom = carto.carte.image(carto.pathLib+"bottom.png", 140,390,70,40);
        var top = carto.carte.image(carto.pathLib+"top.png", 600,100,70,40);
        var left = carto.carte.image(carto.pathLib+"left.png", 170,100,70,40);
        var right = carto.carte.image(carto.pathLib+"right.png", 600,370,70,40);
        right.node.style.cursor = 'pointer';
        right.node.onclick = function () {
            carto.decal(1,0);
        }
        left.node.style.cursor = 'pointer';
        left.node.onclick = function () {
            carto.decal(-1,0);
        }
        top.node.style.cursor = 'pointer';
        top.node.onclick = function () {
            carto.decal(0,-1);
        }
        bottom.node.style.cursor = 'pointer';
        bottom.node.onclick = function () {
            carto.decal(0,1);
        }        
    },
   
    rotate : function(map) {
        var newMap = new Array();
        var position=0;
        for(var i=map.length-1; i>=0;i--){
            newMap.push(new Array());
            for (var j=0; j<map[i].length;j++){                
                newMap[position].push(map[i][j]);
               // newMap[position+j][position]=map[i][j];
            }
            position++;
        }
        return newMap;
    },
    
    clickLeft : function(){
        carto.data.level = carto.rotate(carto.data.level);
        carto.build(carto.data.level);        
    },
    
    path : function (start, end){
        var path = AStar(carto.data.level, start, end,"Diagonal");
        for ( var i =0;i<path.length;i++) {
            document.getElementById( path[i][0]+"|"+path[i][1]).setAttribute('href','tiles/haut/path.png');
        }
        return path;
    },
    move : function (){
        document.getElementById("info").textContent= 'Cliquer sur la case de départ';
        
        document.getElementById("display").onmousemove = function (e){
            document.getElementById("coo").textContent= "x: "+(e.pageX-250)+"  y :"+(e.pageY-110);
        }
    },
    init: function (){        
        carto.carte = Raphael(document.getElementById("display"), 800, 595);
        carto.launch(document.getElementById("position"));       
    },
    launch: function (form){
        var data="requete=carte&:x="+form.x.value+"&:y="+form.y.value;
        ajax("search.php",'','hml','POST',data,'carto.buildLoad(xhr_object.responseText)');
    },
    
    decal: function(_x,_y){
        var form = document.getElementById("position");
        form.x.value = parseInt( form.x.value)+_x;
        form.y.value = parseInt( form.y.value)+_y;
        var data="requete=carte&:x="+form.x.value+"&:y="+form.y.value;
        ajax("search.php",'','hml','POST',data,'carto.buildLoad(xhr_object.responseText)')
    },
    
    draw:function (map){
        for (var i=0; i<map.length;i++){
            for (var j=0; j<map[i].length;j++){
                var tile;
                var xpos = (i-j)*(this.spec.tileL/2) + this.spec.carteX;
                var ypos = (i+j)*(this.spec.tileH/2)+ this.spec.carteY-6*(map[i][j]-map[7][7]);
                if (map[i][j]=='0')
                    tile=this.carte.image(this.pathLib + "p18" + ".png", xpos, ypos, 64,63 );
                else
                    tile=this.carte.image(this.pathLib + "p0" + ".png", xpos, ypos, 64,63 );  
                tile.node.setAttribute("id", i+'|'+j);
                tile.node.onclick = function () {                   
                    window.alert('x= ' + xpos+" | y= " + ypos+" | id= "+ this.getAttribute('id'));
                };
            /*
                tile.node.onmouseover = function (){
                    this.style.opacity=0.5;
                }
                tile.node.onmouseout = function (){
                    this.style.opacity=1;
                }*/
            }   
        }
    }
}