// Variables
var isIE        = document.all ? 1 : 0;
var gTabs       = [ "Rock", "Gym" ];
var gLocations  = new Array();
var gMap;
var gBaseIcon;

function ShowPanel( tab )
{
    for (var i = 0; i < gTabs.length; i++) 
    {
        var t = gTabs[i];
        var selected = ( t == tab );
        
        e("panel"+t).style.display = selected ? "block" : "none";
        e("tab"+t).className = selected ? "tabSelected" : "tabUnselected";
    }
    return false;
}

function OnLoad() 
{
    if( GBrowserIsCompatible() )
    {
        // Init map
        gMap = new GMap2( e("map") );
        gMap.addControl( new GSmallMapControl() );
        gMap.addControl( new GMapTypeControl() );
        
        // Keyboard support
        var keys = new GKeyboardHandler( gMap );
        
        // Create a base icon for all of our markers that specifies the
        // shadow, icon dimensions, etc.
        gBaseIcon = new GIcon();
        gBaseIcon.shadow = "map/icons/shadow50.png";
        gBaseIcon.iconSize = new GSize(20, 34);
        gBaseIcon.shadowSize = new GSize(37, 34);
        gBaseIcon.iconAnchor = new GPoint(9, 34);
        gBaseIcon.infoWindowAnchor = new GPoint(9, 2);
        gBaseIcon.infoShadowAnchor = new GPoint(18, 25);

        ParseMarkers( overview, e("legendOverview"), null, null );
        ParseMarkers( rock, e("legendRock"), "marker", "icon" );
        ParseMarkers( gym, e("legendGym"), "markerBlue", "iconBlue" );
    }
}

function ParseMarkers( data, tableObj, markerBase, iconBase )
{
    for( var i = 0; i < data.length; i++) 
    {
        var name = data[i][DATA_NAME];
        var point = new GLatLng( data[i][DATA_LAT], data[i][DATA_LONG] );
        var zoom = data[i][DATA_ZOOM];
        var marker = null;
        var index = gLocations.length;
        
        if( markerBase != null )
        {
            // Add marker
            marker = CreateMarker(point, markerBase, i, index, data[i]);
            gMap.addOverlay( marker );
        }
        else
        {
            // Set initial location
            gMap.setCenter( point, zoom );
        }

        // Add button
        CreateLegendField( tableObj, data[i], iconBase, i, index );

        // Add to array
        gLocations.push( {data: data[i], marker: marker} );
    }
}

function CreateMarker(point, markerBase, markerIndex, index, data) 
{
    // Create a lettered icon for this point using our icon class
    var icon = new GIcon(gBaseIcon);
    var letter = String.fromCharCode("A".charCodeAt(0) + markerIndex);
    icon.image = "map/icons/" + markerBase + letter + ".png";
    var marker = new GMarker(point, icon);


    GEvent.addListener(marker, "click", function() 
    {
        OpenMarkerInfo( marker, data, index );
    });
    return marker;
}

function NewLocation( index, zoom )
{
    var data = gLocations[index].data;
    var marker = gLocations[index].marker;
    
    var point = new GLatLng( data[DATA_LAT], data[DATA_LONG] );
    //gMap.setCenter( point, data[DATA_ZOOM] );
    if( zoom )
    {
        gMap.setZoom( data[DATA_ZOOM] );
    }
    gMap.panTo( point );
    
    if( marker != null )
    {
        OpenMarkerInfo( marker, data, index );
    }
    else
    {
        gMap.closeInfoWindow();
    }
    
    return false;
}

function OpenMarkerInfo( marker, data, index )
{
    var html = "<div class='markerInfo'><div class='location'>" + data[DATA_NAME] + "</div>"
    html += "<table width='200px' cellspacing='0' cellpadding='0'><tr><td>";
    html += "<div class='town'>" + data[DATA_LOC] + ", MA</div>";
    html += "<div>" + GetMoreInfo(index) + "</div>";
    //html += "<div>" + GetZoomIn(index) + "</div>";
    html += "</td><td>" + GetImage( data )+"</td></tr></table>";
    html += GetDirections( index );
    html += "</div>";
    marker.openInfoWindowHtml( html );
}

