/** MAP FUNCTIONS - Extension of OL base features */


/**
 * Globals
 */
measureTypeSelect = 'area'; // line
MEASURING = false;

/**
 * Currently drawn feature.
 * @type {ol.Feature}
 */
var sketch;


/**
 * The help tooltip element.
 * @type {Element}
 */
var helpTooltipElement;


/**
 * Overlay to show the help messages.
 * @type {ol.Overlay}
 */
var helpTooltip;


/**
 * The measure tooltip element.
 * @type {Element}
 */
var measureTooltipElement;


/**
 * Overlay to show the measurement.
 * @type {ol.Overlay}
 */
var measureTooltip;


/**
 * Message to show when the user is drawing a polygon.
 * @type {string}
 */
var continuePolygonMsg = 'Clicca per continuare a disegnare il poligono';


/**
 * Message to show when the user is drawing a line.
 * @type {string}
 */
var continueLineMsg = 'Clicca per continuare a disegnare la linea';


/**
 * Handle pointer move.
 * @param {ol.MapBrowserEvent} evt The event.
 */
pointerMoveHandler = function(evt) {
    if ( MEASURING ){
        if (evt.dragging) {
            return;
        }
        /** @type {string} */
        var helpMsg = 'Clicca per iniziare a disegnare sulla mappa';
    
        if (sketch) {
        var geom = (sketch.getGeometry());
        if (geom instanceof ol.geom.Polygon) {
            helpMsg = continuePolygonMsg;
        } else if (geom instanceof ol.geom.LineString) {
            helpMsg = continueLineMsg;
        }
        }
    
        helpTooltipElement.innerHTML = helpMsg;
        helpTooltip.setPosition(evt.coordinate);
    
        helpTooltipElement.classList.remove('hidden');
    }    
};

/**
 * Format length output.
 * @param {ol.geom.LineString} line The line.
 * @return {string} The formatted length.
 */
formatLength = function(line) {
    var length = ol.Sphere.getLength(line);
    var output;
    if (length > 100) {
    output = (Math.round(length / 1000 * 100) / 100) +
        ' ' + 'km';
    } else {
    output = (Math.round(length * 100) / 100) +
        ' ' + 'm';
    }
    return output;
};

/**
 * Format area output.
 * @param {ol.geom.Polygon} polygon The polygon.
 * @return {string} Formatted area.
 */
formatArea = function(polygon) {
    var area = ol.Sphere.getArea(polygon);
    var output;
    if (area > 10000) {
    output = (Math.round(area / 1000000 * 100) / 100) +
        ' ' + 'km<sup>2</sup>';
    } else {
    output = (Math.round(area * 100) / 100) +
        ' ' + 'm<sup>2</sup>';
    }
    return output;
};

/**
 * Activate on map measure interaction
 */
function addMeasureInteraction() {
    var type = (measureTypeSelect == 'area' ? 'Polygon' : 'LineString');
    draw_measure = new ol.interaction.Draw({
        source: source_measure,
        type: /** @type {ol.geom.GeometryType} */ (type),
        style: new ol.style.Style({
            fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 0, 0.5)',
            lineDash: [10, 10],
            width: 2
            }),
            image: new ol.style.Circle({
            radius: 5,
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 0, 0.7)'
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            })
            })
        })
    });

    map.addInteraction(draw_measure);

    createMeasureTooltip();
    createHelpTooltip();

    var listener;
    draw_measure.on('drawstart',
        function(evt) {
        // set sketch
        sketch = evt.feature;

        /** @type {ol.Coordinate|undefined} */
        var tooltipCoord = evt.coordinate;

        listener = sketch.getGeometry().on('change', function(evt) {
            var geom = evt.target;
            var output;
            if (geom instanceof ol.geom.Polygon) {
                output = formatArea(geom);
                tooltipCoord = geom.getInteriorPoint().getCoordinates();
            } else if (geom instanceof ol.geom.LineString) {
                output = formatLength(geom);            
                tooltipCoord = geom.getLastCoordinate();
            }
                measureTooltipElement.innerHTML = output;
                //console.log(output);
                measureTooltip.setPosition(tooltipCoord);
            });
        }, this);

    draw_measure.on('drawend',
        function() {
            measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
            measureTooltip.setOffset([0, -7]);
            // unset sketch
            sketch = null;
            // unset tooltip so that a new one can be created
            measureTooltipElement = null;
            createMeasureTooltip();
            ol.Observable.unByKey(listener);
        }, this);
}

