var map
var centerLatitude = 37.759417, centerLongitude = -122.511184, startZoom = 12;
var EightFootScrews = new GLatLng(37.76012993823887,-122.50848054885864) 



function initializeMap() {

    var gbarOptions = { showOnLoad: true };
    map = new GMap(document.getElementById("map"), { googleBarOptions: gbarOptions });
    map.addControl(new GLargeMapControl()); //adds the large zoom control
    map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
    map.addControl(new GMapTypeControl());
    map.enableGoogleBar(); //adds the search
    map.enableScrollWheelZoom(); //allows zoom with scroll button

    //add click listener to the map
    GEvent.addListener(map, "click", HandleMapClicks);

    //add EightFootScrews
    map.addOverlay(new GMarker(EightFootScrews, {title:'Eight Foot Screws Home Base'}));
    
    

    //Add in Drag Zoom
    setupDragZoom()

} //end function

function HandleMapClicks(overlay, point) {

    if (overlay == null && point != undefined) {
        var myInfoWindowHTML = '\
        <b>Point Selection Tool</b>\
        <table cellpadding="3" class="InfoWindow">\
            <tr>\
                <td align="left">\
                    Latitude:\
                </td>\
                <td>\
                    ' + point.y + '\
                </td>\
            </tr>\
             <tr>\
                <td align="left">\
                    Longitude:\
                </td>\
                <td>\
                    ' + point.x + '\
                </td>\
            </tr>\
        </table>';

        map.openInfoWindowHtml(point, myInfoWindowHTML);
    }//end if valid request
}


//Enables dragzoom on the map
function setupDragZoom() {
    /* first set of options is for the visual overlay.*/
    var boxStyleOpts = {
        opacity: .2,
        border: "2px solid red"
    };

    /* second set of options is for everything else */
    var otherOpts = {
        buttonHTML: "<img src='http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/release/examples/zoom-button.gif' />",
        buttonZoomingHTML: "<img src='http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/release/examples/zoom-button-activated.gif' />",
        buttonStartingStyle: { width: '24px', height: '24px' },
        overlayRemoveTime: 1000,
        title: "Zoom To Region"
    };

    map.addControl(new DragZoomControl(boxStyleOpts, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(1, 1)));

}; //end function




window.onload = initializeMap;
window.onunload = GUnload;