window.onload = cm_load;

var region = "default";
var side_bar_html= false;
var cm_map;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];
	var gmarkers = [];
	var htmls = [];
	var ii = 0;
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var cm_baseIcon = new GIcon();
cm_baseIcon.shadow = pp +"googlemaps/guiasdeviaje/images/sombra_icono.png";
cm_baseIcon.iconSize = new GSize(30, 30);
cm_baseIcon.shadowSize = new GSize(39, 30);
cm_baseIcon.iconAnchor = new GPoint(21, 30);
cm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
cm_baseIcon.infoShadowAnchor = new GPoint(18, 25);

// Change these parameters to customize map
var param_wsId = "";
var param_ssKey = "";
var param_useSidebar =true;
var param_useDescription = "";
var param_useRegion = "";
var param_imageColumn = "";
var param_titleColumn = "";
var param_descriptionColumn = "";
var param_latColumn = "";
var param_lngColumn = "";
var param_rankColumn = "";
var param_mapWidth;
var param_mapHeight;
var param_iconType = "";
var param_iconOverType = "";
var param_userMedia ="";
var param_userGuia = "";
var param_userDormir = "";
var param_userComer = "";
var param_userPais = "";
var param_userBares = "";
var param_userArquitectura = "";
var param_userArte= "";
var param_userItenerarios = "";
var param_userExcursiones= "";
 
 function cambiarregion(){
	 	
		/*side_bar_html="";*/
		region = document.getElementById("region").value;
	/*document.getElementById("datos").innerHTML = side_bar_html;*/
	 bubble.hide();
	 cm_load();
	 
	 }
 
 
function populateVars() {
              		  
	gmarkers = [];
	htmls = [];
	ii = 0;
	
	side_bar_html="";
	/*document.getElementById("datos").innerHTML = side_bar_html;*/

  param_wsId = "od5";
  param_ssKey= "o02051185315529433165.7650439406213479914";
/*param_useSidebar = document.getElementById("useSidebar").checked;*/
  param_titleColumn = "titulo";
  param_descriptionColumn = "descripcion";
  param_latColumn = "latitude";
  param_lngColumn = "longitude";
  param_rankColumn  = "popularidad";
  param_iconType = "green";
  param_iconOverType = "pink";
  param_useRegion = "region";
  param_userMedia = "media";
  param_userGuia = "link";
  param_userDormir = "dormir";
  param_userComer = "comer";
  param_userPais = "pais";
  param_userBares = "bares";
  param_userArquitectura = "arquitectura";
  param_userArte = "arte";
  param_userItenerarios = "itenerarios";
  param_userExcursiones = "excursiones";

	param_mapWidth = 320;
  	param_mapHeight = 240;

	

  document.getElementById("cm_map").style.width = param_mapWidth + "px";
  document.getElementById("cm_map").style.height = param_mapHeight + "px";
}
/**
 * Loads map and calls function to load in worksheet data.
 */
function cm_load() {


/*alert(pp)*/
  populateVars(region);
  if (GBrowserIsCompatible()) {
    // create the map
    cm_map = new GMap2(document.getElementById("cm_map"));
    cm_map.addControl(new GSmallMapControl());
   
	cm_map.setMapType(G_NORMAL_MAP);
    cm_map.setCenter(new GLatLng(0,0), 1);
      bubble = new EBubble(cm_map, pp +"googlemaps/guiasdeviaje/images/bubble3.png",new GSize(600,195), new GSize(575,155), new GPoint(14,4), new GPoint(515,193));      

	cm_getJSON();
	
  } else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
  } 
}

/** ha
 * Function called when marker on the map is clicked.
 * Opens an info window (bubble) above the marker.
 * @param {Number} markerNum Number of marker in global array
 */
function cm_markerClicked(markerNum) {
  //alert(markerNum)
  var marker = cm_mapMarkers[markerNum];
  
  marker.openInfoWindowHtml(cm_mapHTMLS[markerNum]);
 alert(cm_mapHTMLS[markerNum])
}

/// abrir la burbuja desde el sidebar///
function myclick(i) {
        //gmarkers[i].openInfoWindowHtml(htmls[i]);
          bubble.openOnMarker(gmarkers[i],htmls[i]);
	  }



