/// <reference path="def/uikit.d.ts" />
/// <reference path="def/leaflet.d.ts" />
/// <reference path="def/moment.d.ts" />
/// <reference path="def/leaflet-forcing-boundary.d.ts" />
/// <reference path="def/reqwest.d.ts" />import { GeoJSON } from "leaflet";




class EXLocation extends STWkit.LocationCard {

    private locationDiv: HTMLDivElement;
    private locationForm: HTMLFormElement;
    public obsDateInput: HTMLInputElement;
    public obsTimeInput: HTMLInputElement;
    private type: string;
    private subtype: string;                


    constructor(id, parentDiv, lang, langData, map, forcing, obs, type, subtype, initials) {
        var options: any = {};
        options['single'] = true;
        options['line'] = true;
        options.polygon = {};
        options['polygon']['show'] = true;
        options['polygon']['name'] = 'Area';
        options['type'] = type;
        options['initials'] = initials;
        super(id, 'Specify time and location', parentDiv, lang, langData, map, forcing, options);

        var self = this;
        self.type = type;
        self.subtype = subtype;
        var fieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', 'uk-margin-top');
        this.locationForm.insertBefore(fieldset, this.locationForm.firstChild);

        var satCallbackFn = function (latlngs, geojsonfeature, timestamp, id) {
            self.clear();
            var geojson: any = {};
            geojson["type"] = "FeatureCollection";
            geojson["features"] = [];
            geojson["features"].push(geojsonfeature);
            var observation = {
                "id": id,
                "provider": "EMSA",
                "providerDataRef": null,
                "providerImgRef": null,
                "providerType": null,
                "type": "SAT",
                "date": moment.utc(timestamp).valueOf()
            };
            geojson.features[0].properties["observation"] = [];
            geojson.features[0].properties["observation"].push(observation);
            geojson.features[0].properties["simulation"] = {};
            self.populateCard(geojson);
            satdetectionHide();
        };

        function legendBox(fieldset: HTMLFieldSetElement, color, text, size) {
            var rowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row uk-margin-remove', fieldset);
            var legendBox = <HTMLDivElement>L.DomUtil.create('div', 'legend-box', rowDiv);
            legendBox.style.backgroundColor = color;
            legendBox.style.width = size;
            legendBox.style.height = size;
            legendBox.title = text;
            var legendText = <HTMLDivElement>L.DomUtil.create('div', 'legend-text', rowDiv);
            legendText.textContent = text;
        }

        if (obs && obs.sat) {
            var obssatRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
            self.satObs = new Observation.Sat(map, satCallbackFn, 'observation/oo');
            var satDetectionDiv = <HTMLDivElement>L.DomUtil.create('div', '', obssatRowDiv);
            var satDetectionList = <HTMLDListElement>L.DomUtil.create('dl', 'uk-description-list-line', satDetectionDiv);
            var satDetectionItem = <HTMLDListElement>L.DomUtil.create('dt', '', satDetectionList);
            var satDetectionHeading = <HTMLHeadingElement>L.DomUtil.create('h5', 'uk-width-1-1 chevron-title', satDetectionItem);
            satDetectionHeading.textContent = "Satellite oil detections";
            self.satDetectionChevronIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', satDetectionHeading);
            self.satDetectionContent = <HTMLDivElement>L.DomUtil.create('div', 'uk-animation-fade', satDetectionItem);
            self.satDetectionContent.style.display = 'none';
            var satdetectionShow = function () {
                if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-down')) {
                    self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-down');
                    self.satDetectionChevronIcon.classList.add('uk-icon-chevron-up');
                    self.satDetectionContent.style.display = "";
                    self.satObs.show();
                }
            }
            var satdetectionHide = function () {
                if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-up')) {
                    self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-up');
                    self.satDetectionChevronIcon.classList.add('uk-icon-chevron-down');
                    self.satDetectionContent.style.display = 'none';
                    self.satObs.hide();
                }
            }


