var gmap;
var gbounds;

var drill_down_states;
var drill_down_cities;
var drill_down_markers;
var drill_down_label;
var drill_down_up;

var tooltip;

var prev_state_index;
var prev_city_index;
var prev_gmarker;

function gload()
{
    var map = document.getElementById("map");
    
    drill_down_states = document.getElementById("drill_down_states");
    drill_down_cities = document.getElementById("drill_down_cities");
    drill_down_markers = document.getElementById("drill_down_markers");
    drill_down_label = document.getElementById("drill_down_label");
    drill_down_up = document.getElementById("drill_down_up");
    
    tooltip = document.getElementById("tooltip");

    //check filter types of found in querystring    
    for(var i = 0; i < chk_filters.length; i++)
        document.getElementById(chk_filters[i]).checked = getQueryValue(chk_filters[i]) == "yes" ? true : false;
    
    //set map height
    map.style.height = map.parentNode.offsetHeight + "px";
    
    if(GBrowserIsCompatible())
    {
        gmap = new GMap2(document.getElementById("map"));
        
        //add map controls
        gmap.addControl(new GSmallMapControl());
        gmap.addControl(new GHierarchicalMapTypeControl(true));
        gmap.addMapType(G_PHYSICAL_MAP);
        
        var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(100,10));
        gmap.getPane(G_MAP_FLOAT_PANE).appendChild(document.getElementById("tooltip"));//add tooltip label
        
        //set default center
        gmap.setCenter(new GLatLng(30.688781, -88.050634), 6);

        updateMap();
        
        if(getQueryValue("search") == "yes")
        {
            document.getElementById("filter_container").style.display = "none";
            loadLocations();
            return;
        }
        
        //see if there is a preselected city
        for(var i = 0; i < cities.length; i++)
        {
            if(getQueryValue("city") == cities[i].city && getQueryValue("state") == cities[i].state)
            {
                for(var j = 0; j < states.length; j++)
                {
                    if(getQueryValue("state") == states[j].state)
                    {
                        prev_state_index = j;
                        break;
                    }
                }
                
                prev_city_index = i;
            
                loadLocations(i);
                return;
            }
        }
    
        //see if there is a preselected state
        for(var i = 0; i < states.length; i++)
        {
            if(getQueryValue("state") == states[i].state)
            {
                loadCities(i);
                return;
            }
        }
        
        //nothing preselected in query string
        loadStates();
    }
}

function setDrillDown(d, c, h)
{
    d.innerHTML = c > 0 ? h : "<div style=\"padding: 10px 10px 0px 10px; text-align: center;\">Sorry, there are no locations in this area.<br/>Please <a href=\"javascript://\" onclick=\"submitForm('add_marker'); return false;\">click here</a> to add a location.";
}

