/***********************************************************
Authors:
	- Diederik Waardenburg
	- Rinse Stellingwerf
	
Description:
	- Javascript functions for PTK Google Maps section.
	
Date created:
	- 20/03/08
	
Update log:
	- 20/03/08: Moved all Javascript functions.
	- 21/03/08: Added subcategories.
	- 01/04/08: Added custom controls.
	- 16/04/08: Updated custom controls.
	- 28/04/08: Updated toggleCategory() function for live version.
	- 29/04/08: Added toggleClass() function.
	- 09/05/08: Splitted this file into 2 seperate files.
	- 15/05/08: Initialization moved to xload.
	- 15/05/08: Pathnames of buttons changed.
	- 15/05/08: createPTKMap moved to generated code.
	- 21/05/08: Updated serval functions for use with generated IDs.
	- 22/05/08: Added getElementsByClassName() function.
	- 23/05/08: Rewrite to table structure.
	- 26/05/08: Added xload().
	- 26/05/08: Merged xload() with initialize and removed function.
	- 27/05/08: Edited the createPTKIcon() to solve IE6 & FireFox problems.
	- 28/05/08: Rewrite of getElementsByClassName() function.
	- 30/05/08: Added map description.
	- 30/05/08: Added resetForm() function (used for FireFox and history.back() event).
	- 30/05/08: Added toggleMarkersOnHistoryBack() function.
	- 12/09/08: Set initializeMarkers to "true" as default, updated initialze() function.
	- 13/02/09: Added sMapDiv to be able to have more then one map on a page.
	- 18/03/09: Added extra function calls to "Kwaliteitsatlas" functions. 
	- 18/03/09: Added quickZoom() function.
	- 18/03/09: Added changeMapType() function. 
	- 31/03/09: Added icon(s) replace check for "De Kwaliteitsatlas".
	- 24/08/09: Added kmls, array containing multiple kml-files
	- 17/09/09: Added call getKMLFiles(), toggleStateKML().
	- 24/09/09: Added extra checks for getKMLFiles().
	- 20/11/09: Added initializeGoogleMaps() METT exception.
	- 24/11/09: Added writeKMLToggles() function.
	- 30/11/09: Changed GLargeMapControl to GLargeMapControl3D.
	- 17/12/09: Added KMZ support.
	- 05/02/10: Modified the createMap() function to open KML links in the same window.
	- 24/02/10: Disabled mouse scroll zoom.
	- 24/02/10: Added addKMLOverlay() function.
	- 25/02/10: Replaced 0-9 in KML file names.
************************************************************/

// Globals
var latitude;
var longitude;
var zoomLevel;
var map;
var icons;
var markers;
var initializeMarkers;
var kmlFiles = Array();
var kmlObjects = Array();

// Initialize!
initialize();

// Create PTK icon.
function createPTKIcon(image, iconAnchor, infoWindowAnchor)
{
	var icon = new GIcon();
	icon.image = image;
	
	// Rinse (27-05-08): Disabled these lines, because they caus problems with IE6 and FireFox.
	// img = new Image();
	// img.src = image;
	// icon.iconSize = new GSize(21, 21);
	
	icon.iconAnchor = iconAnchor;
	icon.infoWindowAnchor = infoWindowAnchor;
	
	return icon;
}

// Create PTK marker.
function createPTKMarker(pointMarker, titleMarker, shortTextMarker, fullTextMarker, iconMarker)
{
	var marker = createMarker(pointMarker, titleMarker, shortTextMarker, fullTextMarker, iconMarker);
	
	return marker;
}

// Toggle markers for a specific category.
function togglePTKMarkers(checkbox)
{
	// Get categoryID from checkbox ID.
	var categoryID = checkbox.id.substring(checkbox.id.lastIndexOf("_") + 1, checkbox.id.length);
	var generatedID = checkbox.id.replace("_categoryCheckbox_" + categoryID, "");
	
	for (var i = 0; i < markers.length; i++) 
	{
		if (markers[i].getIcon() == icons[categoryID])
		{
			// Check if checkbox is checked or unchecked.
			if (checkbox.checked)
			{
				//Add marker(s) to map.
				map.addOverlay(markers[i]);	
			}
			else
			{
				// Remove marker(s) from map.
				map.removeOverlay(markers[i]);
			}			
		}
	}
	
	// Get (sub)category list.
	var categoryList = getElementsByClassName("parentCategory_" + categoryID);
	
	// Check for subcategories.
	if (categoryList)
	{
		for(i = 0; i < categoryList.length; i++)
		{
			// Get input field for this row.			
			var categoryInputField = categoryList[i].getElementsByTagName("input");	
			
			if (categoryInputField[0].checked != checkbox.checked)
			{
				// Toggle marker(s).
				categoryInputField[0].click();
			
				// Check or uncheck subcategory checkbox.
				categoryInputField[0].checked = checkbox.checked;
			}
		}		
	}
	
	// Show subcategories.
	toggleCategory(checkbox)
}