            satDetectionHeading.onclick = function (evt) {
                if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-down'))
                    satdetectionShow();
                else
                    satdetectionHide();
            };

            var satDetectionform = <HTMLFormElement>L.DomUtil.create('form', 'uk-form uk-form-stacked', self.satDetectionContent);
            satDetectionform.onsubmit = function (e) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            };

            var satDetectionfieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', '', satDetectionform);
            var satDetectionRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row uk-margin-top', satDetectionfieldset);
            super.addLabelDiv(satDetectionRowDiv, "Detection frequency", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + initials + "-satdetection' target='_blank'>here</a>");
            legendBox(satDetectionfieldset, 'rgb(255, 0, 0)', 'Within 24 hours', '10px');
            legendBox(satDetectionfieldset, 'rgb(255, 153, 0)', 'Within 48 hours', '10px');
            legendBox(satDetectionfieldset, 'rgb(255, 255, 0)', 'More than two days ago', '10px');
            legendBox(satDetectionfieldset, 'rgb(255, 255, 255)', 'Older', '10px');

        }

        self.datetimeFormat = 'YYYY-MM-DD HH:mm';
        self.datetimeTFormat = 'YYYY-MM-DDTHH:mm:ss.000';
        self.dateFormat = 'YYYY-MM-DD';
        self.timeFormat = 'HH:mm';
        var obsdateRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row uk-margin-remove', fieldset);
        super.addLabelDiv(obsdateRowDiv, "Observation time (UTC)", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + initials + "-time' target='_blank'>here</a>");
        var obsdateDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', obsdateRowDiv);
        obsdateDiv.id = 'guide' + initials + 'date';
        var obsdateIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-calendar', obsdateDiv);
        self.obsDateInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
        self.obsDateInput.type = 'text';
        self.obsDateInput.placeholder = self.dateFormat;
        self.obsTimeInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
        self.obsTimeInput.type = 'text';

        self.obsDateInput.onchange = function () { self.fireChangeFn(self); };
        self.obsTimeInput.onchange = function () { self.fireChangeFn(self); };


        UIkit.ready(function () {
            var startDatePicker = UIkit.datepicker(<any>self.obsDateInput, { format: self.dateFormat });
            var startTimePicker = UIkit.timepicker(<any>self.obsTimeInput, {});

            self.defaults();
        });

    }

    public defaults() {
        super.defaults();
        var self = this;
        if (document.body.contains(self.obsDateInput)) {
            if (self.obsDateInput.value == '') {
                var initDate = moment.utc();
                self.obsDateInput.value = initDate.format(self.dateFormat);
                self.obsTimeInput.value = initDate.startOf('hour').format(self.timeFormat);
            }
        }
    }

    public populateCard(geojson) {
        var self = this;
        super.populateCard(geojson);
        var simulation = geojson.features[0].properties.simulation;
        var observation = geojson.features[0].properties.observation[0];
        var datetime = simulation.startDate;
        if (geojson.features[0].properties.observation.length > 0) {
            var observation = geojson.features[0].properties.observation[0];
            datetime = observation.date;
        }
        var date = moment.utc(datetime).format(self.dateFormat);
        self.obsDateInput.value = date;
        var time = moment.utc(datetime).format(self.timeFormat);
        self.obsTimeInput.value = time;
        self.fireChangeFn(this);
    }

    public populateData(geojson) {
        super.populateData(geojson);
        var self = this;
        var observation = {
            "id": null,
            "provider": "USER",
            "providerDataRef": null,
            "providerImgRef": null,
            "providerType": null,
            "type": "MANUAL",
            "date": moment.utc(self.obsDateInput.value + ' ' + self.obsTimeInput.value, self.datetimeFormat).valueOf()

        };
        var layer:any = L.GeoJSON.geometryToLayer(geojson.features[0]);
        var center = null;
        if (layer._latlng) center = layer._latlng; else center = layer.getBounds().getCenter()
        geojson.features[0].properties["primary"] = 'PADM';        
        geojson.features[0].properties["type"] = self.type;        
        geojson.features[0].properties["subtype"] = self.subtype;        
        geojson.features[0].properties["meanLat"] = center.lat;        
        geojson.features[0].properties["meanLng"] = center.lng;        
        geojson.features[0].properties["observation"] = [];
        geojson.features[0].properties["observation"].push(observation);
    }
}


