/// <reference name="MicrosoftAjax.js"/>
/// <reference path="gmap_js_helper.js"/>

var map = null;

var basePlaceIcon=new GIcon();
basePlaceIcon.iconAnchor=new GPoint(6,8);
basePlaceIcon.infoWindowAnchor=new GPoint(10,3);
var vesselMarkerMap = new HashMap();
var inactiveVesselTimeDiff=3600000;

function GLoad() 
{
	if (GBrowserIsCompatible()) 
	{
		map = new GMap2(document.getElementById("map"));

		map.setCenter(new GLatLng(mapLat, mapLng), mapZoom);
		map.addControl(new GLargeMapControl);
		map.addControl(new GMapTypeControl);
		map.addControl(new GScaleControl);
		var ovcontrol = new GOverviewMapControl(new GSize(150, 150));
		map.addControl(ovcontrol, new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(0, 0)));
		new GKeyboardHandler(map);
		
		GDownloadUrl(ports, parsePlaceMarkerXML);
		GDownloadUrl(ships, parseShipMarkerXML);
	}
}

function gup(name)
{  
	var regexS = "[\\?&]"+name+"=([^&#]*)";  
	var regex = new RegExp( regexS );  
	var results = regex.exec(window.location);  
	if (results == null)    
	{
		 return "";
	} 
	else  
	{
		 return results[1];
	};   
}


function parseShipMarkerXML(data, responseCode) 
{
//    var timeNow = (new Date).getTime();
    var selectedId = gup("s");
    removeVesselMarkers();
    if (data && data.length > 0) 
    {
        var xmlDoc = GXml.parse(data);
        if (xmlDoc && xmlDoc.documentElement) 
        {
            var ships = xmlDoc.documentElement.getElementsByTagName("ships");
            var vessels = xmlDoc.documentElement.getElementsByTagName("ship");
            for (var i = 0; i < vessels.length; i++) 
            {
                try 
                {
                    var vesselName = getElementValue(vessels[i], "name");
                    var vesselUrl = getElementValue(vessels[i], "url");
                    var vesselId = getElementValue(vessels[i], "mmsi");
                    var vesselImg = getElementValue(vessels[i], "image");
                    var vesselLat = getElementValue(vessels[i], "lat");
                    var vesselLong = getElementValue(vessels[i], "lng");
                    var vesselLatiude = getElementValue(vessels[i], "latitude");
                    var vesselLongitude = getElementValue(vessels[i], "longitude");
                    var vesselDest = getElementValue(vessels[i], "destination");
                    var vesselIcon = getElementValue(vessels[i], "icon");
                    var vesselIconWidth = getElementValue(vessels[i], "iconWidth");
					var vesselDir = getElementValue(vessels[i], "dir");
					var vesselSOG = getElementValue(vessels[i], "SOG");
					var vesselCOG = getElementValue(vessels[i], "COG");
					var vesselDirection = getElementValue(vessels[i], "direction");
					var vesselUpdated = getElementValue(vessels[i], "updated");
					
					var desc = "<table>";
					desc += "<tr><td style=\"text-align:left;\">" + directionLbl + "&nbsp;</td><td>" +  vesselDirection + "</td></tr>";
					desc += "<tr><td style=\"text-align:left;\">" + destinationLbl + "&nbsp;</td><td>" + vesselDest + "</td></tr>";
					desc += "<tr><td style=\"text-align:left;\">" + latitudeLbl + "&nbsp;</td><td>" + vesselLatiude + "</td></tr>";
					desc += "<tr><td style=\"text-align:left;\">" + longitudeLbl + "&nbsp;</td><td>" + vesselLongitude + "</td></tr>";
					desc += "<tr><td style=\"text-align:left;\">" + sogLbl + "&nbsp;</td><td>" + vesselSOG + "</td></tr>";
					desc += "<tr><td style=\"text-align:left;\">" + cogLbl + "&nbsp;</td><td>" + vesselCOG  + "</td></tr>";
					desc += "<tr><td style=\"text-align:left;\">" + timestampLbl + "&nbsp;</td><td>" + vesselUpdated + "</td></tr>";
					desc += "</table>";	
					desc = createVesselMarkerInfo(vesselName, vesselImg, desc, vesselUrl, readmoreLbl);
//                    var timeStamp = getElementValue(vessels[i], "Time_stamp");
//                    var time = parseWMSFormattedDate(timeStamp);
//                    var isInactive = time && timeNow - time > inactiveVesselTimeDiff;
					var vesselLabel = vesselName;
					var vesselTitle = vesselName;
				
                    var marker = createVesselMarker(new GLatLng(vesselLat, vesselLong), vesselId, vesselLabel, vesselTitle, vesselDest, desc, vesselIcon, vesselIconWidth, vesselDir, readmoreLbl);
                } catch (err) 
                {
                }
            }
            var selectedVesselMarker = vesselMarkerMap.get(selectedId);
            if (selectedVesselMarker != null && selectedVesselMarker != 'undefined')
            {
				map.setCenter(selectedVesselMarker.getLatLng());
				vesselSelected(selectedId);
			}
        }
    }
}