function loadStates(chk)
{
    var state_count = 0;
    var marker_count;
    var states_drill_down = "<table cellspacing=\"0\" cellpadding=\"1\" style=\"width:100%; vertical-align:top\">";
    
    gbounds = new GLatLngBounds();
    gmap.clearOverlays();

    //loop through all states
    for(var i = 0; i < states.length; i++)
    {
        marker_count = countMarkers(states[i].state); //number of markers for state
    
        if(marker_count > 0)
        {
            states[i].tr = state_count;
            
            states_drill_down += "<tr id=\"tr_states_" + state_count + "\" onmouseover=\"GEvent.trigger(states[" + i + "].gmarker, 'mouseover');\" onmouseout=\"GEvent.trigger(states[" + i + "].gmarker, 'mouseout');\" onclick=\"GEvent.trigger(states[" + i + "].gmarker, 'click');\" style=\"background-color: " + ((state_count % 2) ? "white" : "beige") + "; cursor: pointer;\">" +
                "<td align=\"right\">" + (state_count + 1) + ".</td>" +
                "<td align=\"left\" width=\"100%\" nowrap><b>"  + states[i].state + "</b>&nbsp;(" + marker_count + ")</td>" +
                "</tr>";
            
            gmap.addOverlay(states[i].gmarker);
            gbounds.extend(states[i].gmarker.getLatLng()); //make sure all markers are displayed within bounds of map
            
            states[i].gmarker.div_.innerHTML = marker_count;
            
            state_count++;
        }
    }

    states_drill_down += "</table>";
    
    //set zoom & center based on current markers
    if(!chk && state_count > 0)
    {
        gmap.setCenter(gbounds.getCenter());
        gmap.setZoom(gmap.getBoundsZoomLevel(gbounds));
    }
    
    //drill_down_label.innerHTML = "<div style=\"float: right; height: 18px; background: #A9A9A9; background-image: url(test.gif); background-repeat: no-repeat; padding-left: 20px; padding-top: 3px;\">&nbsp;Back</div>" + state_count + " State" + (state_count != 1 ? "s" : "");
    drill_down_label.innerHTML = state_count + " State" + (state_count != 1 ? "s" : "");
    setDrillDown(drill_down_states, state_count, states_drill_down);
    showDrilldown(true, false, false);
}

function loadCities(index, chk)
{
    var city_count = 0;
    var marker_count;
    var cities_drill_down = "<table cellspacing=\"0\" cellpadding=\"1\" style=\"width:100%; vertical-align:top\">";
    
    gbounds = new GLatLngBounds();
    gmap.clearOverlays();

    prev_state_index = index;

    //loop through all cities
    for(var i = 0; i < cities.length; i++)
    {
        if(cities[i].state == states[index].state)//only display cities for selected state
        {
            marker_count = countMarkers(cities[i].state, cities[i].city); //number of markers for city
            
            if(marker_count > 0)
            {
                cities[i].tr = city_count;

                cities_drill_down += "<tr id=\"tr_cities_" + city_count + "\" onmouseover=\"GEvent.trigger(cities[" + i + "].gmarker, 'mouseover');\" onmouseout=\"GEvent.trigger(cities[" + i + "].gmarker, 'mouseout');\" onclick=\"GEvent.trigger(cities[" + i + "].gmarker, 'click', 'city');\" style=\"background-color: " + ((city_count % 2) ? "white" : "beige") + "; cursor: pointer;\">" +
                    "<td align=\"right\">" + (city_count + 1) + ".</td>" +
                    "<td align=\"left\" width=\"100%\" nowrap><b>"  + cities[i].city + "</b>&nbsp;(" + marker_count + ")</td>" +
                    "</tr>";

                gmap.addOverlay(cities[i].gmarker);
                gbounds.extend(cities[i].gmarker.getLatLng());
                
                cities[i].gmarker.div_.innerHTML = marker_count;
                
                city_count++;
            }
        }
    }

    cities_drill_down += "</table>";
    
    //set zoom & center based on current markers
    if(!chk && city_count > 0)
    {
        gmap.setCenter(gbounds.getCenter());
        gmap.setZoom(gmap.getBoundsZoomLevel(gbounds));
    }
    
    drill_down_label.innerHTML = states[index].state + ": " + city_count + " " + (city_count != 1 ? "Cities" : "City");
    setDrillDown(drill_down_cities, city_count, cities_drill_down);
    showDrilldown(false, true, false);
}

