BR.OpacitySliderControl = L.Control.extend({
    options: {
        position: 'topleft'
    },

    onAdd: function(map) {
        var container = L.DomUtil.create('div', 'leaflet-bar control-slider');

        // prevent also dragging map in Chrome
        L.DomEvent.disableClickPropagation(container);

        // migrate legacy value
        if (BR.Util.localStorageAvailable()) {
            var value = localStorage.getItem('opacitySliderValue');
            if (value !== null) {
                localStorage.setItem(
                    'opacitySliderValue' + this.options.id,
                    value
                );
                localStorage.removeItem('opacitySliderValue');
            }
        }

        var slider = new BR.OpacitySlider(this.options);
        container.appendChild(slider.getElement());

        var stopClickAfterSlide = function(evt) {
            L.DomEvent.stop(evt);
            removeStopClickListeners();
        };

        var removeStopClickListeners = function() {
            document.removeEventListener('click', stopClickAfterSlide, true);
            document.removeEventListener(
                'mousedown',
                removeStopClickListeners,
                true
            );
        };

        slider.input
            .on('slideStart', function(evt) {
                // dragging beyond slider control selects zoom control +/- text in Firefox
                L.DomUtil.disableTextSelection();
            })
            .on('slideStop', { self: this }, function(evt) {
                L.DomUtil.enableTextSelection();

                // When dragging outside slider and over map, click event after mouseup
                // adds marker when active on Chromium. So disable click (not needed)
                // once after sliding.
                document.addEventListener('click', stopClickAfterSlide, true);
                // Firefox does not fire click event in this case, so make sure stop listener
                // is always removed on next mousedown.
                document.addEventListener(
                    'mousedown',
                    removeStopClickListeners,
                    true
                );
            });

        return container;
    }
});