/*
  Leaflet.AwesomeNumberMarkers, a plugin that adds number markers for Leaflet

  http://leafletjs.com
  https://github.com/zahidul-islam

  Modified: SVG-based markers to support multi-digit numbers
*/

/*global L*/

(function (){
  "use strict";

  // Color map for marker fill colors
  var MARKER_COLORS = {
    red:        '#d63e2a',
    darkred:    '#a23336',
    lightred:   '#ff8e7f',
    orange:     '#f69730',
    beige:      '#ffcb92',
    green:      '#72b026',
    darkgreen:  '#728224',
    lightgreen: '#bbf970',
    blue:       '#38aadd',
    darkblue:   '#00649f',
    lightblue:  '#8adaff',
    purple:     '#d152b8',
    darkpurple: '#5b396b',
    pink:       '#ff91ea',
    cadetblue:  '#436978',
    white:      '#fbfbfb',
    gray:       '#575757',
    lightgray:  '#a3a3a3',
    black:      '#303030'
  };

  L.AwesomeNumberMarkers = L.Icon.extend({
    options: {
      iconSize: [35, 45],
      iconAnchor:   [17, 42],
      popupAnchor: [1, -32],
      className: 'awesome-number-marker',
      icon: 'home',
      markerColor: 'blue',
      numberColor: 'white',
      number: ''
    },

    createIcon: function () {
      var div = document.createElement('div'),
          options = this.options;

      var num = String(options.number);
      var isMultiDigit = num.length > 1;

      // Widen marker for multi-digit numbers
      var w = isMultiDigit ? Math.max(35, 20 + num.length * 10) : 35;
      var h = 45;
      var cx = w / 2;
      // Tip of the pin
      var tipY = h;
      // Circle center and radius
      var cr = 14;
      var cy = cr + 1;

      // Build SVG pin shape
      var fillColor = MARKER_COLORS[options.markerColor] || MARKER_COLORS.blue;
      var textColor = options.numberColor || 'white';
      var fontSize = isMultiDigit ? 12 : 14;

      var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + h + '">'
        + '<defs><filter id="s' + num + '" x="-20%" y="-20%" width="140%" height="140%">'
        + '<feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-opacity="0.3"/>'
        + '</filter></defs>'
        + '<path d="M' + cx + ' ' + tipY
        + ' C' + (cx - cr * 0.6) + ' ' + (tipY - 8) + ' ' + (cx - cr - 2) + ' ' + (cy + cr * 0.5)
        + ' ' + (cx - cr - 2) + ' ' + cy
        + ' A' + (cr + 2) + ' ' + (cr + 2) + ' 0 1 1 ' + (cx + cr + 2) + ' ' + cy
        + ' C' + (cx + cr + 2) + ' ' + (cy + cr * 0.5) + ' ' + (cx + cr * 0.6) + ' ' + (tipY - 8)
        + ' ' + cx + ' ' + tipY + 'Z"'
        + ' fill="' + fillColor + '" stroke="rgba(0,0,0,0.15)" stroke-width="1"'
        + ' filter="url(#s' + num + ')"/>'
        + '<circle cx="' + cx + '" cy="' + cy + '" r="' + (cr - 2) + '"'
        + ' fill="rgba(255,255,255,0.2)"/>'
        + '<text x="' + cx + '" y="' + (cy + 1) + '"'
        + ' text-anchor="middle" dominant-baseline="central"'
        + ' fill="' + textColor + '"'
        + ' font-family="Arial,Helvetica,sans-serif" font-weight="bold"'
        + ' font-size="' + fontSize + 'px">'
        + num
        + '</text></svg>';

      div.innerHTML = svg;
      div.style.width = w + 'px';
      div.style.height = h + 'px';
      div.className = options.className;

      // Update icon size and anchor for this instance
      var anchor = L.point(Math.round(w / 2), 42);
      div.style.marginLeft = (-anchor.x) + 'px';
      div.style.marginTop  = (-anchor.y) + 'px';

      // Store actual size so Leaflet positions correctly
      this.options.iconSize = [w, h];
      this.options.iconAnchor = [anchor.x, 42];

      return div;
    },

    createShadow: function () {
      return null;
    }
  });

}());