function loadLocations(index, chk)
{
    var marker_count = 0;
    var markers_drill_down = "<table cellspacing=\"0\" cellpadding=\"1\" style=\"width:100%; vertical-align:top\">";
    
    gbounds = new GLatLngBounds();
    gmap.clearOverlays();

    prev_city_index = index;

    //loop through all markers
    for(var i = 0; i < markers.length; i++)
    {
        //only display markers for selected city/state
        if(getQueryValue("search") == "yes" || (markers[i].city.toLowerCase() == cities[index].city.toLowerCase() && markers[i].state.toLowerCase() == cities[index].state.toLowerCase() && markers[i].show))
        {
            markers[i].tr = marker_count;
                
            markers_drill_down += "<tr id=\"tr_markers_" + marker_count + "\" valign=\"top\" onmouseover=\"GEvent.trigger(markers[" + i + "].gmarker, 'mouseover');\" onmouseout=\"GEvent.trigger(markers[" + i + "].gmarker, 'mouseout');\" onclick=\"GEvent.trigger(markers[" + i + "].gmarker, 'click');\" style=\"background-color: " + ((marker_count % 2) ? "white" : "beige") + "; cursor: pointer;\">" + 
                "<td align=\"right\" valign=\"top\">" + (marker_count + 1) + ".</td>" +
                "<td width=\"100%\" valign=\"top\" nowrap><img src=\"markericons/" + markers[i].type + "/icon_blank.png\" width=\"12\"/>&nbsp;<b><a href=\"javascript: goToDetails(markers[" + i + "]);\" style=\"text-transform: capitalize;\">" + markers[i].name + "</a></b><!--" + (markers[i].phone != "" ? "&nbsp;&nbsp;" + markers[i].phone : "") + "--><br/><table cellspacing=\"0\" cellpadding=\"1\" width=\"100%\"><tr>" + (markers[i].logo != "" ? "<td valign=\"top\"><div style=\"width: 50px; text-align: center;\"><!--<a href=\"logos/" + markers[i].logo + "\" class=\"thickbox\" title=\"\">--><img src=\"logos/" + markers[i].logo.substring(0, markers[i].logo.lastIndexOf(".")) + "_small" + markers[i].logo.substring(markers[i].logo.lastIndexOf(".")) + "\" onload=\"//tb_init('a.thickbox, area.thickbox, input.thickbox');\"/><!--</a>--></div></td>" : "") + "<td valign=\"top\" style=\"white-space: nowrap; width: 100%\">" + (markers[i].street != "" ? "<!--" + markers[i].street + "<br/>-->" : "") + "<span style=\"text-transform: capitalize;\">" + markers[i].city + "</span>, " + markers[i].state + "<!-- " + markers[i].zip + "--><br/>" + (markers[i].phone != "" ? markers[i].phone : "") +"<div style=\"color: green;\">Type: <b>" + markers[i].type + (markers[i].subtype != "" ? ", " + markers[i].subtype : "") + "</b></div><!--<a href=\"submit_form.aspx\">Submit Photo</a>&nbsp;&nbsp;<a href=\"submit_form.aspx\">Submit Comment</a>&nbsp;&nbsp;<a href=\"submit_form.aspx\">Add Marker</a>--></tr></table></td>" +
                "</tr>";
            
            gmap.addOverlay(markers[i].gmarker);
            markers[i].gmarker.div_.innerHTML = (marker_count + 1);
            gbounds.extend(markers[i].gmarker.getLatLng());

            marker_count++;
        }
    }

    markers_drill_down += "</table>";
    
    //set zoom & center based on current markers
    if(!chk && marker_count > 0)
    {
        gmap.setCenter(gbounds.getCenter());
        gmap.setZoom(gmap.getBoundsZoomLevel(gbounds));
    }
    
    if(getQueryValue("search") == "yes")
        drill_down_label.innerHTML = marker_count + " Location" + (marker_count != 1 ? "s" : "");
    else
        drill_down_label.innerHTML = cities[index].city + ": " + marker_count + " Location" + (marker_count != 1 ? "s" : "");
        
    setDrillDown(drill_down_markers, marker_count, markers_drill_down);
    showDrilldown(false, false, true);
}

function showDrilldown(s, c, m)
{
    drill_down_up.style.display = s ? "none" : "block";
    
    if(getQueryValue("search") == "yes")
        drill_down_up.style.display = "none";

    drill_down_states.style.display = s ? "block" : "none";
    drill_down_cities.style.display = c ? "block" : "none";
    drill_down_markers.style.display = m ? "block" : "none";
}