/**
 * Function that sorts 2 worksheet rows from JSON feed
 * based on their rank column. Only called if column is defined.
 * @param {rowA} Object Represents row in JSON feed
 * @param {rowB} Object Represents row in JSON feed
 * @return {Number} Difference between row values
 */
/*function cm_sortRows(rowA, rowB) {
  var rowAValue = parseFloat(rowA["gsx$" + param_rankColumn].$t);
  var rowBValue = parseFloat(rowB["gsx$" + param_rankColumn].$t);

  return rowAValue - rowBValue;
}*/

     
function cm_loadMapJSON(json) {
/*   var usingRank = false;

  if(param_useSidebar == true) {
 
// crear los div para el sidebar//

	document.getElementById("datos").className= "bg";
  //document.getElementById("datos").style.width = "195px";
   document.getElementById("datos").style.background  = "#f3f2f2";
	   var divuno = document.createElement("div");
	   divuno.className = "tl";
   var divdos = document.createElement("div");
 divdos.className = "br";
	var divtres = document.createElement("div"); 
	divtres.className ="trc";
	
		var divcuatro = document.createElement("div"); 
	divcuatro.className ="blc pad";
	

	
	var sidebarTD = document.createElement("div");
    //sidebarTD.setAttribute("width","160");
    sidebarTD.setAttribute("valign","top");
	 sidebarTD.style.height =(( param_mapHeight - 0 )+ "px");
          	  var htres = document.createElement("h3");
  htres.innerHTML+='<img src="'+ pp +'googlemaps/guiasdeviaje/images/icon_brujula.png"/><span>Guias de viaje</span>';
     sidebarTD.appendChild(htres);
	
	var divcinco = document.createElement("div"); 
	divcinco.className="guiasbanner";
	divcinco.innerHTML+='<img src="'+ pp +'googlemaps/guiasdeviaje/images/adorno.jpg" />';
	sidebarTD.appendChild(divcinco);
   
   
   // sidebarTD.style.background = "#000000";
    var sidebarDIV = document.createElement("div");
    sidebarDIV.id = "cm_sidebarDIV";
    sidebarDIV.style.color = "#000000";
    
   


	
	sidebarTD.appendChild(sidebarDIV);
	divcuatro.appendChild(sidebarTD);
	divtres.appendChild(divcuatro);
	divdos.appendChild(divtres);
	divuno.appendChild(divdos);
    
	document.getElementById("datos").appendChild(divuno);
	
	//document.getElementById("datos").appendChild(sidebarTD);
	
	
  }
*/
  var bounds = new GLatLngBounds();	  
  var myVar = region;
//alert(myVar)

 if(json.feed.entry[0] && json.feed.entry[0]["gsx$" + param_rankColumn]) {
    usingRank = true;
    /*json.feed.entry.sort(cm_sortRows);*/
  }

  for (var i = 0; i < json.feed.entry.length; i++) {
    
	if (json.feed.entry[i]["gsx$" + param_useRegion].$t == myVar | myVar == "default"){
	
	var entry = json.feed.entry[i];

    if(entry["gsx$" + param_latColumn]) {
      var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
      var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
      var point = new GLatLng(lat,lng);

      var html = "<div class='cm_infoWindow'>";
      html += "<div id='cm_infoWindowTitle'>" +
          entry["gsx$"+param_titleColumn].$t + "</div>";
		  
	       html += "<div id='cerrarventana'>"+'<a id="cerrar" href="javascript:bubble.hide()">'+"</a></div>";
		  
		  html += "<div id='apDiv1'>" + '<img src="'+ pp + entry["gsx$"+param_userMedia].$t +'" />' + "</div>";
	 
	 
          html += "<div id='buttons'>"+'<a id="download" title="guia de viaje"href="'+ pp + entry["gsx$"+param_userGuia].$t +'"/>'+"</a></div>";
	
		  html += "<div id='apDiv3'>"+'<a href='+pp+ entry["gsx$"+param_userDormir].$t+'>'+'<img src="'+pp+'googlemaps/guiasdeviaje/images/donde_dormir.png"/>'+'<a href='+pp+ entry["gsx$"+param_userComer].$t+'>'+'<img src="'+pp+'googlemaps/guiasdeviaje/images/donde_comer.png"/>'+'<a href='+pp+ entry["gsx$"+param_userBares].$t+'>'+'<img src="'+pp+'googlemaps/guiasdeviaje/images/donde_beber.png"/>'+'<a href='+pp+ entry["gsx$"+param_userArquitectura].$t+'>'+'<img src="'+pp+'googlemaps/guiasdeviaje/images/arquitectura.png"/>'+'<a href='+pp+ entry["gsx$"+param_userArte].$t+'>'+'<img src="'+pp+'googlemaps/guiasdeviaje/images/arte.png"/>'+'<a href='+pp+ entry["gsx$"+param_userItenerarios].$t+'>'+'<img src="'+pp+'googlemaps/guiasdeviaje/images/itenerarios.png"/>'+'<a href='+pp+ entry["gsx$"+param_userExcursiones].$t+'>'+'<img src="'+pp+'googlemaps/guiasdeviaje/images/usuario.png"/>'+"</a></div>";

	 var elpais = entry["gsx$"+param_userPais].$t;
	/*alert(elpais)*/
	 var eltipo = entry["gsx$"+param_useRegion].$t;
	      		html += "<div id='cm_icono'>" + '<a ><img src="'+ pp + 'googlemaps/guiasdeviaje/images/' + elpais + 'b.png" /></a>' + "</div>";
	  var label = entry["gsx$"+param_titleColumn].$t;
      var rank = "";

     if( usingRank && entry["gsx$" + param_rankColumn]) {
        rank = parseInt(entry["gsx$" + param_rankColumn].$t);
      }

      if( entry["gsx$" + param_descriptionColumn]) {
        /*html += "<br/>" + entry["gsx$" + param_descriptionColumn].$t;*/
      
	  html += "<div id='apDiv2'>" +  entry["gsx$"+param_descriptionColumn].$t + "</div>";
	  }

      html += "</div>";

      // create the marker
      var marker = cm_createMarker(point,label,html,rank, eltipo, elpais);
      
	  cm_map.addOverlay(marker);
      cm_mapMarkers.push(marker);
      
	  cm_mapHTMLS.push(html);
      bounds.extend(point);
	  
     /* if(param_useSidebar == true) {



       
	var sidebarText= "";
        if(usingRank) {
          sidebarText += rank + ") ";
     
		gmarkers[ii] = marker;
		htmls[ii] = html;
		

		menuItem = document.createElement("li");
       	menuItem.innerHTML +='<a href="javascript:myclick(' + ii + ')"><img src="'+ pp + 'googlemaps/guiasdeviaje/images/' + eltipo + 'b.png" /><span>' + label  + '</span></a>';
		
		sidebarDIV.appendChild(menuItem);
		ii++;

	
		
		
		} 


      } */
    }
  }
}
  cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds));
 
  cm_map.setCenter(bounds.getCenter());

}