class EXAmount extends STWkit.AccordionCard {
    public oncallback: Function;
    public amountInput: HTMLInputElement;
    public amountSelect: HTMLSelectElement;
    public nextButton: any;

    constructor(id, parentDiv, lang, map, type, initials) {
        var amountDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
        super(id, 'Amount', parentDiv, amountDiv);
        var self = this;
        var form = <HTMLFormElement>L.DomUtil.create('form', 'uk-form uk-form-stacked', amountDiv);
        form.setAttribute('novalidate', '');
        form.onsubmit = function (e) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        };
        form.onkeypress = function (e) {
            var key = e.charCode || e.keyCode || 0;
            if (key == 13) e.preventDefault();
        };

        function addOption(parent, value, txt) {
            var option = <HTMLOptionElement>L.DomUtil.create('option', '', parent);
            option.value = value;
            option.textContent = txt;
        }


        var fieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', '', form);
        var amountRowDiv: any = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
        amountRowDiv.id = 'guide' + initials + 'amountvalue';
        amountRowDiv.guideFn = function () {
            self.amountInput.value = '10';
            validate();
        }

        super.addLabelDiv(amountRowDiv, "Amount", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + initials + "-amount' target='_blank'>here</a>");
        var amountValueDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-1', amountRowDiv);
        self.amountInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-4', amountValueDiv);
        self.amountInput.type = 'number';
        self.amountInput.step = '10';
        self.amountInput.min = '0';
        var amountUnitDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2 uk-form-select select', amountValueDiv);
        amountUnitDiv.setAttribute('data-uk-form-select', '');
        var selectedAmountUnit = <HTMLSpanElement>L.DomUtil.create('span', '', amountUnitDiv);
        self.amountSelect = <HTMLSelectElement>L.DomUtil.create('select', '', amountUnitDiv);
        addOption(self.amountSelect, 'm3', 'm³');
        addOption(self.amountSelect, 'tonnes', 'tonnes');


        self.amountInput.onchange = function () {
            validate();
        };

        function validate() {
            var amountValue = parseInt(self.amountInput.value);
            var amountOk = false;
            if (amountValue > 0) amountOk = true;
            if (amountOk) {
                self.status = true;
                STWkit.AccordionCard.enableNext(self.nextButton, true);
                (self.oncallback && self.oncallback());
            } else {
                self.clear();
            }
        };


        var clearDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-clearfix', amountDiv);
        var clearButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-left', clearDiv);
        clearButton.textContent = 'Clear';
        clearButton.onclick = function () {
            self.clear();
        };
        self.nextButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
        self.nextButton.id = 'guide' + initials + 'amount';
        self.nextButton.textContent = 'Next';
        self.nextButton.guideFn = function () {
            self.nextButton.click();
        }
        STWkit.AccordionCard.enableNext(self.nextButton, false);
        self.nextButton.onclick = function () {
            if (!STWkit.AccordionCard.isEnabled(self.nextButton)) {
                STWkit.AccordionCard.warningMsg('Mandatory fields missing',
                    'Specify a valid <b>amount</b>.');
                return;
            }

            (self.oncallback && self.oncallback(true));
        };

