// Common JS variables ##################################################################
// Appends a script reference (VEMap FF Bugfix)
function appendJSRef(filename) {
    var fileref = document.createElement('script');
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", filename);
    document.getElementsByTagName("head")[0].appendChild(fileref);
}



// #####################################################################################
// DRAW DATA TO THE MAP
// #####################################################################################

// Indicates which data will be drawn
// e.g. a route for RouteDetails, a poi for POIDetails,
// many routes for UserMap, ...
//var MapIsEnlarged = false;
function MapDrawData() {

    // ...
    if (InitialMapIsEnlarged) {
        InitialMapIsEnlarged = false;
        CustomMenuEnlargeMap()
        
        // Special Case -> CustomMenuEnlargeMap() calls ReInitMap() calls GInit() For Google calls MapDrawData() -> ENDLESS LOOP
        cInfo = GetMapChangeSettings();
        if (cInfo.MapType == "GMap")
            return;
    }

    // A route is available over a JSON data object
    if (jsonMapDataRoutes != null) {
        DrawJSONRoutesToMap(jsonMapDataRoutes);
    }
    
    // A poi is available over a JOIN data object
    if (jsonMapDataPOIs != null) {
        DrawJSONPOIsToMap(jsonMapDataPOIs);
    }

    // The flag for the UserMap UseCase is set to true
    switch (CWMapUseCase) {
        case 0:
            // Do nothing ... already done above.
            break;
        case 1:
            DrawUserMapUseCaseData();
            break;
    }
    
}
function DrawJSONRoutesToMap(data) {
    cRoute = data[0];

    // 07.04.2010 | Adjust the map bounds in Javascript. do not use the MapZoomLevel
    AdjustMapBounds(RouteBoundNW, RouteBoundSE);
    
    if (cRoute.IsRoundTrip) {
        // Add StartEndPoint to the map
        infoString = "<br /><i>" + Resources_MapControlView.PopupStart + ":</i><br />" + Resources_MapControlView.PopupStartTime + ": " + cRoute.StartPoint.Time + "<br />" + Resources_MapControlView.PopupRegion + ": " + cRoute.StartPoint.Region + "<br />" + Resources_MapControlView.PopupElevation + ": " + cRoute.StartPoint.Ele + "<br /><i>" + Resources_MapControlView.PopupEnd + "</i><br />" + Resources_MapControlView.PopupEndTime + ": " + cRoute.EndPoint.Time + "<br />" + Resources_MapControlView.PopupElevation + ": " + cRoute.EndPoint.Ele;
        pinDescription = String.format(CreateStartEndNodePopup(), Resources_MapControlView.StartEndRouteHeadText, cRoute.Name, Resources_MapControlView.Informations, infoString);
        CWMapDrawPin("startend", cRoute.StartPoint.Lat, cRoute.StartPoint.Lon, pinDescription);
    }
    else {
        // Add StartPoint to the map
        infoString = "<br />" + Resources_MapControlView.PopupStartTime + ": " + cRoute.StartPoint.Time + "<br />" + Resources_MapControlView.PopupRegion + ": " + cRoute.StartPoint.Region + "<br />" + Resources_MapControlView.PopupElevation + ": " + cRoute.StartPoint.Ele;
        pinDescription = String.format(CreateStartEndNodePopup(), Resources_MapControlView.StartRouteHeadText, cRoute.Name, Resources_MapControlView.Informations, infoString);
        CWMapDrawPin("start", cRoute.StartPoint.Lat, cRoute.StartPoint.Lon, pinDescription);
        
        // Add EndPoint to the map
        infoString = "<br />" + Resources_MapControlView.PopupEndTime + ": " + cRoute.EndPoint.Time + "<br />" + Resources_MapControlView.PopupElevation + ": " + cRoute.EndPoint.Ele;
        pinDescription = String.format(CreateStartEndNodePopup(), Resources_MapControlView.EndRouteHeadText, cRoute.Name, Resources_MapControlView.Informations, infoString);
        CWMapDrawPin("end", cRoute.EndPoint.Lat, cRoute.EndPoint.Lon, pinDescription);
    }

    // Add Trackpoints
    CWMapDrawRoute(cRoute);
    
    // Pictures
    for (var p = 0; p < cRoute.Pictures.length; p++) {
        pic = cRoute.Pictures[p];
        pinDescription = String.format(CreatePicturePopup(), pic.Link, pic.Caption, pic.Path, pic.CommentCount + " " + Resources_MapControlView.PopupCommentCountText, pic.Description, pic.CreatorLink, pic.CreatorPath, pic.CreatorName, Resources_MapControlView.PopupByText, pic.DateTaken, Resources_MapControlView.PopupDetailsText);
        if (pic.CommentCount > 0)
            CWMapDrawPin("pictureComment", cRoute.Pictures[p].Lat, cRoute.Pictures[p].Lon, pinDescription);
        else
            CWMapDrawPin("picture", cRoute.Pictures[p].Lat, cRoute.Pictures[p].Lon, pinDescription);
    }

    // POIs
    for (var p = 0; p < cRoute.POIs.length; p++) {
        pinDescription = String.format(CreatePOIPopup(), cRoute.POIs[p].Link, cRoute.POIs[p].Name, cRoute.POIs[p].PicPath, cRoute.POIs[p].CommentCount + " " + Resources_MapControlView.PopupCommentCountText, cRoute.POIs[p].Description, cRoute.POIs[p].CreatorLink, cRoute.POIs[p].CreatorAvatarPath, cRoute.POIs[p].CreatorName, Resources_MapControlView.PopupByText, cRoute.POIs[p].DateLastUpdate, Resources_MapControlView.PopupDetailsText, String.format("/App_Themes/CWDefault/PoiIcons/POIIcon-{0}.png", cRoute.POIs[p].TypeID), cRoute.POIs[p].TypeName);
        CWMapDrawPin("poi", cRoute.POIs[p].Lat, cRoute.POIs[p].Lon, pinDescription, cRoute.POIs[p].TypeID);
    }

    // Geocoded comments
    if (typeof (InitCommentsOnMap) == "function") {
        InitCommentsOnMap();
    }
    else {
        // Remove "Add Comment"-Link
        // Better in code-behind file
    }
}
function DrawJSONPOIsToMap(data) {
    cPOI = data[0];
    html = "<div style=\"background-color:#FFFFF;\">";
    html += Resources_MapControlView.InterestingPOI + ":<br />";
    html += "<span style=\"color:#99CC33; font-size:20px; top-margin:10px; top-padding:0px;\">" + cPOI.Name + "</span>";
    html += "</div>";
    CWMapDrawPin("poi", cPOI.Coordinate.Lat, cPOI.Coordinate.Lon, html, cPOI.TypeID);
    
    // Geocoded comments
    if (typeof (InitCommentsOnMap) == "function") {
        InitCommentsOnMap();
    }
    else {
        // Remove "Add Comment"-Link
        // Better in code-behind file
    }
}

