var centerLatitude = 51.28940590271679;
var centerLongitude = 11.66748046875;
var startZoom = 6;

var geocoder = null;
var icon_suche;
var icon_berg;
var map;
var markers;
var marker_suche = null;

function init() {
    map = new GMap2(document.getElementById("map"));
	map.enableScrollWheelZoom();
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom, G_HYBRID_MAP);

	icon_suche = new GIcon();
	icon_suche.image = "zoom.png";
	icon_suche.iconAnchor = new GPoint(16, 16);
	icon_suche.iconSize = new GSize(16, 16); 
	icon_suche.infoWindowAnchor = new GPoint(16, 16);

	icon_berg = new GIcon();
	icon_berg.image = "2620berg.png";
	icon_berg.iconAnchor = new GPoint(26, 20);
	icon_berg.iconSize = new GSize(26, 20); 
	icon_berg.infoWindowAnchor = new GPoint(26, 20);

	geocoder = new GClientGeocoder();

    retrieveMarkers();

    GEvent.addListener(map, "click", function(overlay, latlng) {
        //only perform the click if the window is closed and the click was directly on the map.
        if(!overlay) {
	        //create an HTML DOM form element
	        var inputForm = document.createElement("form");
	        inputForm.setAttribute("action","");
	        inputForm.onsubmit = function() {storeMarker(); return false;};

	        //retrieve the longitude and lattitude of the click point
	        var lng = latlng.lng();
	        var lat = latlng.lat();
			
			map.setCenter(latlng, 13);
	        inputForm.innerHTML = '<fieldset style="width:190px;">'
	              + '<legend>Klettergebiet hinzufügen</legend>'
	              + '<label for="found">Namen des Felsen</label>'
	              + '<input type="text" id="found" style="width:100%;"/>'
	              + '<label for="left">Kommentar</label>'
	              + '<input type="text" id="left" style="width:100%;"/>'
	              + '<label for="left">Icon URL (optional)</label>'
	              + '<input type="text" id="icon" style="width:100%"/>'
	              + '<input type="submit" value="Save"/>'
	              + '<input type="hidden" id="longitude" value="' + lng + '"/>'
	              + '<input type="hidden" id="latitude" value="' + lat + '"/>'
	              + '</fieldset>';

	        map.openInfoWindow (latlng,inputForm);
        }
    });
	
	
document.getElementById('button-sidebar-hide').onclick = function() {
return changeBodyClass('sidebar-right', 'sidebar-off'); };
document.getElementById('button-sidebar-show').onclick = function() {
return changeBodyClass('sidebar-off', 'sidebar-right'); };


changeBodyClass('loading', 'standby');
}

window.onload = init;



    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " nicht gedunden!");
            } else {

			  if (marker_suche)	{
				  	map.removeOverlay(marker_suche);
			  }
              map.setCenter(point, 13);
              marker_suche= new GMarker(point, icon_suche);
              map.addOverlay(marker_suche);
              marker_suche.openInfoWindowHtml("<div style=\"font-size:12px;\"\"><b>Ihr gesuchter Standort:</b> <br />"+address+"</div>");
            }
          }
        );
      }
    }


function storeMarker(){
    var lng = document.getElementById("longitude").value;
    var lat = document.getElementById("latitude").value;

    var getVars =  "?found=" + document.getElementById("found").value
        + "&left=" + document.getElementById("left").value
        + "&icon=" + document.getElementById("icon").value
        + "&lng=" + lng
        + "&lat=" + lat ;

    var request = GXmlHttp.create();

    //open the request to storeMakres.php on your server
    request.open('GET', 'storeMarker.php' + getVars, true);
    request.onreadystatechange = function() {
       if (request.readyState == 4) {
            //the request in complete

            var xmlDoc = request.responseXML;

            //retrieve the root document element (response)
            var responseNode = xmlDoc.documentElement;

            //retrieve the type attribute of the node
            var type = responseNode.getAttribute("type");

            //retrieve the content of the responseNode
            var content = responseNode.firstChild.nodeValue;

            //check to see if it was an error or success
            if(type!='success') {
                alert(content);
            } else {
                //Create a new marker and add it's info window.
                var latlng = new GLatLng(parseFloat(lat),parseFloat(lng));

                var iconImage = responseNode.getAttribute("icon");
                var marker = createMarker(latlng, content, iconImage)

                map.addOverlay(marker);
                map.closeInfoWindow();
            }
       }
    }
    request.send(null);
    return false;
}

function createMarker(latlng, html, iconImage) {
    if(iconImage) {
        var icon = new GIcon();
        icon.image = iconImage;
        icon.iconSize = new GSize(25, 25);
        icon.iconAnchor = new GPoint(14, 25);
        icon.infoWindowAnchor = new GPoint(14, 14);
        var marker = new GMarker(latlng,icon);
    } else {
        var marker = new GMarker(latlng,icon_berg);
    }
    GEvent.addListener(marker, 'click', function() {
        var markerHTML = html;
		map.setCenter(latlng, 13);
		infobar = document.getElementById("info-content");
		infobar.innerHTML = markerHTML;
        marker.openInfoWindowHtml(markerHTML);
    });
    return marker;
}

function retrieveMarkers() {
    var request = GXmlHttp.create();

    //tell the request where to retrieve data from.
    request.open('GET', 'retrieveMarkers.php', true);

    //tell the request what to do when the state changes.
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
              var xmlDoc = request.responseXML;

              markers = xmlDoc.documentElement.getElementsByTagName("marker");
              for (var i = 0; i < markers.length; i++) {
                   var lng = markers[i].getAttribute("lng");
                   var lat = markers[i].getAttribute("lat");
                   //check for lng and lat so MSIE does not error
                   //on parseFloat of a null value
                   if(lng && lat) {
                      var latlng = new GLatLng(parseFloat(lat),parseFloat(lng));
                      var html = '<div style="font-size:12px;"><b>Name des Felsen</b><br />'
                            + markers[i].getAttribute("found")
                            + '</div><div style="font-size:12px;"><b>Kommentar</b><br />'
                            + markers[i].getAttribute("left")
                            + '</div>';

                      var iconImage =  markers[i].getAttribute("icon");
                      var marker = createMarker(latlng, html, iconImage);
                      map.addOverlay(marker);
                   }
              } //for
        } //if
    } //function

    request.send(null);
}


function changeBodyClass(from, to) {
	document.body.className = document.body.className.replace(from, to);
return false;
}

function fit_map()	{
 var woldview = new GLatLng(51.28940590271679,11.66748046875);
 map.setCenter(woldview, 6, G_HYBRID_MAP);
}