var centerLatitude = 50.08663;
var centerLongitude = 14.41428;
var startZoom = 2;

var map;

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

    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();

	        inputForm.innerHTML = '<fieldset style="width:150px;">'
	              + '<legend>New Marker</legend>'
	              + '<label for="found">Nazev</label>'
	              + '<input type="text" id="found" style="width:100%;"/>'
	              + '<label for="left">Popis</label>'
	              + '<input type="text" id="left" style="width:100%;"/>'
	              + '<label for="left">Zvolte ikonu</label>'
	              + '<select id="icon" flash="select">'
	              + '<option value="">-- vyberte ikonu --</option>'
	              + '<option value="fitko.jpg">Fitness centrum</option>'
	              + '<option value="solarko.jpg">Solárium</option>'
	              + '<option value="pilates.jpg">Pilates</option>'
	              + '<option value="aerobik.jpg">Aerobik</option>'
	              + '</select>'
	              + '<input type="submit" value="Save"/>'
	              + '<input type="hidden" id="longitude" value="' + lng + '"/>'
	              + '<input type="hidden" id="latitude" value="' + lat + '"/>'
	              + '</fieldset>';


        }
    });

}

window.onload = init;

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.shadow = "http://www.muzeumkarlovamostu.cz/templates/muzeum/_images/google-map-white-bg.png";
icon.iconSize = new GSize(30, 30);
icon.iconAnchor = new GPoint(30, 30);
icon.infoWindowAnchor = new GPoint(14, 14);
var marker = new GMarker(latlng,icon);
} else {
var marker = new GMarker(latlng);
}
GEvent.addListener(marker, 'click', function() {
var markerHTML = html;
marker.openInfoWindowHtml(markerHTML);
});
return marker;
}

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

    //tell the request where to retrieve data from.
    request.open('GET', 'http://www.muzeumkarlovamostu.cz/includes/js/retrieveMarkers.php', true);

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

              var 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-family:arial;font-size:0.8em><img src='+markers[i].getAttribute("icon")+'>'
					  		+ '<br><br>Fotosoutěž <a href=http://www.muzeumkarlovamostu.cz/svet-jana-nepomuckeho/>Svět Jana Nepomuckého</a><br> '+markers[i].getAttribute("address")+' '
                            + '</div>';

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

    request.send(null);
}