function DrawUserMapUseCaseData() {
    // Adjust the map
    // -> Function to be added in each Maplib - check if there exists this functionality
    // -> Set the view of the map, by two points: NW and SE
    // Adjust the map only, if the flag is set to true, because if a user watches the map
    // from VE and zooms to a specific point and then changes the map, the user expects to be at the
    // same position
    if (UserMapUseCaseAdjustMap)
        AdjustMapBounds(UserMapUseCaseBoundNW, UserMapUseCaseBoundSE);

    // Get the data
    MapControlShowMessageBox(true, "Loading the data...", 3000);
    LeaveYourTracks.com.WSAjax.AJAXSvc.GetRoutesByUserID(UserMapUseCaseUser, UserMapUseCaseReqUser, OnUserMapGetRoutesComplete, OnCallError);
    //LeaveYourTracks.com.WSAjax.AJAXSvc.GetPicturesInArea(QueryParameters, OnGetPicturesComplete, OnCallError);
    LeaveYourTracks.com.WSAjax.AJAXSvc.GetPOIsByUserID(UserMapUseCaseUser, UserMapUseCaseReqUser, OnUserMapGetPOIsComplete, OnCallError);
}
var UserMap_RoutesOnMap = new Array();
var ColorUsed = 0;
var UserMapTrack_Colors = Array("#FF0000",
                        "#00FF00",
                        "#0000FF",
                        "#FFFF00",
                        "#00FFFF"
                      );