/**
 * Creates a new help tooltip
 */
function createHelpTooltip() {
    if (helpTooltipElement) {
        helpTooltipElement.parentNode.removeChild(helpTooltipElement);
    }
    helpTooltipElement = document.createElement('div');
    helpTooltipElement.className = 'ol-tooltip hidden';
    helpTooltip = new ol.Overlay({
    element: helpTooltipElement,
    offset: [15, 0],
    positioning: 'center-left'
    });
    map.addOverlay(helpTooltip);
}


/**
 * Creates a new measure tooltip
 */
function createMeasureTooltip() {
    if (measureTooltipElement) {
        measureTooltipElement.parentNode.removeChild(measureTooltipElement);
    }
    measureTooltipElement = document.createElement('div');
    measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
    measureTooltip = new ol.Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center'
    });
    map.addOverlay(measureTooltip);

}

/**
 * Add a geojson to map and zoom to it
 * @param {string} geojson 
 */
var addGeojsonOnMap = function ( geojson ) {
    GEOJSON_SOURCE.clear();

    var geojson_source = (new ol.format.GeoJSON()).readFeature(geojson);   
    GEOJSON_SOURCE.addFeature ( geojson_source );

}

/**
 * Select geojson feature style according to
 * geometry type 
 * @param {object} feature 
 */
var geojsonStylingFunction = function (feature) {
    var image = new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
            color: 'rgba(255, 204, 51, 0.4)'
        }),
        stroke: new ol.style.Stroke({color: '#ffcc33', width: 1})
    });

    var styles = {
        'Point': new ol.style.Style({
            image: image
        }),
        'LineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            })
        }),
        'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            })
        }),
        'MultiPoint': new ol.style.Style({
            image: image
        }),
        'MultiPolygon': new ol.style.Style({
            stroke: new ol.style.Stroke({
            color: 'yellow',
            width: 1
            }),
            fill: new ol.style.Fill({
            color: 'rgba(255, 255, 0, 0.1)'
            })
        }),
        'Polygon': new ol.style.Style({
            stroke: new ol.style.Stroke({
            color: 'blue',
            lineDash: [4],
            width: 3
            }),
            fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 0.1)'
            })
        }),
        'GeometryCollection': new ol.style.Style({
            stroke: new ol.style.Stroke({
            color: 'magenta',
            width: 2
            }),
            fill: new ol.style.Fill({
            color: 'magenta'
            }),
            image: new ol.style.Circle({
            radius: 10,
            fill: null,
            stroke: new ol.style.Stroke({
                color: 'magenta'
            })
            })
        }),
        'Circle': new ol.style.Style({
            stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
            }),
            fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.2)'
            })
        })
    };
    return styles[feature.getGeometry().getType()];
};

/**
 * Start drawing a box for multiple 
 * query on space
 */
var draw_box_for_query = function () {

    maxPoints = 2;
    geometryFunction = function(coordinates, geometry) {
        if (!geometry) {
            geometry = new ol.geom.Polygon(null);
        }
        var start = coordinates[0];
        var end = coordinates[1];
        geometry.setCoordinates([
            [start, [start[0], end[1]], end, [end[0], start[1]], start]
        ]);
        return geometry;
    };
        
    BOX_DRAW = new ol.interaction.Draw({
        source: BOX_DRAW_SOURCE,
        type: /** @type {ol.geom.GeometryType} */ ('LineString'),
          geometryFunction: geometryFunction,
          maxPoints: maxPoints
        });
    map.addInteraction(BOX_DRAW);

}

/**
 * End drawing boxes
 */
var end_draw_box = function () {
    BOX_DRAW_SOURCE.clear();
    map.removeInteraction(BOX_DRAW);
}