function drilldownUp() //clicked back/up arrow
{   
    if(drill_down_cities.style.display == "block")
        loadStates();
    else
        loadCities(prev_state_index);
}

function updateMap(load, chk)
{
    var b_none_checked = true;

    //see if any filters are checked
    for(var i = 0; i < chk_filters.length; i++)
    {
        if(document.getElementById(chk_filters[i]).checked)
        {
            b_none_checked = false;
            break;
        }
    }
    
    for(var i = 0; i < markers.length; i++)
    {
        if(b_none_checked) //show if no filters checked
            markers[i].show = true;
        else
        {
            markers[i].show = false;
        
            //loop through filters
            for(var j = 0; j < chk_filters.length; j++)
            {
                //if filter checked and marker type match then show
                if(document.getElementById(chk_filters[j]).checked && document.getElementById(chk_filters[j]).value == markers[i].type)
                {
                    markers[i].show = true;
                    break;
                }
            }
        }
    }
    
    if(load)
    {
        if(drill_down_states.style.display == "block")
            loadStates(chk);
        else if(drill_down_cities.style.display == "block")
            loadCities(prev_state_index, chk);
        else if(drill_down_markers.style.display == "block")
            loadLocations(prev_city_index, chk);
    }
        
}

function countMarkers(s, c)//count markers that match state/city
{
    var iCount = 0;

    for(var i = 0; i < markers.length; i++)
    {
        if(markers[i].show == true && s.toLowerCase() == markers[i].state.toLowerCase() && (c == null || c.toLowerCase() == markers[i].city.toLowerCase()))
            iCount++;
    }
    
    return iCount;
}