// Toggle (sub)categories.
function toggleCategory(object)
{	
	var displayCategory = true;
	var displayCategoryList = new Array();
	
	var	categoryID = object.id.substring(object.id.lastIndexOf("_") + 1, object.id.length);
	
	if (object.type == "checkbox")
	{		
		var generatedID = object.id.replace("_categoryCheckbox_" + categoryID, "");
	}
	else
	{		
		var generatedID = object.id.replace("_categoryBullet_" + categoryID, "");
	}
	
	var categoryRow = document.getElementById("category_" + categoryID);
	var categoryCheckbox = document.getElementById(generatedID + "_categoryCheckbox_" + categoryID);
	var categoryBullet = document.getElementById(generatedID + "_categoryBullet_" + categoryID);
	var categoryList = getElementsByClassName("parentCategory_" + categoryID);
	
	// Check if category has subcategories.
	if (categoryList)
	{
		// Check if the object that triggered this event is a checkbox or an image/href.
		if (object.type == "checkbox")
		{
			if (categoryCheckbox.checked == false)
			{
				displayCategory = false;
			}
			
			// Fill array.
			for(i = 0; i < categoryList.length; i++)
			{				
				displayCategoryList[i] = displayCategory;
			}
		}
		else
		{
			// Check if category row should be displayed or hidden.
			for(i = 0; i < categoryList.length; i++)
			{				
				if (categoryList[i].style.display == null || categoryList[i].style.display == "")
				{
					displayCategory = false;
				}
				
				// Fill array.
				displayCategoryList[i] = displayCategory;
			}			
		}
		
		// Loop through array and display categories that should be displayed.
		for(j = 0; j < categoryList.length; j++)
		{
			// Show or hide categories.
			if (displayCategoryList[j])
			{
				// Show categories.
				categoryList[j].style.display = "";
				
				if (categoryBullet)
				{	
					// Change plus  button into min button.
					categoryBullet.src = "communities/common/themes/nmu/images/menu/bullet_onder.gif";
				}
			}		
			else
			{
				// Hide categories.			
				categoryList[j].style.display = "none";
				
				if (categoryBullet)
				{
					// Change min  button into plus button.
					categoryBullet.src = "communities/common/themes/nmu/images/menu/bullet_rechts.gif";
				}
			}			
		}
		
		// Change CSS class of current parent row (select).
		if (categoryRow.className.indexOf("parentCategory_") == -1)
		{
			// Reset CSS class of selected parent rows (deselect).
			toggleClass("categoryCurrent", ""); 
			
			// Set CSS class of selected parent.
			if (categoryRow.className != "")
			{			
				categoryRow.className = categoryRow.className + " categoryCurrent";
			}
			else
			{			
				categoryRow.className = "categoryCurrent";
			}
		}
	}
}

// Get all elements with the specified class name.
function getElementsByClassName(className)
{
	// Only search through the table rows (faster).
	// var tagName = "*";
	var tagName = "tr";
	
	// Custom getElementsByClassName function().
	document.getElementsByClassName = function (className) 
	{	
		var i = 0;
		var classesArray = new Array();
		var objectsArray = document.getElementsByTagName(tagName); 
		var classNamesToCheck = new Array();
		
		for (j = 0; j < objectsArray.length; j++)
		{
			// Check if element has more then one class, if so, split classname.			
			if (objectsArray[j].className.indexOf(" ") != -1)
			{				
				classNamesToCheck = objectsArray[j].className.split(" ");				
			}
			else
			{
				classNamesToCheck[0] = objectsArray[j].className;
			}
			
			// Check if classname of the element matches the given class.
			for (k = 0; k < classNamesToCheck.length; k++)
			{
				if (classNamesToCheck[k] == className)
				{ 
					classesArray[i] = objectsArray[j]; i++; 
				}
			}
		} 
		
		return classesArray; 
	} 
	
	// Get all objects with the current class name. 
	return document.getElementsByClassName(className);
}