function cm_createMarker(point, title, html, rank, eltipo, elpais ) {
 
  var markerOpts = {};

  var nIcon = new GIcon(cm_baseIcon);

  if(rank > 0 && rank < 100){
    nIcon.imageOut = pp + "googlemaps/guiasdeviaje/images/" + elpais + "i.png";
    nIcon.imageOver = pp + "googlemaps/guiasdeviaje/images/" + elpais + "ii.png";
/*	alert(elpais)*/
    nIcon.image = nIcon.imageOut; 
  } else { 
    nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconType + "/blank.png";
    nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconOverType + "/blank.png";
    nIcon.image = nIcon.imageOut;
  }

  markerOpts.icon = nIcon;
  markerOpts.title = title;
  var marker = new GMarker(point, markerOpts);

  GEvent.addListener(marker, "click",function() {
    bubble.openOnMarker(marker,html);
/*	function() {
          bubble.openInfoWindowHtml(marker,html);*/
																			//cambios para el tooltip

/*	 function() {
    marker.openInfoWindowHtml(html);*/
  });
  
 
  GEvent.addListener(marker, "mouseover", function() {
    marker.setImage(marker.getIcon().imageOver);
  });
  GEvent.addListener(marker, "mouseout", function() {
    marker.setImage(marker.getIcon().imageOut);
  });
  GEvent.addListener(marker, "infowindowopen", function() {
    marker.setImage(marker.getIcon().imageOver);
  });
  GEvent.addListener(marker, "infowindowclose", function() {
    marker.setImage(marker.getIcon().imageOut);

  });
     
 GEvent.addListener(cm_map, "click", function(marker,point) {
        if (point) {
			//alert("hi")
          bubble.hide();
        }
      });
 
 
  return marker;
}