function createMarker(point, index, type) //create markers with correct icon and labels
{
    var icon = new GIcon(); 
    var opts;
    
    if(type == "states")
    {
        icon.image = "markericons/State/icon_blank.png";
        icon.iconAnchor = new GPoint(46, 50);
        icon.shadow = "markericons/State/icon_shadow.png";
        opts = {"icon" : icon, "clickable" : true, "labelClass" : "state_marker", "labelOffset" : new GSize(-42, -40)}; 
    }
    else if(type == "cities")
    {
        icon.image = "markericons/City/icon_blank.png";
        icon.iconAnchor = new GPoint(18, 40);
        icon.shadow = "markericons/City/icon_shadow.png";
        opts = {"icon" : icon, "clickable" : true, "labelClass" : "city_marker", "labelOffset" : new GSize(-13, -31)}; 
    }
    else if(type == "markers")
    {
        icon.image = "markericons/" + eval(type)[index].type + "/icon_blank.png";
        icon.iconAnchor = new GPoint(11, 25);
        icon.shadow = "markericons/" + eval(type)[index].type + "/icon_shadow.png";
        icon.infoWindowAnchor = new GPoint(15, 4);
        opts = {"icon" : icon, "clickable" : true, "labelClass" : "marker", "labelOffset" : new GSize(-10, -22)}; 
    }
    
    var gmarker = new LabeledMarker(point, opts); 
    gmarker.index = index;
    gmarker.type = type;

    GEvent.addListener(gmarker, "mouseover", function()
        {
            var e = document.getElementById("tr_" + gmarker.type + "_" + eval(gmarker.type)[gmarker.index].tr);
            e.style.backgroundColor = "#E6E429";

            if(prev_gmarker != gmarker && gmap.getInfoWindow().isHidden())
                prev_gmarker = gmarker;
            
            //change icon image on mouseover
            if(gmarker.type == "states")
                gmarker.setImage("markericons/State/icon_hover.png");
            else if(gmarker.type == "cities")
                gmarker.setImage("markericons/City/icon_hover.png")
            
            //make sure item is showing in side menu
            if((e.offsetTop + e.offsetHeight ) - (e.parentNode.parentNode.parentNode.scrollTop - e.offsetHeight) > e.parentNode.parentNode.parentNode.offsetHeight || e.offsetTop < e.parentNode.parentNode.parentNode.scrollTop)
                eval("drill_down_" + gmarker.type).scrollTop = e.offsetTop;
                 
            //set tooltip
            if(gmarker.type == "markers")
                tooltip.innerHTML = "<b>" + markers[gmarker.index].name + "</b>";
            else if(gmarker.type == "states")
                tooltip.innerHTML = "<b>" + states[gmarker.index].state + "</b> (" + countMarkers(states[gmarker.index].state) + ")";
            else
                tooltip.innerHTML = "<b>" + cities[gmarker.index].city + "</b> (" + countMarkers(cities[gmarker.index].state, cities[gmarker.index].city) + ")";

            var point = gmap.getCurrentMapType().getProjection().fromLatLngToPixel(gmap.fromDivPixelToLatLng(new GPoint(0, 0), true), gmap.getZoom());
            var offset = gmap.getCurrentMapType().getProjection().fromLatLngToPixel(gmarker.getPoint() ,gmap.getZoom());
            var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize((offset.x - point.x) + (-gmarker.div_.offsetWidth), offset.y - point.y))
            pos.apply(tooltip); //position and show tooltip
            tooltip.style.display = "block";
        }
    );
    
    GEvent.addListener(gmarker, "mouseout", function()
        {
            
            var e = document.getElementById("tr_" + gmarker.type + "_" + eval(gmarker.type)[gmarker.index].tr);
            
            tooltip.style.display = "none"; //hide tooltip
            
            if(e)
            {
                e.style.backgroundColor = ((eval(gmarker.type)[gmarker.index].tr % 2) ? "white" : "beige");

                try
                {
                    //change icon back
                    if(gmarker.type == "states")
                        gmarker.setImage("markericons/State/icon_blank.png");
                    else if(gmarker.type == "cities")
                        gmarker.setImage("markericons/City/icon_blank.png");
                }
                catch(e){}
            }
        }
    );
    
    GEvent.addListener(gmarker, "click", function()
        {
            tooltip.style.display = "none";
        
            if(gmarker.type == "cities")
                loadLocations(gmarker.index);
            else if(gmarker.type == "states")
                loadCities(gmarker.index);
            else
                GDownloadUrl("/sitepages/get_marker_photos.aspx", function(data, code){getMarkerPhotos(gmarker, data, code)}, "id=" + markers[gmarker.index].id)
        }
    );
    
    return gmarker;
}

