/*
 *  gMaps
 *  
 *  Descripción:
 *    Clase que nos crea una capa intermedia entre el API de Google Maps 
 *    y nuestro Javascript.
 *
 *  Métodos: 
 *    - load()
 *        Función que se encarga de cargar el mapa con los parámetros pasados.
 *    - showAddress()
 *        Función que nos coloca el mapa en la dirección que pasamos por parámetro.
 *    - setCenter()
 *        Nos coloca el mapa en un centro y zoom determinado.
 *    - changeCenter()
 *        Nos cambiar el centro actual por el nuevo pasado por parámetro.
 *    - createMarker()
 *        Nos crea un nuevo marcador en una posición indicada.
 *    - setHTML()
 *        Texto HTML que veremos en el globo al hacer click sobre el marcador.
 *    - setPoint()
 *        Ubica un marcador en el mapa
 *    - cleanPoints()
 *        Elimina todos los puntos que hayamos ubicado previamente.
 *    - paintContry()
 *        Pinta el contorno de un país pasado por parámetro.
 *        
  **/
 
function posCursor(ev){
  var px, py;
  if (!document.all){
         event = ev;
         py = ev.pageY;
         px = ev.pageX;
     }
  else{
         py = event.clientY +document.body.scrollTop;
         px = event.clientX +document.body.scrollLeft;
  }
  $("#coordX").val(px);
  $("#coordY").val(py);
}