function OnUserMapGetRoutesComplete(result) {
    MapControlShowMessageBox(true, "Getting Routes....", 3000);
    
    for (i = 0; i < result.length; i++) {
        RouteItem = result[i];
        description = String.format(CreateRoutePopup2(), RouteItem.LinkToRoute, RouteItem.Name, RouteItem.MainPicturePath, RouteItem.Location, RouteItem.Summary, RouteItem.LinkToCreator, RouteItem.UserAvatarImage, RouteItem.CreatedByUserName, Resources_MapControlView.PopupByText, RouteItem.DateStart, Resources_MapControlView.PopupDetailsText, RouteItem.RouteTypeID, RouteItem.Length, RouteItem.HeightDiff, RouteItem.DurationTravel);
        if (RouteItem.IsRoundTrip)
            CWMapDrawPin("startendWithPicture", RouteItem.StartLat, RouteItem.StartLong, description);
        else {
            CWMapDrawPin("endWithPicture", RouteItem.EndLat, RouteItem.EndLong, description);
            CWMapDrawPin("startWithPicture", RouteItem.StartLat, RouteItem.StartLong, description);
        }
        UserMap_RoutesOnMap.push(RouteItem.ID);
    }
    GetTracksForRoutesOnMap();
}
function GetTracksForRoutesOnMap() {
    MapControlShowMessageBox(true, "Getting Tracks....", 3000);
    for (i = 0; i < UserMap_RoutesOnMap.length; i++) {
        LoadRoute(UserMap_RoutesOnMap[i]);
    }
}
function LoadRoute(routeid) {
    LeaveYourTracks.com.WSAjax.AJAXSvc.GetRoutePolyLine(routeid, OnGetRouteRequestComplete, OnCallError);
}
function OnGetRouteRequestComplete(result) {
    if (result == undefined) {
        MapControlShowMessageBox("result == undefined");
        return false;
    }
    if (result.length == 0) {
        MapControlShowMessageBox("empty");
        return false;
    }

    cRoute = new Object();
    cRoute.TrackPoints = new Array();
    for (i = 0; i < result.length; i++) {
        cPoint = new Object();
        cPoint.Lat = result[i].Lat;
        cPoint.Lon = result[i].Lon;
        cRoute.TrackPoints.push(cPoint);
    }
    CWMapDrawRoute(cRoute, UserMapTrack_Colors[ColorUsed], 0.7);
    ColorUsed++;
    if (ColorUsed >= 5)
        ColorUsed = 0;
}

function OnUserMapGetPOIsComplete(result) {
    for (i = 0; i < result.length; i++) {
        var POIItem = result[i];
        if (POIItem.ShowGroupAsOwner)
            description = CreatePOIPopup();
        else
            description = CreatePOIPopupGroup();
        description = String.format(description, String.format("/App_Themes/CWDefault/PoiIcons/POIIcon-{0}.png", POIItem.POIType), POIItem.ID, POIItem.Name, POIItem.POIPicturePath, POIItem.Description, POIItem.CreatedByUserAvatarURL, POIItem.CreatedByUserID, POIItem.CreatedByUserName, POIItem.DateLastUpdated, "none");
        CWMapDrawPin("poi", POIItem.Latitude, POIItem.Longitude, description, POIItem.POIType);
    }
}
function OnCallError(error, userContext, methodName) {
    if (error !== null) {
        //alert('Error Type:\n' + error.get_exceptionType() + '\n\nError:\n' + error.get_message() + '\n\nStack Trace:\n' + error.get_stackTrace());
        MapControlShowMessageBox(true, "Error Type:\n" + error.get_exceptionType() + "\n\nError:\n" + error.get_message() + "\n\nStack Trace:\n" + error.get_stackTrace(), 3000);
    }
}

// ##########################################################################################
// Map functions, Helper functions
// Resize the map, getElementPosition
// ##########################################################################################