// Toggle CSS class(es).
function toggleClass(currentClassName, newClassName)
{	
	// Get all elements with the specified class name.
	var objectsArray = getElementsByClassName(currentClassName);
	
	// Toggle all objects with the current class to the new class.	
	for (i = 0; i < objectsArray.length; i++)
	{		
		objectsArray[i].className = objectsArray[i].className.replace(currentClassName, newClassName);
		objectsArray[i].className = objectsArray[i].className.replace(" ", "");		
	} 
}

// Initialize.
function initialize()
{
    // Generate map, with controls and set the initial location.
    if (typeof(createPTKMap) == 'function')
	{
        map = createPTKMap();
		
        if (map)
		{            
			// Add zoom via mouse double click.
			map.enableDoubleClickZoom();
			
			// Add zoom via mouse scroll wheel.
			// map.enableScrollWheelZoom();
			
            // Generate icons.
            icons = createPTKIcons();

            // Kwaliteitsatlas custom code.
            if (typeof (initializeGemeenten) == 'function' && typeof (initializeGebieden) == 'function')
            {
                // Change default icon.
                icons[0] = createPTKIcon("/communities/common/themes/kwaliteitsatlas/images/icons/icon_reactie.png", new GPoint(10, 10), new GPoint(25, 5));

                // Replace Kwaliteitsatlas "denk mee" icons.
                for (i = 1; i < icons.length; i++)
                {
                    var iconImage = icons[i].image;

                    // Neutral icon.
                    if (iconImage == "/icon_neutral.gif")
                    {
                        icons[i].image = "/icon_project_neutral.png";
                    }

                    // Positive icon.
                    if (iconImage == "/icon_positive.gif")
                    {
                        icons[i].image = "/icon_project_positive.png";
                    }

                    // Negative icon.
                    if (iconImage == "/icon_negative.gif")
                    {
                        icons[i].image = "/icon_project_negative.png";
                    }
                }
            }

            // Set up markers with info windows.
            markers = createPTKMarkers(map, icons);

            // Get KML files.
			if (typeof (getKMLFiles) == 'function')
			{
				kmlFiles = getKMLFiles();
			}
			
			// Create KML overlays.
            createPTKXmlOverlay(map, kmlFiles);
			
            // LatLonglistener
            createPTKLatLongListener(map);
			
            // Rinse (12-09-08):
            // initializeMarkers = true;
			
            // Initialize markers.
            if (initializeMarkers) 
			{                
				// Get all input fields.
                var inputList = document.getElementsByTagName("input");
				
                // Toggle all checkboxes and show all subcategories.
                for (i = 0; i < inputList.length; i++) {
                    if (inputList[i].id) {
                        // Only get the category checkboxes.
                        if (inputList[i].id.indexOf("_categoryCheckbox_") != -1) {
                            var categoryID = inputList[i].id.substring(inputList[i].id.lastIndexOf("_") + 1, inputList[i].id.length);
							
                            // Check all checkboxes.
                            inputList[i].checked = true;
							
                            // Show all hidden subcategory rows.
                            document.getElementById("category_" + categoryID).style.display = "";
                        }
                    }
                }
				
                // Show all markers.
                if (markers) {
                    for (var j = 0; j < markers.length; j++) {
                        // Place the markers on the map.
                        map.addOverlay(markers[j]);
                    }
                }
            }
			
            // Reset checkboxes.
            // resetForm();}
        }
    }

    // Initialize "Kwaliteitsatlas gemeenten & gebieden" (if function exists).
    if (typeof (initializeGemeenten) == 'function' && typeof (initializeGebieden) == 'function')
    {
        var gemeenten = initializeGemeenten(latitude, longitude, zoomLevel);
        var gebieden = initializeGebieden(latitude, longitude, zoomLevel);
    }
	
	// Show legend in the right column (Mett template).
	if (typeof (initializeGoogleMaps) == 'function')
	{
		initializeGoogleMaps();
	}
}