var gMaps = {
    map: null,
    markers: [],
    polyline: [],
    geocoder: null,
    zoom: {},
    load: function(param) {
    	if (!GBrowserIsCompatible()) return;
        var opt = {lat: 0,lng:0,content: "map",zoom: {ini: 2, country: 3, destination: 7, zone: 12, hotel: 16},controls:false};
        for ( var property in param) opt[property] = param[property]; 						
        this.zoom = opt.zoom;
        
	gMaps.map = new GMap2(document.getElementById(opt.content));
        gMaps.map.setCenter(new GLatLng(opt.lat, opt.lng), opt.zoom.ini);
        if(opt.controls) gMaps.map.addControl(new GSmallMapControl());
     },
     showAddress: function(address, zoom){
        gMaps.geocoder = new GClientGeocoder();
        if (!gMaps.geocoder) return;
        gMaps.geocoder.getLatLng( address, function(point) {
              	if (!point) return;
          	gMaps.setCenter(point, gMaps.zoom[zoom]);
        });
     }, 
     setCenter: function(point, zoom){
     		if (!gMaps.map) return;
	     	gMaps.map.setCenter(point, zoom);
    	},
     changeCenter: function(lat, lng, zoom) {
        if (typeof zoom == 'string') zoom = gMaps.zoom[zoom];
      	gMaps.setCenter(new GLatLng(lat, lng), zoom);
     },
     createMarker: function(lat, lng, icon) {
     		return new GMarker(new GLatLng(lat.replace(/\'/g, ''), lng.replace(/\'/g, '')), icon);
     },
     setHTMLInfo: function(hotel) {
                return '<table class="gMaps_hotel border_color1" style="width:300px; padding-right: 0px; margin-bottom: 10px;"><tr class=""><td id="title" class="bg_color1 border_color1">' + hotel.html.name +'</td></tr><tr><td id="info"><p class="product_description"><img class="product_photo" src="'+ hotel.html.img +'" alt="'+hotel.html.name+'" /><span id="subtitle">'+hotel.html.category+'</span><br/>'+hotel.html.desc+'</p></td></tr><tr><td><a onclick="hotelFactSheet('+hotel.code+');" href="#" style="text-decoration:underline">'+$.lang("Ver información del hotel")+'</a></td></tr></table>';
                //return '<div class="gMaps hotel" style="width:250px; padding-right: 0px; margin-bottom: 10px;"><h4 class="notelname">' + hotel.name +'('+hotel.category+')</h4><p class="info"><img src="'+ hotel.img +'" alt="'+hotel.name+'" />'+hotel.desc+'</p></div>';
     },    
     setHTML: function(hotel) {
                return '<table class="gMaps_hotel border_color1 bg_color9" style="width: 300px; padding-right: 0px; background-color: white; display:none;"><tr class=""><td id="title" class="bg_color1 border_color1">' + hotel.html.name +'</td></tr><tr><td id="info"><p class="product_description"><span id="subtitle">'+hotel.html.category+'</span><br/>'+hotel.html.address+'<br/>'+hotel.html.cp+'</p></td></tr></table>';         
                //return '<div class="gMaps hotel" style="width:250px; padding-right: 0px; margin-bottom: 10px;"><h4 class="notelname">' + hotel.name +'('+hotel.category+')</h4><p class="info"><img src="'+ hotel.img +'" alt="'+hotel.name+'" />'+hotel.desc+'</p></div>';
     },
     setPoint: function(opt, icon, page){
     		if (typeof opt != "object") return;
     		this.markers[opt.code] = gMaps.createMarker(new String(opt.lat), new String(opt.lng), icon);
     		if (typeof opt.html == 'object') {
     			
     							 // Mouseover
                   GEvent.addListener(this.markers[opt.code], "mouseover", function() {                   
                          if (page == 'dispo'){
                            $("#big_map").append('<div id="hotelInfo" name="hotelInfo" style="z-index:1; position: absolute; left:'+parseInt($("#coordX").val()-350)+'px; top: '+parseInt($("#coordY").val()-420)+'px; width: 300px;"><table class="gMaps_hotel border_color1 bg_color9" style="width: 300px; padding-right: 0px; background-color: white; display:block;"><tr class=""><td id="title" class="bg_color1 border_color1">' + opt.html.name +'</td></tr><tr><td id="info"><p class="product_description"><img src="'+opt.html.img+'" alt="img" style="float:left;margin:2px 8px 2px 0;"/><span id="subtitle">'+opt.html.category+'</span><br/>'+unescape(opt.html.desc)+'<br/></p></td></tr></table></div>');
                          }else{
														$("#content_map").append('<div style="z-index: 1; position: absolute; left:' + parseInt($("#coordX").val()-650) + 'px; top: ' + parseInt($("#coordY").val()-110) + 'px; width: 300px;" name="hotelInfo" id="hotelInfo"><table style="width: 300px; padding-right: 0px; background-color: white; display: block;" class="gMaps_hotel border_color1 bg_color9"><tbody><tr class=""><td style="text-align: left; padding-left: 5px" class="bg_color1 border_color1" id="title">' + opt.html.name +'<img alt="'+opt.html.category.smalldescription+'" src="http://www.wlablive.com/images/WhAccomodation/ico_'+opt.html.category.code+'_blue1.gif"/></td></tr><tr><td style="text-align: left; font-size: 11px"><p><img alt="Imagen del hotel" src="'+opt.html.img+'" class="product_photo" style="padding-right: 10px"/> <strong>' + opt.html.name +'</strong><br />'+unescape(opt.html.address.name)+" num. "+unescape(opt.html.address.number)+' </p></td></tr></tbody></table></div>');
													}
                          $("select#hotel").val(opt.code);
                   });
                   
                   // Mouseout
                   GEvent.addListener(this.markers[opt.code], "mouseout", function(){
                        $("#hotelInfo").remove();                                                 
                   });
                }
                gMaps.map.addOverlay(this.markers[opt.code]);
     },
     cleanPoints: function() {
          var points = gMaps.markers;
          for (var x in points) {
              points[x].hide();
          }
      },
      paintContry: function(param) {
        var opt = {
              lineColor: "#ff0000",
              lineWidth: 1,
              lineOpacity: 1,
              backgroundColor: "#ff0000",
              backgroundOpacity: 0.2
          };
        for ( var property in param) opt[property] = param[property]; 						
         if (!opt.code) return;
         var coords = country[opt.code].coord;
         for (var x in coords) {
           this.polyline[opt.code] = new GPolygon(coords[x], opt.lineColor, opt.lineWidth, opt.lineOpacity, opt.backgroundColor, opt.backgroundOpacity);
           GEvent.addListener(this.polyline[opt.code], "click", function(a){$("#country").val(opt.code);$("#country").change();});
           gMaps.map.addOverlay(this.polyline[opt.code]);
         }
      }
};
$(document).unload(GUnload);