var mapa;
var gris;
var centro;

window.addEvent('domready', function () {

    myChain = new Chain();

    myChain.chain (
        iniciar_mapa(),
        crear_espacios()
    );
        
});

function TileToQuadKey ( x, y, zoom){
    var quad = "";
    for (var i = zoom; i > 0; i--) {
        var mask = 1 << (i - 1);
        var cell = 0;
        if ((x & mask) != 0)
            cell++;
        if ((y & mask) != 0)
            cell += 2;
        quad += cell;
    }
    return quad;
}

var madrid = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        return "http://www.mapearmadrid.net/tiles/" + TileToQuadKey(coord.x,coord.y,zoom) + ".png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    maxZoom: 12,
    name: 'Madrid',
    alt: 'Mapear Madrid'
});

function iniciar_mapa ()
{
    // var latlng = new google.maps.LatLng(40.577837312687215, -3.7968861890625005); // Punto calculado para centrar el mapa
    var latlng = new google.maps.LatLng(40.5402771166058, -3.4590565992187505); // Punto calculado para centrar el mapa
    centro = latlng;

    var myOptions = {
      zoom: 9,
      center: latlng,
      mapTypeControl: false,
      scaleControl: false,
      disableDoubleClickZoom: false,
      draggable: true,
      scrollwheel: false
    };

    mapa = new google.maps.Map(document.getElementById("mapa"), myOptions);
    mapa.setMapTypeId('madrid');
    mapa.mapTypes.set('madrid', madrid);

    google.maps.event.addListener(mapa, 'zoom_changed', function() {
        if (mapa.getZoom() > 11) mapa.setZoom(11);
        if (mapa.getZoom() < 9) mapa.setZoom(9);
    });

    google.maps.event.addListener(mapa, 'tilesloaded', function(e) {
        //superponer_madrid();
        google.maps.event.clearListeners(mapa, 'tilesloaded');
        mostrar_mapa();
        $('mapa').setStyle('background-color', '#E6E6E6');
    });

}

function mostrar_mapa ()
{
    $('over_mapa').fade('out');
}

function crear_espacios ()
{
    proyectos.each(function (proyecto) {
        var p_proyecto = proyecto.posicion.split(',');
        var latlng = new google.maps.LatLng(p_proyecto[0], p_proyecto[1]);
        add_marker(proyecto.nombre, latlng, proyecto.icono, proyecto.duracion, proyecto.id);
    });
}

function add_marker (nombre, posicion, icono, duracion, id)
{
    var image = base_url + 'img/' + icono;
    var marker = new google.maps.Marker({
        position: posicion,
        map: mapa,
        title: nombre,
        icon: image
    });

    var partes = icono.split('.');

    var contentString = '<p class="usuario temp"><a href="http://www.mapearmadrid.net/proyecto/'+id+'/" title="'+nombre+'">'+nombre+'</a><br/><span>'+duracion+'</span></p>';
    
    google.maps.event.addListener(marker, 'click', function(e) {
      var infoBox = new InfoBox( { latlng: marker.getPosition(), map: mapa, content: contentString });
    });
}