define([
  "dojo/_base/declare",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dojo/text!./templates/Legend.html",
  "esri/dijit/Legend",
  "app/util"
  ], function (declare,
    _WidgetBase, _TemplatedMixin, template,
    Legend,
    util) {

    return declare("app.widgets.Legend", [_WidgetBase, _TemplatedMixin], {

      templateString: template,
      config: null,

      postCreate: function () {
        this.inherited(arguments);
        
        this._attachEventHandlers();
        this.initLegend(this.config);
      },

      _attachEventHandlers: function () {
        var self = this;
        this.own(
        );
      },

      initLegend: function(config) {
        var legendHTML = "", i = 0, len;

        if(config.legendImages && config.legendImages.length) {
          var legendImages = config.legendImages;
          for (i = 0, len = legendImages.length; i < len; i++) {
            legendHTML += '<img src="' + legendImages[i] + '" border="0"/>';
            if (i < len - 1) {
              legendHTML += "<br/><br/>";
            }
          }
          this.legendDiv.innerHTML = legendHTML;
        } else if (config.outageLayers && config.outageLayers.length) {
          for(i = 0; i < config.outageLayers.length; i++) {
            var oLayerClassBreaks = config.outageLayers[i].classBreaks;
            if(oLayerClassBreaks) {
              var rangeSymbols = oLayerClassBreaks.ranges,
              multiSymbol = oLayerClassBreaks.multiOutageSymbol;
              var lsymbolDiv, abelTxt = "";

              for(i = 0; i < rangeSymbols.length; i++) {
                if(i === 0) {
                  labelTxt = "< " + util.formatNumber(rangeSymbols[i].max) + " Impacted";
                } else if (i === rangeSymbols.length-1) {
                  labelTxt = "> " + util.formatNumber(rangeSymbols[i].min) + " Impacted";
                } else {
                  labelTxt = util.formatNumber(rangeSymbols[i].min) + " < " + util.formatNumber(rangeSymbols[i].max) + " Impacted";
                }
                symbolDiv = this._createLegendRow(rangeSymbols[i].symbol, labelTxt);
                this.legendDiv.appendChild(symbolDiv);
              }

              if(multiSymbol) {
                labelTxt = "Multiple outages";
                symbolDiv = this._createLegendRow(multiSymbol, labelTxt);
                this.legendDiv.appendChild(symbolDiv);
              }
            }
          }
        } else {
          // create legend using esri's legend widget
        }
      },

      _createLegendRow: function(symbol, label) {
        var symbolDiv = document.createElement("DIV");
        symbolDiv.className = "legend-row";
        var symbolImgWrapper = document.createElement("SPAN");
        symbolImgWrapper.className = "symbol";
        var symbolImg = document.createElement("IMG");
        var symbolLabel = document.createElement("SPAN");
        symbolLabel.className = "label";
        symbolImg.src = symbol.img;
        symbolImg.width = symbol.width;
        symbolImg.height = symbol.height;
        
        symbolLabel.innerHTML = label;

        symbolImgWrapper.appendChild(symbolImg);
        symbolDiv.appendChild(symbolImgWrapper);
        symbolDiv.appendChild(symbolLabel);

        return symbolDiv;
      }
  });
});