L.Polyline.polylineEditor = L.Polyline.extend({
    _prepareMapIfNeeded: function() {
        var that = this;
        that._changed = false;

        if(this._map._editablePolylines != null) {
            return
        }

        // Container for all editable polylines on this map:
        this._map._editablePolylines = [];
        this._map._editablePolylinesEnabled = true;

        // Click anywhere on map to add a new point-polyline:
        if(this._options.newPolylines) {
            console.log('click na map');
            that._map.on('dblclick', function(event) {
                console.log('click, target=' + (event.target == that._map) + ' type=' + event.type);
                if(that._map.isEditablePolylinesBusy())
                    return;

                var latLng = event.latlng;
                if(that._options.newPolylineConfirmMessage)
                    if(!confirm(that._options.newPolylineConfirmMessage))
                        return

                var contexts = [{'originalPolylineNo': null, 'originalPointNo': null}];
                L.Polyline.PolylineEditor([latLng], that._options, contexts).addTo(that._map);

                that._showBoundMarkers();
                that._changed = true;
            });
        }

        /**
         * Check if there is *any* busy editable polyline on this map.
         */
        this._map.isEditablePolylinesBusy = function() {
            var map = this;
            for(var i = 0; i < map._editablePolylines.length; i++)
                if(map._editablePolylines[i]._isBusy())
                    return true;

            return false;
        };

        /**
         * Enable/disable editing.
         */
        this._map.setEditablePolylinesEnabled = function(enabled) {
            var map = this;
            map._editablePolylinesEnabled = enabled;
            for(var i = 0; i < map._editablePolylines.length; i++) {
                var polyline = map._editablePolylines[i];
                if(enabled) {
                    polyline._showBoundMarkers();
                } else {
                    polyline._hideAll();
                }
            }
        };

        /*
         * Utility method added to this map to retreive editable 
         * polylines.
         */
        this._map.getEditablePolylines = function() {
            var map = this;
            return map._editablePolylines;
        }

        this._map.fixAroundEditablePoint = function(marker) {
            var map = this;
            for(var i = 0; i < map._editablePolylines.length; i++) {
                var polyline = map._editablePolylines[i];
                polyline._reloadPolyline(marker);
            }
        }
    },
    /**
     * Will add all needed methods to this polyline.
     */
    _addMethods: function() {
        var that = this;

        this._init = function(options, contexts) {
            this._prepareMapIfNeeded();

            /**
             * Since all point editing is done by marker events, markers 
             * will be the main holder of the polyline points locations.
             * Every marker contains a reference to the newPointMarker 
             * *before* him (=> the first marker has newPointMarker=null).
             */
            this._parseOptions(options);

            this._markers = [];
            var points = this.getLatLngs();
            var length = points.length;
            for(var i = 0; i < length; i++) {
                var marker = this._addMarkers(i, points[i]);
                if(! ('context' in marker)) {
                    marker.context = {}
                    if(that._contexts != null) {
                        marker.context = contexts[i];
                    }
                }

                if(marker.context && ! ('originalPointNo' in marker.context))
                    marker.context.originalPointNo = i;
                if(marker.context && ! ('originalPolylineNo' in marker.context))
                    marker.context.originalPolylineNo = that._map._editablePolylines.length;
            }

            // Map move => show different editable markers:
            var map = this._map;
            this._map.on("zoomend", function(e) {
                that._showBoundMarkers();
            });
            this._map.on("moveend", function(e) {
                that._showBoundMarkers();
            });

            if(this._desiredPolylineNo && this._desiredPolylineNo != null) {
                this._map._editablePolylines.splice(this._desiredPolylineNo, 0, this);
            } else {
                this._map._editablePolylines.push(this);
            }
        };

        /**
         * Check if is busy adding/moving new nodes. Note, there may be 
         * *other* editable polylines on the same map which *are* busy.
         */
        this._isBusy = function() {
            return that._busy;
        };

        this._setBusy = function(busy) {
            that._busy = busy;
        };

        /**
         * Get markers for this polyline.
         */
        this.getPoints = function() {
            return this._markers;
        };

        this.isChanged = function() {
            return this._changed;
        }

        this._parseOptions = function(options) {
            if(!options)
                options = {};

            // Do not show edit markers if more than maxMarkers would be shown:
            if(!('maxMarkers' in options))
                options.maxMarkers = 100;
            if(!('newPolylines' in options))
                options.newPolylines = false;
            if(!('newPolylineConfirmMessage' in options))
                options.newPolylineConfirmMessage = '';
            if(!('addFirstLastPointEvent' in options))
                options.addFirstLastPointEvent = 'click';
            if(!('customPointListeners' in options))
                options.customPointListeners = {};
            if(!('customNewPointListeners' in options))
                options.customNewPointListeners = {};

            this._options = options;

            // Icons:
            if(!options.pointIcon)
                this._options.pointIcon = L.icon({ iconUrl: 'editmarker.png', iconSize: [11, 11], iconAnchor: [6, 6] });
            if(!options.newPointIcon)
                this._options.newPointIcon = L.icon({ iconUrl: 'editmarker2.png', iconSize: [11, 11], iconAnchor: [6, 6] });
        };

        /**
         * Show only markers in current map bounds *is* there are only a certain 
         * number of markers. This method is called on eventy that change map 
         * bounds.
         */
        this._showBoundMarkers = function() {
            if (!that._map) {
                return;
            }
            
            this._setBusy(false);

            if(!that._map._editablePolylinesEnabled) {
                console.log('Do not show because editing is disabled');
                return;
            }

            var bounds = that._map.getBounds();
            var found = 0;
            for(var polylineNo in that._map._editablePolylines) {
                var polyline = that._map._editablePolylines[polylineNo];
                for(var markerNo in polyline._markers) {
                    var marker = polyline._markers[markerNo];
                    if(bounds.contains(marker.getLatLng()))
                        found += 1;
                }
            }

            for(var polylineNo in that._map._editablePolylines) {
                var polyline = that._map._editablePolylines[polylineNo];
                for(var markerNo in polyline._markers) {
                    var marker = polyline._markers[markerNo];
                    if(found < that._options.maxMarkers) {
                        that._setMarkerVisible(marker, bounds.contains(marker.getLatLng()));
                        that._setMarkerVisible(marker.newPointMarker, markerNo > 0 && bounds.contains(marker.getLatLng()));
                    } else {
                        that._setMarkerVisible(marker, false);
                        that._setMarkerVisible(marker.newPointMarker, false);
                    }
                }
            }
        };

        /**
         * Used when adding/moving points in order to disable the user to mess 
         * with other markers (+ easier to decide where to put the point 
         * without too many markers).
         */
        this._hideAll = function(except) {
            this._setBusy(true);
            for(var polylineNo in that._map._editablePolylines) {
                console.log("hide " + polylineNo + " markers");
                var polyline = that._map._editablePolylines[polylineNo];
                for(var markerNo in polyline._markers) {
                    var marker = polyline._markers[markerNo];
                    if(except == null || except != marker)
                        polyline._setMarkerVisible(marker, false);
                    if(except == null || except != marker.newPointMarker)
                        polyline._setMarkerVisible(marker.newPointMarker, false);
                }
            }
        }

        /**
         * Show/hide marker.
         */
        this._setMarkerVisible = function(marker, show) {
            if(!marker)
                return;

            var map = this._map;
            if(show) {
                if(!marker._visible) {
                    if(!marker._map) { // First show for this marker:
                        marker.addTo(map);
                    } else { // Marker was already shown and hidden:
                        map.addLayer(marker);
                    }
                    marker._map = map;
                }
                marker._visible = true;
            } else {
                if(marker._visible) {
                    map.removeLayer(marker);
                }
                marker._visible = false;
            }
        };

        /**
         * Reload polyline. If it is busy, then the bound markers will not be 
         * shown. 
         */
        this._reloadPolyline = function(fixAroundPointNo) {
            that.setLatLngs(that._getMarkerLatLngs());
            if(fixAroundPointNo != null)
                that._fixAround(fixAroundPointNo);
            that._showBoundMarkers();
            that._changed = true;
        }

        /**
         * Add two markers (a point marker and his newPointMarker) for a 
         * single point.
         *
         * Markers are not added on the map here, the marker.addTo(map) is called 
         * only later when needed first time because of performance issues.
         */
        this._addMarkers = function(pointNo, latLng, fixNeighbourPositions) {
            var that = this;
            var points = this.getLatLngs();
            var marker = L.marker(latLng, {draggable: true, icon: this._options.pointIcon});

            marker.newPointMarker = null;
            marker.on('dragstart', function(event) {
                var pointNo = that._getPointNo(event.target);
                var previousPoint = pointNo && pointNo > 0 ? that._markers[pointNo - 1].getLatLng() : null;
                var nextPoint = pointNo < that._markers.length - 1 ? that._markers[pointNo + 1].getLatLng() : null;
                that._setupDragLines(marker, previousPoint, nextPoint);
                that._hideAll(marker);
            });
            marker.on('dragend', function(event) {
                var marker = event.target;
                var pointNo = that._getPointNo(event.target);
                setTimeout(function() {
                    that._reloadPolyline(pointNo);
                }, 25);
            });
            marker.on('contextmenu', function(event) {
                var marker = event.target;
                var pointNo = that._getPointNo(event.target);
                that._map.removeLayer(marker);
                that._map.removeLayer(newPointMarker);
                that._markers.splice(pointNo, 1);
                that._reloadPolyline(pointNo);
            });
            marker.on(that._options.addFirstLastPointEvent, function(event) {

                console.log('click on marker');
                var marker = event.target;
                var pointNo = that._getPointNo(event.target);
                console.log('pointNo=' + pointNo + ' that._markers.length=' + that._markers.length);
                event.dont;
                if(pointNo == 0 || pointNo == that._markers.length - 1) {
                    console.log('first or last');
                    that._prepareForNewPoint(marker, pointNo == 0 ? 0 : pointNo + 1);
                } else {
                    console.log('not first or last');
                }
            });

            var previousPoint = points[pointNo == 0 ? pointNo : pointNo - 1];
            var newPointMarker = L.marker([(latLng.lat + previousPoint.lat) / 2.,
                                           (latLng.lng + previousPoint.lng) / 2.],
                                          {draggable: true, icon: this._options.newPointIcon});
            marker.newPointMarker = newPointMarker;
            newPointMarker.on('dragstart', function(event) {
                var pointNo = that._getPointNo(event.target);
                var previousPoint = that._markers[pointNo - 1].getLatLng();
                var nextPoint = that._markers[pointNo].getLatLng();
                that._setupDragLines(marker.newPointMarker, previousPoint, nextPoint);

                that._hideAll(marker.newPointMarker);
            });
            newPointMarker.on('dragend', function(event) {
                var marker = event.target;
                var pointNo = that._getPointNo(event.target);
                that._addMarkers(pointNo, marker.getLatLng(), true);
                setTimeout(function() {
                    that._reloadPolyline();
                }, 25);
            });
            newPointMarker.on('contextmenu', function(event) {
                // 1. Remove this polyline from map
                var marker = event.target;
                var pointNo = that._getPointNo(marker);
                var markers = that.getPoints();
                that._hideAll();

                var secondPartMarkers = that._markers.slice(pointNo, pointNo.length);
                that._markers.splice(pointNo, that._markers.length - pointNo);

                that._reloadPolyline();

                var points = [];
                var contexts = [];
                for(var i = 0; i < secondPartMarkers.length; i++) {
                    var marker = secondPartMarkers[i];
                    points.push(marker.getLatLng());
                    contexts.push(marker.context);
                }

                console.log('points:' + points);
                console.log('contexts:' + contexts);

                // Need to know the current polyline order numbers, because 
                // the splitted one need to be inserted immediately after:
                var originalPolylineNo = that._map._editablePolylines.indexOf(that);

                L.Polyline.PolylineEditor(points, that._options, contexts, originalPolylineNo + 1)
                                          .addTo(that._map);

                that._showBoundMarkers();
            });

            this._markers.splice(pointNo, 0, marker);

            // User-defined custom event listeners:
            if(that._options.customPointListeners)
                for(var eventName in that._options.customPointListeners)
                    marker.on(eventName, that._options.customPointListeners[eventName]);
            if(that._options.customNewPointListeners)
                for(var eventName in that._options.customNewPointListeners)
                    newPointMarker.on(eventName, that._options.customNewPointListeners[eventName]);

            if(fixNeighbourPositions) {
                this._fixAround(pointNo);
            }

            return marker;
        };

        /**
         * Event handlers for first and last point.
         */
        this._prepareForNewPoint = function(marker, pointNo) {
            // This is slightly delayed to prevent the same propagated event 
            // to be catched here:
            setTimeout(
                function() {
                    that._hideAll();
                    that._setupDragLines(marker, marker.getLatLng());
                    that._map.once('click', function(event) {
                        if(that._markers.length == 1) {
                            pointNo += 1;
                        }
                        console.log('dodajemo na ' + pointNo + ' - ' + event.latlng);
                        that._addMarkers(pointNo, event.latlng, true);
                        that._reloadPolyline();
                    });
                },
                100
            );
        };

        /**
         * Fix nearby new point markers when the new point is created.
         */
        this._fixAround = function(pointNoOrMarker) {
            if((typeof pointNoOrMarker) == 'number')
                var pointNo = pointNoOrMarker;
            else
                var pointNo = that._markers.indexOf(pointNoOrMarker);

            if(pointNo < 0)
                return;

            var previousMarker = pointNo == 0 ? null : that._markers[pointNo - 1];
            var marker = that._markers[pointNo];
            var nextMarker = pointNo < that._markers.length - 1 ? that._markers[pointNo + 1] : null;
            if(marker && previousMarker) {
                marker.newPointMarker.setLatLng([(previousMarker.getLatLng().lat + marker.getLatLng().lat) / 2.,
                                                 (previousMarker.getLatLng().lng + marker.getLatLng().lng) / 2.]);
            }
            if(marker && nextMarker) {
                nextMarker.newPointMarker.setLatLng([(marker.getLatLng().lat + nextMarker.getLatLng().lat) / 2.,
                                                     (marker.getLatLng().lng + nextMarker.getLatLng().lng) / 2.]);
            }
        };

        /**
         * Find the order number of the marker.
         */
        this._getPointNo = function(marker) {
            for(var i = 0; i < this._markers.length; i++) {
                if(marker == this._markers[i] || marker == this._markers[i].newPointMarker) {
                    return i;
                }
            }
            return -1;
        };

        /**
         * Get polyline latLngs based on marker positions.
         */
        this._getMarkerLatLngs = function() {
            var result = [];
            for(var i = 0; i < this._markers.length; i++)
                result.push(this._markers[i].getLatLng());
            return result;
        };

        this._setupDragLines = function(marker, point1, point2) {
            var line1 = null;
            var line2 = null;
            if(point1) line1 = L.polyline([marker.getLatLng(), point1], {dasharray: "5,1", weight: 1})
                                .addTo(that._map);
            if(point2) line2 = L.polyline([marker.getLatLng(), point2], {dasharray: "5,1", weight: 1})
                                .addTo(that._map);

            var moveHandler = function(event) {
                if(line1)
                    line1.setLatLngs([event.latlng, point1]);
                if(line2)
                    line2.setLatLngs([event.latlng, point2]);
            };

            var stopHandler = function(event) {
                if (that._map) {
                    that._map.off('mousemove', moveHandler);
                    marker.off('dragend', stopHandler);
                    if(line1) that._map.removeLayer(line1);
                    if(line2) that._map.removeLayer(line2);
                    console.log('STOPPED');
                    if(event.target != that._map) {
                        that._map.fire('click', event);
                    }
                }
            };

            that._map.on('mousemove', moveHandler);
            marker.on('dragend', stopHandler);

            that._map.once('click', stopHandler);
            marker.once('click', stopHandler);
            if(line1) line1.once('click', stopHandler);
            if(line2) line2.once('click', stopHandler);
        }
    }
});