// Create custom pan & zoom control.
function createPanZoomControl(map)
{
	var panZoomControl = function(ptkMap)
	{
		this.ptkMap = ptkMap;
	};    
	
	panZoomControl.prototype = new GControl(true, false);
    panZoomControl.prototype.initialize = function ()
	{       
		// Create control container.
		var controlContainer = document.createElement("div");
		controlContainer.id = "panZoomControl";
		controlContainer.style.width = "43px";
		controlContainer.style.height = "82px";		
		controlContainer.style.backgroundImage = "url(Communities/Common/Images/NMU/buttons/buttons_google_maps_left.gif)";
		controlContainer.style.backgroundRepeat = "no-repeat";				
		
		// Create control elements.
		var panUp = document.createElement("div");
		var panDown = document.createElement("div");
		var panLeft = document.createElement("div");
		var panRight = document.createElement("div");		
		var zoomIn = document.createElement("div");
		var zoomOut = document.createElement("div");
		var center = document.createElement("div");
		
		// Create control styles.		
		panUp.style.cssText = "cursor:pointer; width:13px; height:13px; margin-left:15px; overflow:hidden;";
		panLeft.style.cssText = "cursor:pointer; float:left; width:13px; height:13px; margin-top:2px; overflow:hidden;";
		center.style.cssText = "cursor:pointer; float:left; width:13px; height:13px; margin:2px 0px 0px 2px; overflow:hidden;";
		panRight.style.cssText = "cursor:pointer; float:left; width:13px; height:13px; margin:2px 0px 0px 2px; overflow:hidden;";
		panDown.style.cssText = "cursor:pointer; clear:both; width:13px; height:13px; margin:2px 0px 0px 15px; overflow:hidden;";
		zoomIn.style.cssText = "cursor:pointer; width:13px; height:13px; margin:11px 0px 2px 15px; overflow:hidden;";
		zoomOut.style.cssText = "cursor:pointer; width:13px; height:13px; margin-left:15px; overflow:hidden;";
		
		// Create control events.
		GEvent.addDomListener(panUp, "click", function()
		{ 
			map.panDirection(0, 1)
		});
			
		GEvent.addDomListener(panLeft, "click", function()
		{ 
			map.panDirection(1, 0);
		});
		
		GEvent.addDomListener(center, "click", function()
		{		
			map.setCenter(new GLatLng(latitude, longitude, zoomLevel));
		});
		
		GEvent.addDomListener(panRight, "click", function()
		{
			map.panDirection(-1, 0);
		});
		
		GEvent.addDomListener(panDown, "click", function()
		{
			map.panDirection(0, -1);
		});
		
		GEvent.addDomListener(zoomIn, "click", function()
		{
			map.zoomIn();
		});
		
		GEvent.addDomListener(zoomOut, "click", function()
		{ 
			map.zoomOut();
		});
		
		// Append controls to container.
		controlContainer.appendChild(panUp);
		controlContainer.appendChild(panLeft);
		controlContainer.appendChild(center);
		controlContainer.appendChild(panRight);
		controlContainer.appendChild(panDown);		
		controlContainer.appendChild(zoomIn);
		controlContainer.appendChild(zoomOut);
		
		// Append controls to  map.
		this.ptkMap.getContainer().appendChild(controlContainer);
		
		// Return container.
		return controlContainer;
	}
	
	// Place control.
	panZoomControl.prototype.getDefaultPosition = function ()
	{
		return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 10));
	};
	
	// Return control.
	return panZoomControl = new panZoomControl(map);
}

// Create custom maptype control.
function createMapTypeControl(map, controlText)
{
	var controlType;
	var controlPosition;
	
	// Set control type and position depending on the controlText property.
	if (controlText == "kaart")
	{
		controlType = G_NORMAL_MAP
		controlPosition = 136;
	}
	else if (controlText == "satelliet")
	{
		controlType = G_SATELLITE_MAP
		controlPosition = 73;
	}		
	else
	{
		controlType = G_PHYSICAL_MAP
		controlPosition = 10;
	}
	
	var mapTypeControl = function(ptkMap) 
	{
		this.ptkMap = ptkMap; 
		this.controlText = controlText; 
	};
    
	mapTypeControl.prototype = new GControl(true, false);
    mapTypeControl.prototype.initialize = function ()	
	{
		// Create control container.
		var container = document.createElement("div");
		
		// Set container properties.
		container.innerHTML = "<span style='display:block; height:20px; color:#ffffff;'>" + this.controlText + "</span>";
		container.id = "mapTypeControl_" + this.controlText;
		container.style.cursor = "pointer";
		container.style.width = "58px";
		container.style.height = "20px";		
		container.style.textAlign = "center";		
		container.style.backgroundImage = "url(Communities/Common/Images/NMU/buttons/button_google_maps_right.gif)";
		container.style.backgroundRepeat = "no-repeat";
		
		// Event handler.		
		GEvent.addDomListener(container, "click", function()
		{ 
			// Normal map type.
			map.setMapType(controlType);
			
			// Set control text to normal.			
			document.getElementById("mapTypeControl_kaart").style.fontWeight = "normal"; 
			document.getElementById('mapTypeControl_satelliet').style.fontWeight = "normal";
			document.getElementById('mapTypeControl_terrein').style.fontWeight = "normal";
			
			// Set control text to bold when clicked.
			container.style.fontWeight = "bold";		  
		 }); 
		
		// Append controls to the map.
		this.ptkMap.getContainer().appendChild(container);
		
		// Return container
		return container;
    }
    
	// Place controls on map.
	mapTypeControl.prototype.getDefaultPosition = function () 
	{
		return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(controlPosition, 8));
    }; 
	
	// Return control.
	return mapTypeControl = new mapTypeControl(map);
}