        UIkit.ready(function () {
            self.defaults();
        });
    }

    public defaults() {
        var self = this;
    }
    public populateCard(geojson) {
        var self = this;
        var simulation = geojson.features[0].properties.simulation;

        self.amountInput.value = simulation.amount;
        var amountevt = document.createEvent('Event');
        amountevt.initEvent("change", true, true);
        self.amountInput.dispatchEvent(amountevt);
        self.amountSelect.value = simulation.amountUnit;
    }

    public populateData(geojson) {
        var self = this;
        geojson.features[0].properties["simulation"]["amount"] = self.amountInput.value;
        geojson.features[0].properties["simulation"]["amountUnit"] = self.amountSelect.options[self.amountSelect.selectedIndex].value;
    }


    public clear() {
        var self = this;
        super.clear();
        self.amountInput.value = '';
        STWkit.AccordionCard.enableNext(self.nextButton, false);
        self.status = false;
        (self.oncallback && self.oncallback());
    }
}


class TrajectoryLineHandler extends LineHandler {

    private _errorShown : any;
    private _mouseDownOrigin : any;
    private _map : any;
    private _currentLatLng: any;
    private _enabled: any;
    private _mouseMarker: any;
    private _clickHandled: any;
    private _disableMarkers: any;

    constructor(time, map, options){
        super(map,options);
    }

    private autoPoint(e, latlng) {
        if (this._errorShown)
            return;

        if (this._mouseDownOrigin) {
            var originalEvent = e.originalEvent;
            //if(originalEvent.button == 2) {
            var distance = L.point(originalEvent.clientX, originalEvent.clientY)
                .distanceTo(this._mouseDownOrigin);

            //if (Math.abs(distance) < 9 * (window.devicePixelRatio || 1)) {
            if (Math.abs(distance) > 6 * (window.devicePixelRatio || 1)) {
                // if (this.time.length > 0) {
                    (<any>L).drawLocal.draw.handlers.polyline.tooltip.cont = 'Relase button to stop drawing';                                        
                    // (<any>L).drawLocal.draw.handlers.polyline.tooltip.cont = moment.utc(this.time.pop()).format('YYYY-MM-DD HH:mm')+' ('+this.time.length+' left)';                                        
                    super.addVertex(latlng);
                    this._mouseDownOrigin = L.point(originalEvent.clientX, originalEvent.clientY);
                // } else {
                //     super._finishShape();
                //     this._mouseDownOrigin = null;
                //     this._clickHandled = false;
                //     this._disableMarkers = false;                    
                //     return;
                // }
            }
            //}
        }
    };
    private _onMouseMove(e) {
        var newPos = this._map.mouseEventToLayerPoint(e.originalEvent);
        var latlng = this._map.layerPointToLatLng(newPos);

        // Save latlng
        // should this be moved to _updateGuide() ?
        this._currentLatLng = latlng;

        super._updateTooltip(latlng);

        if (e.originalEvent.ctrlKey) {
            super.deleteLastVertex(e);
        }
        else {
            this.autoPoint(e, latlng);
        }
        if (this._enabled) {
            // Update the guide line
            super._updateGuide(newPos);
    
            // Update the mouse marker position
            this._mouseMarker.setLatLng(latlng);
        }

        L.DomEvent.preventDefault(e.originalEvent);
        L.DomEvent.stopPropagation(e.originalEvent);
    };

}

class EXTrajectory extends STWkit.AccordionCard {
    public oncallback: Function;
    public lineButton: HTMLButtonElement;
    private lineHandler : any;    
    private drawnfeature : any;    
    private trajectoryLayer : L.GeoJSON;
    private trajectoryLabelLayer : any;
    private trajMarkerArray : any[];
    public exitControl: L.Control;
    public positions: any[];    
    private map: any;    
    private time: any;    
    private from: any;    
    private to: any;    
    public nextButton: any;
    endDateInput: HTMLInputElement;
    endTimeInput: HTMLInputElement;
    dateFormat: string;
    timeFormat: string;       