// This method only resizes the divs (containers) of the map!!!
function ResizeMap() {

    if (ExpandToBrowserWindow) {
        pos = GetElementPosition(document.getElementById(MapControlViewMapID));
        mapW = (GetWindowWidth() - pos.x - 17) + "px";
        mapH = (GetWindowHeight() - pos.y) + "px";
        document.getElementById(MapControlViewMapID).style.width = mapW;
        document.getElementById(MapControlViewMapID).style.height = mapH;
        document.getElementById(MapControlViewMapContainerID).style.width = mapW;
        document.getElementById(MapControlViewMapContainerID).style.height = mapH;
    }
}
function GetElementPosition(tb) {

    var pos = { x: 0, y: 0 };

    imageOffsetY = tb.offsetTop;
    imageOffsetX = tb.offsetLeft;
    obj = tb.offsetParent;
    do {
        imageOffsetX += obj.offsetLeft;
        imageOffsetY += obj.offsetTop;
    } while (obj = obj.offsetParent);

    pos.x = imageOffsetX;
    pos.y = imageOffsetY;
    pos.w = tb.offsetWidth;
    pos.w = tb.offsetHeight;

    return pos;
}

// ##########################################################################################
// Message Box
// ##########################################################################################
function MapControlInitMessageBox(MapType) {
    switch (MapType) {
        case "VEMap":
            document.getElementById("MapCustomMenuMessageBox").className = "mapControlMessageBoxVEMap";
            break;
        case "GMap":
            document.getElementById("MapCustomMenuMessageBox").className = "mapControlMessageBoxGMap";
            break;
    }
}
function MapControlShowMessageBox(show, message, timeout) {
    var balloon = document.getElementById("MapCustomMenuMessageBox");
    if (!show)
        balloon.style.display = "none";
    else {
        balloon.style.display = "block";
        balloon.innerHTML = message;
        if (timeout)
            setTimeout("MapControlShowMessageBox(false)", timeout);
    }
}

// ##########################################################################################
// Custom MapMenu JS
// ##########################################################################################
var CustomMapMenu;
var CurrentCustomMapMenuAlpha = 70;
var FadingSpeed = 10;

var IsAddComment = false;
var IsAddPOI = false;
var FadedIn = false;


