/**
 * IE に近い動作にするためのロード処理。
 */
$(window).load(function(){
  var userAgent = window.navigator.userAgent.toLowerCase();
  // IE でアクセスされた場合、幅調整のロジックを実行しないようにする。
  if(userAgent.indexOf('msie') != -1 ||userAgent.indexOf('trident') != -1) {
      // html5mig.css において、x-small としているが、IE で表示された場合大きくなってしまうため、xx-small を適用する。
      $(".font-size-1").css('font-size', 'xx-small');
      return;
  }

  // common.css が読み込まれているか
  var existCommonCss = false;
  for(var sheet in document.styleSheets) {
    existCommonCss = existCommonCss || /\bcommon\.css\b/.test(document.styleSheets[sheet].href);
  }

  $("input[type='text']").each(function(index, element) {
          setAutocompleteAttribute(element);
          setImeModeDisabled(element, existCommonCss);
          if(element.outerHTML.match(/\bwidth\b/i)) return;
   });

  $("input[type='search']").each(function(index, element) {
      setAutocompleteAttribute(element);
      setImeModeDisabled(element, existCommonCss);
   });

  // TEL特有の処理追加
  $("input[type='tel']").each(function(index, element) {
      setAutocompleteAttribute(element);
      setImeModeDisabled(element, existCommonCss);
  });

  // パスワードの目の表示
  $("input[type='password").each(function(index, element) {
      setPasswordStyle(element);
  });

   // 非活性処理の再実行(位置がずれてしまうため)
   window.dispatchEvent(new Event('resize'));

   // img タグの disabled が true でも onclick が動作してしまう事象の対応。
   $("img").each(function(index, element) {
           // 元々書かれている onclick の関数を取得。
           var orgFunc = element.onclick;
           // onclick に関数が設定されていなければ、処理終了。
           if(!orgFunc) return;
           // 設定されている場合、元々の関数を wrap する。
           var wrapFunc = function() {
               // 要素の disabled が true の場合は、処理しない。
               if(element.disabled) return;
               // 要素の属性に disabled がある場合は、処理しない。
               if(element.hasAttribute('disabled')) return;
               // 元々の onclick 関数を呼び出し。
               orgFunc();
           };
           // ラップした関数を onclick に設定する。
           element.onclick = wrapFunc;
   });

   // ファイル選択の表示スタイル設定
   $("input[type='file']").each(function(index, element) {
       setFileInputStyle(index, element);
   });
});

/**
 * 指定された element に対し、div 要素でオーバーレイを行う。(非活性化の用途)
 */
function addOverlay(elem) {

    if(!elem) return;

    var clientRect = elem.getBoundingClientRect();
    var divGray = document.createElement("div");
    divGray.id = elem.id + "_overlay";
    divGray.style.position = "absolute";
    divGray.style.top = window.pageYOffset + clientRect.top;
    //divGray.style.left = window.pageXOffset + clientRect.left;
    divGray.style.width = clientRect.width;
    divGray.style.height = clientRect.height;
    divGray.style.background = "rgba(100, 100, 100, .8)";
    divGray.style.zIndex = 2147483647;
    divGray.style.opacity = "0.5";
    elem.appendChild(divGray);
    var funcResize = function() {
        // リサイズ時に行う処理
        window.removeEventListener('resize', funcResize);
        clearDisableTd(elem.id);
        toDisableTd(elem.id);
    }
    window.addEventListener( 'resize', funcResize, false );
}

/**
 * 指定された element から、div 要素のオーバーレイを消す。
 */
function removeOverlay(elem) {
    if(!elem) return;
    var divGray = document.getElementById(elem.id + "_overlay");
    if (divGray) elem.removeChild(divGray);
}

function setAutocompleteAttribute(element) {
    element.setAttribute('autocomplete','off');
}

