var map = null;
var geocoder = null;
var markerCluster = null;
var urkIcon = null;
var index = 0;
var markerObjects = new Array();
var markerArray = new Array();
var markerObject = new Array();
var current;
var styles = new Array();

function next() {
	var total = parseInt(jQuery("#total").text());
	var actual = parseInt(jQuery("#actual").text());
	if(actual == total) {
		actual = 0;
	}
	jQuery(".maplayer").hide();
	jQuery("#element" + actual).show();
	var next = actual + 1;
	jQuery("#actual").text(next);
}

function prev() {
	var total = parseInt(jQuery("#total").text());
	var actual = parseInt(jQuery("#actual").text());
	if(actual == 1) {
		actual = total;
	}
	jQuery(".maplayer").hide();
	jQuery("#element" + actual).show();
	var next = actual - 1;
	jQuery("#actual").text(next);
}

function initialize() {

	map = new GMap2(document.getElementById("map_canvas"),
		{
			size:new GSize(940,600),
			draggableCursor:"move",
			draggingCursor:"crosshair"
		}
	);

	map.addControl(new GMapTypeControl());
	map.addControl(new GLargeMapControl());
	map.addControl(new GOverviewMapControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(1, 1)));
	map.enableDoubleClickZoom();
	map.disableScrollWheelZoom();
	
	geocoder = new GClientGeocoder();
	
	jQuery('[name=maptype]').click( function() {
		var uid = jQuery(this).val();
		if(current != uid) {
			current = uid;
			map.clearOverlays();
			if(markerCluster != null) {
				markerCluster.clearMarkers();
			}
			var	baseURL = document.baseURI || document.URL;
			var loadUrl = baseURL + "?eID=urkmaps&uid=" + uid;
			jQuery.getJSON(
				loadUrl,
				function(json) {
					if(json) {
						altImage = 'uploads/tx_urkmaps/' + typeObject["types"][uid]["image_single"];
						altImageGroup = 'uploads/tx_urkmaps/' + typeObject["types"][uid]["image_group"];
						markerObject = [];
						markerObject = {"markers": json};
						initMarkers(1);
					}
				}
			);
		}
	});
	
	urkIcon = new GIcon(G_DEFAULT_ICON);
	urkIcon.iconSize = new GSize(13, 23);
	urkIcon.shadowSize = new GSize(0, 0);
	urkIcon.iconAnchor = new GPoint(6, 23);
	urkIcon.infoWindowAnchor = new GPoint(9, 2);
	urkIcon.image = "/fileadmin/templates/main/images/marker.png";
	
	initMarkers();
}

function initMarkers(noCenter) {

	markerArray = [];
	markerObjects = [];
	index = 0;
	
	if(altImage) {
		urkIcon.image = altImage;
	}

	if(altImageGroup) {
		styles = [[{
			url: '/' + altImageGroup,
			height: 42,
			width: 24,
			opt_textColor: '#FFFFFF'
		}]];
	} else {
		styles = [[{
			url: '/fileadmin/templates/main/images/marker_group.png',
			height: 42,
			width: 24,
			opt_textColor: '#FFFFFF'
		}]];
	}

	if(markerObject["markers"].length > 0) {
		var host = document.location.hostname;
		var getMultiple = document.getElementById("map_multiple").value;

		for(var count = 0; count < markerObject["markers"].length; count++) {
			var point = '';
			var address = markerObject["markers"][count]["address"];
			var point = markerObject["markers"][count]["points"].split(', ');
			var splitalias = markerObject["markers"][count]["alias"].split('[]');
			var splittitle = markerObject["markers"][count]["title"].split('[]');

			if(splitalias.length > 1) {
				var total = splitalias.length;
				description = "<span id='actual'>1</span> / <span id='total'>" + total + "</span> <button onclick='next(\"1\");'>Forrige</button> <button onclick='next(\"1\");'>Næste</button>";
				description += "<div style='height:100px;width:300px;overflow:auto;'>";
				for (var i = 0; i < splitalias.length; i++) {
					var alias = splitalias[i];
					var title2 = splittitle[i];
					if(i == 0) {
						description += "<div id='element" + i + "' class='maplayer' style='display:block;'><b>" + title2 + "</b><br /><br />" + address + "<br /><br /><a href='http://" + host + "/" + alias + "'>Læs mere her</a></div>";
					} else {
						description += "<div id='element" + i + "' class='maplayer' style='display:none;'><b>" + title2 + "</b><br /><br />" + address + "<br /><br /><a href='http://" + host + "/" + alias + "'>Læs mere her</a></div>";
					}
					var title = splitalias.length + " artikler";
				}
				description += "</div>";
			} else {
				var alias = markerObject["markers"][count]["alias"];
				var title = markerObject["markers"][count]["title"];
				var description = "<div style='height:100px;width:300px;overflow:auto;'><b>" + title + "</b><br /><br />" + address + "<br /><br /><a href='http://" + host + "/" + alias + "'>Læs mere her</a></div>";
			}
			markerOptions = { icon:urkIcon, title:title };
			if(point[0].length > 0) {
				markerObjects[index] = new Object();
				markerObjects[index]["marker"] = getMarker(new GLatLng(point[0], point[1]), markerOptions, description);
				index++;
			}
		}
		if(getMultiple == 1) {
			if(noCenter != 1) {
				map.setCenter(new GLatLng(56.022948,11.744385), 7);
			}
		} else {
			map.setCenter(new GLatLng(point[0], point[1]), 12);
		}
	} else {
		if(noCenter != 1) {
			map.setCenter(new GLatLng(56.078167,10.651245), 7);
		}
	}
	
	for(var i = 0; i < markerObjects.length; i++) {
		var marker = markerObjects[i]["marker"];
		markerArray.push(marker);
	}

	var options = { gridSize: 42, maxZoom: 15, styles: styles['0']};

	markerCluster = new MarkerClusterer(map, markerArray, options);
	
	if(getMultiple != 1) {
		marker.openInfoWindowHtml(description);
	}
	
}

function getMarker(latlng, markerOptions, description) {
	var marker = new GMarker(latlng, markerOptions);
    GEvent.addListener(marker, "click", function() { map.openInfoWindowHtml(latlng, description); });
    return marker;
}

window.onload = initialize;