$(document).ready(function() {
	//	declare global variables
	
	var map, cluster;
	var markersidebar = document.getElementById('markersidebar');
	var gmarkers = [];
	var htmls = [];
	var iconOptions = {};
		if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map_jae"));
		
		//initiale Zoomstufe für das PNG für Boundarie-Berechnung
      	map.setCenter(new GLatLng(50.8,6.7), 4);
		var customUI = map.getDefaultUI();
        customUI.maptypes.physical = false;
        map.setUI(customUI);
		var marker, markersArray;
		var markersArray = [];
	
		

		
		var infoIconOptions = {};
		infoIconOptions.width = 36;
		infoIconOptions.height = 36;
		infoIconOptions.primaryColor = "#FFFFFF";
		infoIconOptions.cornerColor = "#EEEEEE";
		infoIconOptions.strokeColor = "#000000";

      	var style = [{
	        url: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/images/m3.png',
	        height: 66,
	        width: 65,
	        opt_anchor: [26, 0],
	        opt_textColor: '#ffffff'
      		},
      		{url: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/images/m3.png',
	        height: 56,
	        width: 55,
	        opt_anchor: [16, 0],
	        opt_textColor: '#ffffff'
      		},
      		{url: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/images/m3.png',
	        height: 66,
	        width: 65,
	        opt_anchor: [16, 0],
	        opt_textColor: '#ffffff'
      		},
      	
      	]
      	
     	
		var myIcon = new GIcon();
		myIcon.image = '/images/chart-1.png';
		myIcon.shadow = 'http://maps.gstatic.com/intl/de_ALL/mapfiles/shadow50.png';
		myIcon.iconSize = new GSize(32,32);
		myIcon.shadowSize = new GSize(48,32);
		myIcon.iconAnchor = new GPoint(16,32);
		myIcon.infoWindowAnchor = new GPoint(16,0);	
		myIcon.printImage = 'http://maps.gstatic.com/intl/de_ALL/mapfiles/printImage.gif';
		myIcon.mozPrintImage = 'http://maps.gstatic.com/intl/de_ALL/mapfiles/mozPrintImage.gif';
		myIcon.printShadow = 'http://maps.gstatic.com/intl/de_ALL/mapfiles/dithshadow.gif';
		myIcon.transparent = 'http://maps.gstatic.com/intl/de_ALL/mapfiles/transparent.png';
		myIcon.imageMap = [19,0,21,1,22,2,23,3,23,4,24,5,24,6,24,7,24,8,24,9,24,10,24,11,23,12,23,13,22,14,22,15,21,16,20,17,19,18,19,19,18,20,18,21,18,22,17,23,17,24,17,25,17,26,17,27,17,28,17,29,17,30,17,31,14,31,14,30,14,29,14,28,14,27,14,26,14,25,14,24,13,23,13,22,13,21,13,20,12,19,11,18,11,17,10,16,9,15,9,14,8,13,7,12,7,11,7,10,7,9,7,8,7,7,7,6,7,5,8,4,8,3,9,2,10,1,12,0];
			
		var markerOptions = {icon:myIcon};
		
		

	    function readData() {
        	GDownloadUrl("/includes/jae.xml", function(data) {		          var xml = GXml.parse(data);
		          var markers = xml.documentElement.getElementsByTagName("marker");
				  var markersArray = [];
	
		          for (i = 0; i < markers.length; i++) {
			            var id 	= markers[i].getAttribute("id");
			            var lat = markers[i].getAttribute("lat");
			            var lng = markers[i].getAttribute("lng");
			            var agenturName = markers[i].getAttribute("agenturName");
			       		var agenturAbbr = markers[i].getAttribute("agenturAbbr");
			            var agenturZip = markers[i].getAttribute("agenturZip");
			            var agenturUrl = markers[i].getAttribute("agenturUrl");

			          	var agenturZip = markers[i].getAttribute("agenturZip");
						var agenturCity = markers[i].getAttribute("agenturCity");
						var agenturCountry = markers[i].getAttribute("agenturCountry");
						var agenturPic = markers[i].getAttribute("agenturPic");
							
						
						
						
						var picHtml='<img src="'+ agenturPic +'" alt="'+ agenturAbbr +'" style="width:16px; height:11px; margin: 0 10px 0 0; float: left;"/>';
						

						
						if (agenturUrl.length > 7){
						var jaeName = '<h3 style="clear:none"><a href="' + agenturUrl + '" title="externer Link">' + agenturUrl + '</a></h3>';
						} 
						else {
						var jaeName = "<h3 style='clear:none'>"+ agenturName + "</h3>";
						}
						

		
											
						var ort = '<div style="margin: 0 0 0 20px">' + agenturCity + ' ' + agenturCountry + '</div>';

						
						var htmlmarker = "<span class='infomarker'><h3>" + jaeName + "</h3>" + picHtml  + ort +'</span>';

          				
          			var latlng = new GLatLng(lat, lng);
					var marker= new GMarker(latlng, markerOptions);
	    			var fn = markerClickFn(markers[i], latlng, htmlmarker);

	    			if (document.getElementById("markersidebar")){
		    			var markersidebar = document.getElementById("markersidebar");
		    	    	var li = document.createElement('li');
	   				    var html = "<a title="+ agenturAbbr +">"+ picHtml + agenturName + "</a>";
					    li.innerHTML = html;
					    li.style.cursor = 'pointer';
					    markersidebar.appendChild(li);

	    				}

		        	GEvent.addListener(marker, "click", fn);
			        GEvent.addDomListener(li, "click", fn);
			    	map.addOverlay(marker);
	    			markersArray.push(marker);
 		
            			
            		}
		    });	
         		 					
		}
		
		readData();	
	}	

	function markerClickFn(marker, latlng, htmlmarker) {
     return function() {   
        map.openInfoWindowHtml(latlng, htmlmarker,{maxWidth:160} );
     };
   	}
   	
	map.getContainer().style.overflow="hidden"; 

   	
   	
 
    
	
});