﻿  // {
  //   "DIV": html container,
  //   "id" : "uniqueId",
  //   "value" : "",
  //   "disabled" : false,
  //   "readonly" : false,
  //   "placeholder" : "some text",
  //   "addLabel" : true | false,
  //   "attrs" : {attr : value}
  // }
    published.MultiLineTextBox = function (init) {
      if (typeof (init) === tUNDEFINED || init === null || typeof (init.DIV) === tUNDEFINED || init.DIV === null) throw "MultiLineTextBox.ctor(init.DIV)";
      if (WAVE.strEmpty(init.id)) throw "MultiLineTextBox.ctor(init.id)";

      var editor = this;
      WAVE.extend(editor, WAVE.EventManager);
      var fDIV = init.DIV;
      var fId = init.id;
      var fAddLabel = WAVE.strAsBool(init.addLabel, true);
      var fShadowDivId = "shdw_div_" + fId;
      var fPlaceholder = WAVE.strDefault(init.placeholder);
      var fReadOnly = WAVE.strAsBool(init.readonly, false);
      var fDisabled = WAVE.strAsBool(init.disabled, false);
      var fValue = WAVE.strDefault(init.value);
      var fAttrs = WAVE.tryParseJSON(init.attrs).obj;

      var fTemplate =
        "<div id='@shdwDivId@' style='position: fixed;visibility: hidden;height: auto;width: auto;'></div>" +
        (fAddLabel ? "<label for='@id@'>@placeholder@</label>" : "") +
        "<textarea id='@id@' @disabled@ @readonly@ style='resize: none' placeholder='@placeholder@' title='@placeholder@'></textarea>";

      fDIV.innerHTML = WAVE.strHTMLTemplate(fTemplate, {
        shdwDivId: fShadowDivId,
        id : fId,
        disabled: fDisabled ? "disabled" : "",
        readonly: fReadOnly ? "readonly" : "",
        placeholder : fPlaceholder
      });

      var dI = WAVE.id(fId);
      var shadowDiv = WAVE.id(fShadowDivId);

      dI.onresize = function () { shadowDiv.style.maxWidth = WAVE.styleOf(dI, 'width'); };
      dI.style.overflow = 'hidden';
      for(var n in fAttrs){
        dI.setAttribute(n, fAttrs[n]);
      }

      shadowDiv.innerText = dI.value = fValue;
      shadowDiv.style.maxWidth = WAVE.styleOf(dI, 'width');
      shadowDiv.style.font = WAVE.styleOf(dI, 'font');
      shadowDiv.style.minHeight = WAVE.styleOf(dI, 'height');
      shadowDiv.style.paddingTop = WAVE.styleOf(dI, 'padding-top');
      shadowDiv.style.paddingRight = WAVE.styleOf(dI, 'padding-right');
      shadowDiv.style.paddingBottom = WAVE.styleOf(dI, 'padding-bottom');
      shadowDiv.style.paddingLeft = WAVE.styleOf(dI, 'padding-left');
      shadowDiv.style.wordWrap = WAVE.styleOf(dI, 'word-wrap');
      shadowDiv.style.wordSpacing = WAVE.styleOf(dI, 'word-spacing');
      shadowDiv.style.whiteSpace = WAVE.styleOf(dI, 'white-space');
      shadowDiv.style.borderSpacing = WAVE.styleOf(dI, 'border-spacing');
      shadowDiv.style.letterSpacing = WAVE.styleOf(dI, 'letter-spacing');
      shadowDiv.style.lineHeight = WAVE.styleOf(dI, 'line-height');
      shadowDiv.style.boxSizing = WAVE.styleOf(dI, 'box-sizing');
      shadowDiv.style.border = WAVE.styleOf(dI, 'border');
      shadowDiv.style.borderWidth = WAVE.styleOf(dI, 'border-width');
      shadowDiv.style.borderRadius = WAVE.styleOf(dI, 'border-radius');
      shadowDiv.style.textIndent = WAVE.styleOf(dI, 'text-indent');

      var setAreaHeight = function (control) {
        shadowDiv.innerText = WAVE.strEmpty(control.value) ? 'W' : control.value.replace(/\r\n|\r|\n/g, "\n ");
        control.style.height = shadowDiv.clientHeight + "px";
      };

      dI.onchange = function (e) {
        setAreaHeight(this);
        shadowDiv.style.maxWidth = WAVE.styleOf(dI, 'width');
        editor.eventInvoke(published.EVT_MULTI_LINE_TEXT_UPDATED, { phase: published.EVT_PHASE_AFTER, target: e.target, value: this.value });
      };
      dI.onkeydown = dI.onkeyup = function (e) {
        setAreaHeight(this);
      };

      setAreaHeight(dI);
      return editor;
    };//MultiLineTextBox