var cm_map;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];

// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var cm_baseIcon = new GIcon();
cm_baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
cm_baseIcon.iconSize = new GSize(20, 34);
cm_baseIcon.shadowSize = new GSize(37, 34);
cm_baseIcon.iconAnchor = new GPoint(9, 34);
cm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
cm_baseIcon.infoShadowAnchor = new GPoint(18, 25);

// Change these parameters to customize map
var param_useSidebar = false;
var param_titleColumn = "title";
var param_descriptionColumn = "description";
var param_latColumn = "latitude";
var param_lngColumn = "longitude";
var param_rankColumn = "rank";
var param_iconType = "blue";
var param_iconOverType = "orange";


setTimeout('cm_load()', 500);




    /**
    * Loads map and calls function to load in worksheet data.
    */
    function cm_load() {
        if (GBrowserIsCompatible()) {
            // create the map
            cm_map = new GMap2(document.getElementById("cm_map"));
            cm_map.addControl(new GSmallMapControl());
            cm_map.addControl(new GMapTypeControl());
            cm_map.setCenter(new GLatLng(33.745396,-108.00046), 1);

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

    /**
    * Function called when marker on the map is clicked.
    * Opens an info window (bubble) above the marker.
    * @param {Number} markerNum Number of marker in global array
    */
    function cm_markerDetail(markerNum) {
        cm_mapMarkers[markerNum].openInfoWindowHtml(cm_mapHTMLS[markerNum]);
    }
    function cm_markerDetailClose() {
        cm_map.closeInfoWindow();
    }
 
    /** 
    * Called when JSON is loaded. Creates sidebar if param_sideBar is true.
    * Sorts rows if param_rankColumn is valid column. Iterates through worksheet rows, 
    * creating marker and sidebar entries for each row.
    * @param {JSON} json Worksheet feed
    */
    function cm_loadMapOccareers() {
        var usingRank = false;

        if (param_useSidebar == true) {
            var sidebarTD = document.createElement("td");
            sidebarTD.setAttribute("width", "150");
            sidebarTD.setAttribute("valign", "top");
            var sidebarDIV = document.createElement("div");
            sidebarDIV.id = "cm_sidebarDIV";
            sidebarDIV.style.overflow = "auto";
            sidebarDIV.style.height = "auto";
            sidebarDIV.style.fontSize = "11px";
            sidebarDIV.style.color = "#000000";
            sidebarTD.appendChild(sidebarDIV);
            document.getElementById("cm_mapTRTall").appendChild(sidebarTD);
        }

        var bounds = new GLatLngBounds();

        for (var i = 0; i < markersArray.length; i++) {
            var entry = markersArray[i];
            if (entry[6]) {
                var lat = parseFloat(entry[6]);
                var lng = parseFloat(entry[7]);
                var point = new GLatLng(lat, lng);
                var html = "<div style='font-size:12px;text-align:left;'>";
                html += "<strong>" + entry[1] + "</strong>";
                html += "<br/>" + entry[2];
                html += "<br/>" + entry[3] + ', CA ' + entry[4];

                html += "<br/><br/>Click the school name for details.";
                var label = entry[1];
                var rank = entry[8];
                html += "</div>";

                // create the marker
                var marker = cm_createMarker(point, label, html, rank);
                cm_map.addOverlay(marker);
                cm_mapMarkers.push(marker);
                cm_mapHTMLS.push(html);
                bounds.extend(point);

                if (param_useSidebar == true) {
                    var markerA = document.createElement("a");
                    markerA.setAttribute("href", "javascript:void(0);");
                    markerA.setAttribute("onmouseover", "javascript:cm_markerDetail('" + i + "')");
                    markerA.style.color = "#000000";
                    var sidebarText = "";
                    if (usingRank) {
                        sidebarText += rank + ") ";
                    }
                    sidebarText += label;
                    markerA.appendChild(document.createTextNode(sidebarText));
                    sidebarDIV.appendChild(markerA);
                    sidebarDIV.appendChild(document.createElement("br"));
                    sidebarDIV.appendChild(document.createElement("br"));
                }
            }
        }

        //cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds));
        cm_map.setZoom(9);
        cm_map.setCenter(bounds.getCenter());
    }


    /**
    * Creates marker with ranked Icon or blank icon,
    * depending if rank is defined. Assigns onclick function.
    * @param {GLatLng} point Point to create marker at
    * @param {String} title Tooltip title to display for marker
    * @param {String} html HTML to display in InfoWindow
    * @param {Number} rank Number rank of marker, used in creating icon
    * @return {GMarker} Marker created
    */
    function cm_createMarker(point, title, html, rank) {
        var markerOpts = {};
        var nIcon = new GIcon(cm_baseIcon);

        nIcon.imageOver = "http://www.occareers.com/images/icons/" + rank + ".png";

        nIcon.imageOut = "http://www.occareers.com/images/icons/" + rank + ".png";
        nIcon.image = nIcon.imageOut;

        markerOpts.icon = nIcon;
        markerOpts.title = title;
        var marker = new GMarker(point, markerOpts);

        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);
        });
        GEvent.addListener(marker, "mouseover", function() {
            marker.setImage(marker.getIcon().imageOver);
        });
        GEvent.addListener(marker, "mouseout", function() {
            marker.setImage(marker.getIcon().imageOut);
        });
        GEvent.addListener(marker, "infowindowopen", function() {
            marker.setImage(marker.getIcon().imageOver);
        });
        GEvent.addListener(marker, "infowindowclose", function() {
            marker.setImage(marker.getIcon().imageOut);
        });
        return marker;
    }