// Activates the Custom MapMenu according to the MapType
function ActivateCustomMapMenu(MapType) {
    CustomMapMenu = document.getElementById(MapControlCustomMenuID);
    CustomMapMenu.style.display = "";
    switch (MapType) {
        case "VEMap":
            //CustomMapMenu.setAttribute("class", "mapCustomMenuVEMap");
            CustomMapMenu.className = "mapCustomMenuVEMap";
            break;
        case "GMap":
            //CustomMapMenu.setAttribute("class", "mapCustomMenuGMap");
            CustomMapMenu.className = "mapCustomMenuGMap";
            break;
    }

    // funny but true, set filter BEFORE opacity!
    CustomMapMenu.style.filter = "alpha(opacity=" + CurrentCustomMapMenuAlpha + ")";
    CustomMapMenu.style.opacity = (CurrentCustomMapMenuAlpha / 100);

    // Checks if a comment control is on the current site
    if (typeof (InitCommentsOnMap) != "function") {
        document.getElementById(MapSecondaryMenuCommentAddLinkID).style.display = "none";
        document.getElementById(MapCustomMapMenuCommentAddListItemID).style.display = "none";
    }

    // GeoCoordinates buffers
    CCGeocodedCommentLatitude = "SecMenuLatitude";
    CCGeocodedCommentLongitude = "SecMenuLongitude";

    CustomMapMenu.onmouseover = CustomMapMenuMouseOver;
    CustomMapMenu.onmouseout = CustomMapMenuMouseOut;
}
// Functional Stuff
function CustomMenuAddPOI() {
    IsAddPOI = true;

    // Deactivate "Add POI" hyperlink
    linkAddPoi = document.getElementById(MapCustomMapMenuPoiAddLinkID);
    linkAddPoi.style.cursor = "default";
    linkAddPoi.onclick = "";

    // MapAddPOI
    // TODO: Multiple Routes!!!
    poiMarkerDescription = "<div style=\"color:#99CC33; font-size:20px;\">" + Resources_MapControlView.PopupAddPOIHeader + "</div>";
    poiMarkerDescription += "<div style=\"width:400px; margin-top:10px; font-size:12px;\">" + Resources_MapControlView.PopupAddPOIDescription + "</div>";
    poiMarkerDescription += "<div style=\"margin-top:25px; font-size:12px;\"><a href=\"" + CreatePOILink + "\">" + Resources_MapControlView.Next + "</a>&nbsp;&nbsp;&nbsp;<a onclick=\"CustomMenuOnCancelAddAction(); return false;\" href=\"\">" + Resources_MapControlView.Cancel + "</a></div>";
    MapAddPOI(poiMarkerDescription);

    // Remove Save-Button -> This CustomMenu only inits the Actions ->
    // Actions are actually done in the specific map
    document.getElementById("MapSecondaryMenuSaveCancelButtons").style.display = "";
}
function CustomMenuAddComment() {
    IsAddComment = true;

    // Comment Link deaktivieren
    linkAddComment = document.getElementById(MapSecondaryMenuCommentAddLinkID);
    linkAddComment.style.cursor = "default";
    linkAddComment.onclick = "";
    document.getElementById("MapSecondaryMenuSaveCancelButtons").style.display = "";

    AddCommentInfos = CommentListGetAddCommentInfos();
    AddCommentDescText = Resources_MapControlView.PopupAddCommentDescription;
    commentMarkerDescription = "<div style=\"width:320px;\"><div style=\"color:#99CC33; font-size:20px; margin-bottom:15px;\"><img src=\"/App_Themes/CWDefault/Grafix/comments_bubble.jpg\" alt=\"" + AddCommentInfos.AddCommentText + "\" title=\"" + AddCommentInfos.AddCommentText + "\" style=\"margin-right:15px; font-size:12px;\" />" + AddCommentInfos.AddCommentText + "</div><div style=\"margin-bottom:15px; font-size:12px;\">" + AddCommentInfos.AddGeoCommentDescText + "<br />" + AddCommentDescText + "</div><div id=\"GeocodedCommentAddBox\" style=\"display:block;\"><div style=\"text-align:right; font-size:12px; background-color:#F5FAED; border:solid 1px #D8E9A9; padding:3px;\"><div style=\"float:left; margin:1px 0px 0px 1px;\"><a href=\"" + AddCommentInfos.PictureLink + "\"><img src=\"" + AddCommentInfos.PictureSrc + "\" border=\"0\" /></a></div><textarea id=\"MapSecMenuGeocodedCommentText\" cols=\"36\" rows=\"3\"></textarea><br /><a href=\"#\" onclick=\"CompleteAddComment(); return false;\" style=\"cursor:pointer;\">" + AddCommentInfos.AddCommentText + "</a><a href=\"#\" onclick=\"CustomMenuOnCancelAddAction(); return false;\" style=\"margin-left:20px;\">" + "Cancel" + "</a></div></div><div id=\"GeocodedCommentAddSavingBox\" style=\"display:none; text-align:left; font-size:12px; background-color:#F5FAED; border:solid 1px #D8E9A9; padding:10px; width:250px; height:50px;\">" + AddCommentInfos.GeocodedCommentSavingText + "</div></div>";
    MapAddComment(commentMarkerDescription);
}
function CompleteAddComment() {
    geocodedText = document.getElementById("MapSecMenuGeocodedCommentText").value;

    // Save Comment -> CommentList Provided JS Function!
    lat = document.getElementById(CCGeocodedCommentLatitude).value;
    lon = document.getElementById(CCGeocodedCommentLongitude).value;
    
    if (SaveGeocodedComment(geocodedText, lat, lon)) {
        // Saving
        document.getElementById("GeocodedCommentAddSavingBox").style.display = "block";
        document.getElementById("GeocodedCommentAddBox").style.display = "none";
    }
}
// External Function Suppport (CommentList.ascx)
function CustomMenuOnCancelAddAction() {
    document.getElementById("MapSecondaryMenuSaveCancelButtons").style.display = "none";

    if (IsAddPOI) {
        MapCancelAddPOI();
        linkAddPoi = document.getElementById(MapCustomMapMenuPoiAddLinkID);
        linkAddPoi.style.cursor = "pointer";
        linkAddPoi.onclick = CustomMenuAddPOI;
    }
    if (IsAddComment) {
        MapCancelAddComment();
        linkAddComment = document.getElementById(MapSecondaryMenuCommentAddLinkID);
        linkAddComment.style.cursor = "pointer";
        linkAddComment.onclick = CustomMenuAddComment;
    }

    IsAddComment = false;
    IsAddPOI = false;
}


