/**
 * 実体参照文字、HTMLタグを含む文字列から、テキスト部分を抽出
 * - 実体参照文字を文字列に変換
 * - HTMLタグを除去
 *
 * @method toText
 * @param  {[type]} string [description]
 * @return {[type]}        [description]
 */
function toText(string) {
  var text;

  text = $('<textarea />').html(string).text();
  return text.replace(/(<([^>]+)>)/ig,"");
}

var CONFIG = CONFIG || {};
CONFIG.SEARCH_TIMEOUT = 300;
CONFIG.SEARCH_MIN_LENGTH = 0;

/**
* エラー一覧
*
* @param arg
* @constructor
*/
var ErrorView = function(arg) {
  this.$el = arg.$el;
  this.template = arg.template;
  this.compiled = _.template(this.template);
};
ErrorView.prototype.render = function(items, error_type) {
  var error_cd_flg;

  // エラーコード列は［表示器］の場合のみ表示（［作画ソフト］のエラー情報にはエラーコードはない）
  error_cd_flg = (error_type === 'displayError');

  this.$el.html(this.compiled({items: items, error_cd_flg: error_cd_flg}));
};

/**
* エラー一覧データ
*
* @param arg
* @constructor
*/
var ErrorModel = function(arg) {
  this.data = arg.data || null;
};
ErrorModel.prototype.find = function(condition) {
  var keyword;

  // 検索条件が未指定の場合、全てを取得
  if (! condition) {
    return this.data.collection;
  }

  // 初期値とマージ
  condition = _.merge({
    keyword: null
  }, condition);

  // 検索条件が未指定の場合、全てを取得
  if (! _.isString(condition.keyword)) {
    return this.data.collection;
  }

  // 絞り込み
  keyword = _.toLower(condition.keyword);

  return _.filter(this.data.collection, function(item) {
    if (_.includes(_.toLower(toText(item.approach)), keyword) ||
      _.includes(_.toLower(toText(item.cause)), keyword) ||
      _.includes(_.toLower(toText(item['error-cd'])), keyword) ||
      _.includes(_.toLower(toText(item['error-message'])), keyword)) {
      return true;
    }

    return false;
  });
};

var App = function App(arg) {
  this.$searchForm = arg.$searchForm;
  this.errorModel = arg.errorModel;
  this.errorView = arg.errorView;
};

/**
 * 初期化
 */
App.prototype.initialize = function initialize() {
  // 検索処理を実行
  this.search();
};

/**
 * 検索条件を取得
 *
 * @returns {*}
 */
App.prototype.getCondition = function getCondition() {
  return this.$searchForm.serializeObject();
};

/**
 * ハイライト処理を実行
 *
 * @param condition
 */
App.prototype.highlight = function highlight(condition) {
  $('table tbody').highlight(condition.keyword);
};

/**
 * 検索処理を実行
 */
App.prototype.search = function search() {
  var condition, errorData;

  condition = this.getCondition();

  errorData = this.errorModel.find(condition);
  this.errorView.render(errorData, _.get(this.errorModel.data, 'error-type'));

  this.highlight(condition);
};

var app;
$(function() {
  app = new App({
    $searchForm: $('form'),
    errorModel: new ErrorModel({data: data}),
    errorView: new ErrorView({
      $el: $('table'),
      template: $('#template').text()
    })
  });

  // 初期化
  app.initialize();

  // 検索条件が変更されたときに更新
  $('.js-condition')
    .observeUpdate(CONFIG.SEARCH_TIMEOUT, CONFIG.SEARCH_MIN_LENGTH)
    .bind('change update', function() {
      app.search();
    });

  // FORMの送信を抑止
  $(document).on('submit', 'form', function(ev) {
    ev.preventDefault();
  });
});