function cm_getJSON() {

  // Retrieve the JSON feed.
  var script = document.createElement('script');

  script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'
                         + '/' + param_ssKey + '/' + param_wsId + '/public/values' +
                        '?alt=json-in-script&callback=cm_loadMapJSON');
  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

////////////////////////////////expperimento//////////////////////////////////////

      function EBubble(map,image,size,insize,inset,anchor,noCloseOnClick) {
        // parameters
        var that=this;
        this.map = map;
        this.image=image;
        this.size=size;
        this.insize=insize;
        this.inset=inset;
        this.anchor=anchor;
        this.noCloseOnClick=noCloseOnClick;
        // internal variables
        this.visible = false;
        // browser - specific variables
        this.ie = false;
        var agent = navigator.userAgent.toLowerCase();
        if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1)){ this.ie = true} else {this.ie = false}

        this.div1 = document.createElement("div");
        this.div1.style.position = "absolute";
		this.div1.style.zIndex="11";
        this.div1.style.display="none";
        document.body.appendChild(this.div1);


        if (this.ie && this.image.indexOf(".png")>-1) {
          var loader = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.image+"', sizingMethod='scale');";
          this.div1.innerHTML = '<div style="height:' +this.size.height+ 'px; width:'+this.size.width+'px; ' +loader+ '" ></div>';
        } else {
          this.div1.innerHTML = '<img src="' + this.image + '" width="' + this.size.width +'" height="' + this.size.height +'">';
        }
        // === Close the bubble if the map moves ===
        GEvent.addListener(map, "dragstart", function() {
          that.hide();
        } );
        GEvent.addListener(map, "moveend", function() {
          that.hide();
        } );
        // === Listen for clicks and mousedowns ===
/*        GEvent.addDomListener(this.div1,"click", function() {
          if (!that.noCloseOnClick) that.hide();
          GEvent.trigger(that,"click");
        });
        GEvent.addDomListener(this.div1,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
          GEvent.trigger(that,"click");
        });*/

        this.div2 = document.createElement("div");
        this.div1.appendChild(this.div2);
        this.div2.style.position = "absolute";
        this.div2.style.left = this.inset.x + "px"; 
        this.div2.style.top = this.inset.y + "px";
        this.div2.style.width = this.insize.width + "px";
        this.div2.style.height = this.insize.height + "px";

      } 
      

      EBubble.prototype.openOnMap = function(point, html, offset) {
        this.offset = offset||new GPoint(0,0);
        this.point = point;


        //div2.style.backgroundColor = "#0000ff"; 
        this.div2.innerHTML = html;

        // pixel relative to map world
        var p = this.map.fromLatLngToDivPixel(point);

        // map world relative to map container
        var dragObject = this.map.getPane(G_MAP_MAP_PANE).parentNode;
        var x = p.x + parseInt(dragObject.style.left);
        var y = p.y + parseInt(dragObject.style.top);

        // map container relative to the page
        y += this.map.getContainer().offsetTop;
        x += this.map.getContainer().offsetLeft;
        
        // offset by the requested anchor position
        y -= this.anchor.y;
        x -= this.anchor.x;

        // offset by the specified offset position
        y -= this.offset.y;
        x -= this.offset.x;


        // Apply those values 
        this.div1.style.left = x+"px";
        this.div1.style.top = y+"px";
        
        // make it visible
        this.visible = true;
        this.show();
      }
      
      EBubble.prototype.openOnMarker = function(marker,html) {
        var vx = marker.getIcon().iconAnchor.x - marker.getIcon().infoWindowAnchor.x;
        var vy = marker.getIcon().iconAnchor.y - marker.getIcon().infoWindowAnchor.y;
        this.openOnMap(marker.getPoint(), html, new GPoint(vx,vy));
      }
      

      EBubble.prototype.show = function() {
        this.div1.style.display="";
        this.div2.style.display="";
        this.visible = true;
      }
      
      EBubble.prototype.hide = function() {
        this.div1.style.display="none";
        
        this.visible = false;
      }
      
      EBubble.prototype.isHidden = function() {
        return !this.visible;
      }
      
      EBubble.prototype.supportsHide = function() {
        return true;
      }