function MapControlChangeMapType(maptype) {
    
    // Get all MapInfos for the change
    infos = GetMapChangeSettings();
    // Also add the Enlarged info
    infos.Enlarged = MapIsEnlarged;
    // Check the MapView
    new_mapview = "";
    if (infos.MapType == "VEMap") {
        // CurrentMap is VE
        // Only connections between the VEMap & GMap
        if (infos.MapView == "Aerial" && maptype == "GoogleMap_Road") {
            new_mapview = "GoogleMap_Satellite";
        }
        else {
            new_mapview = maptype;
        }
    }
    else if (infos.MapType == "GMap") {
        // CurrentMap is Google
        // Only connections between the VEMap & GMap
        if ((infos.MapView == "G_SATELLITE_MAP") && maptype == "BingMap_Road")
            new_mapview = "BingMap_AerialWithLabels";
        else
            new_mapview = maptype;
    }
    else if (infos.MapType = "OSMap") {
        // CurrentMap is OSM
        // OSM only has one MapView ->
        new_mapview = maptype;
    }
    

    concatParamsString = "?";
    if (CurrentSiteUrl.indexOf("?", 0) > -1)
        concatParamsString = "&";

    if (infos.MapType != maptype) {
        document.location = CurrentSiteUrl + concatParamsString + ReqConst_SHOW_MAP_TYPE + "=" + new_mapview + "&" + ReqConst_LATITUDE + "=" + infos.CenterLat + "&" + ReqConst_LONGITUDE + "=" + infos.CenterLon + "&" + ReqConst_MAP_ZOOMLEVEL + "=" + infos.ZoomLevel + "&" + ReqConst_MAP_ISENLARGED + "=" + infos.Enlarged;
    }
}

//var MapIsEnlarged = false;
// MapIsEnlarged is defined in the code behind file (MapControlView.ascx.cs)
var MapIsEnlarged = false;
function CustomMenuEnlargeMap() {
    // Set the EnlargeMap-Link to ReduceMap-Link
    document.getElementById(MapCustomMapMenuEnlargeMapLinkID).onclick = CustomMenuReduceMap;
    document.getElementById(MapCustomMapMenuEnlargeMapLinkID).innerHTML = Resources_MapControlView.ReduceMap; //ResReduceMap;
    // Reposition the map container on the page
    document.getElementById(MapControlViewMapContainerID).style.position = "absolute";
    document.getElementById(MapControlViewMapContainerID).style.top = "100px";
    document.getElementById(MapControlViewMapContainerID).style.left = "0px";
    document.getElementById(MapControlViewMapContainerID).style.zIndex = "100";
    // Resize the map
    windowHeight = GetWindowHeight();
    windowWidth = GetWindowWidth();
    newMapHeight = windowHeight - 100;
    //document.getElementById(MapControlViewMapID).style.width = "987px";
    document.getElementById(MapControlViewMapID).style.width = windowWidth - 17 + "px";
    document.getElementById(MapControlViewMapID).style.height = newMapHeight + "px";
    //document.getElementById(MapControlViewMapContainerID).style.width = "987px";
    document.getElementById(MapControlViewMapContainerID).style.width = windowWidth - 17 + "px";
    document.getElementById(MapControlViewMapContainerID).style.height = windowHeight + 700 + "px";
    document.getElementById(MapControlViewMapContainerID).style.backgroundColor = "#FFFFFF";

    // Add the Placeholder to put the content (Description YouTube Vids) out of the area of the enlarged map
    document.getElementById("mapControlMapEnlargedPlaceholder").style.display = "block";
    document.getElementById("mapControlMapEnlargedPlaceholder").style.width = "673px";
    document.getElementById("mapControlMapEnlargedPlaceholder").style.height = newMapHeight + "px";
    
    // Reload the map
    ReInitMap();

    MapIsEnlarged = true;
}
function CustomMenuReduceMap() {
    // Set the EnlargeMap-Link to ReduceMap-Link
    document.getElementById(MapCustomMapMenuEnlargeMapLinkID).onclick = CustomMenuEnlargeMap;
    document.getElementById(MapCustomMapMenuEnlargeMapLinkID).innerHTML = Resources_MapControlView.EnlargeMap; //ResEnlargeMap;
    // Reposition the map container on the page
    document.getElementById(MapControlViewMapContainerID).style.position = "relative";
    document.getElementById(MapControlViewMapContainerID).style.top = "";
    document.getElementById(MapControlViewMapContainerID).style.left = "";
    document.getElementById(MapControlViewMapContainerID).style.zIndex = "";
    document.getElementById(MapControlViewMapContainerID).style.paddingTop = "";
    document.getElementById(MapControlCustomMenuID).style.top = "";
    // Resize the map
    document.getElementById(MapControlViewMapID).style.width = MapWidth + "px"; // TODO: OriginalWidth & Height
    document.getElementById(MapControlViewMapID).style.height = MapHeight + "px";
    document.getElementById(MapControlViewMapContainerID).style.width = MapWidth + "px";
    document.getElementById(MapControlViewMapContainerID).style.height = MapHeight + "px";

    // Add the Placeholder to put the content (Description YouTube Vids) out of the area of the enlarged map
    document.getElementById("mapControlMapEnlargedPlaceholder").style.display = "none";
    
    // Reload the map
    ReInitMap();

    MapIsEnlarged = false;
}