L.Polyline.polylineEditor.addInitHook(function () {
    this.on('add', function(event) {
        this._map = event.target._map;
        this._addMethods();

        /**
         * When addint a new point we must disable the user to mess with other 
         * markers. One way is to check everywhere if the user is busy. The 
         * other is to just remove other markers when the user is doing 
         * somethinng.
         *
         * TODO: Decide the right way to do this and then leave only _busy or 
         * _hideAll().
         */
        this._busy = false;
        this._initialized = false;

        this._init(this._options, this._contexts);

        this._initialized = true;

        return this;
    });

    this.on('remove', function(event) {
        var polyline = event.target;
        var map = polyline._map;
        var polylines = map.getEditablePolylines();
        var index = polylines.indexOf(polyline);
        if (index > -1) {
            polylines[index]._markers.forEach(function(marker) {
                map.removeLayer(marker);
                if(marker.newPointMarker)
                    map.removeLayer(marker.newPointMarker);
            });
            polylines.splice(index, 1);
        }
    });
});

/**
 * Construct a new editable polyline.
 *
 * latlngs    ... a list of points (or two-element tuples with coordinates)
 * options    ... polyline options
 * contexts   ... custom contexts for every point in the polyline. Must have the 
 *                same number of elements as latlngs and this data will be 
 *                preserved when new points are added or polylines splitted.
 * polylineNo ... insert this polyline in a specific order (used when splitting).
 *
 * More about contexts:
 * This is an array of objects that will be kept as "context" for every 
 * point. Marker will keep this value as marker.context. New markers will 
 * have context set to null.
 *
 * Contexts must be the same size as the polyline size!
 *
 * By default, even without calling this method -- every marker will have 
 * context with one value: marker.context.originalPointNo with the 
 * original order number of this point. The order may change if some 
 * markers before this one are delted or new added.
 */
L.Polyline.PolylineEditor = function(latlngs, options, contexts, polylineNo) {
    // Since the app code may not be able to explicitly call the 
    // initialization of all editable polylines (if the user created a new 
    // one by splitting an existing), with this method you can control the 
    // options for new polylines:
    if(options.prepareOptions) {
        options.prepareOptions(options);
    }

    var result = new L.Polyline.polylineEditor(latlngs, options);
    result._options = options;
    result._contexts = contexts;
    result._desiredPolylineNo = polylineNo

    return result;
};