function setFileInputStyle(index, own) {
    // 元の位置に挿入したいため、自分の次の要素を取得しておく。
    var ownNext = own.nextElementSibling;
    // 元の親要素から input type='file' を外す。
    var parent = own.parentNode;
    own = parent.removeChild(own);

    // 新しい親要素を生成 <div class='form__file'>
    var newParent = document.createElement("div");
    newParent.className = "form__file";
    newParent.appendChild(own);

    // input type='file' を新しい親要素に追加
    // 元の場所に挿入する。(元の位置の次の要素が null の場合は、末尾に追加される仕様)
    parent.insertBefore(newParent, ownNext);

    // input 要素の生成
    const filename = document.createElement("input");
    // input の属性を設定
    filename.setAttribute("id", "form__file_text" + index);
    filename.setAttribute("type","text");
    filename.setAttribute("readonly","on");
    filename.setAttribute("style", "width: " + own.size * 7.2);
    filename.className = "filename";
    // 親要素に、input を子どもとして追加
    newParent.appendChild(filename);

    // ボタン部分の生成 <label for=''>
    const btn = document.createElement("label");
    btn.setAttribute("for", own.id);
    btn.innerText = "参照...";
    newParent.appendChild(btn);

    var orgSelectFile = '';
    var onclickFunc = function () {
        orgSelectFile = $("#" + this.id).clone(true);
    };
    own.onclick = onclickFunc;

    var onchangeFunc = function () {
        // 既に選択されていた場合、class から changed を削除
        // また、合わせて textbox を削除
        const label = this.nextElementSibling;

        // キャンセルされた場合、Chrome の仕様上ファイルが未選択となってしまう。
        // そのため、click イベントで保持していた、コピーを利用して復元する。
        if (this.files.length == 0) {
            own.id = "x" + own.id;
            newParent.insertBefore(orgSelectFile[0], own);
            newParent.removeChild(own);
            own = orgSelectFile[0];
            orgSelectFile = '';
            own.onclick = onclickFunc;
            own.onchange = onchangeFunc;
            return;
        }

        // ファイル名の取得
        const file = this.files[0].name;
        if (file) {
            // 選択したファイル名を表示
            filename.setAttribute("value",file);
            // label の class に changed 追加
            label.classList.add("changed");
        }

    };
    own.onchange = onchangeFunc;

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutationRecord) {
            newParent.style.display = mutationRecord.target.style.display;
        });
    });

    observer.observe(own, { attributes : true, attributeFilter : ['style'] });

}

function setImeModeDisabled(element, existCommonCss) {
    // ime-mode が、Windows のバージョンで動作にバラツキがあるため、適応除外とするため、return としておく。
    return;

    // element に ime-mode が auto or active が指定されている場合は、処理終了
    if(element.outerHTML.match(/\bime-mode *: *(auto|active)\b/i)) return;
    // element に ime-mode:disabled がない かつ common.css が読み込まれてない場合は、処理終了
    if(!element.outerHTML.match(/\bime-mode *: *disabled\b/i) && !existCommonCss) return;

    // 元の type を取得
    var orgType = element.getAttribute('type');
    // 元の focus/onkeydown/blur/onmouseover ハンドラを取得
    var orgOnFocus = element.onfocus;
    var orgOnKeyDown = element.onkeydown;
    var orgOnBlur = element.onblur;
    var orgOnMouseOver = element.onmouseover;
    element.onfocus = function() {
        if (orgOnFocus) orgOnFocus();

        // input type='tel' に変更 (tel に変わったことで、ime-mode が off になることを利用する。)
        element.setAttribute('type', 'tel');
    };

    element.onkeydown = function() {
        if (orgOnKeyDown) orgOnKeyDown();

        // 元の input type に戻す
        element.setAttribute('type', orgType);
    };
    element.onblur = function() {
        if (orgOnBlur) orgOnBlur();

        // 元の input type に戻す
        element.setAttribute('type', orgType);
    };
    element.onmouseover = function() {
        if (orgOnMouseOver) orgOnMouseOver();

        // 元の input type に戻す
        element.setAttribute('type', orgType);
    };

}
// パスワードのスタイル設定
function setPasswordStyle(element) {
    // 元の位置に挿入したいため、自分の次の要素を取得しておく。
    const next = element.nextElementSibling;
    // 元の親要素から パスワードの要素を外す。
    const parent = element.parentNode;
    // 目のアイコンの要素生成
    const passwordLabel = document.createElement('label');
    passwordLabel.innerHTML =  '<i class="fa fa-eye"></i>';
    // 入力領域のように見せるため、div 要素を生成し、その中に、パスワードと目のアイコンを子の要素として追加
    const newParent = document.createElement('div');
    newParent.className = "toggle_password";
    var own = parent.removeChild(element);
    newParent.appendChild(own);
    newParent.appendChild(passwordLabel);

    // 元の位置に上記で生成した内容を挿入
    parent.insertBefore(newParent, next);

    // 目のアイコンクリック時に input の type を text <-> password に切り替える
    passwordLabel.addEventListener('click', function () {
      if (element.type === 'password') {
          element.type = 'text';
          passwordLabel.innerHTML = '<i class="fa fa-eye-slash"></i>';
      } else {
          element.type = 'password';
          passwordLabel.innerHTML = '<i class="fa fa-eye"></i>';
      }
      element.focus();
    });
}