var map = null;
    var geocoder = null;
	
    function initialize() {
      if (GBrowserIsCompatible()) {
		  
        map = new GMap2(document.getElementById("gmap"));
        var clientLocation = google.loader.ClientLocation;
		if (clientLocation == null) {
				var latitude = 41.52;
				var longitude = -81.68;	
				var zoom = 2;
		} else {
				var latitude = clientLocation.latitude;
				var longitude = clientLocation.longitude;
				var zoom = 12;
				userCtry = latitude+','+longitude;
		}
		map.setCenter(new GLatLng(latitude, longitude), zoom);
	    //map.addControl(new GLargeMapControl());
	    map.addControl(new GMapTypeControl());
        geocoder = new GClientGeocoder();
		
				var bounds = map.getBounds();
				var southWest = bounds.getSouthWest();
				var northEast = bounds.getNorthEast();
				var lngSpan = northEast.lng() - southWest.lng();
				var latSpan = northEast.lat() - southWest.lat();
				var markers = [];
				for (var i = 0; i < 10; i++) {
				    var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
				        southWest.lng() + lngSpan * Math.random());
					marker = new GMarker(point);
					map.addOverlay(marker);
					markers[i] = marker;
				}
				
				$(markers).each(function(i,marker){
					$("<li />").addClass('ui-state-default ui-corner-all')
						.uiHover()
						.html("Punto "+i)
						.click(function(){
							displayPoint(marker, i);
						})
						.appendTo("#list");
						
					GEvent.addListener(marker, "click", function(){
						displayPoint(this, i);
					});
				});
				
				$('<div id="message" />').appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
				
				function displayPoint(marker, index){
					$("#message").hide().empty();
					
					var closeButton = $(iconHTML("close"))
						.click(
							function(){ $("#message").fadeOut(); 
						})
						.css({ top:'5px', right:'5px' })
						.uiHover();
					
					//$("#accordion-template").clone().show()
					$("#tabs-template").clone().show()
						.attr("id","").appendTo("#message")
						.find(".index").html(index.toString()).end()
						.find(".dialog").click(function(){ $('div#dialog').dialog("open").html("Informaci&oacute;n del Punto "+index.toString()).dialog('option', 'title', 'Titulo del Punto '+index.toString()); }).end()
						.tabs()
						.find(".ui-tabs-nav").append(closeButton);
				
					var moveEnd = GEvent.addListener(map, "moveend", function(){
						var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());
						$("#message")
							.css({ top:markerOffset.y, left:markerOffset.x })
							.show("drop", { direction:"right" });
				
						GEvent.removeListener(moveEnd);
					});
					
					left = map.getBounds().getSouthWest().lat();
					right = map.getBounds().getNorthEast().lat();
					offset = (right - left) * .25;
					map.panTo(new GLatLng(marker.getPoint().lat(), marker.getPoint().lng()+offset));
				}
				
				GEvent.addListener(map, 'zoomend', function(){
					$("#message").hide();
				});
				
				$("#dialog").show().dialog({
					autoOpen:false,
					modal:false,
					overlay:{ background:"#000", opacity:0.7 },
					width:350, height:300
				});
				
				$("#list").appendTo("#gmap").css({ top:'16px', right:'10px' });
				
				/* Build Controls */
				$(iconHTML("up"))
					.css({ top:'10px', left:'32px' })
					.click(function(){
						map.panDirection(0, 1);
					})
					.appendTo("#gmap");
					
				$(iconHTML("left"))
					.css({ top:'32px', left:'10px' })
					.click(function(){
						map.panDirection(1, 0);
					})
					.appendTo("#gmap");
					
				$(iconHTML("right"))
					.css({ top:'32px', left:'54px' })
					.click(function(){
						map.panDirection(-1, 0);
					})
					.appendTo("#gmap");
					
				$(iconHTML("down"))
					.css({ top:'54px', left:'32px' })
					.click(function(){
						map.panDirection(0, -1);
					})
					.appendTo("#gmap");
					
				$(iconHTML("plus"))
					.css({ top:'84px', left:'32px' })
					.click(function(){
						map.zoomIn();
						$("#map-slider").slider("value", map.getZoom());
					})
					.appendTo("#gmap");
					
				$(iconHTML("minus"))
					.css({ top:'325px', left:'32px' })
					.click(function(){
						map.zoomOut();
						$("#map-slider").slider("value", map.getZoom());
					})
					.appendTo("#gmap");
				
				$("<div />").attr('id','map-slider').height(200)
					.slider({ 
						orientation: "vertical", 
						min:0, max:19, step:1, value:map.getZoom(),
						change:function(){
							map.setZoom( $(this).slider("value") );
						}
					})
					.css({ top:'115px', left:'38px', position:'absolute' })
					.appendTo("#gmap");
      }
    }
    
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " no se encuentra, sea mas especifico");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(address);
            }
          }
        );
      }
    }
	
	function e(id){
		return document.getElementById(id)
	}
	function getWindowHeight() {
		if (window.self && self.innerHeight) {
			return self.innerHeight;
		}
		if (document.documentElement && document.documentElement.clientHeight) {
			return document.documentElement.clientHeight;
		}
		return 0;
	}
	
	function calculateOffsetTop(element, opt_top) {
		var top = opt_top || null;
		var offset = 0;
		for (var elem = element; elem && elem != opt_top; elem = elem.offsetParent) {
			offset += elem.offsetTop;
		}
		return offset;
	}
	
	function resizeApp() {
		var height = getWindowHeight();
		height -= 85;
		var mapElem = e("gmap");
		var contentElem = e("content");
		contentElem.style.height = Math.max(0, height) + "px";
		mapElem.style.height = Math.max(0, height) + "px";
	}
	$(document).ready(function(){
		$('#address').click(function() {
			if (this.value == this.defaultValue) {
				this.value = '';
			}
		});
		$('#address').blur( function() {
			if (this.value == '') {
				this.value = this.defaultValue;
			}
		});
		
		var alto = getWindowHeight();
		$("div#content, div#gmap").height(alto-85);
		
		// Configuraciones de las ventanas
		var Ventana = $('div#ventana');
		var title = Ventana.dialog('option', 'title');
		var buttons = Ventana.dialog('option', 'buttons');
		var height = Ventana.dialog('option', 'height');
		var draggable = Ventana.dialog('option', 'draggable');
		var modal = Ventana.dialog('option', 'modal');
		Ventana.show().dialog({
			autoOpen:false,
			modal:true,
			overlay:{ background:"#000", opacity:0.7 },
			width:350, height:300
		});

		$("div#biglogo").click(function() { $("div#biglogo").fadeOut("slow");});
		$("#anuncie").click(function(){  
			Ventana.html("Informaci&oacute;n de como Anunciar en el Sitio").dialog("open")
			.dialog('option', 'title', 'Anuncie')
			.dialog('option', 'draggable', true)
			.dialog("open").dialog('option', 'modal', true)
			.dialog('option', 'buttons', false);
		});
		
		$("#nosotros").click(function(){  
			Ventana.html("Informaci&oacute;n Acerca de Nosotros").dialog("open")
			.dialog('option', 'title', 'Acerca de donde.com.py')
			.dialog('option', 'draggable', true)
			.dialog("open").dialog('option', 'modal', true)
			.dialog('option', 'buttons', false);
		});
		
		$("#ayuda").click(function(){  
			Ventana.html("Informaci&oacute;n de la Ayuda").dialog("open")
			.dialog('option', 'title', 'Ayuda')
			.dialog('option', 'draggable', true)
			.dialog("open").dialog('option', 'modal', true)
			.dialog('option', 'buttons', false);
		});
		
		var freportar = '<div id="formReportar" class="divPoints">'
				+'<label for="cnombre">Nombre:<\/label><input type="text" id="cnombre" />'
				+'<label for="cemail">Correo electr&oacute;nico:<\/label><input type="text" id="cemail" />'
				+'<input type="hidden" value="contacto" id="f" />'
				+'<label for="cerror">Mensaje: <\/label><textarea id="cerror" cols="18" rows="4"><\/textarea>'
				+'<\/div>';
		$("#contacto").click(function(){  
			Ventana.html(freportar).dialog("open").css({"height":"300px"})
			.dialog('option', 'title', 'Contacto')
			.dialog('option', 'draggable', false)
			.dialog("open").dialog('option', 'modal', true)
			.dialog('option', 'buttons', { "Enviar": function() { $("#formReportar").enviarMensaje(); }, "Cancelar": function() { $(this).dialog("close"); } });
		});
		$("a#about").click(function() { $("div#biglogo").fadeIn("slow");});
					
	});
	function iconHTML(type) {
		switch (type) {
			case "up" 		: iconClass = 'ui-icon-circle-arrow-n'; break;
			case "down" 	: iconClass = 'ui-icon-circle-arrow-s'; break;
			case "left" 	: iconClass = 'ui-icon-circle-arrow-w'; break;
			case "right" 	: iconClass = 'ui-icon-circle-arrow-e'; break;
			case "plus" 	: iconClass = 'ui-icon-circle-plus'; break;
			case "minus" 	: iconClass = 'ui-icon-circle-minus'; break;
			case "close"	: iconClass = 'ui-icon-closethick'; break;
		}
		return '<div class="icon ui-state-default ui-corner-all"><span class="ui-icon '+iconClass+'" /></div>';
	}
			
	$.fn.uiHover = function(){
		return this.each(function(){
			$(this).hover(
				function(){ $(this).addClass('ui-state-hover'); },
				function(){ $(this).removeClass('ui-state-hover'); }
			);
		});
	}