var map;
var mapCenter;
var baseIcon;

window.onload = function ()
{
    SetDocumentSize();
    ShowMap();
};

window.onresize = function ()
{
    SetDocumentSize();
};

window.onunload = function ()
{
    GUnload();
};

function SetDocumentSize() {
	var size = GetViewportHeight() - 240; 

	var elm = document.getElementById("Map");
    if (elm) elm.style.height = (size-30) + "px";

	elm = document.getElementById("TabPage");
	if (elm) elm.style.maxHeight = (size-61) + "px";
}

function GetViewportHeight()
{
    var retval = 0;

    if (window.innerHeight)
        retval = window.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight) 
        retval = document.documentElement.clientHeight;
    else if (document.body && document.body.clientHeight) 
        retval = document.body.clientHeight;

    return retval - 18;    
}

function SwitchTab(targetContent)
{
    //var tabs = new Array(RouteTabId, ReportTabId, ImagesTabId, CommentsTabId);
    //var pages = new Array(RouteTabPageId, ReportTabPageId, ImagesTabPageId, CommentsTabPageId);

    for (var i = 0; i < Tabs.length; i++)
    {
        var elm = document.getElementById(Tabs[i][0]);
        if (elm) elm.className = "";
        
        elm = document.getElementById(Tabs[i][1]);
        if (elm) elm.style.display = "none";
    }    

    
        var elm = document.getElementById(Tabs[targetContent][0]);
        if (elm) elm.className = "ActiveTab";
        
        elm = document.getElementById(Tabs[targetContent][1]);
        if (elm) elm.style.display = "block";
}

function ShowMap()
{
    var elm = document.getElementById("Map");

    if (GBrowserIsCompatible() && elm) {
        map = new google.maps.Map2(elm); 
        //map.setCenter(mapCenter, 13);
        map.setCenter(new GLatLng(0,0), 2);
        
        map.addMapType(G_PHYSICAL_MAP);
        map.setMapType(G_PHYSICAL_MAP);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());
        map.enableScrollWheelZoom();

        CreateBaseIcon();

        var bounds = new GLatLngBounds();
        
        var actualRoute;
        var plannedRoute;
        
        if (typeof locations != "undefined")
        {
            
            // Planned Route        
            if (locations.plannedRoute)
            {
                plannedRoute = new GPolyline.fromEncoded({
		            color: "#3333cc",
		            weight: 6,
		            points: locations.plannedRoute.points,
		            levels: locations.plannedRoute.levels,
		            zoomFactor: 32,
		            numLevels: 4
	            });
	            map.addOverlay(plannedRoute);
    	        
   	            var polylineBounds = plannedRoute.getBounds();
   	            bounds.extend(polylineBounds.getNorthEast());
                bounds.extend(polylineBounds.getSouthWest());
                
                var switchPlannedRoute = document.getElementById("switchPlannedRoute");
                if (switchPlannedRoute)
                {
                    switchPlannedRoute.onclick = function()
                    {
                        if (plannedRoute.isHidden()) plannedRoute.show();
                        else plannedRoute.hide();
                    }; 
                    
                    switchPlannedRoute.style.cursor = "pointer";
                    switchPlannedRoute.style.fontWeight = "bold";

                }
	        }        

                 
            // Actual Route        
            if (locations.actualRoute)
            {
                var actualRoute = new GPolyline.fromEncoded({
		            color: "#cc3333",
		            weight: 10,
		            points: locations.actualRoute.points,
		            levels: locations.actualRoute.levels,
		            zoomFactor: 32,
		            numLevels: 4
	            });
	            map.addOverlay(actualRoute);
    	        
   	            var polylineBounds = actualRoute.getBounds();
   	            bounds.extend(polylineBounds.getNorthEast());
                bounds.extend(polylineBounds.getSouthWest());
                
                var switchActualRoute = document.getElementById("switchActualRoute");
                if (switchActualRoute)
                {
                    switchActualRoute.onclick = function()
                    {
                        if (actualRoute.isHidden()) actualRoute.show();
                        else actualRoute.hide();
                    }; 
                    
                    switchActualRoute.style.cursor = "pointer";
                    switchActualRoute.style.fontWeight = "bold";
                }
	        }
	        
	        if (actualRoute && plannedRoute)
            {
                plannedRoute.hide();
            }

           
            if (locations.originHotel)
            {
                var icon = CreatePushpinIcon("http://www.google.com/mapfiles/dd-start.png");
                var pos = new GLatLng(locations.originHotel.lat, locations.originHotel.lng);
                map.addOverlay(new GMarker(pos, { icon:icon }));
                bounds.extend(pos);
            }
            
            if (locations.destinationHotel)
            {
                var icon = CreatePushpinIcon("http://www.google.com/mapfiles/dd-end.png");
                var pos = new GLatLng(locations.destinationHotel.lat, locations.destinationHotel.lng);
                map.addOverlay(new GMarker(pos, { icon:icon }));
                bounds.extend(pos);
            }
    	    
	        if (locations.all)
            {
                var icon = CreatePushpinIcon("http://www.google.com/mapfiles/marker.png");
            
                for (var i = 0; i < locations.all.length; i++) {
                    var pos = new GLatLng(locations.all[i].lat, locations.all[i].lng);
                    map.addOverlay(new GMarker(pos, icon));
                    bounds.extend(pos);
                }
            }
        }
	    

        if (typeof images != "undefined")
        {
            for (var i = 0; i < images.length; i++) {
                if (images[i].position.lat != 0 && images[i].position.lng != 0)
                {
                    var pos = new GLatLng(images[i].position.lat, images[i].position.lng);
                    map.addOverlay(CreateMarker(pos, images[i]));
                    bounds.extend(pos);
                }
            }
        }
        
      	var newZoom = map.getBoundsZoomLevel(bounds);
	    mapCenter = bounds.getCenter();
	        
        map.setCenter(mapCenter, newZoom ); 


    }
}

