var map;

document.observe('dom:loaded', function() {

    var slides = $$('div.slides')[0];
    var mapDiv = $('map');    

    $('tab-gallery').observe('click', function(ev) {

        Event.stop(ev);

        tab = Event.element(ev);

        tab = (tab.tagName == 'LI') ? tab : tab.up('li');

        tab.addClassName('active');

        $('tab-map').removeClassName('active');

        mapDiv.hide();
        slides.show();
    });

    $('tab-map').observe('click', function(ev) {

        Event.stop(ev);

        tab = Event.element(ev);

        tab = (tab.tagName == 'LI') ? tab : tab.up('li');

        tab.addClassName('active');

        $('tab-gallery').removeClassName('active');

        slides.hide();
        mapDiv.show();
    });

    allowMapControl = true;

    if (GBrowserIsCompatible()) {

        map = new GMap2(mapDiv);

        if (allowMapControl) {

            map.setUIToDefault();
            map.enableContinuousZoom();
            map.disableScrollWheelZoom();

            map.addControl(new GSmallZoomControl3D());
        }
        else {

            map.disableDragging();
            map.disableDoubleClickZoom();

        }

        points = new Array();
        markers = new Array();

        addMarkers($$('.dataset li.country'));

        var latlngbounds = new GLatLngBounds();

        for (var i = 0; i < points.length; i++) {

            latlngbounds.extend(points[i]);
        }

        map.setCenter(latlngbounds.getCenter(), map.getBoundsZoomLevel(latlngbounds), G_PHYSICAL_MAP);

        mapDiv.hide();
    }
});

function addMarkers(countries) {

    var markerShadow = "/images/maps/markers/pin-shadow.png";

    var greenIcon = new GIcon();
    greenIcon.image = "/images/maps/markers/pin.png";
    greenIcon.iconSize = new GSize(16, 16);
    greenIcon.iconAnchor = new GPoint(0, 0);
    greenIcon.shadow = markerShadow;
    greenIcon.shadowSize = new GSize(25, 16);

    var i = 0;

    countries.each(function(el) {

        var lat = el.down('.lat').innerHTML;
        var lng = el.down('.lng').innerHTML;
        var name = el.down('.displayName').innerHTML;
        var uri = el.down('.uri').innerHTML;
        var flag = el.down('.flag').innerHTML;
        var iconic = el.down('.iconic').innerHTML;
        var excerpt = el.down('.excerpt').innerHTML;        

        var point = new GLatLng(lat, lng);

        points[i] = point;

        var marker = new GMarker(point, { icon: greenIcon });

        marker.title = name;

        markers.push(marker);

        /*var html = '<h3><img src="' + flag + '"/>&#160;<a href="' + uri + '" title="View this country">' + name + '</a></h3><p>' + excerpt + ' <a href="' + uri + '">Read more &#187;</a></p>';*/

        var html = '<img style="float: left; margin-right: 10px;" src="http://audleywebapp/kevin/imageresize/images.ashx?w=-&h=60&q=75&url=' + iconic + '"/><h3><img src="' + flag + '"/>&#160;<a href="' + uri + '" title="View this country">' + name + '</a></h3><p>' + excerpt + ' <a href="' + uri + '" title="View this country">Read more &#187</a></p>';

        GEvent.addListener(marker, 'click', function() {

            map.openInfoWindowHtml(point, html, { maxWidth: 400, maxHeight: 300 });

        });

        map.addOverlay(marker);

        i++;
    });
}