function createVesselMarker(point, id, label, title, destination, description, vesselIcon, vesselIconWidth, vesselDirection) 
{
	var vIcon = new GIcon();
	vIcon.image = vesselIcon;
	vIcon.iconSize = new GSize(vesselIconWidth, 32);
	vIcon.iconAnchor = new GPoint(1,21);
	if (vesselDirection == "SOUTHBOUND")
	{
		vIcon.iconAnchor = new GPoint(1,21);
		vIcon.infoWindowAnchor = new GPoint(30,6);
	}
	else if (vesselDirection == "NORTHBOUND")
	{
		vIcon.iconAnchor = new GPoint(vesselIconWidth,21);
		vIcon.infoWindowAnchor = new GPoint(25,1);
	}
	

	var marker = new GMarker(point, vIcon);
	map.addOverlay(marker);
	marker.id = id;
	marker.label = label;
	marker.html = description;
	vesselMarkerMap.put(marker.id, marker);
	GEvent.addListener(marker, "click", function () {vesselSelected(marker.id);});
	return marker;
}

function HashMap() {
	this.list = new Array;
	this.keys = new Array;
	this.values = new Array;
	this.init = function () {this.list = new Array;this.keys = new Array;this.values = new Array;};
	this.get = function (id) {for (var i = 0; i < this.list.length; i++) {var param = this.list[i];if (param.id == id) {return param.value;}}return null;};
	this.getIgnoreCase = function (id) {var upperName = id.toUpperCase();for (var i = 0; i < this.list.length; i++) {var param = this.list[i];var upperParamName = param.id.toUpperCase();if (upperParamName == upperName) {return param.value;}}return null;};
	this.getIndex = function (id) {for (var i = 0; i < this.list.length; i++) {var param = this.list[i];if (param.id == id) {return i;}}return -1;};
	this.put = function (id, value) {var idx = this.getIndex(id);if (idx == -1) {idx = this.list.length;}this.list[idx] = new nameValuePair(id, value);this.keys[idx] = id;this.values[idx] = value;};
	this.remove = function (id) {var idx = this.getIndex(id);if (idx == -1) {return false;}var tmpList = this.list;this.init();for (var i = 0; i < tmpList.length; i++) {if (i != idx) {this.put(tmpList[i].id, tmpList[i].value);}}};
	this.addValue = function (id, value, ignoreCase) {var oldValue = ignoreCase ? this.getIgnoreCase(id) : this.get(id);var newValue = (oldValue && oldValue != "") ? oldValue + "," + value : value;this.put(id, newValue);};
	this.getKeys = function () {return this.keys;};
	this.getValues = function () {return this.values;};
	this.length = function () {return this.list.length;};
	this.makeQueryString = function (keyStr) {if (!this.list || this.list.length == 0) {return "";}var keyArr = null;if (keyStr && keyStr.length > 0) {keyArr = keyStr.split(",");}var qStr = "";for (var i = 0; i < this.list.length; i++) {if (keyArr == null || !arrayContaines(keyArr, this.list[i].id)) {qStr += "&" + this.list[i].id + "=";qStr += this.list[i].value;}}return qStr;};
}

