//<![CDATA[
var map;
var ovmap;

var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;


function loadMap() {
  if (GBrowserIsCompatible()) {
  
	// ======= make map
	map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(45.07259, 18.69411), 16, G_SATELLITE_MAP);
	
	
	// ====== Restricting the range of Zoom Levels =====
	var mt = map.getMapTypes();
	for (var i=0; i<mt.length; i++) {
		mt[i].getMinimumResolution = function() {return 5;}
		mt[i].getMaximumResolution = function() {return 18;}
	}
	
	
	// ===== controlls
	map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));

	
	//  ======== Add a map overview ==========
	var ovcontrol = new GOverviewMapControl(new GSize(150,150)); 
	map.addControl(ovcontrol);
	ovmap = ovcontrol.getOverviewMap();
	setTimeout("positionOverview()",1); // style
	setTimeout("ovmap.setMapType(G_SATELLITE_MAP);",1);
	
	

	
	
	
	
	
	
	
	
	
	

	// arrange for our onload handler to 'listen' for onload events
	if (window.attachEvent) {
		window.attachEvent("onload", function() {
		loadMap();	// Internet Explorer
	});
	} else {
		window.addEventListener("load", function() {
		loadMap(); // Firefox and standard browsers
		}, false);
	}

	
//end
}
}




//
// ================================================== Adds marker
//
	function createMarker(point,name,html) {
		var marker = new GMarker(point);
		GEvent.addListener(marker, "click", function() {
		  marker.openInfoWindowHtml(html);
		});
		gmarkers[i] = marker;
		htmls[i] = html;
		side_bar_html += '<li><a href="javascript:show_info(' + i + ')">' + name + '</a></li>';
		i++;
		return marker;
	}

	
	
//
// ================================================== AJAX
//
function get_data(url) {
// delete current
clean_overlay();
var request = GXmlHttp.create();
request.open("GET", url, true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
  
  document.getElementById("spinner").innerHTML = '';
	var xmlDoc = request.responseXML;
	// obtain the array of markers and loop through it
	var markers = xmlDoc.documentElement.getElementsByTagName("marker");
	
	// hide the info window, otherwise it still stays open where the removed marker used to be
	map.getInfoWindow().hide();
	
	map.clearOverlays();
	
	// empty the array
	gmarkers = [];

	// reset the side_bar
	side_bar_html="";
  
	for (var i = 0; i < markers.length; i++) {
	  // obtain the attribues of each marker
	  var lat = parseFloat(markers[i].getAttribute("lat"));
	  var lng = parseFloat(markers[i].getAttribute("lng"));
	  var point = new GLatLng(lat,lng);
	  var html = markers[i].getAttribute("html");
	  var label = markers[i].getAttribute("label");
	  // create the marker
	  var marker = createMarker(point,label,html);
	  map.addOverlay(marker);
	}
	// put the assembled side_bar_html contents into the side_bar div
	document.getElementById("side_bar").innerHTML = side_bar_html;
  }
}
request.send(null);
}





//
// ================================================== Show info
//
	function show_info(i) {
		gmarkers[i].openInfoWindowHtml(htmls[i]);
	}













function add_set_point()
{
	clean_overlay();
	GEvent.addListener(map, "click", function(overlay, point){
		map.clearOverlays();
		if (point) {
			map.addOverlay(new GMarker(point));
			map.panTo(point);

			document.getElementById("latitude").value = point.lat();
			document.getElementById("longitude").value = point.lng();
		}
	});
	document.getElementById("spinner").innerHTML = '';
	document.getElementById("side_bar").innerHTML = 
	'<div id="add_point">'+
		'<form action="/places/add/" method="post">'+
		
			'<ul>'+
				'<li>'+
					'<label for="name">Ime: </label>'+
					'<input type="text" id="name" name="data[Place][name]" />'+
				'</li>'+
				'<li>'+
					'<label for="description">Opis: </label>'+
					'<textarea cols="10" rows="4" id="description" name="data[Place][description]"></textarea>'+
				'</li>'+
				'<input type="hidden" value="0" name="data[Place][published]"/>'+
				'<input type="hidden" value="1" name="data[Place][category_id]"/>'+
				
				'<input type="hidden" id="latitude" name="data[Place][lat]" />'+
				'<input type="hidden" id="longitude" name="data[Place][lng]" />'+
				'<li>'+
					'<input type="submit" value="Dodaj"/>'+
				'</li>'+
			'</ul>'+
		
		'</form>'+
	'</div>';
}








function clean_overlay()
{
	GEvent.clearListeners(map, "click");
	map.clearOverlays();
	document.getElementById("side_bar").innerHTML = '';
	document.getElementById("spinner").innerHTML = '<img src="/img/spinner.gif" title="" alt="" />';
}




//  ======== A function to adjust the positioning of the overview ========
function positionOverview() {
	var omap=document.getElementById("map_overview");

	// == restyling ==
	omap.firstChild.style.border = "1px solid gray";

	omap.firstChild.firstChild.style.right="14px";
	omap.firstChild.firstChild.style.bottom="14px";
	omap.firstChild.firstChild.style.width="190px";
	omap.firstChild.firstChild.style.height="190px";
}





















//
// ================================================== AJAX
//
function goto_location(lat, lng, name, html) {
	i = 0;

	var lat = lat;
	var lng = lng;
	
	var label = name;
	htmls[i] = '<strong>'+name+'</strong><br />'+html;
	
	map.setCenter(new GLatLng(lat, lng));
	var point = new GLatLng(lat,lng);
	
	var marker = new GMarker(point);
		GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(htmls[i]);
	});
	map.addOverlay(marker);
	
	marker.openInfoWindowHtml(htmls[i]);
	gmarkers[i] = marker;

	document.getElementById("side_bar").innerHTML = '<li><a href="javascript:show_info(' + i + ')">' + name + '</a></li>';
	
	map.setCenter(new GLatLng(lat, lng));
}



//]]>