// JavaScript Document

jQuery.preloadImages = function() {
    for(var i = 0; i < arguments.length; i++)
    {
        jQuery("<img/>").attr("src", arguments[i]);
    }
};

$("document").ready(function() {
   $.preloadImages("/images/ED1C2E-F5846D.png");
   
   $("body").addClass("enhanced");
   
   $("a.external").click(
        function () {
            urchinTracker(this.href);
    });//click
    $("a.pdf").click(
        function () {
            urchinTracker(this.href);
    });

	$("#nav-main li").mouseover(function () {
		$(this).addClass("sfHover");
	});
	$("#nav-main li").mouseout(function () {
		$(this).removeClass("sfHover");
	});
	
	// GOOGLE MAPS JAVASCRIPT API V3
    
    function initialize() {
        var myOptions = {
            zoom: 8,
            center: new google.maps.LatLng(43.95, -72.5),
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeControl: false,
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        
        // Marker sizes are expressed as a Size of X,Y
        // where the origin of the image (0,0) is located
        // in the top left of the image.
        
        // Origins, anchor positions and coordinates of the marker
        // increase in the X direction to the right and in
        // the Y direction down.
        var image = new google.maps.MarkerImage('/images/marker.png',
            // This marker is 20 pixels wide by 32 pixels tall.
            new google.maps.Size(29, 34),
            // The origin for this image is 0,0.
            new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 0,32.
            new google.maps.Point(14, 31));
        var shadow = new google.maps.MarkerImage('/images/marker-shadow.png',
            // The shadow image is larger in the horizontal dimension
            // while the position and offset are the same as for the main image.
            new google.maps.Size(33, 15),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 15));
            // Shapes define the clickable region of the icon.
            // The type defines an HTML <area> element 'poly' which
            // traces out a polygon as a series of X,Y points. The final
            // coordinate closes the poly by connecting to the first
            // coordinate.
        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18 , 1],
            type: 'poly'
        };
        
        // For more information on doing XMLHR with jQuery, see these resources:
        // http://net.tutsplus.com/tutorials/javascript-ajax/use-jquery-to-retrieve-data-from-an-xml-file/
        // http://marcgrabanski.com/article/jquery-makes-parsing-xml-easy
        jQuery.get("/xml/activity.xml", {}, function(data) {
            jQuery(data).find("marker").each(function() {
                
                var marker = jQuery(this);
                var activity = jQuery(this).find("activity");
                
                contentHtml = '<h3>' + marker.attr("name") + '</h3>';
                contentHtml += '<ul>';
                $(activity).each(function (i) {
                    var event_language;
                    if (activity.find("count").eq(i).text() == 1) {
                        event_language = " event";
                    } else {
                        event_language = " events";
                    }
                    
                    contentHtml += '<li>';
                    contentHtml += '<a href="' + activity.find("url").eq(i).text() + '">';
                    contentHtml += activity.find("name").eq(i).text();
                    contentHtml += '</a>';
                    contentHtml += ' <span class="count">(' + activity.find("count").eq(i).text() + event_language + ')</span>';
                    contentHtml += '</li>';
                });
                contentHtml += '</ul>';
                
                var infowindow = new google.maps.InfoWindow({
                    content: contentHtml
                });
                var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")), parseFloat(marker.attr("lng")));
                marker = new google.maps.Marker({position: latlng, map: map, shadow: shadow, icon: image, shape: shape, title: marker.attr("name")});
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });
            });
        });
    }

    google.setOnLoadCallback(initialize);
    
});