/**
 *  Extend the Polygon Object to set an image to fill the path in SVG
 *  exp:
 *    L.Polygon(points, {fill: 'url(image.gif)'});
 *  Author: lanwei@cloudybay.com.tw
 */

(function (window, document, undefined) {

if (L.Browser.svg) {
    L.SVG.include({
        _updateStyle: function (layer) {
            var path = layer._path,
                options = layer.options;

            if (!path) { return; }

            if (options.stroke) {
                path.setAttribute('stroke', options.color);
                path.setAttribute('stroke-opacity', options.opacity);
                path.setAttribute('stroke-width', options.weight);
                path.setAttribute('stroke-linecap', options.lineCap);
                path.setAttribute('stroke-linejoin', options.lineJoin);

                if (options.dashArray) {
                    path.setAttribute('stroke-dasharray', options.dashArray);
                } else {
                    path.removeAttribute('stroke-dasharray');
                }

                if (options.dashOffset) {
                    path.setAttribute('stroke-dashoffset', options.dashOffset);
                } else {
                    path.removeAttribute('stroke-dashoffset');
                }
            } else {
                path.setAttribute('stroke', 'none');
            }

            if (options.fill) {
                if (typeof(options.fill) == "string" &&
                        options.fill.match(/^url\(/)) {
                    // here what we add
                    this.__fillPattern(layer);
                }
                else {
                    path.setAttribute('fill', options.fillColor || options.color);
                }
                path.setAttribute('fill-opacity', options.fillOpacity);
                path.setAttribute('fill-rule', options.fillRule || 'evenodd');
            } else {
                path.setAttribute('fill', 'none');
            }
        },

        __fillPattern2: function(layer) {
            var path = layer._path,
                options = layer.options;

            if (!this._defs) {
                this._defs = L.SVG.create('defs');
                this._container.appendChild(this._defs);
            }
            var _img_url = options.fill.substring(4, options.fill.length-1);
            var _ref_id = _img_url + (Math.random() * Math.pow(10, 17) + Math.random() * Math.pow(10, 17));
            _ref_id += new Date().getUTCMilliseconds();
            var _p = document.getElementById(_ref_id);
            if (!_p) {
                var _im = new Image();
                _im.src = _img_url;

                _p = L.SVG.create('pattern');
                _p.setAttribute('id', _ref_id);
                _p.setAttribute('x', '0');
                _p.setAttribute('y', '0');
                _p.setAttribute('patternUnits', 'userSpaceOnUse');
                _p.setAttribute('width', '24');
                _p.setAttribute('height', '24');
                var _rect = L.SVG.create('rect');
                _rect.setAttribute('width', 24);
                _rect.setAttribute('height', 24);
                _rect.setAttribute('x', 0);
                _rect.setAttribute('x', 0);
                _rect.setAttribute('fill', options.fillColor || options.color);

                _p.appendChild(_rect);
                this._defs.appendChild(_p);

                var _img = L.SVG.create('image');
                _img.setAttribute('x', '0');
                _img.setAttribute('y', '0');
                _img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', _img_url);
                _img.setAttribute('width', '24');
                _img.setAttribute('height', '24');
                _p.appendChild(_img);

                _im.onload = function() {
                    _p.setAttribute('width', _im.width);
                    _p.setAttribute('height', _im.height);
                    _img.setAttribute('width', _im.width);
                    _img.setAttribute('height', _im.height);
                };
            }
            path.setAttribute('fill', "url(#"+_ref_id+")");
        },

        // 普通平铺符号填充
        __fillPattern: function (layer) {
            let path = layer._path;
            let options = layer.options;

            if (!this._defs) {
                this._defs = L.SVG.create('defs');
                this._container.appendChild(this._defs);
            }
            let _refId = 'pattern' + layer._leaflet_id;
            let _imgUrl = options.fill.substring(4, options.fill.length - 1);
            let _p = document.getElementById(_refId);
            if (!_p) {
                let _im = new Image();
                _im.src = _imgUrl;

                _p = L.SVG.create('pattern');
                _p.setAttribute('id', _refId);
                _p.setAttribute('x', '0');
                _p.setAttribute('y', '0');
                if (options.patternUnits) {
                    _p.setAttribute('patternUnits', options.patternUnits);
                } else {
                    _p.setAttribute('patternUnits', 'userSpaceOnUse');
                }
                let patternTransform = '';
                if (options.scale !== undefined) {
                    patternTransform = 'scale(' + options.scale + ')';
                }
                if (options.patternDegree) {
                    if (patternTransform !== '') {
                        patternTransform += ' rotate(' + options.patternDegree + ')';
                    } else {
                        patternTransform = 'rotate(' + options.patternDegree + ')';
                    }
                }
                _p.setAttribute('patternTransform', patternTransform);
                _p.setAttribute('width', '24');
                _p.setAttribute('height', '24');
                let _rect = L.SVG.create('rect');
                _rect.setAttribute('width', 24);
                _rect.setAttribute('height', 24);
                _rect.setAttribute('x', 0);
                _rect.setAttribute('x', 0);
                // _rect.setAttribute('fill', options.fillColor || options.color);
                _rect.setAttribute('fill', 'rgba(0,0,0,0)');
                _p.appendChild(_rect);
                this._defs.appendChild(_p);
                let _img = L.SVG.create('image');
                _img.setAttribute('x', '0');
                _img.setAttribute('y', '0');
                _img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', _imgUrl);
                _img.setAttribute('width', '24');
                _img.setAttribute('height', '24');
                _img.setAttribute('imgtype', '1');
                _p.appendChild(_img);
                _im.onload = function () {
                    _p.setAttribute('width', _im.width);
                    _p.setAttribute('height', _im.height);
                    _img.setAttribute('width', _im.width);
                    _img.setAttribute('height', _im.height);
                };
            } else {
                let patternTransform = '';
                if (options.scale !== undefined) {
                    patternTransform = 'scale(' + options.scale + ')';
                }
                if (options.patternDegree) {
                    if (patternTransform !== '') {
                        patternTransform += ' rotate(' + options.patternDegree + ')';
                    } else {
                        patternTransform = 'rotate(' + options.patternDegree + ')';
                    }
                }
                _p.setAttribute('patternTransform', patternTransform);
                let _im = new Image();
                _im.src = _imgUrl;
                let _img = _p.querySelector('image');
                _img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', _imgUrl);
                _im.onload = function () {
                    _p.setAttribute('width', _im.width);
                    _p.setAttribute('height', _im.height);
                    _img.setAttribute('width', _im.width);
                    _img.setAttribute('height', _im.height);
                };
            }
            path.setAttribute('fill', 'url(#' + _refId + ')');
        }
    });
}

}(this, document));

