//Global 
var map = null;
var mapBound = null;
var WEBCLASSIFICATION = 0;
var DEALERNAME = 1;
var ADDRESS1 = 2;
var ADDRESS2 = 3;
var CITY = 4;
var STATE = 5;
var ZIPCODE = 6;
var COUNTRY = 7;
var PHONE = 8;
var EMAIL = 9;
var WEBSITE = 10;
var GEOCODES = 11;
var DIRECTIONS = 12;
var ZOOMLEVEL = 18;
var firstLoad = true;

$(document).ready(function() {
    InitMap();
    
    firstLoad = true;
    LocateStoresByLocation();
    firstLoad = false;
});

$(window).unload(function() {
    ClearGMapMemory();
});

//Initialize the map
function InitMap() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        //Center at US as default. 
        map.setCenter(new GLatLng( 40.062500,-95.677068), 4);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        
        mapBound = new GLatLngBounds();
    }
}

//Internet Explorer memory leak fix
function ClearGMapMemory() {
    GUnload();
}

//Decorate the marker with the data and subscribe it to mouse over event
function GetMarker(point,data) 
{
    var marker = new GMarker(point, GetIcon(data[WEBCLASSIFICATION]));
    GEvent.addListener(marker, "mouseover", function() {
        map.openInfoWindowHtml(point,FormatMapData(data));
    });

    return marker;
}

//Return the icon representing the type
function GetIcon(type)
{
    markerOptions = null;
    var hardenIcon = new GIcon();    
    
    hardenIcon.iconSize = new GSize(16, 31);
    hardenIcon.shadowSize = new GSize(35, 31);
    hardenIcon.iconAnchor = new GPoint(6, 31);
    hardenIcon.infoWindowAnchor = new GPoint(5, 1);
    hardenIcon.shadow = IMAGEURL + "icon_shadow.png";
            
    switch(type)
    {
        case "1": //Platinum Home Studio
            hardenIcon.image = IMAGEURL + "icon_PlatinumHomeStudio.png"; 
            break;
        case "2": //Harden Home Studio
            hardenIcon.image = IMAGEURL + "icon_HomeStudio.png";            
            break;
        case "3": //Harden Dealer
            hardenIcon.image = IMAGEURL + "icon_HardenDealer.png"; 
            break;
        default: //Designer Direct
            hardenIcon.image = IMAGEURL + "icon_DesignerDirect.png"; 
            break;
    }
     
    markerOptions = { icon:hardenIcon };
    
    return markerOptions;
}

//Format the data to be displayed in the bubble
function FormatMapData(data) 
{
    var display = new Array();
    display[0] = '<span class="highlight">' + data[DEALERNAME] + "</span>";    
    
    display[1] = data[ADDRESS1];
    if( data[ADDRESS2] != "" )
    {
        display[1] = display[1] + "<br />" + data[ADDRESS2];
    }
    
    display[2] = data[CITY] + ", " + data[STATE] + " " + data[ZIPCODE];
    display[3] = data[COUNTRY];
    display[4] = data[PHONE];
    
    if( data[EMAIL] != "" )
    {
        display[5] = "<a href='mailto:" + data[EMAIL] + "'>Contact us</a>";
    }
    
    if( data[WEBSITE] != "" )
    {    
        display[6] = "<a target='_blank' href='http://" + data[WEBSITE] + "'>Visit us</a>";
    }
    
    display[7] = "<a target='_blank' href='" + data[DIRECTIONS] + "'>Map and Directions</a>";
    
    var formattedData = "<div id='bubble'>" + display.join("<br />") + "</div>";
    return formattedData;
}

//Format the data to be displayed in the listing
function FormatListingData(data) 
{
    var display = new Array();
    display[0] = '<span class="highlight">' + data[DEALERNAME] + "</span>";    
    
    switch( data[WEBCLASSIFICATION] )
    {
        case "1": 
            display[1] = "Platinum Home Studio";
            break;
        case "2": 
            display[1] = "Home Studio";
            break;
        case "3": 
            display[1] = "Harden Dealer";
            break;
        default: 
            display[1] = "Designer Direct";
            break;
    }
    
    display[2] = data[ADDRESS1];
    if( data[ADDRESS2] != "" )
    {
        display[2] = display[2] + "<br />" + data[ADDRESS2];
    }
    
    display[3] = data[CITY] + ", " + data[STATE] + " " + data[ZIPCODE];
    display[4] = data[COUNTRY];
    display[5] = data[PHONE];
    
    if( data[EMAIL] != "" )
    {
        display[6] = "<a href='mailto:" + data[EMAIL] + "'>Contact us</a>";
    }
    
    if( data[WEBSITE] != "" )
    {    
        display[7] = "<a target='_blank' href='http://" + data[WEBSITE] + "'>Visit us</a>";
    }
    
    display[8] = "<a target='_blank' href='" + data[DIRECTIONS] + "'>Map and Directions</a>";
    
    var formattedData = "<li>" + display.join("<br />") + "</li>";
    return formattedData;
}

//Add the dealer to the listing div
function AddListing(data)
{
    $(".listing").append(FormatListingData(data))
}

//Callback error
function OnError(data)
{
    //To do: Log error
    alert("Error: " + data);
}

//Callback success - function to populate the map with markers        
function OnSuccess(data)
{             
    if( data.length != 0 )
    {   
        mapBound = new GLatLngBounds();
        var store = null;
        
        for( var i = 0; i < data.length; i++ )
        {
            store = data[i].split("|");
            AddMarker(store);
            AddListing(store);
        }
                
        //Adjust the display
        var clat = (mapBound.getNorthEast().lat() + mapBound.getSouthWest().lat()) /2;
        var clng = (mapBound.getNorthEast().lng() + mapBound.getSouthWest().lng()) /2;		    
        
        if(!firstLoad){
            map.setCenter(new GLatLng(clat,clng));		    
            map.setZoom(parseInt(store[13]));
        }
    }
    else		    
    {
        //No data 
        $("#noStoreFound").html("<span><strong>No Store Found</strong></span>");
        $("#noStoreFound").show('slow');
    }
    
    //Set the flag so we set the zoom and center of the map on updates
    firstLoad = false;
}
        
//Add a marker 
function AddMarker(data)
{
    var geocodes = data[11].split(",");
    var point = new GLatLng(geocodes[0],geocodes[1],true);
    var marker = GetMarker(point, data);
    
    map.addOverlay(marker);
    
    mapBound.extend(point);
}       

//Reset the ui
function Reset()
{
    RemoveMarkers();
    $(".listing").html("");
    $("#noStoreFound").hide('slow');
}
 
//Remove marker(s) from the map
function RemoveMarkers()
{
    map.clearOverlays();
}

//Toggle the view
function Toggle(ctrl)
{
    if( ctrl.value == "View as list" )
    {
        ctrl.value = "View as map";
        ToggleMap();             
        $("#divListing").show("slow");
    }
    else
    {
        ctrl.value = "View as list";                                           
        $("#divListing").hide("fast");
        ToggleMap();
    }
}

//IE bug. Need to move the div instead of hiding it so the map can be rendered and centered correctly.
function ToggleMap(state)
{
    $("#divMap").toggleClass("offScreen"); 
    $("#divMap").toggleClass("onScreen"); 
}