/* main map */

/* show a block panel */
function show(id){
    document.getElementById(id).style.display = 'block';
}

/* hide a panel */
function hide(id){
    document.getElementById(id).style.display = 'None';
}

/* availaible map layers */
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik('Classic');
var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle map", {
      displayOutsideMaxExtent: true,
      wrapDateLine: true});

/* default size and offset for icon */
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);

/* define global variable */
var markers = new Array();
var layerMarkers;

var currentPopup;
var currentFeature;
var clicked = false;

/* show a popup */
function showPop(feature) {
    if (currentPopup != null) {
      currentPopup.hide();
    }
    if (feature.popup == null) {
        feature.popup = feature.createPopup();
        map.addPopup(feature.popup);
    } else {
        feature.popup.toggle();
    }
    currentPopup = feature.popup;
}

/* load markers with an AJAX request */
function loadMarkers(){
    /* get checked categories */
    inputs = window.document.forms["frm_categories"];
    var categories = '';
    for (var i = 0; i < inputs.length; i++) {
        input = inputs[i];
        if (input.checked
             && input.name.substring('category_'.length, 0) == 'category_'){
            id = input.name.substring('category_'.length, input.name.length);
            if(categories) categories += '_';
            categories += id;
        }
    }
    /* 0 stand for all categories */
    if (!categories) categories = '0';
    var uri = "/chimere/getMarkers/" + categories;
    OpenLayers.loadURL(uri, '', this, setMarkers);
}

/* update the marker layers from an http response GeoJSON */
function setMarkers(response){
    if(layerMarkers) layerMarkers.destroy();
    if (response.responseText.indexOf('no results') == -1) {
        /* clean the marker layer */
        if (currentPopup) {
            currentPopup.hide();
            hide('detail');
        }
        layerMarkers = new OpenLayers.Layer.Markers('POIs');
        map.addLayer(layerMarkers);
        layerMarkers.setOpacity(0.8);

        var json = new OpenLayers.Format.JSON();
        var markers_pt = json.read(response.responseText);
        /* load every marker */
        for (var i = 0; i < markers_pt.features.length; i++) {
            putMarker(markers_pt.features[i]);
        }
        /*
        var geojson = new OpenLayers.Format.GeoJSON();
        var markers_pt = geojson.read(response.responseText);
        for (var i = 0; i < markers_pt.length; i++) {
            putMarker2(markers_pt[i]);
        }*/
    }
}

/* put a marker on the map */
function putMarker(mark) {
    /* initialise a new feature with appropriate attribute for setting a
    marker */
    lat = mark.geometry.coordinates[1];
    lon = mark.geometry.coordinates[0];
    var size = new OpenLayers.Size(mark.properties.icon_width,
                                   mark.properties.icon_height);
    iconclone = new OpenLayers.Icon(media_path + mark.properties.icon_path,
                                    size, offset);
    var feature = new OpenLayers.Feature(markers,
              new OpenLayers.LonLat(lon, lat).transform(epsg_display_projection,
                                                        epsg_projection),
              {icon:iconclone});
    /*feature.closeBox = false;*/
    feature.pk = mark.properties.pk;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud);
    feature.data.popupContentHTML = "<div class='cloud'>";
    feature.data.popupContentHTML += mark.properties.name;
    feature.data.popupContentHTML += "<br/>&nbsp;</div>";
    feature.data.overflow = 'hidden';
    var marker = feature.createMarker();
    /* manage markers events */
    var markerClick = function (evt) {
        currentFeature = this;
        if (clicked) {
            if (currentPopup == this.popup) {
                this.popup.hide();
                clicked = false;
                hide('detail');
            } else {
                currentPopup.hide();
                showPop(this);
                updateDetail(this.pk);
            }
        } else {
            showPop(this);
            clicked = true;
            updateDetail(this.pk);
        }
        OpenLayers.Event.stop(evt);
    };
    var markerOver = function (evt) {
        document.body.style.cursor='pointer';
        OpenLayers.Event.stop(evt);
    };
    var markerOut = function (evt) {
        document.body.style.cursor='auto';
        OpenLayers.Event.stop(evt);
    };
    marker.events.register('mousedown', feature, markerClick);
    marker.events.register('mouseover', feature, markerOver);
    marker.events.register('mouseout', feature, markerOut);
    layerMarkers.addMarker(marker);
    return feature;
}

/* update current detail panel with an AJAX request */
function updateDetail(pk){
    var uri = "/chimere/getDetail/" + pk;
    OpenLayers.loadURL(uri, '', this, setDetail);
}

/* update the detail panel from an http response */
function setDetail(response){
    if (response.responseText.indexOf('no results') == -1) {
        document.getElementById('detail').innerHTML = response.responseText;
        show('detail');
    }
}



/* main initialisation function */
function init(){
    /* set the main map */
    map = new OpenLayers.Map ('map', {
        controls:[new OpenLayers.Control.Navigation(),
                  new OpenLayers.Control.PanZoomBar(),
                  new OpenLayers.Control.ScaleLine()],
        maxExtent: maxExtent,
        maxResolution: 156543.0399,
        units: 'm',
        projection: new OpenLayers.Projection('EPSG:4326')
    });
        /*projection: new OpenLayers.Projection('EPSG:900913'),
        displayProjection: new OpenLayers.Projection('EPSG:4326')*/
    map.addLayers([layerMapnik, cyclemap]);
    loadMarkers();
    map.setCenter(centerLonLat, 12);
}