    constructor(id, parentDiv, lang, langData, map, domain, type, subtype, initials) {
        var trajectoryDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
        super(id, 'Trajectory', parentDiv, trajectoryDiv);
        var self = this;
        this.map = map;
        var form = <HTMLFormElement>L.DomUtil.create('form', 'uk-form uk-form-stacked', trajectoryDiv);
        form.setAttribute('novalidate', '');
        form.onsubmit = function (e) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        };
        form.onkeypress = function (e) {
            var key = e.charCode || e.keyCode || 0;
            if (key == 13) e.preventDefault();
        };
        self.dateFormat = 'YYYY-MM-DD';
        self.timeFormat = 'HH:mm';

        self.positions = [];
        var positionLabelGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-margin-top', form);
        var positionlabelDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-1', positionLabelGrid);
        super.addLabelDiv(positionlabelDiv, "Position", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + initials + "-position' target='_blank'>here</a>");
        var positionDiv: any = <HTMLDivElement>L.DomUtil.create('div', '', form);
        positionDiv.id = 'guide' + initials + 'pos';
        var fieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', 'uk-margin-top', form);        
        var endRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
        super.addLabelDiv(endRowDiv, "End point date (UTC)", "See more information <a style='color:#faa732;' href='help/classic/?domain=" + domain.toLowerCase() + "#" + type + "-" + subtype + "-start' target='_blank'>here</a>");
        var endDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', endRowDiv);
        var endIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-calendar', endDiv);
        self.endDateInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-2', endDiv);
        self.endDateInput.type = 'text';
        self.endDateInput.placeholder = self.dateFormat;
        self.endTimeInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-2', endDiv);
        self.endTimeInput.type = 'text';

        var positionButtonGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-grid-small', positionDiv);
        var drawDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2', positionButtonGrid);
        var drawButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small uk-align-left uk-margin-remove', drawDiv);
        drawButton.textContent = 'Free hand draw';

        function enddateonchange() {
            
            var newdate:any = moment.utc(self.endDateInput.value + ' ' + self.endTimeInput.value, self.datetimeFormat);
            if (newdate.isBefore(self.from)) {
                self.endDateInput.value =  self.to.format(self.dateFormat);
                self.endTimeInput.value =  self.to.startOf('hour').format(self.timeFormat);
                STWkit.AccordionCard.warningMsg('End point date outside simulation period', 'End point date cannot be before simulation period start date');
            } else {
                var diff = Math.abs(self.from - newdate);
                var nrofhours = ((diff/1000)/60)/60;
    
                if (nrofhours <= 72) {
                    self.durationhours = nrofhours;      
                    self.to = moment.utc(self.endDateInput.value + ' ' + self.endTimeInput.value, self.datetimeFormat);      
                    self.refreshTrajectory();
                    self.fireChangeFn(self);     
                    delete self.durationhours;            
                } else {
                    self.endDateInput.value =  self.to.format(self.dateFormat);
                    self.endTimeInput.value =  self.to.startOf('hour').format(self.timeFormat);
                    STWkit.AccordionCard.warningMsg('Simulation period too long', 'The number of simulation hours cannot exceend 72 hours (Simulation period start date - End point date)');
                }
            }
        }

        self.endDateInput.onchange = function (evt) {
            enddateonchange();
        };
        
        self.endTimeInput.onchange = function (evt) {
            enddateonchange();
        };

        positionDiv.guideFn = function () {
            var geojson = {};
            geojson["type"] = "FeatureCollection";
            geojson["features"] = [];
            var feature = {};
            feature['type'] = "Feature";
            feature['geometry'] = {};
            feature['geometry']['type'] = "Point";
            feature['geometry']['coordinates'] = [];
            // feature['geometry']['coordinates'].push(19.0);
            // feature['geometry']['coordinates'].push(56.0);
            geojson["features"].push(feature);
            // self.control.addGeoJSON(geojson);
        }