/**
 * Select geojson feature style according to
 * geometry type 
 * @param {object} feature 
 */
var wfsSelectionStyle = function (feature) {
    var image = new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
            color: 'rgba(255, 204, 51, 0.4)'
        }),
        stroke: new ol.style.Stroke({color: '#ffcc33', width: 1})
    });

    var styles = {
        'Point': new ol.style.Style({
            image: image
        }),
        'LineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            })
        }),
        'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            })
        }),
        'MultiPoint': new ol.style.Style({
            image: image
        }),
        'MultiPolygon': new ol.style.Style({

            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                lineDash: [4],
                width: 1
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255, 204, 51, 0.4)'
            })
            
        }),
        'Polygon': new ol.style.Style({

            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                lineDash: [4],
                width: 1
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255, 204, 51, 0.4)'
            })

        }),
        'GeometryCollection': new ol.style.Style({
            stroke: new ol.style.Stroke({
            color: 'magenta',
            width: 2
            }),
            fill: new ol.style.Fill({
            color: 'magenta'
            }),
            image: new ol.style.Circle({
            radius: 10,
            fill: null,
            stroke: new ol.style.Stroke({
                color: 'magenta'
            })
            })
        }),
        'Circle': new ol.style.Style({
            stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
            }),
            fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.2)'
            })
        })
    };
    return styles[feature.getGeometry().getType()];
};

/**
 * Activate box wfs selection
 * @param {array} A 
 */
var activate_box_wfs_selection = function ( A ) {
    RESULT_BOX_SOURCE.clear();
    BOX_WFS_LAYERS = A.join(',');
    draw_box_for_query();
    $('#boxSelectionActive').hide();
    $('#boxSelectionDeactive').show();
    $('#boxSelectionClose').hide();
}

/**
 * Deactivate box wfs selection
 */
var deactivate_box_wfs_selection = function () {
    end_draw_box();
    $('#boxSelectionActive').show();
    $('#boxSelectionDeactive').hide();
    $('#boxSelectionClose').show();
}

/**
 * Close box wfs selection
 */
var close_box_wfs_selection = function () {
    GROUP_SELECTION = false;
    $$('bs1').hide();
    $$('bs1-resizer').hide();
    $$('bs2').hide();
    RESULT_BOX_SOURCE.clear();
    $$('p3').toggle();
}

/**
 * Create table list inside boxLayersInfo
 * @param {object} features 
 */
var create_bs_table = function ( features ) {
    var lr = $('#boxSelectionLayers').val();

    var cfg = BOX_SELECTION_LIST_JSON;

    var t = '';

    // for each selected layer
    for ( k in lr ){

        var pt = [];

        // table head generation
        for ( var j in cfg ) {
            if ( cfg[j]['id'] === lr[k] ) {
                pt = cfg[j].properties;    
                 // head (table name)
                t += '<center><h4 class="text-uppercase"><strong>' +  cfg[j]['name'] + '</strong></h4><center>';
                t += '<table style="cursor: pointer;" class="table table-striped table-hover table-condensed font-13"><thead>';     
                for ( s in pt ) { 
                    t+= '<th>' + pt[s]['text'] + '</th>';
                }
                t += '</thead>';        
            }
        }

        t += '<tbody>';

        for ( var i in features ) {

            if ( lr[k] === features[i].getId().split('.')[0] ) {
                var ex = features[i].getGeometry().getExtent();
                t += '<tr onclick="fitToExtent('+ex[0]+','+ex[1]+','+ex[2]+','+ex[3]+')">';

                for ( var j in pt ){
                    
                    var vl = features[i].getProperties()[ pt[j]['qgs'] ];
                    if ( vl === undefined ) { vl = '-' }
                    t += '<td>' + vl + '</td>';

                }
                t += '</tr>';
            }            

        }

        t += '</tbody></table>';
    }

    return t;
    
}

/**
 * Fit map to object extension
 * @param {object} geom 
 */
var fitToExtent = function ( a,b,c,d ) {
    extent = [a,b,c,d];
    map.getView().fit(extent, map.getSize());
}