function CreateBaseIcon(url)
{
   
    return baseIcon;
    
}

function CreatePushpinIcon(url)
{
    var icon = new GIcon();
    icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    icon.iconSize = new GSize(20, 34);
    icon.shadowSize = new GSize(37, 34);
    icon.iconAnchor = new GPoint(9, 34);
    icon.infoWindowAnchor = new GPoint(9, 2);
    icon.infoShadowAnchor = new GPoint(18, 25);
    icon.image = url;
    
    return icon;
}

function CreateHotelIcon()
{
    var icon = new GIcon();
    icon.image = "/VacationServer/hotelIcon.png";
    icon.shadow = "/VacationServer/hotelShadow.png";
    icon.iconSize = new GSize(32, 32);
    icon.shadowSize = new GSize(56, 32);
    icon.iconAnchor = new GPoint(16, 32);
    icon.infoWindowAnchor = new GPoint(16, 0);
    return icon;
}

    function CreateMarker(pos, image) {
        
        var icon = new GIcon();
        icon.shadow = "/VacationServer/mapShadow.png";
        icon.iconSize = new GSize(32.0, 32.0);
        icon.shadowSize = new GSize(49.0, 32.0);
        icon.iconAnchor = new GPoint(16.0, 16.0);
        icon.infoWindowAnchor = new GPoint(16.0, 16.0);
        icon.image = image.urls.icon;

        
        // Richtet das GMarkerOptions-Objekt ein
        markerOptions = { icon:icon };
        var marker = new GMarker(pos, markerOptions);

        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(GetInfoWindowHtml(image));
        });
      return marker;
    }

  
function ShowImage(imageId)
{
    var image = FindImage(imageId);
    if (map != null && image)
    {
        var imagePosition = new GLatLng(image.position.lat, image.position.lng);;
        
        if (image.position.lat == 0 && image.position.lng == 0) imagePosition = mapCenter;
        
        //map.setCenter(imagePosition, 15);
        map.openInfoWindowHtml(imagePosition, GetInfoWindowHtml(image));
    }
}

function FindImage(imageId)
{
    if (images)
    {
        for (var i = 0; i < images.length; i++)
        {
            if (images[i].id == imageId) return images[i];
        }
    }
}

function FindPreviousImage(imageId)
{
    if (images)
    {
        for (var i = 0; i < images.length; i++)
        {
            if (images[i].id == imageId && i > 0) return images[i-1];
            
        }
    }
}

function FindNextImage(imageId)
{
    if (images)
    {
        for (var i = 0; i < images.length; i++)
        {
            if (images[i].id == imageId && i < (images.length - 1)) return images[i+1];
        }
    }
}


function GetInfoWindowHtml(image)
{
    var width = 400;
    var height = width / image.aspect;

    if (height > width)
    {
        height = 400;
        var width = height * image.aspect;
    }

    var backLink = "";
    var nextLink = "";
    var window = "";


    var previousImage = FindPreviousImage(image.id);
    var nextImage = FindNextImage(image.id);

    window += "<table class=\"InfoWindowTable\">\n";

    window += "<tr><td>";
    if (previousImage) window += "<a href=\"#\" onclick=\"ShowImage('" + previousImage.id + "');\">&lt; Vorheriges Bild</a>";
    window += "</td><td style=\"text-align: right\">";
    if (nextImage) window += "<a href=\"#\" onclick=\"ShowImage('" + nextImage.id + "');\">Nächstes Bild &gt;</a>";
    window += "</td></tr>\n";

    window += "<tr><td colspan=\"2\"><img src=\"" + image.urls.midsize + "\" width=\"" + width + "\" height=\"" + height + "\" onclick=\"OpenLightbox('" + image.id + "');\" style=\"cursor:pointer;\" /></td></tr>\n";
    window += "<tr><td>" + image.title + "</td><td style=\"text-align: right\">" + image.camera + "</td></tr>\n";
    window += "<tr><td><br /><a href=\"#\" onclick=\"OpenLightbox('" + image.id + "');\">Vergrößern</a></td><td style=\"text-align: right\">[" + image.position.lat + ", " + image.position.lng + "]</td></tr>\n";
    window += "</table>";

    
    return window;
}


function CenterMap(lat, lng, zoom)
{
    if (map)
    {
        if (zoom) map.setCenter(new GLatLng(lat,lng), zoom);
        else map.setCenter(new GLatLng(lat,lng));
    }
}

function OpenLinkPopup(link)
{
    
    window.open(link, "popup", "height=600px,width=500px,location=no,menubar=no,status=no,toolbar=no,scrollbars=yes");
    
    return false;
    
}

function OpenLightbox(imageId)
{
    var image = FindImage(imageId);
    if (image)
    {
        myLightWindow.activateWindow({
	        href: image.urls.full, 
	        title: image.title
        });
    }
    
    return false;
}