(function () {

    function SuperMap(mapContainerId, mapBox, options) {
        this.mapBox = mapBox;
        this.map = L.map(mapContainerId, {
            crs: options.crs ? options.crs : L.CRS.EPSG4326,
            center: options.center ? options.center : {lat: 0, lon: 0},
            maxZoom: options.maxZoom ? options.maxZoom : 18,
            zoom: options.zoom ? options.zoom : 6,
            boxZoom: options.boxZoom ? options.boxZoom : false,
            scrollWheelZoom: options.scrollWheelZoom ? options.scrollWheelZoom : true,
            dragging: options.dragging ? options.dragging : true,
            doubleClickZoom: options.doubleClickZoom ? options.doubleClickZoom : false,
            zoomControl: options.zoomControl ? options.zoomControl : false
        });
        this.gridLayer = null;
        this.gridBGLayer = null;
        this.gridColor = '#000000';
        this.colorOption = {
            isEditColor: false,
            edit: {r: 0, g: 0, b: 0},
            const: {
                COLOR_BOX_ID: 'B_COLOR_BOX',
                COLOR_SHOW_BOX_ID: 'B_SHOW_COLOR_BOX',
                COLOR_R: 'B_COLOR_R',
                COLOR_G: 'B_COLOR_G',
                COLOR_B: 'B_COLOR_B',
            }
        };
    }

    /**
     * 初始化
     * @param baseLayerUrl
     */
    SuperMap.prototype.init = function (baseLayerUrl) {
        var map = this.map;
        L.control.zoom().addTo(map);
        L.control.scale().addTo(map);
        L.supermap.tiledMapLayer(baseLayerUrl, {noWrap: true}).addTo(map);
        this.gridBGLayer = L.layerGroup([]).addTo(this.map);
        this.gridLayer = L.featureGroup([]).addTo(this.map);
    }

    /**
     * 初始化绘制面
     */
    SuperMap.prototype.initDrawPolygon = function () {
        var self = this;
        self.map.pm.setLang('zh');
        self.map.pm.addControls({
            positions: {
                draw: 'topleft',
                edit: 'topleft',
                custom: '',
                options: ''
            },
            drawCircle: false,
            drawMarker: false,
            drawCircleMarker: false,
            drawPolyline: false,
            drawRectangle: false,
            drawPolygon: true,

            editMode: true,
            dragMode: true,
            cutPolygon: false,
            removalMode: true,
            rotateMode: true,
            // 工具栏是否一个块
            oneBlock: false,
            drawControls: true,
            editControls: false,
            customControls: false,
            optionsControls: false,
            pinningOption: false,
            snappingOption: false,
            splitMode: true,
            scaleMode: true
        });
        self.map.pm.Toolbar.createCustomControl({
            name: '修改颜色',
            block: 'custom',
            title: '修改颜色',
            className: '',
            onClick: function (e) {
                var colorBox = document.getElementById(self.colorOption.const.COLOR_BOX_ID);
                colorBox.style.left = '50px';
                colorBox.style.top = '225px';
                if (!self.colorOption.isEditColor) {
                    colorBox.style.display = 'block';
                } else {
                    colorBox.style.display = 'none';
                }
                self.colorOption.isEditColor = !self.colorOption.isEditColor;
            },
            toggle: true
        });
        self.map.pm.setPathOptions({
            color: '#000000',
            fillColor: '#000000',
            fillOpacity: 0.4,
        });
        self.map.on('pm:create', function (e) {
            self.map.pm.addControls({
                drawControls: false,
                editControls: true,
                customControls: true
            });
            self.gridLayer.addLayer(e.layer);
            e.layer.on('pm:edit', function (e) {
            });
        });
        self.map.on('pm:remove', function (e) {
            self.map.pm.addControls({
                drawControls: true,
                editControls: false,
                customControls: false
            });
        })
    }

    /**
     * 初始化网格背景
     * @param gridArray
     */
    SuperMap.prototype.initGridBG = function (gridArray) {
        for (var i = 0, item; item = gridArray[i++];) {
            this.gridBGLayer.addLayer(this.drawPolygon(item.pointArray, item.fillColor, null));
        }
    }

    /**
     * 初始化网格背景
     * @param gridArray
     */
    SuperMap.prototype.initGrid = function (gridArray, callback) {
        if(callback) {
            this.gridLayer.on('click', callback);
        }
        for (var i = 0, item; item = gridArray[i++];) {
            var drawPolygon = this.drawPolygon(item.pointArray, item.fillColor, null);
            drawPolygon.grid = item;
            this.gridLayer.addLayer(drawPolygon);
        }
    }

    /**
     * 初始化网格
     * @param polygonArray
     * @param color
     * @param popup
     */
    SuperMap.prototype.initEditGrid = function (gridArray) {
        for (var i = 0, item; item = gridArray[i++];) {
            var pointArray = [];
            for (var j = 0, jItem; jItem = item.pointArray[j++];) {
                pointArray.push([jItem.lat, jItem.lng]);
            }
            this.gridLayer.addLayer(this.drawPolygon(pointArray, item.fillColor, null));
        }
        if (gridArray.length == 0) {
            return;
        }
        // 标记编辑
        this.map.pm.addControls({
            drawControls: false,
            editControls: true,
            customControls: true
        });
    }

    /**
     * 获取编辑网格层
     * @returns 网格点数组
     */
    SuperMap.prototype.getEditGridLayer = function () {
        return this.gridLayer.getLayers();
    }

    /**
     * 设置编辑网格颜色
     * @param color
     */
    SuperMap.prototype.setEditGridLayerColor = function (color) {
        this.gridColor = color;
        var layers = this.getEditGridLayer();
        for (var i = 0, layer; layer = layers[i++];) {
            layer.setStyle({
                color: color,
                fillColor: color,
            });
        }
    }

    /**
     * 获取编辑网格颜色
     * @returns {string}
     */
    SuperMap.prototype.getGridColor = function () {
        return this.gridColor;
    }

    /**
     * 清空网格背景
     */
    SuperMap.prototype.removeGridBG = function () {
        this.gridBGLayer.clearLayers();
    }

    /**
     * 获取map
     * @returns {*}
     */
    SuperMap.prototype.getMap = function () {
        return this.map;
    }

    /**
     * 绘制面
     * @param polygonArray [{lat, lng}]
     * @param color 颜色
     * @param popup 点击显示内容
     * @returns polygonLayer
     */
    SuperMap.prototype.drawPolygon = function (polygonArray, color, popup) {
        if (!popup) {
            return L.polygon([polygonArray], {color: color}).addTo(this.map);
        }
        return L.polygon([polygonArray], {color: color}).bindPopup(popup).addTo(this.map);
    }

    /**
     * 绘制标记
     * @param point {lat, lng}
     * @param popup 点击显示内容
     * @returns markerLayer
     */
    SuperMap.prototype.drawMarker = function (point, popup) {
        if (!popup) {
            return L.marker([point]).addTo(this.map);
        }
        return L.marker([point]).bindPopup(popup).addTo(this.map);
    }

    /**
     * 绘制图标标记
     * @param point {lat, lng}
     * @param icon {url, width, height}
     * @param popup 点击显示内容
     * @returns markerLayer
     */
    SuperMap.prototype.drawIconMarker = function (point, icon, popup) {
        var iconWidth = icon.width ? icon.width : 64;
        var iconHeight = icon.height ? icon.height : 64;
        var icon = L.icon({
            iconUrl: icon.url,
            iconSize: [iconWidth, iconHeight],
            iconAnchor: [iconWidth / 2, iconHeight],
            popupAnchor: [0, -iconHeight],
        });
        if (!popup) {
            return L.marker([point], {icon: icon}).addTo(this.map);
        }
        return L.marker([point], {icon: icon}).bindPopup(popup).addTo(this.map);
    }

    /**
     * 绘制线
     * @param pointArray 轨迹数组
     * @param color 颜色
     * @returns polylineLayer
     */
    SuperMap.prototype.drawPolyline = function (pointArray, color) {
        return L.polyline(pointArray, {color: color}).addTo(this.map);
    }

    /**
     * 颜色RGB转16进制
     * @param r
     * @param g
     * @param b
     * @returns {string}
     */
    SuperMap.prototype.colorRGBToHex = function (r, g, b) {
        var red = parseInt(r, 10).toString(16);
        red = red.length < 2 ? '0' + red : red;
        var green = parseInt(g, 10).toString(16);
        green = green.length < 2 ? '0' + green : green;
        var blue = parseInt(b, 10).toString(16);
        blue = blue.length < 2 ? '0' + blue : blue;
        return "#" + red + green + blue;
    }

    /**
     * 颜色16进制转RGB
     * @param hex
     * @returns {{r: number, b: number, g: number}}
     */
    SuperMap.prototype.colorHexToRGB = function (hex) {
        if (!hex) {
            return {r: 0, g: 0, b: 0};
        }
        if (hex.indexOf('#') == 0) {
            hex = hex.substring(1);
        }
        return {
            r: parseInt(hex.substring(0, 2), 16),
            g: parseInt(hex.substring(2, 4), 16),
            b: parseInt(hex.substring(4, 6), 16)
        }
    }

    // 颜色选择器
    SuperMap.prototype.setShowColor = function () {
        var self = this;
        var colorShowBox = document.getElementById(self.colorOption.const.COLOR_SHOW_BOX_ID);
        var hexColor = self.colorRGBToHex(self.colorOption.edit.r, self.colorOption.edit.g, self.colorOption.edit.b);
        colorShowBox.style.backgroundColor = hexColor;
        self.setEditGridLayerColor(hexColor);
    }
    // 设置颜色Input值
    SuperMap.prototype.setColorInputValue = function (color) {
        var self = this;
        self.colorOption.edit = self.colorHexToRGB(color);
        document.getElementById(self.colorOption.const.COLOR_R).value = self.colorOption.edit.r;
        document.getElementById(self.colorOption.const.COLOR_G).value = self.colorOption.edit.g;
        document.getElementById(self.colorOption.const.COLOR_B).value = self.colorOption.edit.b;
        var colorShowBox = document.getElementById(self.colorOption.const.COLOR_SHOW_BOX_ID);
        colorShowBox.style.backgroundColor = color;
    }

    /**
     * 初始化颜色选择
     */
    SuperMap.prototype.initColorOption = function () {
        var self = this;

        // 获取颜色选择器
        function getColorInput(inputId, title, value) {
            var colorInput = document.createElement('div');
            colorInput.style.width = '100%';
            colorInput.style.textAlign = 'center';

            var colorInputInput = document.createElement('input');
            colorInputInput.setAttribute('id', inputId);
            colorInputInput.setAttribute('type', 'range');
            colorInputInput.setAttribute('min', 0);
            colorInputInput.setAttribute('max', 255);
            colorInputInput.setAttribute('value', value);
            colorInputInput.style.width = '100px';
            colorInputInput.addEventListener('mousemove', function (event) {
                self.colorOption.edit = {
                    r: document.getElementById(self.colorOption.const.COLOR_R).value,
                    g: document.getElementById(self.colorOption.const.COLOR_G).value,
                    b: document.getElementById(self.colorOption.const.COLOR_B).value
                }
                // 修改区域颜色
                self.setShowColor();
            });
            var titleSpan = document.createElement('span');
            titleSpan.appendChild(document.createTextNode(title));
            colorInput.appendChild(titleSpan);
            colorInput.appendChild(colorInputInput);
            return colorInput;
        }

        // 颜色选BOX
        function getColorInputBox() {
            var colorInputBox = document.createElement('div');
            colorInputBox.style.display = 'inline-block';
            colorInputBox.style.width = '124px';
            colorInputBox.style.verticalAlign = 'top';

            var firstColorInput = getColorInput(self.colorOption.const.COLOR_R, '红', self.colorOption.edit.r);
            firstColorInput.style.marginTop = '2px';
            colorInputBox.appendChild(firstColorInput);
            colorInputBox.appendChild(getColorInput(self.colorOption.const.COLOR_G, '绿', self.colorOption.edit.g));
            colorInputBox.appendChild(getColorInput(self.colorOption.const.COLOR_B, '蓝', self.colorOption.edit.b));
            return colorInputBox;
        }

        // 颜色BOX
        function getColorBox(colorOptionBox) {
            var colorBox = document.createElement('div');
            colorBox.setAttribute('id', self.colorOption.const.COLOR_SHOW_BOX_ID);
            colorBox.style.display = 'inline-block';
            colorBox.style.width = '70px';
            colorBox.style.height = '100%';
            colorBox.style.borderRight = '1px solid silver';
            colorBox.style.backgroundColor = self.colorRGBToHex(self.colorOption.edit.r, self.colorOption.edit.g, self.colorOption.edit.b);
            return colorBox;
        }

        var colorOptionBox = document.createElement('div');
        colorOptionBox.setAttribute('id', self.colorOption.const.COLOR_BOX_ID);
        colorOptionBox.style.backgroundColor = '#FFFFFF';
        colorOptionBox.style.display = 'none';
        colorOptionBox.style.width = '210px';
        colorOptionBox.style.height = '70px';
        colorOptionBox.style.border = '1px solid silver';
        colorOptionBox.style.position = 'absolute';
        colorOptionBox.style.top = '0';
        colorOptionBox.style.left = '0';
        colorOptionBox.style.zIndex = 1000;
        colorOptionBox.appendChild(getColorBox());
        colorOptionBox.appendChild(getColorInputBox());
        var mapContainer = document.getElementById(this.mapBox);
        mapContainer.appendChild(colorOptionBox);
    }

    window.SuperMap = SuperMap;

})();