// Create map.
function createMap(dLat, dLong, iZoom, mapDescription, bInitializeMarkers, sMapDiv)
{
	// Set variables.
	latitude = dLat;
	longitude = dLong
	zoomLevel = iZoom;
	initializeMarkers = bInitializeMarkers;
	
	// Display the map, with some controls and set the initial location .
	if (document.getElementById(sMapDiv) != null)
	{
	    var map = new GMap2(document.getElementById(sMapDiv));
		
	    map.setCenter(new GLatLng(dLat, dLong), iZoom);
		
		// Add physical (terrein) map type.
	    map.addMapType(G_PHYSICAL_MAP); 
		
		// Remove hybrid (beide) map type.
		map.removeMapType(G_HYBRID_MAP);
		
	    // Set map description (if available).
	    if (document.getElementById("mapDescription")) 
		{
	        document.getElementById("mapDescription").innerHTML = mapDescription;
	    }
	}
	
	// Open links in KML files in the same window.
	GEvent.addListener(map,"infowindowprepareopen", function(iwtabs) 
	{	
		iwtabs[0].contentElem.innerHTML = iwtabs[0].contentElem.innerHTML.replace("_blank", "_parent"); 
	}); 

	return map;
}

// Create map marker.
function createMapMarker(map, shtml)
{
	// Add click event to the map.
	GEvent.addListener(map, "click", function(overlay, point)
	{
		if (point)
		{
			document.getElementById("text").innerHTML = shtml;
		}
	});  
}

// Create marker.
function createMarker(point, title, text, html, icon)
{
	var marker = new GMarker(point, {title: title, icon: icon});

	GEvent.addListener(marker, "click", function() 
	{
		marker.openInfoWindowHtml(text);		
		ctltext = document.getElementById("text");
		
		if (ctltext)
		{
			ctltext.innerHTML = html;
		}
	});
	
	return marker;
}

// Reset form.
function resetForm()
{
	document.PageForm.reset();
}

// Toggle PTK markers on history.back() event,
function toggleMarkersOnHistoryBack()
{
	// Get all input fields.
	var inputList = document.getElementsByTagName("input");	
	
	for(i = 0; i < inputList.length; i++)
	{		
		if (inputList[i].id)
		{
			// Only get the category checkboxes.
			if (inputList[i].id.indexOf("_categoryCheckbox_") != -1)
			{
				// Check if checkbox is checked.
				if (inputList[i].checked)
				{					
					var categoryID = inputList[i].id.substring(inputList[i].id.lastIndexOf("_") + 1, inputList[i].id.length);
					
					for (var j = 0; j < markers.length; j++) 
					{
						if (markers[j].getIcon() == icons[categoryID])
						{						
							// Place the markers on the map.
							map.addOverlay(markers[j]);
						}
					}
				}
			}
		}
	}
}

// Focus map on specific coordinates.
function quickZoom(selectList, selectedID)
{
	if (selectList.id == "selectGemeenten")
	{
		// Create new "gemeente" object.
		var object = gemeenten[selectedID];
		
		// Reset "gebieden" list.
		document.getElementById("selectGebieden").selectedIndex = 0;
	}
	else
	{
		// Create new "gebied" object.
		var object = gebieden[selectedID];
		
		// Reset "gemeenten" list.
		document.getElementById("selectGemeenten").selectedIndex = 0;
	}
	
	// Focus map. 
	map = createNewMap(object.latitude, object.longitude, object.zoomLevel);
	
	// Change map type.	
	changeMapType(document.getElementById("selectMapType").value);
	
	// Show all markers.
	if (markers)
	{
		for (var j = 0; j < markers.length; j++)
		{
			// Place the markers on the map.
			map.addOverlay(markers[j]);	
		}
	}
}