(function($){ 
    
    $(function(){
        // スクロールが発生した時に処理を行う
        $(window).scroll(function () {
 
            var $table = $(".ertable");          // テーブルの要素を取得
            var $thead = $table.children("thead");  // thead取得
            var toffset = $table.offset();          // テーブルの位置情報取得
            // テーブル位置+テーブル縦幅 < スクロール位置 < テーブル位置
            if(toffset.top + $table.height()< $(window).scrollTop()
              || toffset.top > $(window).scrollTop()){
                // クローンテーブルが存在する場合は消す
                var $clone = $("#clonetable");
                if($clone.length > 0){
                    $clone.css("display", "none");
                }
            }
            // テーブル位置 < スクロール位置 < テーブル位置+テーブル縦幅
            else if(toffset.top < $(window).scrollTop()){
                // クローンテーブルが存在するか確認
                var $clone = $("#clonetable");
                if($clone.length == 0){
                    // 存在しない場合は、theadのクローンを作成
                    $clone= $thead.clone(true);
                    // idをclonetableとする
                    $clone.attr("id", "clonetable");
                    // body部に要素を追加
                    $clone.appendTo("body");
                    // theadのCSSをコピーする
                    StyleCopy($clone, $thead);
                    // theadの子要素(tr)分ループさせる
                    for(var i = 0; i < $thead.children("tr").length; i++)
                    {
                        // i番目のtrを取得
                        var $theadtr = $thead.children("tr").eq(i);
                        var $clonetr = $clone.children("tr").eq(i);
                        // trの子要素(th)分ループさせる
                        for (var j = 0; j < $theadtr.eq(i).children("th").length; j++){
                            // j番目のthを取得
                            var $theadth = $theadtr.eq(i).children("th").eq(j);
                            var $cloneth = $clonetr.eq(i).children("th").eq(j);
                            // thのCSSをコピーする
                            StyleCopy($cloneth, $theadth);
                        }
                    }
                }
 
                // コピーしたtheadの表示形式をtableに変更
                $clone.css("display", "table");         
                // positionをブラウザに対し絶対値とする
                $clone.css("position", "fixed");        
                $clone.css("border-collapse", "collapse");
                // positionの位置を設定(left = 元のテーブルのleftとする)
                $clone.css("left", toffset.left - $(window).scrollLeft());
                // positionの位置を設定(topをブラウザの一番上とする)
                $clone.css("top", "0px");
                // 表示順番を一番優先させる
                $clone.css("z-index", 99);
            }
        });
 
        // CSSのコピー
        function StyleCopy($copyTo, $copyFrom){
            $copyTo.css("width", 
                        $copyFrom.css("width"));
            $copyTo.css("height", 
                        $copyFrom.css("height"));
 
            $copyTo.css("padding-top", 
                        $copyFrom.css("padding-top"));
            $copyTo.css("padding-left", 
                        $copyFrom.css("padding-left"));
            $copyTo.css("padding-bottom", 
                        $copyFrom.css("padding-bottom"));
            $copyTo.css("padding-right", 
                        $copyFrom.css("padding-right"));
 
            $copyTo.css("background", 
                        $copyFrom.css("background"));
            $copyTo.css("background-color", 
                        $copyFrom.css("background-color"));
            $copyTo.css("vertical-align", 
                        $copyFrom.css("vertical-align"));
 
            $copyTo.css("border-top-width", 
                        $copyFrom.css("border-top-width"));
            $copyTo.css("border-top-color", 
                        $copyFrom.css("border-top-color"));
            $copyTo.css("border-top-style", 
                        $copyFrom.css("border-top-style"));
 
            $copyTo.css("border-left-width", 
                        $copyFrom.css("border-left-width"));
            $copyTo.css("border-left-color", 
                        $copyFrom.css("border-left-color"));
            $copyTo.css("border-left-style", 
                        $copyFrom.css("border-left-style"));
 
            $copyTo.css("border-right-width", 
                        $copyFrom.css("border-right-width"));
            $copyTo.css("border-right-color", 
                        $copyFrom.css("border-right-color"));
            $copyTo.css("border-right-style", 
                        $copyFrom.css("border-right-style"));
 
            $copyTo.css("border-bottom-width", 
                        $copyFrom.css("border-bottom-width"));
            $copyTo.css("border-bottom-color", 
                        $copyFrom.css("border-bottom-color"));
            $copyTo.css("border-bottom-style", 
                        $copyFrom.css("border-bottom-style"));
        }
    });
})(jQuery);