function parsePlaceMarkerXML(data, responseCode) {
    if (data && data.length > 0) {
        var xmlDoc = GXml.parse(data);
        if (xmlDoc && xmlDoc.documentElement) {
            var folder = xmlDoc.documentElement.getElementsByTagName("Folder");
            var pmark = folder[0].getElementsByTagName("Placemark");
            for (var i = 0; i < pmark.length; i++) {
                try {
                    var placeName = getElementValue(pmark[i], "name");
                    var coordinates = getElementValue(pmark[i].getElementsByTagName("Point")[0], "coordinates").split(",");
                    var iconPath = getElementValue(((pmark[i].getElementsByTagName("Style")[0]).getElementsByTagName("IconStyle"))[0].getElementsByTagName("Icon")[0], "href");
                    var description = getElementValue(pmark[i], "description");
                    createPlaceMarker(new GLatLng(coordinates[1], coordinates[0]), placeName, iconPath, description);
                } catch (err) {
					alert(err);
                }
            }
        }
    }
}

function createPlaceMarker(point, label, iconPath, description) {
	var letteredIcon = new GIcon(basePlaceIcon);
	letteredIcon.image = iconPath;
    markerOptions = { icon:letteredIcon };
    var marker = new GMarker(point, markerOptions);
    map.addOverlay(marker);
    if (description && description.length > 0) {
        GEvent.addListener(marker, "click", function () {marker.openInfoWindowHtml("<div style=\"font-family:verdana;font-size:10px;\"><b>" + label + "</b><br/>" + description + "</div>");});
    }
}
function openLargeImage(imgName,vesselName){
	var urlStr='../../WebCamera.aspx?imageLabel='+encodeURI(vesselName)+'&imageUrl='+imgName;
	window.open(urlStr,"Hurtigruten","scrollbars=yes, resizable=yes, toolbar=no, location=no, directories=no, status=no, menubar=no, copyhistory=no");
}

function createVesselMarkerInfo(label, img, description, url, readmoreLbl) 
{
	var html = "<div style=\"font-family:verdana;font-size:10px;\" class=\"ShipInfoMap\"><b> " + label + "</b><br/>";
	html += "<table>";
	html += "<tr>";
	html += "<td>";
	html += "<a href=\"javascript:openLargeImage(" + "'" + img + "', " + "'" + label + "'" + ")\" style=\"text-decoration:none;\">";
	html += "<img src=\"" + img + "\" border=\"0\" height=\"120\" width=\"160\" hspace=0 vspace=0 align=\"left\" alt=\"\" style=\"margin-right: 5px;\">";
	html += "</a>";
	html += "</td>";
	html += "<td>";
	html += description;
	html += "</td>";
	html += "</tr>";
	html += "<tr>";
	html += "<td colspan=2>";
	html += "<a href=\"" + url + "\" target=\"_blank\">" + readmoreLbl + "</>";
	html += "</td>";
	html += "</tr>";
	html += "</table>";
	html += "</div>";
	return html;
}

function getElementValue(docEl, tagName) {

    if (!docEl || !tagName) {
        return "";
    }
    var tagEl = docEl.getElementsByTagName(tagName);
    var tagValue = "";
    if (tagEl && tagEl.length > 0) {
        var children = tagEl[0].childNodes;
        for (var i = 0; i < children.length; i++) {
            tagValue += children[i].nodeValue;
        }
    }
    return tagValue;
}

function removeVesselMarkers() 
{
	var markers = vesselMarkerMap.getValues();
	if (markers && markers.length > 0) 
	{
		for (var i = 0; i < markers.length; i++) 
		{
			try 
			{
				map.removeOverlay(markers[i]);
			} catch (err) {}
		}
	}
}

 function vesselSelected(id) 
 {
	map.closeInfoWindow();
	var marker = vesselMarkerMap.get(id);
	
	marker.openInfoWindowHtml(marker.html);
	selectedVesselId = id;
}

function nameValuePair(id, value) {
	this.id = id;
	this.value = value;
}