/* DEFINE VARIABLES */
var map;
var ge;
var geoXml = new GGeoXml;

$(document).ready(function () {

    // ZOOM TO FIT WORLD VIEW:
    var zoomToWorld = function(){
        var bounds = new GLatLngBounds;
        bounds.extend(new GLatLng(-70, -175));
        bounds.extend(new GLatLng(70, 175));
        map.setCenter(new GLatLng(0,0), map.getBoundsZoomLevel(bounds));
    }

    // INITIALIZE MAP:
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        // Zoom to fit world view:
        zoomToWorld();
        //map.setCenter(new GLatLng(0,0), 3);
        // Add map types:
        map.addMapType(G_PHYSICAL_MAP);
        map.setMapType(G_PHYSICAL_MAP);
        //map.addMapType(G_SATELLITE_3D_MAP);
        // Add UI controls:
        var customUI = map.getDefaultUI();
        customUI.controls.scalecontrol = false;
        map.setUI(customUI);
        map.enableContinuousZoom();
        map.addControl(new GLargeMapControl3D());
        map.addControl(new GMapTypeControl());
        //map.addControl(new GOverviewMapControl());
        // Add search bar:
        //map.enableGoogleBar();
    }
    
    // ICON:
    var icon = new GIcon();
    icon.image = "/images/markers/project.png";
    icon.shadow = "/images/markers/projectShadow.png";
    icon.iconSize = new GSize(20, 26);
    icon.shadowSize = new GSize(30, 27);
    icon.iconAnchor = new GPoint(10, 25);
    icon.infoWindowAnchor = new GPoint(10, 0);
    icon.infoShadowAnchor = new GPoint(23, 13);

    var markers = [];
    jQuery.each(Projects, function(i) {
        var project = Projects[i];
        // MARKER:
        // create a marker for this project:
        var point = new GLatLng(project.latitude, project.longitude);
        var marker = new GMarker(point, {icon:icon});
        map.addOverlay(marker);        
        // store marker id for future reference:
        markers[i] = marker;
        marker.id = project.id;
        marker.url = project.url;

        // TOOLTIP:
        // add a custom tooltip that is shown on mouseover:
        // uses gmaps.tooltip.js , see: http://onemarco.com/2007/05/16/custom-tooltips-for-google-maps/
        var tooltip = new Tooltip(marker, (project.name + " (" + project.location + ")"), 4);
        marker.tooltip = tooltip;
        map.addOverlay(tooltip);

        // LIST:
        // create a list item in the projectList for each marker:
        $("<li />")
            .html("<img src='/images/markers/project.png' alt='' style='height:12px;'/> " + project.name)
            .hover(function(){ highlightProject(marker, true); },
                function(){ highlightProject(marker, false); })
            .click(function(){ focusOnProject(marker); })
            .dblclick(function(){ openProject(marker); })
            .appendTo('#projectList > ul');

        // INFO:
        // temp values:  + "<ul><li>created at: " + project.created_at + "</li><li>latitude: " + project.latitude + "</li><li>longitude: " + project.longitude + "</li></ul>"

        var projectInfo = $("<div />")
            .addClass("project")
            .html("<a name=\"project" + project.id + "\"></a>"
                + "<h4>" + project.name + " (" + project.location + ")</h4>"
                + "<img src='/uploads/project/m/" + project.image + "' />"
                //+ "<a  href='" + project.url + "' class='mainLink'><img src='/images/zoomMap.jpg' alt=''/> visit the project site</a>"
                //+ "<p>" + project.description + "</p>"
            )
            .hide()
            .hover(function(){ highlightProject(marker, true); },
                function(){ highlightProject(marker, false); })
            .click(function(){ focusOnProject(marker); })
            .appendTo('#infoWidget');
            
        // PROJECT LINK:
        var projectLink = $('<a />');
        if(project.linkto == "blog"){
            projectLink
                .attr('href',project.blog)
                .html("<img src='/images/gotoBlog.jpg' alt=''/> visit the project blog");
        } else {
            projectLink
                .attr('href', project.url)
                .html("<img src='/images/zoomMap.jpg' alt=''/> visit the project map");
        }
        projectLink.button()
            .addClass('mainlink button')
            .click(function(){ showProgress(); })
            .appendTo(projectInfo);


        var projectDescription = $('<p />')
            .html(project.description)
            .appendTo(projectInfo);

        // EVENTS:
        // see: http://gmaps-samples.googlecode.com/svn/trunk/api_playgrounds/gmarkerevents.htm
        GEvent.addListener(marker, "mouseover", function(){ highlightProject(marker, true); });
        GEvent.addListener(marker, "mouseout", function(){ highlightProject(marker, false); });
        GEvent.addListener(marker, "click", function(){ focusOnProject(marker); });
        GEvent.addListener(marker, "dblclick", function(){ openProject(marker); });

    }); // close Projects each

    // FOCUS ON PROJECT:
    // Show the info div of a project (called when user hovers over marker)
    var focusOnProject = function (marker){
        map.panTo(marker.getLatLng());
        $('#infoWidget').children().hide();
        $('a[name=\"project' + marker.id + '\"]').parent().show();
    }
    // OPEN PROJECT:
    var openProject = function(marker){
        showProgress();
        window.location = marker.url;
    };

    // HIGHLIGHT PROJECT:
    var highlightProject = function (marker, state){
        if(state){
            marker.tooltip.show();
        }else{
            marker.tooltip.hide();
        }
    }

    $('.tooltip').css({'opacity':.9});
   
});

// Google recommends unloading the map:
$(document.body).unload(function() {
	if (GBrowserIsCompatible()) {
		GUnload();
	}
});