var studioID;
var map;
var gmarkers = [];
var htmls = [];
var gicons = [];

/// THis is the jquery code used on the locations accordion menu.
///----------------------------------------------------------------
$(document).ready(function() { 
    initAccordion();
    initMap();
    if(typeof setInitialLocation == 'function') {
        setInitialLocation();
    }
});
///----------------------------------------------------------------

function initAccordion() {
    // Expand only the active menu, which is determined by the class name
    $("#menu > li > a[@class=expanded] ").find("+ ul").slideToggle("medium");

    // Toggle the selected menu's class and expand or collapse the menu
    $("#menu > li > a").click(function() {
        $(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
    });
} ///------ end - initialize accordion control


function initMap() {

    if (GBrowserIsCompatible()) {

        var mapDiv = document.getElementById("locMap");
        // this variable will collect the html which will eventualkly be placed in the side_bar
        var side_bar_html = "";

        //Create the custom marker object...
        // This icon is a different shape, so we need our own settings

        //ORGINAL FAB ICON
        //            var fabutanIcon = new GIcon(G_DEFAULT_ICON, "../images/locations/map_icon.png");                    
        //            fabutanIcon.iconSize = new GSize(40, 40);
        //            fabutanIcon.shadowSize = new GSize(40, 40);
        //            fabutanIcon.shadowAnchor = new GPoint(50, 50);
        //            fabutanIcon.iconAnchor = new GPoint(5, 34);
        //            fabutanIcon.infoWindowAnchor = new GPoint(5, 2);
        //            fabutanIcon.infoShadowAnchor = new GPoint(14, 25);

        // FAB dot ICON
        var fabutanIcon = new GIcon(G_DEFAULT_ICON, "../images/locations/FabDot.png");

        fabutanIcon.iconSize = new GSize(10, 10);
        fabutanIcon.shadowSize = new GSize(0, 0);
        //fabutanIcon.shadowAnchor = new GPoint(0, 50);
        fabutanIcon.iconAnchor = new GPoint(5, 5);
        fabutanIcon.infoWindowAnchor = new GPoint(5, 5);
        //fabutanIcon.infoShadowAnchor = new GPoint(14, 25);   

        // arrays to hold copies of the markers and html used by the side_bar
        // because the function closure trick doesnt work there
       
        //var i = 0;

        // === Create an associative array of GIcons() ===
       
        //gicons["fabutan"] = new GIcon(G_DEFAULT_ICON, "media/images/map_icon.png");
        gicons["fabutan"] = new GIcon(fabutanIcon);

        // A function to create the marker and set up the event window
        function createMarker(point, name, html, icontype, id) {
            // === create a marker with the requested icon ===
            var marker = new GMarker(point, gicons[icontype]);
            GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(html);
                map.panTo(marker.getPoint());
                map.setZoom(10);
            });
            // save the info we need to use later for the side_bar
            gmarkers[id] = marker;
            htmls[id] = html;
            // add a line to the side_bar html
            //side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br>';
            // i++;
            return marker;
        }       

        // create the map
        map = new GMap2(document.getElementById("locMap"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(55.907787, -90.359741), 9);
        map.setZoom(3);

        // Setup the mouse wheel features.
        map.enableScrollWheelZoom();
        GEvent.addDomListener(mapDiv, "DOMMouseScroll", wheelevent);
        mapDiv.onmousewheel = wheelevent;

        // Read the data from example5.xml
        var request = GXmlHttp.create();
        //request.open("GET", "../App_Services/FabutanLocations.ashx", true

        request.open("GET", "../App_Services/locations.xml", true);

        request.onreadystatechange = function() {
            if (request.readyState == 4) {
                var xmlDoc = GXml.parse(request.responseText);
                // obtain the array of markers and loop through it
                var markers = xmlDoc.documentElement.getElementsByTagName("marker");

                for (var i = 0; i < markers.length; i++) {
                    // obtain the attribues of each marker
                    var lat = parseFloat(markers[i].getAttribute("lat"));
                    var lng = parseFloat(markers[i].getAttribute("lng"));
                    var point = new GLatLng(lat, lng);
                    var html = markers[i].getAttribute("html");
                    var label = markers[i].getAttribute("label");
                    var id = markers[i].getAttribute("id");
                    // === read the icontype attribute ===
                    var icontype = markers[i].getAttribute("icontype");
                    // === create the marker, passing the icontype string ===
                    var marker = createMarker(point, label, html, icontype, id);
                    map.addOverlay(marker);
                }
                // put the assembled side_bar_html contents into the side_bar div
                //document.getElementById("side_bar").innerHTML = side_bar_html;
            }
        }

        request.send(null);

    }

    else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
    }

}

// This function picks up the click and opens the corresponding info window
function myclick(id) {
    if (id != 0) {
        gmarkers[id].openInfoWindowHtml(htmls[id]);
    }
}

function setMapFocus(Latitude, Longitude, CityName, zoomLevel, id) {
    map.setCenter(new GLatLng(Latitude, Longitude), zoomLevel)
    refreshCityDetails(CityName);
    myclick(id);
    //scrollToMap();

    //map.panTo(new GLatLng(Latitude, Longitude));
    //map.setZoom(zoomLevel);
}

function panMap(Latitude, Longitude, zoomLevel, id) {
    map.setCenter(new GLatLng(Latitude, Longitude), zoomLevel)
    //map.panTo(new GLatLng(Latitude, Longitude));
    //map.setZoom(zoomLevel);
    myclick(id);
    scrollToMap();
}


function popitup(url) {
    newwindow = window.open(url, 'name', 'height=300,width=450,menubar=no,location=no');
}

function ShowLocationHours(id) {
    var wnd = window.radopen("hours.aspx?id=" + id, null);
    wnd.setSize(435, 320);
    wnd.set_modal(true);
    wnd.SetTitle("Hours of Operation");
}

function GetAddress(id) {
    studioID = id;
    radprompt('<em><span style=\'color: #000099;\'>Enter your starting address:</span></em>', GetAddressCallBack, 330, 120, null, 'Google Directions', '');
    //radprompt('Enter your starting address:', GetAddressCallBack, 330, 120, null, 'Google Directions', '');
}

function GetAddressCallBack(arg) {
    if (arg != null)
    {
        var customerAddress = encodeURI(arg);
        ShowDirections(customerAddress);
    }
}

function ShowDirections(customerAddress) {
    window.location = "directions.aspx?id=" + studioID + "&addr=" + customerAddress;

    //var wnd = window.radopen("directions.aspx?id=" + id +"&addr=" + customerAddress, null);
    //wnd.setSize(750, 600);
    //wnd.set_modal(true);
    //wnd.SetTitle("Google Map Directions");
}

function scrollToMap() {
    $('html, body').animate({ scrollTop: 0 }, 'slow');
}

function wheelevent(e) {
    if (!e) e = window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;
}