var map;
var centerLatitude = 20;
var centerLongitude = 25; 
var startZoom = 2;
var gmarkers = [];


// Create our colored marker icon 
var baseIcon = new GIcon();
baseIcon.shadow= "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
baseIcon.iconSize = new GSize(12, 20);
baseIcon.shadowSize = new GSize(22, 20);
baseIcon.iconAnchor = new GPoint(6, 10);
baseIcon.infoWindowAnchor = new GPoint(3, 3);

var gicons = [];
gicons["1"] = new GIcon(baseIcon,"img/icon/01.png");
gicons["2"] = new GIcon(baseIcon,"img/icon/02.png");
gicons["3"] = new GIcon(baseIcon,"img/icon/03.png");
gicons["4"] = new GIcon(baseIcon,"img/icon/04.png");
gicons["5"] = new GIcon(baseIcon,"img/icon/05.png");
gicons["6"] = new GIcon(baseIcon,"img/icon/06.png");
gicons["7"] = new GIcon(baseIcon,"img/icon/07.png");


// height 100%
function windowHeight() {
	// Standard browsers (Mozilla, Safari, etc.)
	if (self.innerHeight)
		return self.innerHeight;
	// IE 6
	if (document.documentElement && document.documentElement.clientHeight)
		return document.documentElement.clientHeight;
	// IE 5
	if (document.body)
		return document.body.clientHeight;
	// Just in case.
	return 0;
}

function handleResize() {
	var height = windowHeight() - document.getElementById('header').offsetHeight - 22;
	document.getElementById('map').style.height = height + 'px';
	document.getElementById('tabcontent').style.height = height - 30 + 'px';
}

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

function makeSidebar(icon) { 
	for (var i=0; i<gmarkers.length; i++) {
	var html = "<select onchange=myclick(this.value) width='170'><option>Bitte Projekt w&auml;hlen</option>";
	 for (var i=0; i<gmarkers.length; i++) {
	  if (gmarkers[i].myicon == icon) {
		 html += '<option value='+i+'>' + gmarkers[i].mycountry.substring(0,40) + ": " + gmarkers[i].mylabel.substring(0,40);
	   }
	  if (gmarkers[i].myicon2 == icon) {
		 html += '<option value='+i+'>' + gmarkers[i].mycountry.substring(0,40) + ": " + gmarkers[i].mylabel.substring(0,40);
	   }
	  if (gmarkers[i].myicon3 == icon) {
		 html += '<option value='+i+'>' + gmarkers[i].mycountry.substring(0,40) + ": " + gmarkers[i].mylabel.substring(0,40);
	   }
	  if (gmarkers[i].myicon4 == icon) {
		 html += '<option value='+i+'>' + gmarkers[i].mycountry.substring(0,40) + ": " + gmarkers[i].mylabel.substring(0,40);
	   }
	  if (gmarkers[i].myicon5 == icon) {
		 html += '<option value='+i+'>' + gmarkers[i].mycountry.substring(0,40) + ": " + gmarkers[i].mylabel.substring(0,40);
	   }
	 }
	 html += '</select>';
	 document.getElementById(icon+'sidebar').innerHTML = html;
   } 
}

function groupclick() {
	groupID = parseFloat(document.getElementById("vereine").value.split(",")[0]);
	lat = parseFloat(document.getElementById("vereine").value.split(",")[1]);
	lng = parseFloat(document.getElementById("vereine").value.split(",")[2]);
	scale = parseInt(document.getElementById("vereine").value.split(",")[3]);
	var html = "";
	for (var i=0; i<gmarkers.length; i++) {
	gmarkers[i].closeInfoWindow();
	if (groupID == 99) {
	gmarkers[i].show();
	}
	else if (gmarkers[i].mygroupID == groupID) {
	html += '<a href="javascript:myclick(' + i + ')"><div class="v_left"><img src="img/icon/0' + gmarkers[i].myicon +'.png" align="absmiddle"><img src="img/icon/0' + gmarkers[i].myicon2 +'.png" align="absmiddle"><img src="img/icon/0' + gmarkers[i].myicon3 +'.png" align="absmiddle"><img src="img/icon/0' + gmarkers[i].myicon4 +'.png" align="absmiddle"><img src="img/icon/0' + gmarkers[i].myicon5 +'.png" align="absmiddle"></div><div class="test"><div class="v_right"><strong> ' + gmarkers[i].mycountry.substring(0,40) + ":</strong> " + gmarkers[i].mylabel + '</div></div></a><br style="clear:both;">';
	gmarkers[i].show(groupID);
	} else {
	gmarkers[i].hide(groupID);
	}
	}
	if (groupID < 98) {
	html += '<img src="img/logos/' + groupID + '_.gif" style="padding-top:30px; align:right;">';
	}
	document.getElementById("groupbar").innerHTML = html;
	map.setCenter(new GLatLng(lat,lng),scale);
}

