<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
<link rel="import" href="../../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"/>
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html"/>
<link rel="import" href="../../bower_components/paper-item/paper-item.html"/>

<script src="../../locales/paper_card_controllet_ln.js"></script>

<dom-module id="select-marker-map-controllet">

    <template>
        <style is="custom-style">
            #map_tootlbar{
                background: #ffffff;
                border: 1px solid #ccc;
                position: absolute;
                top: 2%;
                right: 1%;
                z-index: 1;
                padding: 4px;
            }

            div.ol3-geocoder-container{
                position: absolute;
                top: 26%;
                left: .5em;
                box-sizing: border-box;
            }
        </style>
        <link href="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.min.css" rel="stylesheet">


        <div id="map_tootlbar">
            <paper-dropdown-menu label="Interaction" id="interaction_box">
                <paper-listbox id="interaction_box" class="dropdown-content" selected={{selected_interaction}}>
                    <paper-item>Marker</paper-item>
                    <paper-item>LineString</paper-item>
                    <paper-item>Polygon</paper-item>
                    <paper-item disabled>Circle</paper-item>
                    <paper-item>Square</paper-item>
                    <paper-item>Box</paper-item>
                    <paper-item>Text</paper-item>
                </paper-listbox>
            </paper-dropdown-menu>

            <!--<paper-input id="shape_label" label="Shape label" maxlenght="30" value="{{label}}"></paper-input>-->
            <paper-fab id="map_layer" class="cocreation_view_modes_button" mini icon="maps:satellite" on-click="_handleMapLayerClick" style="background-color:#B6B6B6"></paper-fab>

        </div>

        <div id="map" tabindex="0" style="height: 100%; width: 100%"></div>
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup_content"></div>
        </div>
    </template>

    <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
    <script src="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>

    <script>

        _this = null;
        Polymer({
            is: "select-marker-map-controllet",

            listeners : {
                'iron-select' : '_changeInteraction'
            },

            properties: {
                lang:{
                    type: String,
                    value: navigator.language
                },
                map:{
                    type: Object
                },

                olview:{
                    type: Object
                },

                geocoder:{
                    type: Object
                },

                overlay:{
                    type: Object
                },

                iconStyle:{
                    type : Object
                },

                vectorSource:{
                    type: Object
                },

                coordinate: {
                    type: Array,
                    value: []
                },

                interaction:{
                    type: String,
                    value: "marker"//marker - geojson
                },

                selected_interaction:{
                    type: Number,
                    value: 0
                },

                draw_layer:{
                    type: Object
                },

                source: {
                    type: Object
                },

                draw:{
                    type: Object
                },

                textStyle:{
                    type: Object
                },

                geoStyle:{
                    type: Object
                },

                label: {
                    type: String,
                    value: ""
                },

                satLayer: {
                    type: Object,
                    value: new ol.layer.Tile({
                              title: 'Global Imagery',
                              visible: false,
                              source: new ol.source.BingMaps({
                                key : "AiAjdlCagGtE5269Z4YP3e3VtMkzzAKvowq5cQadahNZjVxttUxdDS40u91Uv8qP",
                                imagerySet: 'AerialWithLabels'
                              })
                          })
                },

                layers: {
                    type : Array,
                    value : []
                }

            },

            ready : function(){
                _this = this;
                this.olview = new ol.View({
                            center: [0, 0],
                            projection: "EPSG:4326",
                            zoom: 3,
                            minZoom: 2,
                            maxZoom: 20
                        });

                var baseLayer = new ol.layer.Tile({
                    source: new ol.source.OSM()
                });

                //marker layer
                this.iconStyle = new ol.style.Style({
                    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                        anchor: [0.5, 46],
                        anchorXUnits: 'fraction',
                        anchorYUnits: 'pixels',
                        opacity: 0.9,
                        src: 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images/marker-icon.png'
                    }))
                });

                this.vectorSource = new ol.source.Vector({});

                //draw layer
                this.source = new ol.source.Vector({wrapX: false});

                this.draw_layer = new ol.layer.Vector({
                    source: this.source,
                    style: new ol.style.Style({
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 255, 255, 1.0)'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#ffff00',
                            width: 4
                        }),
                        image: new ol.style.Circle({
                            radius: 7,
                            fill: new ol.style.Fill({
                                color: '#ffff00'
                            })
                        })
                    })
                });

                this.map = new ol.Map({
                    target:'map',
                    view: this.olview,
                    controls: ol.control.defaults({
                    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                        collapsible: false
                    })}),
                    loadTilesWhileAnimating: true,
                    loadTilesWhileInteracting: true,
                    layers: [baseLayer,
                             this.satLayer,
                             new ol.layer.Vector({
                                source: this.vectorSource
                             }),
                             this.draw_layer
                    ]
                });

                //Instantiate with some options and add the Control
                this.geocoder = new Geocoder('nominatim', {
                    provider: 'photon',
                    lang: 'en',
                    placeholder: 'Search for ...',
                    limit: 5,
                    keepOpen: true,
                    preventDefault : true
                });

                this.overlay = new ol.Overlay({
                    element: document.getElementById('popup'),
                    offset: [0, -40]
                });

                this.map.addControl(this.geocoder);

                //Listen when an address is chosen
                this.geocoder.on('addresschosen', function(evt){
                    _this.olview.setCenter(evt.coordinate);
                    _this.olview.setZoom(16);
                    if(_this.selected_interaction == 0) {
                        _this.setMarker(evt.coordinate);
                    }

                    //_this.$.popup_content.innerHTML = '<p>'+ evt.address.formatted +'</p>';
                    //_this.overlay.setPosition(coord);
                });

                this.map.on('click', function(evt) {
                    if(_this.selected_interaction == 0) {
                        _this.setMarker(evt.coordinate);
                    }
                });

                this.async(function(){this.resize($(document).height(), $(document).width())}, 100);
            },

            setMarker: function(coordinate){
                var iconFeature = new ol.Feature({
                    geometry: new ol.geom.Point(coordinate),
                    name: 'New Point'
                });

                iconFeature.setStyle(_this.iconStyle);

                this.vectorSource.clear(true);
                this.vectorSource.addFeature( iconFeature );

                //this.coordinate =  ol.proj.transform([coordinate[1],coordinate[0]], "EPSG:900913", "EPSG:4326");
                this.coordinate = [coordinate[1],coordinate[0]];
            },

            addInteraction : function() {
                this.map.removeInteraction(this.draw);
                var geometryFunction, maxPoints, interaction_type;
                switch(this.selected_interaction){
                    case 0:
                        //this.map.addInteraction(ol.interaction.default());
                        break;
                    case 1:
                        interaction_type = "LineString";
                        break;
                    case 2:
                        interaction_type = "Polygon";
                        break;
                    case 3:
                        interaction_type = "Circle";
                        alert("Circle is not supported by GeoJSON");
                        return;
                        break;
                    case 4:
                        interaction_type = "Circle";
                        geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
                        break;
                    case 5:
                        interaction_type = "LineString";
                        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;
                        };
                }

                if(this.selected_interaction != 0) {
                    this.draw = new ol.interaction.Draw({
                        source: this.source,
                        type: /** @type {ol.geom.GeometryType} */ (interaction_type),
                        geometryFunction: geometryFunction,
                        maxPoints: maxPoints,
                        style : this.getTextStyle(-12)
                    });

                    this.map.addInteraction(this.draw);

                    this.draw.on('drawend', function(e) {
                        e.feature.setStyle(_this.getTextStyle(-12));
                    });
                }
            },

            getGeoJSON: function(){
                var allFeatures = this.draw_layer.getSource().getFeatures();
                var format = new ol.format.GeoJSON();
                return format.writeFeatures(allFeatures);
            },

            _changeInteraction: function(e){
                this.addInteraction();
            },

            _handleMapLayerClick: function(e){
                this.satLayer.setVisible(!this.satLayer.getVisible());

            },

            getTextStyle: function(offsetX) {
                return new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.6)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#ffff00',
                        width: 4
                    }),
                    text : new ol.style.Text({
                        fill : new ol.style.Fill({
                            color : '#000'
                        }),
                        stroke : new ol.style.Stroke({
                            color : '#fff',
                            width : 4
                        }),
                        text : this.label,
                        font : '20px Verdana',
                        offsetX : offsetX ? offsetX : 0,
                        offsetY : 12
                    })
                });
            },

            resize : function(h,w){
                this.$.map.style.height = h + "px";
                this.$.map.style.width  = w + "px";
                $("#OpenLayers_Map_2_OpenLayers_ViewPort").css('height',($(document).height() + "px"));
                $("#OpenLayers_Map_2_OpenLayers_ViewPort").css('width',($(document).width() + "px"));
                this.map.updateSize();
            }
        })
    </script>

</dom-module>