// Change map type.
function changeMapType(mapType)
{
	if (mapType == "kaart")
	{
		mapType = G_NORMAL_MAP		
	}
	else if (mapType == "satelliet")
	{
		mapType = G_SATELLITE_MAP	
	}		
	else
	{
		mapType = G_HYBRID_MAP		
	}
	
	map.setMapType(mapType);
}

// Create new map.
function createNewMap(latitude, longitude, zoomLevel)
{
	var map = createMap(latitude, longitude, zoomLevel, "", true, "map");
	
	if (map)
	{	
		map.addControl(new GLargeMapControl3D());	
	}
	
	return map;
}

// Load overlays from kmlFiles array.
function createPTKXmlOverlay(map, kmlFiles)
{	
	for (i = 0; i < kmlFiles.length; i++)
	{	
		// Create new KML object.
		var kmlObject = new GGeoXml(kmlFiles[i]);
		
		// Add objects to array so they can be toggled later.
		kmlObjects[i] = kmlObject;		
	}
	
	// Add KML's to the map.
	setTimeout("addKMLOverlay(" + 0 + ")", 1000);
}

// Add KML overlay to the map.
function addKMLOverlay(kmlID)
{
	if (kmlID < kmlObjects.length)
	{
		// Check if KML object is done loading.
		if (kmlObjects[kmlID].hasLoaded())
		{
			// Add the overlay to the map.
			map.addOverlay(kmlObjects[kmlID]);
			
			kmlID = kmlID + 1;
			
			// Load the next KML.
			addKMLOverlay(kmlID);
		}
		else
		{
			// Try again untill KML object is loaded.
			setTimeout("addKMLOverlay(" + kmlID + ")", 1000);
		}
	}
	else
	{
		// Clear timeout.
		clearTimeout();
	}
}

// Toggle KML file.
function toggleKML(kmlID, toggler)
{    
	// Check if KML files array exists.
	if (kmlFiles)
	{	
		// Check if checkbox (toggler) is checked.
		if (toggler.checked)
		{
			// Add KML overlay.
			map.addOverlay(kmlObjects[kmlID]);
		}
		else
		{		
			// Remove KML overlay.
			map.removeOverlay(kmlObjects[kmlID]);
		}		
	}	
}

// Write KML toggles.
function writeKMLToggles(kmls, kmlContainer, kmlContentContainer)
{
	var rowClass;
	
	// KML checkboxes.
	for (i = 0; i < kmls.length; i++)
	{
		if (kmls[i].indexOf(".kml") > 0)
		{
			// KML.
			var kmlName = kmls[i].substring(kmls[i].lastIndexOf("/") + 1, kmls[i].indexOf(".kml"));
		}
		else
		{
			// KMZ.
			var kmlName = kmls[i].substring(kmls[i].lastIndexOf("/") + 1, kmls[i].indexOf(".kmz"));
		}
		
		// Replaces.
		kmlName = kmlName.replace(/_/g, " ");
		kmlName = kmlName.replace(/[0123456789]/g, "");	
		
		var kmlCheckbox = "<input type=\"checkbox\" id=\"kmlCheckbox\" + i + onclick=\"toggleKML(" + i + ", this)\" checked=\"checked\" class=\"inputCheckbox\" />";
		
		if(i % 2 == 0)
		{
			// Normal row.
			rowClass = "googleMapsLegendRow";
		}
		else
		{
			// Alternate row.
			rowClass = "googleMapsLegendAlternateRow";
		}
		
		if (kmls.length > 0)
		{
			// Show KML webbox.
			document.getElementById(kmlContainer).style.display = "block";
			
			// Write row.
			document.getElementById(kmlContentContainer).innerHTML = document.getElementById("webboxContentGoogleMapsLegendKML").innerHTML + "<div class=\"" + rowClass + "\">" + kmlCheckbox + "&nbsp;" + kmlName + "</div>";
		}
	}
}

// Execute on load and history.back();
// window.onload = toggleMarkersOnHistoryBack;