function show() {
	for (var i=0; i<gmarkers.length; i++) {
	  if (gmarkers[i].myicon < 8) {
		gmarkers[i].show();
        gmarkers[i].closeInfoWindow();
	  }
	}
	var center = new GLatLng(centerLatitude, centerLongitude);
	map.setCenter(center, startZoom);
}

function myclick(i) {
	GEvent.trigger(gmarkers[i], "click");
} 
	  
function init() {
	if (GBrowserIsCompatible()) {
		handleResize();
		map = new GMap2(document.getElementById("map"));
		var center = new GLatLng(centerLatitude, centerLongitude);
		map.setCenter(center, startZoom);
		map.setMapType(G_PHYSICAL_MAP);
		map.addControl(new GLargeMapControl());	 
		map.addControl(new GScaleControl());
		map.enableContinuousZoom();
		map.enableScrollWheelZoom();
		
		GDownloadUrl("inc/markers_080701.xml", function(data, responseCode) {
		  var xml = GXml.parse(data);
		  var markers = xml.documentElement.getElementsByTagName("marker");
		  for (var i = 0; i < markers.length; i++) {
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
									parseFloat(markers[i].getAttribute("lng")));
			var label = markers[i].getAttribute("label");
			var icon = markers[i].getAttribute("icon");
			var icon2 = markers[i].getAttribute("icon2");
			var icon3 = markers[i].getAttribute("icon3");
			var icon4 = markers[i].getAttribute("icon4");
			var icon5 = markers[i].getAttribute("icon5");
			var country = markers[i].getAttribute("country");
			var groupID = markers[i].getAttribute("groupID");
			var group = markers[i].getAttribute("group");
			
			// get the tab info
			tabInfo = markers[i].getElementsByTagName("tab");
			tabs = new Array();
			if (tabInfo.length > 0) {
			// alert("processing "+tabInfo.length+" tabs");
			for (var j = 0; j < tabInfo.length; j++) {
			   var tabLabel = getNodeValue(tabInfo[j].getElementsByTagName("label"));
			   var tabHtml = getNodeValue(tabInfo[j].getElementsByTagName("contents"));
			   // alert("point["+i+"] tab["+j+"] label="+tabLabel+", contents="+tabHtml);
			   if ((j==0) && (tabInfo.length > 2)){ //  adjust the width so that the info window is large enough for this many tabs
				  tabHtml = '<div class="balloon">' + tabHtml + '</div>';
			   }
			   tabs.push(new GInfoWindowTab(tabLabel,tabHtml));
			}
			} else { 
			// alert("no tabs point "+i);
			var tabLabel = "Nothing";
			var tabHtml = markers[i].getAttribute("html");
			tabs.push(new GInfoWindowTab(tabLabel,tabHtml));
			}      
			
			// create the marker
			var marker = createTabbedMarker(point,label,tabs,icon,icon2,icon3,icon4,icon5,country,groupID,group);
			map.addOverlay(marker);
			}
		makeSidebar("1");
		makeSidebar("2");
		makeSidebar("3");
		makeSidebar("4");
		makeSidebar("5");
		makeSidebar("6");
		makeSidebar("7");
		});

		GEvent.addListener(map, 'resize', function() {
			map.setCenter(center, startZoom);
		});
		changeBodyClass('loading', 'standby');
	}
}


window.onresize = handleResize;
window.onload = init;
window.onunload = GUnload;


// the icon information is passed to this function
function createTabbedMarker(point,label,tabs,icon,icon2,icon3,icon4,icon5,country,groupID,group) {
	var marker;
    marker = new GMarker(point,gicons[icon]);
	marker.myicon = icon;                                 
	marker.myicon2 = icon2;                                 
	marker.myicon3 = icon3;                                 
	marker.myicon4 = icon4;                                 
	marker.myicon5 = icon5;                                 
	marker.mylabel = label;
	marker.mycountry = country;
	marker.mygroupID = groupID;
	marker.mygroup = group;
	var marker_num = gmarkers.length;
	marker.marker_num = marker_num;
	marker.tabs = tabs;
	gmarkers[marker_num] = marker;
	
	GEvent.addListener(gmarkers[marker_num], "click", function() {
	  marker.openInfoWindowTabsHtml(gmarkers[marker_num].tabs, {maxWidth:350, maxHeight:windowHeight() - 320, autoScroll:true});
	  if (map.getZoom()<3) {
      map.setZoom(4);
	  }
	});
	return marker;
}
  


function getNodeValue(Element) {
if ((Element.length>0) && Element[0] && Element[0].firstChild && Element[0].firstChild.nodeValue)
return Element[0].firstChild.nodeValue;
}

function createMarker(latlng, html) {
var marker = new GMarker(latlng);
GEvent.addListener(marker, 'click', function() {
var markerHTML = html;
marker.openInfoWindowHtml(markerHTML);
});
return marker;
}






// Code was implemented with the help of the book 
// "Beginning Google Maps Applications with PHP and Ajax"
// by Purvis, Sambells, Turner and the tutorials written by
// the Blackpool Community Church Javascript Team
// econym.googlepages.com/index.htm - Thanks!