        var color = '#CA5A1B';
        this.lineHandler = new TrajectoryLineHandler(null, map, {
            allowIntersection: true,   
            icon: new L.DivIcon({
                        iconSize: new L.Point(8, 8),
                        className: 'leaflet-div-icon leaflet-editing-icon'
                    }),                                      
            drawError: {
                color: color,
                timeout: 1000
            },
            shapeOptions: {
                color: color
            },
            showArea: true,
            metric: true,
            repeatMode : false
        });
        this.lineHandler.type = 'draw'+id;      
        


        map.on('zoomend', function () {
            if (self.map.hasLayer(self.trajectoryLabelLayer)) {
                self.updateTrajectoryLabelVisibility();
            }
        });        
        
        map.on('draw:created', function (e) {
            var type = e.layerType,
                layer = e.layer;
            if (type == 'draw'+id) {
                self.drawnfeature = layer.toGeoJSON();
                self.refreshTrajectory();                    
                var toggleevt = document.createEvent("CustomEvent");
                toggleevt.initCustomEvent('container:toggleVisibility', false, false, {
                    'show': true
                });
                window.dispatchEvent(toggleevt);
                self.fireChangeFn(self);
                if (self.exitControl) map.removeControl(self.exitControl);
                self.exitControl = null;
                if (self.getLatLngArray().length > 0) {
                    self.status = true;
                    STWkit.AccordionCard.enableNext(self.nextButton, true);
                    (self.oncallback && self.oncallback());
                }

            }
        });             
        this.trajectoryLayer = new L.GeoJSON(null, {});
        this.trajMarkerArray = [];
        this.trajectoryLabelLayer = L.geoJson(null, {
            'pointToLayer': function (feature: any, latlng: L.LatLng) {
                var iconOpts: any = {
                    iconSize: [25, 41],
                    iconAnchor: [40, 61],
                    className: 'iconHiddentextIcon',
                    clickable: false,
                    html: '<span class="trajLabel">' + moment.utc(feature.properties.time).format('YYYY-MM-DD HH:mm') + ' [' + STWkit.convertDDtoDDM(latlng.lat, true) + ', ' + STWkit.convertDDtoDDM(latlng.lng, false) + '] </span>'
                };
                var marker: any = L.marker(latlng, {
                    clickable: false,
                    icon: L.divIcon(iconOpts)
                }
                );
                marker.visible = true;
                self.trajMarkerArray.push(marker);
                return marker;
            }
        });
        
        map.addLayer(this.trajectoryLayer);  
        map.addLayer(this.trajectoryLabelLayer);  

        drawButton.onclick = function () {
            self.clear();
            var toggleevt = document.createEvent("CustomEvent");
            toggleevt.initCustomEvent('container:toggleVisibility', false, false, {
                'show': false
            });
            window.dispatchEvent(toggleevt);

            self.lineHandler.enable();
            self.exitControl = new L.Control({ position: 'bottomright' });
            self.exitControl.onAdd = function (map: L.Map) {
                var container = L.DomUtil.create('div', 'exit-control');
                var exitPanel = L.DomUtil.create('div', 'uk-panel uk-panel-box', container);
                var finishButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small uk-button-primary uk-margin-right', exitPanel);
                finishButton.textContent = 'Finish';
                finishButton.onclick = function (e) {
                    map.fire('draw:canceled');
                };
                finishButton.style.display = 'none';
                var cancelButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', exitPanel);
                cancelButton.textContent = 'Cancel';
                cancelButton.onclick = function (e) {
                    if (self.exitControl) map.removeControl(self.exitControl);
                    self.exitControl = null;
                    var toggleevt = document.createEvent("CustomEvent");
                    toggleevt.initCustomEvent('container:toggleVisibility', false, false, {
                        'show': true
                    });
                    window.dispatchEvent(toggleevt);
                    self.clear();
                };

                L.DomEvent.disableClickPropagation(container);
                return container;
            };
            self.exitControl.addTo(map);

        };