// Open - Close the CustomMapMenu
function MapSecMenuOpen() {
    document.getElementById(CustomMapMenuClosedID).style.display = "none";
    document.getElementById("CustomMapMenuOpened").style.display = "";
}

function MapSecMenuClose() {
    document.getElementById(CustomMapMenuClosedID).style.display = "block";
    document.getElementById("CustomMapMenuOpened").style.display = "none";
}

// Events + Fading
function CustomMapMenuMouseOver(e) {
    if (!e)
        var e = window.event;
    var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?
                    window.document.documentElement : window.document.body || null;
    mousey = e.pageY ? e.pageY : e.clientY + body.scrollTop;
    mousex = e.pageX ? e.pageX : e.clientX + body.scrollLeft;

    SecMenuPos = GetElementPosition(CustomMapMenu);

    // Check if already faded in...
    if (FadedIn == false) {
        FadedIn = true;
        IncrementCustomMapMenuOpacity();
    }
}
function CustomMapMenuMouseOut(e) {
    if (!e)
        var e = window.event;
    var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?
                    window.document.documentElement : window.document.body || null;
    mousey = e.pageY ? e.pageY : e.clientY + body.scrollTop;
    mousex = e.pageX ? e.pageX : e.clientX + body.scrollLeft;

    SecMenuPos = GetElementPosition(CustomMapMenu);
    if (mousex < SecMenuPos.x + 2 || mousex > (SecMenuPos.x + SecMenuPos.w) - 2 || mousey < SecMenuPos.y + 2 || mousey > (SecMenuPos.y + SecMenuPos.h) - 2) {
        FadedIn = false;
        DecrementCustomMapMenuOpacity();
    }
}
function IncrementCustomMapMenuOpacity() {
    if (CurrentCustomMapMenuAlpha < 90 && FadedIn == true) {
        CurrentCustomMapMenuAlpha = CurrentCustomMapMenuAlpha + 2;
        CustomMapMenu.style.filter = 'alpha(opacity=' + CurrentCustomMapMenuAlpha + ')';
        CustomMapMenu.style.opacity = (CurrentCustomMapMenuAlpha / 100);
        setTimeout("IncrementCustomMapMenuOpacity()", FadingSpeed);
    }
}
function DecrementCustomMapMenuOpacity() {
    if (CurrentCustomMapMenuAlpha > 70 && FadedIn == false) {
        CurrentCustomMapMenuAlpha = CurrentCustomMapMenuAlpha - 2;
        CustomMapMenu.style.filter = 'alpha(opacity=' + CurrentCustomMapMenuAlpha + ')';
        CustomMapMenu.style.opacity = (CurrentCustomMapMenuAlpha / 100);
        setTimeout("DecrementCustomMapMenuOpacity()", FadingSpeed);
    }
}