var map             = null;
var markers         = new Array();
var categories      = Array();

function _(id) { return document.getElementById(id); }

function load() 
{   
    if (!GBrowserIsCompatible()) {
        alert('Your browser is not compatoble.');
        return false;
    }
    
    map = new GMap2(_('map'));
    map.setCenter(new GLatLng(52.80317653234415, -1.6445159912109375), 13);    
    map.addControl(new GSmallMapControl());
    
    loadCategories();
    loadMarkers(-1);
    if (map.isLoaded()) {
        hideMap();
    } 
}

function loadCategories() 
{
    GDownloadUrl("/json-categories", function(data, responseCode) {
        // got json object
        categories = eval('(' + data + ')');
    });
}

function loadMarkers(id) 
{   
    var url = (id == -1) ? "/json-markers" : "/json-markers?category_id=" + id;
    GDownloadUrl(url, function(data, responseCode) {
            // got json object
        fetchedMarkers = eval('(' + data + ')');
            
        for (var i = 0; i < fetchedMarkers.length; i++) {
            addGMarker(fetchedMarkers[i]);
        }

    });
}

function addGMarker(markerNode)  // new version
{   
    var category = null;
    for (var j = 0; j < categories.length; j++) {
        if (categories[j].id == markerNode.category_id) {
            category = categories[j];
        }
    }

    var icon = new GIcon();

    if (category) {
        icon.image = category.iconImage;
        icon.shadow = category.iconShadow;
    }

    icon.image = icon.image ? icon.image : 'http://maps.google.com/mapfiles/kml/pal4/icon57.png'
    icon.shadow = icon.shadow ? icon.shadow : 'http://maps.google.com/mapfiles/kml/pal4/icon57s.png'

    icon.iconSize=new GSize(32,32);
    icon.shadowSize=new GSize(56,32);
    icon.iconAnchor=new GPoint(16,32);
    icon.infoWindowAnchor=new GPoint(16,0);

    var marker = new GMarker(new GLatLng(markerNode.lat, markerNode.lng), icon);

    marker.info = markerNode;

    marker.info.tabDetailsHTML  = '<strong>' + marker.info.name + '</strong><br />Address: ' + marker.info.address + '<br />';
    marker.info.tabDetailsHTML  = marker.info.tabDetailsHTML + 'Email: ' + marker.info.email + '<br />Website: <a href="' + marker.info.website + '">' + marker.info.website + '</a><br />';
    marker.info.tabDetailsHTML  = marker.info.tabDetailsHTML + 'Phone: ' + marker.info.phone + '<br />Postcode: ' + marker.info.postcode + '<br />';
    if (marker.info.skype != '') {
        marker.info.tabDetailsHTML  = marker.info.tabDetailsHTML + '<a href="skype:' + marker.info.skype +'?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_white_124x52.png" style="border: 0; width: 62px; height: 26px;" alt="Skype Me!" /></a> ';
    }
    marker.info.tabVideoHTML = '<a title="click here to load video in player" href="javascript:setVideoLink(\'' + marker.info.video + '\')">' + marker.info.video + '</a>';
        
    marker.info.tabs     = [
        new GInfoWindowTab('Info',  marker.info.tabDetailsHTML),
        new GInfoWindowTab('Video', marker.info.tabVideoHTML)
    ];
        
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowTabsHtml(marker.info.tabs);
    });

    map.addOverlay(marker); 
    markers[parseInt(markers.length)] = marker;
}

function goToMarker(lat, lng)
{   
    var newCenterPoint = new GLatLng(lat, lng);
    for (var i = 0; i < markers.length; i++) {
        if (markers[i].getPoint().lat() == lat && markers[i].getPoint().lng() == lng) {
            var choosenMarker = markers[i];
            break;
        }
    }

    if (!choosenMarker) {
        alert('Cant find marker. Cantact with administrator, please');
        return;
    }

    map.setCenter(newCenterPoint);

    choosenMarker.openInfoWindowTabsHtml(choosenMarker.info.tabs);

    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    window.setTimeout(function() {
        map.panTo(new GLatLng(lat + (lngSpan / 10), lng));
    }, 500);
    
}

function showCategory(id) {
    for (var i = 0; i < markers.length; i++) {
        map.removeOverlay(markers[i]);
        map.closeInfoWindow();
    }
    loadMarkers(id);
}

function showHideMap() {
    if (_('map').style.display == 'none') {
        showMap();
    } else {
        hideMap();
    }
}

function showMap() {
    $('map').style.display = 'block';
    $('mapContainerTitle').innerHTML = '<b>-</b> Hide Map';
}

function hideMap() {
    $('map').style.display = 'none';
    $('mapContainerTitle').innerHTML = '<b>+</b> Show Map';
}