function getMarkerPhotos(m, data, code)
{
    if(code == 200)
    {
        var d = document.createElement("div");
        d.innerHTML = data;

        var tabs = new Array();
        var details = "<div class=\"iwstyle\"><img src=\"markericons/" + markers[m.index].type + "/icon_blank.png\" width=\"25\" height=\"25\"/>&nbsp;<a href=\"javascript://\" onclick=\"goToDetails(markers[" + m.index + "]); return false;\" style=\"font-size: 12pt; white-space: nowrap; font-weight: bold; text-transform: capitalize;\">" + markers[m.index].name + "</a></div>" +
            "<table cellpadding=\"0\" cellspacing=\"0\"><tr>" +
                "<td valign=\"top\" nowrap style=\"font-size: 8pt; font-family: arial;\">" + 
                    "<span style=\"text-transform: capitalize;\">" + (markers[m.index].street != "" ? markers[m.index].street + "<br/>" : "") + markers[m.index].city + "</span>, " + markers[m.index].state + " " + markers[m.index].zip + "<br/>" + (markers[m.index].phone != "" ? markers[m.index].phone + "<br/>" : "") + 
                    (markers[m.index].website != "" ? "<a href=\"" + markers[m.index].website + "\" target=\"_blank\">" + markers[m.index].website + "</a><br/>" : "") + 
                    "<div style=\"color: green;\">Type: <b>" + markers[m.index].type + (markers[m.index].subtype != "" ? ", " + markers[m.index].subtype : "") + "</b></div>" + 
                    "<a href=\"javascript://\" onclick=\"goToDetails(markers[" + m.index + "]); return false;\">See Details</a>&nbsp;&nbsp;<a href=\"javascript://\" onclick=\"submitForm('photo'); return false;\">Submit Photo</a>&nbsp;&nbsp;<a href=\"javascript://\" onclick=\"submitForm('comment'); return false;\">Submit Comment</a>&nbsp;&nbsp;<a href=\"javascript://\" onclick=\"submitForm('add_marker'); return false;\">Add Marker</a>" +
                "</td>" + 
                (markers[m.index].logo != "" ?
                "<td valign=\"top\" style=\"padding-top: 5px; padding-left: 5px;\">" + 
                    "<a href =\"logos/" + markers[m.index].logo + "\" class=\"thickbox\" title=\"\"><img src=\"logos/" + markers[m.index].logo.substring(0, markers[m.index].logo.lastIndexOf(".")) + "_medium" + markers[m.index].logo.substring(markers[m.index].logo.lastIndexOf(".")) + "\" width=\"90\" onload=\"tb_init('a.thickbox, area.thickbox, input.thickbox');\"/></a>" +
                "</td>" :
                "") +
            "</tr></table>";
        tabs.push(new GInfoWindowTab("Info", details));
        
        if(markers[m.index].description != "")
            tabs.push(new GInfoWindowTab("Description", "<a href=\"javascript://\" onclick=\"goToDetails(markers[" + m.index + "]); return false;\">See Details</a><br/><br/><div style=\"width: 275px;;\">" + markers[m.index].description + "</div>"));
        if(d.getElementsByTagName("div")[0].innerHTML != "") //if photos exists
            tabs.push(new GInfoWindowTab("Photos", d.getElementsByTagName("div")[0].innerHTML));
        if(d.getElementsByTagName("div")[1].innerHTML != "") //if comments exists
            tabs.push(new GInfoWindowTab("Comments", d.getElementsByTagName("div")[1].innerHTML));
        
        m.openInfoWindowTabsHtml(tabs, {maxHeight: 110, autoScroll: true});
    }
    else
    {
        alert("Problem retrieving data - get marker photos."); 
    }
    
}

function getQueryValue(name)
{
    var value;
    var regX = new RegExp(name + "=([^&]+)","gi");

    if(regX.test(location.search))
        value = unescape(RegExp.$1);
    else 
        value = "";

    return value;
}

function goToDetails(m)
{
    var temp = "/sitepages/details.aspx" + (getQueryValue("search") == "yes" ? window.location.search + "&id=" + m.id : "?id=" + m.id + "&state=" + states[prev_state_index].state + "&city=" + cities[prev_city_index].city);
 
    for(var i = 0; i < chk_filters.length; i++) //build querystring
    {
        if(document.getElementById(chk_filters[i]).checked)
            temp += "&" + chk_filters[i] + "=yes";
    }

    window.location = temp;
}

function submitForm(action)
{
    var f = document.getElementById("form1");

    var temp = (getQueryValue("search") == "yes" ? window.location.search.substring(1) : (prev_state_index != null ? "state=" + states[prev_state_index].state : "") + (prev_city_index != null ? "&city=" + cities[prev_city_index].city : "")) ;
    
    for(var i = 0; i < chk_filters.length; i++)
    {
        if(document.getElementById(chk_filters[i]).checked)
            temp += "&" + chk_filters[i] + "=yes";
    }
    
    if(prev_gmarker)
        f.marker_id.value = markers[prev_gmarker.index].id;
    f.marker_action.value = action;
    f.querystring.value = temp;

    if(action == "add_marker")
        f.action = "/sitepages/add_marker.aspx";
    
    f.submit();
}