        var clearDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-clearfix', trajectoryDiv);
        var clearButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-left', clearDiv);
        clearButton.textContent = 'Clear';
        clearButton.onclick = function () {
            self.clear();
        };
        self.nextButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
        self.nextButton.id = 'guide' + initials + 'trajectory';
        self.nextButton.textContent = 'Next';
        self.nextButton.guideFn = function () {
            self.nextButton.click();
        }
        STWkit.AccordionCard.enableNext(self.nextButton, false);
        self.nextButton.onclick = function () {
            if (!STWkit.AccordionCard.isEnabled(self.nextButton)) {
                STWkit.AccordionCard.warningMsg('Mandatory fields missing',
                    'Specify a valid <b>position</b>.');
                return;
            }

            (self.oncallback && self.oncallback(true));
        };

        UIkit.ready(function () {
            var endDatePicker = UIkit.datepicker(<any>self.endDateInput, {format: self.dateFormat });
            var endTimePicker = UIkit.timepicker(<any>self.endTimeInput, {});

            self.defaults();
        });
    }

    public changeFn(changeCard) {
        var self = this;
        if ((typeof changeCard.from !== 'undefined') && (typeof changeCard.to !== 'undefined')) {
            self.from = changeCard.from.clone();
            self.to = changeCard.to.clone();
            if (self.endDateInput) {
                self.endDateInput.value =  self.to.format(self.dateFormat);
                self.endTimeInput.value =  self.to.startOf('hour').format(self.timeFormat);
            }
            self.refreshTrajectory();
       }
    }
    
    private refreshTrajectory(){
        var self = this;

        if (this.drawnfeature && this.drawnfeature.geometry && this.drawnfeature.geometry.coordinates.length > 2) {
            
            self.trajMarkerArray = [];
            self.trajectoryLayer.clearLayers();
            self.trajectoryLabelLayer.clearLayers();
    
            var timeIncrement = 15;
            var currentlength = self.drawnfeature.geometry.coordinates.length;
            var wantedTimeIncrementlength = Math.round(((Math.abs(this.from - this.to)/1000)/60) / timeIncrement);
    
            var coords = self.drawnfeature.geometry.coordinates.slice(0);
    
            var index  = 1;
            while(coords.length < wantedTimeIncrementlength) {
                // too small, add points
                if (index >= coords.length-1) index = 1;
                var newpoint = [(coords[index][0]+coords[index+1][0])/2,(coords[index][1]+coords[index+1][1])/2];
                coords.splice(index+1, 0, newpoint);
                index += 2;
            }


            while(coords.length > wantedTimeIncrementlength) {
                // too big, remove random points
                var index:number  = self.getRandomInt(1, currentlength-1);
                coords.splice(index, 1);
            }            

            self.time = [];
            var t = self.from.clone();
            for (var i = 0; i < coords.length; i++) {
                t = t.add(timeIncrement,'m');
                self.time.push(t.valueOf());
            }
            self.time[self.time.length-1] = self.to.valueOf();
    
            var trajfeature: any = STWkit.createFeature("LineString");
            trajfeature.geometry.coordinates = coords;
    
    
            self.trajectoryLayer.addData(trajfeature);
            var trajpointfeaturecollection = STWkit.featurecollection();
    
            for (var i = 0; i < coords.length; i++) {
                var trajpointfeature: any = STWkit.createFeature("Point");
                trajpointfeature.geometry.coordinates = coords[i];
                trajpointfeature.properties.time = self.time[i];
                if (i == 0) trajpointfeature.properties.start = true;
                if (i == self.time.length - 1) trajpointfeature.properties.end = true;
                trajpointfeaturecollection.features.push(trajpointfeature);
            }
    
            self.trajectoryLabelLayer.addData(trajpointfeaturecollection);    
                        
            self.updateTrajectoryLabelVisibility();
        }

    }

    private getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    public setTime() {
        var self = this;
        self.time = [];
        if (self.timeIncrement > 0 && self.from.isBefore(self.to)) {
            var t = self.from.clone();
            for (var i = 0; i < self.trajlength; i++) {
                self.time.push(t.valueOf());
                t = t.add(self.timeIncrement,'m');
            }
            self.time[self.time.length-1] = self.to.valueOf();
            return true;
        }
        return false;
    }

    private updateTrajectoryLabelTimeValues() {
        var self = this;        
        self.trajMarkerArray = [];        
        self.trajectoryLabelLayer.clearLayers();    
        for (var i = 0; i < self.time.length; i++) 
            self.trajpointfeaturecollection.features[i].properties.time = self.time[i];
        
        self.trajectoryLabelLayer.addData(self.trajpointfeaturecollection);    
        self.updateTrajectoryLabelVisibility();
    }

    private updateTrajectoryLabelVisibility() {
        var self = this;
        if (self.trajMarkerArray.length > 2) {
            var occupied = new Array();
            occupied[0] = STWkit.getRectangle(self.map.latLngToLayerPoint(self.trajMarkerArray[0]._latlng));
            occupied[1] = STWkit.getRectangle(self.map.latLngToLayerPoint(self.trajMarkerArray[self.trajMarkerArray.length - 1]._latlng));
            var k = 2;
            for (var i = 1; i < self.trajMarkerArray.length - 1; i++) {
                var rect = STWkit.getRectangle(self.map.latLngToLayerPoint(self.trajMarkerArray[i]._latlng));
                var ok = true;
                for (var j = 0; j < occupied.length; j++) {
                    if (STWkit.intersect(rect, occupied[j])) {
                        ok = false;
                        break;
                    }
                }
                if (ok) {
                    occupied[k] = STWkit.getRectangle(self.map.latLngToLayerPoint(self.trajMarkerArray[i]._latlng));
                    k++;
                    if (!self.trajMarkerArray[i].visible) {
                        self.trajectoryLabelLayer.addLayer(self.trajMarkerArray[i]);
                        self.trajMarkerArray[i].visible = true;
                    }
                } else {
                    if (self.trajMarkerArray[i].visible) {
                        self.trajectoryLabelLayer.removeLayer(self.trajMarkerArray[i]);
                        self.trajMarkerArray[i].visible = false;
                    }
                }
            }
        }
    };

    private getLatLngArray() {
        var self = this;
        var latlngs = [];
        self.trajectoryLayer.getLayers().forEach (function (layer:any) {
            if (layer._latlngs) latlngs.push(layer._latlngs); else latlngs.push([layer._latlng]);
         });
        return latlngs;    
    }

    public validate() {
        if (this.positions.length == 0) return;
        this.status = true;
        STWkit.AccordionCard.enableNext(this.nextButton, true);
        (this.oncallback && this.oncallback());
    };


    public defaults() {
        var self = this;
    }
    public populateCard(geojson) {
        var self = this;
    }

    public populateData(geojson) {
        var self = this;
        var feature = STWkit.createFeature('LineString');
        var props = feature.properties;
        props['auxiliary'] = 'exercise';
        props['time'] = self.time;
        var coords = feature.geometry.coordinates;
        var latlngs:Array<L.LatLng> = self.getLatLngArray()[0];
        for (let i = 0; i < latlngs.length; i++) {
            const latlng = latlngs[i];
            coords.push([latlng.lng, latlng.lat]);
        }
        geojson.features.push(feature);

    }


    public clear() {
        var self = this;
        super.clear();
        self.drawnfeature = null;
        self.trajectoryLabelLayer.clearLayers();
        self.trajectoryLayer.clearLayers()
        self.trajMarkerArray = [];
        if (self.lineHandler._enabled) self.lineHandler.disable();
        if (self.nextButton) STWkit.AccordionCard.enableNext(self.nextButton, false);
        (self.oncallback && self.oncallback());
    }
}