var map;
  var mapcenter;
  var geocoder;
  var cams = [];
  var url = "get.php?";

	var baseicon = new GIcon();
	baseicon.iconSize = new GSize(16, 16);
	baseicon.iconAnchor = new GPoint(8, 16);
	baseicon.infoWindowAnchor = new GPoint(5, 1);
	var moveend = true;
	var loadingDiv;
	var numberDiv;
	
	function LoadingControl() {}
	
	LoadingControl.prototype = new GControl();


	LoadingControl.prototype.initialize = function(map) {
		var parentDiv = new Element('div');
		loadingDiv = new Element('div');
		numberDiv = new Element('div', {'id': 'numbercams'});
		var img = new Element('img', {src: 'loader.gif'});
		parentDiv.appendChild(loadingDiv);
		parentDiv.appendChild(numberDiv);
		loadingDiv.appendChild(img);
								
  		map.getContainer().appendChild(parentDiv);
  		return parentDiv;
	}

	LoadingControl.prototype.getDefaultPosition = function() {
		//var center = map.fromLatLngToDivPixel(map.getCenter());
 		//var posleft = center.x - 54;
 		//var postop = center.y - 55;
		return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(54, 55));
	}

	function showAddress() 
	{
		moveend = true;
	  	geocoder.getLatLng(
		    $('address').value,
		    function(point) 
			{
		    	if (!point) 
			  	{
		        	alert($('address').value + " not found");
		      	} 
			  	else 
			  	{
		        	map.setCenter(point, 10); 	
		      	}
		    }
	  	);
	}
	
  	function createMarker(point, name, idcam, city, img, type, live) 
	{
		var icon = new GIcon(baseicon);
      	icon.image = "cams/"+type+".png";
		var imgtag = "";
    	if (img != "none")
    		imgtag = "<a href='http://www.fisgonia.com/webcam/"+idcam+"'><img src='http://img.fisgonia.com/image?webcam="+img+"' width='200' height='136'/></a><br/>";
 
		var livetag = "";
    	if (live == 1)
    		livetag = "<img src='live.gif' alt='live' title='"+message[1]+"' />&nbsp;&nbsp;";
			    	 		
    	var marker = new GMarker(point, {title: name, icon: icon});
    	GEvent.addListener(marker, "click", function() {
    		moveend = false;
    		marker.openInfoWindowHtml("<div style='width: 250px'><b><a href='http://www.fisgonia.com/webcam/"+idcam+"'>" + name + "</a></b>, "+city+"<br/>"+imgtag+"&raquo; <a href='/view/"+idcam+"' target='_blank'>"+message[2]+"</a> &laquo;<div style='text-align: right'><br/>"+livetag+"<a href='http://www.panoramio.com/map/#lt="+point.lat()+"&ln="+point.lng()+"&z=4&k=0&a=1'><img src='panoramio.gif' alt='Panoramio' title='"+message[3]+"' /></a></div></div>");
			});
    	
    	cams.push(marker);
    	marker.type = type;
    	return marker;
	}
    
	function showcams(type) 
	{
		map.getInfoWindow().hide();
		   if ($(type).checked==false) {
		      for (var i=0;i<cams.length;i++) {
		         if (cams[i].type==type)  {
		            map.removeOverlay(cams[i]);
		         }
		      }
		   } else {
		      for (var i=0;i<cams.length;i++) {
		         if (cams[i].type==type)  {
		            map.addOverlay(cams[i]);
		         }
		      }
		   }
	}    
	
	function clear()
	{
		for (var i = 0; i < cams.length; i++) 
		{
		        map.removeOverlay(cams[i]);
		}
		cams = [];
	}
	
	function init()
	{
		Element.hide('img-show');
		
		load();
	}
    	
    function load() 
	{
		if (GBrowserIsCompatible()) 
		{
			window.onresize = resizeApp;
		    
			resizeApp();
			    	
			map = new GMap2($("map"), {mapTypes:[G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP]});
			geocoder = new GClientGeocoder();
			    
			map.addControl(new LoadingControl());
			map.addControl(new GLargeMapControl());
			map.addControl(new GScaleControl());
			map.addControl(new GMapTypeControl());
			map.addControl(new GOverviewMapControl());
			    
			var coordinates = myGetCenter();	
					
			map.setCenter(new GLatLng(coordinates.lat, coordinates.lng), coordinates.zoom);
			map.enableDoubleClickZoom();
			map.enableScrollWheelZoom();
			GEvent.addListener(map, "moveend", loadCams);
			GEvent.addListener(map, "dragstart", function () { moveend = true;});
			loadCams();
		}
    }
    
	function rand()
  	{
		var now = new Date();
    	var num = (now.getSeconds())%2;
    	var num = num+1;
    	return num;
  	}  
	    
	var coordinates = [];
	coordinates['en'] = {lat: 37.055177, lng: -95.756836, zoom: 5};
	coordinates['es'] = {lat: 39.985538, lng: -3.88916, zoom: 6};
	coordinates['it'] = {lat: 42.179688, lng: 12.546387, zoom: 6};
	
    function myGetCenter()
    {
		var coordinatesCenter;
		
		coordinatesCenter = coordinates[lang];
		
		if (location.hash.length > 0) 
		{
			var hash = location.hash.replace('#', '');
			var args = hash.split("&");
			for (var i = 0; i < args.length; i++) 
			{
				var parts = args[i].split("=");
				coordinatesCenter[parts[0]] = parseFloat(parts[1]);
			}
		}
		
		return coordinatesCenter;
    }
    
    function loadCams()
    {
    	mapcenter = map.getCenter();
    		
		if (!moveend)
    	{
    		moveend = true;
    		return;
    	}
    		
    	loadingDiv.show();
    	numberDiv.hide();
    	numberDiv.update('');
    	
    	clear();
    	
    	var visible = map.getBounds();
        var sw = visible.getSouthWest();
		var ne = visible.getNorthEast();

		var urlrequest = url + 'swlat=' + sw.lat() + '&swlng=' + sw.lng() + '&nelat=' + ne.lat() + '&nelng=' + ne.lng();
		
		GDownloadUrl(urlrequest, function(data) {
				var sizepoints = 0;
				
				try 
				{
			        var xml = GXml.parse(data);
			        var markers = xml.documentElement.getElementsByTagName("marker");
			          		
			        var points = $A(markers);
			        sizepoints = points.size();
					  		
			        points.each( function(point) 
					{
				        var latlng = new GLatLng(parseFloat(point.getAttribute("lat")), parseFloat(point.getAttribute("lng")));
				        var name = point.getElementsByTagName("name")[0].firstChild.nodeValue;
				        var idcam = point.getAttribute("id");
				        var city = point.getElementsByTagName("city")[0].firstChild.nodeValue;
				        var img = point.getElementsByTagName("img")[0].firstChild.nodeValue;
				        var live = point.getElementsByTagName("live")[0].firstChild.nodeValue;
				        var type = point.getElementsByTagName("type")[0].firstChild.nodeValue;
				        map.addOverlay(createMarker(latlng, name, idcam, city, img, type, live));
			          		
			        });
				}
		        catch(e)
				{
					//alert(e.name+": "+e.message);
					sizepoints = 0;
				}
        			
        		loadingDiv.hide();
        		numberDiv.show();
        		if (sizepoints == 1)	
        			numberDiv.update(sizepoints+' webcam');
        		else
        			numberDiv.update(sizepoints+' webcams');
        	});
        	
	}
	
    function centrar(lat, lng)
    {
    	moveend = true;
		map.setCenter(new GLatLng(lat, lng), 10);
	}
    
    function getWindowHeight() 
	{
		if (window.self && self.innerHeight) 
		{
			return self.innerHeight;
		}
		
		if (document.documentElement && document.documentElement.clientHeight) 
		{
			return document.documentElement.clientHeight;
		}
		
		return 0;
	}

	function resizeApp() 
	{	  		
		var offsetTop = 0;
		var mapElem = $("map");
		
		for (var elem = mapElem; elem != null; elem = elem.offsetParent) 
		{
			offsetTop += elem.offsetTop;
	  	}
	  	
		var height = getWindowHeight() - offsetTop - 38;
	  	if (height >= 0) 
			mapElem.style.height = height + "px";
			
		if (map != null)
	  		map.checkResize();
	}
	
	function cerrar()
	{
		$('left').toggle();
		
		if (Element.visible('left') == false)
		{
		 	Element.hide('img-hide');
		 	$('img-show').show();
			Element.setStyle('right', {left: 0, marginRight: 0});
		}
		else
		{
		 	Element.hide('img-show');
		 	$('img-hide').show();
			Element.setStyle('right', {left: '300px', marginRight: '300px'});	
		}
		
		resizeApp();
	}	
	
	function mitoggle(id)
	{
	 	divs = $('leyenda', 'ultimas');

	 	for (i = 0; i < divs.length; i++)
	 	{
	 		if (id != divs[i] && Element.visible(divs[i]))
	 		{
				Effect.toggle(divs[i], 'slide');	
			}
		}
			
		Effect.toggle(id, 'slide');
		
		return false;
	}
	
	function newCam()
	{
		new Ajax.Request('newcam.php?date'+Date(),
		  {
		    method:'get',
		    parameters: Form.serialize('newcam'),
		    onSuccess: finish,
		    onFailure: function() { alert(message[0]) } ,
		    onLoading: loading
		  });
	}
	
	function finish(response) 
	{
		new Effect.Fade('load')
	    Form.enable($('newcam'));
	    new Effect.Appear('finish');
	}
	
	function loading() 
	{
	 	new Effect.Fade('newcam')
	    Form.disable($('newcam'));
	    new Effect.Appear('load');
	}	
	
	function othercam() 
	{
		new Effect.Fade('finish');	
		new Effect.Appear('newcam');
	}

Event.observe(window, 'load', init);
Event.observe(window, 'unload', GUnload);