function GetImage( data )
{
    //var html = "<img src='pics/close.gif' width='60' height='60'/>";
    return "";
}

function GetMoreInfo( index )
{
    var onclick = "onclick='return OpenPopup(" + index + ");'";
    var html = "<span class='moreinfo'><a " + onclick + " href='#'>more info »</a></span>";
    return html;
}

function GetZoomIn( index )
{
    var onclick = "onclick='this.blur();return NewLocation(" + index + ",true);'";  
    var html = "<span class='moreinfo'><a " + onclick + " href='#'>zoom in »</a></span>";
    return html;
}

function GetDirections( index )
{
    var dest;
    var data = gLocations[index].data;
    
    if( data[DATA_PARK_LAT] != 0 )
    {
        dest = data[DATA_PARK_LAT] + "," + data[DATA_PARK_LONG] + " (" + data[DATA_NAME] + ")";
    }
    else
    {
        dest = data[DATA_LAT] + "," + data[DATA_LONG] + " (" + data[DATA_NAME] + ")";
    }
    
    var html = "<form id='directionForm' action='http://maps.google.com' method='get' target='_blank'>";
    //html += "<div class='getDirections'>Get directions:</div>";
    //html += "<div class='startAddress'>Start address</div>";
    html += "<div class='startAddress'>Get directions from:</div>";
    html += "<input class='inputAddress' type='text' id='saddr' name='saddr' /><button id='directionGo' type='submit'>Go</button>";
    html += "<input type='hidden' id='daddr' name='daddr' value='" + dest + "' />";
    html += "</form>";
    return html;
}

function CreateLegendField( parent, data, markerBase, markerIndex, index )
{
    // <td><img src="map/icons/markerA.png" /></td>
    // <td><a onclick="return NewLocation(2);" href="#"><b>Crow Hill</b></a><br/>Princeton, MA</td>

    var verbose = ( markerBase != null );
    var zoom = verbose ? "false" : "true";
    var onclick = "onclick='this.blur();return NewLocation(" + index + "," + zoom + ");'";  
    var cellTextA = "";

    if( verbose )
    {
        var letter = String.fromCharCode("A".charCodeAt(0) + markerIndex);
        icon = "map/icons/" + markerBase + letter + ".png";
        cellTextA = "<img class='click'" + onclick + " src='" + icon + "'/>";
    }

    var cellTextB  = "<div><a " + onclick + " href='#'>" + data[DATA_NAME] + "</a></div>";
    if( verbose )
    {
        cellTextB += "<div class='town'>" + data[DATA_LOC] + " - " + GetMoreInfo(index) + "</div>";
    }

    var row = document.createElement( "tr" );
    var cellA = document.createElement( "td" );
    var cellB = document.createElement( "td" );
    cellA.innerHTML = cellTextA;
    cellB.innerHTML = cellTextB;

    row.appendChild( cellA );
    row.appendChild( cellB );
    parent.appendChild( row );
}

function ShowPopup( show )
{
    var flag = show ? "block" : "none";
    e("prevent").style.display = flag;
    e("popup").style.display = flag;
}

function OpenPopup( index )
{
    var data = gLocations[index].data;
    e("popupTitle").innerHTML = data[DATA_NAME];
    CreatePopupMenu( data[DATA_MENU] );
    e("popupText").innerHTML = data[DATA_INFO];

    //NewLocation( index, false );
    //gMap.closeInfoWindow();
    ShowPopup( true );
    return false;
}

function CreatePopupMenu( data )
{
    var tbody = e("popupMenuBody")
    
    var row = document.createElement( "tr" );
    for( var i = 0; i < data.length; i++) 
    {
        var cell = document.createElement( "td" );
        text = "<a href='" + data[i][MENU_VALUE] + "' target='_blank' onclick='this.blur()'>" + data[i][MENU_NAME] + "</a>";
        cell.innerHTML = text;
        row.appendChild( cell );
    }
    tbody.replaceChild( row, tbody.childNodes[0] );
}