var CONFIG = CONFIG || {};
CONFIG.SEARCH_TIMEOUT = 300; // 検索を開始する秒数（ミリ秒）
CONFIG.SEARCH_MIN_LENGTH = 0; // 検索を開始する文字数

/**
 * サポート情報詳細ビュー
 *
 * @param arg
 * @constructor
 */
var SupportView = function SupportView(arg) {
  this.$el = arg.$el;
  this.template = arg.template;
  this.compiled = _.template(this.template);
};

SupportView.prototype.render = function render(data) {
  this.$el.html(this.compiled({data: data}));
};

var View = function View(arg) {
  this.$el = arg.$el;
  this.template = arg.template;
  this.compiled = _.template(this.template);
};

View.prototype.render = function render(data) {
  this.$el.html(this.compiled({data: data}));
};

/**
 * サポート一覧詳細画面
 *
 * @param arg
 * @constructor
 */
var App = function App(arg) {
  this.supportView = arg.supportView;
  this.categoryFilterView = arg.categoryFilterView;
  this.supportModel = null;
  this.$searchForm = arg.$searchForm;
};

/**
 * 画面初期化処理
 */
App.prototype.initialize = function initialize() {
  var supportData, modelData, categories, condition, $form, $el;

  // 機能分類のプルダウン
  categories = _.uniq(_.map(data.rows, function(val) {
    return _.get(val, 'category');
  }));
  this.categoryFilterView.render(categories);

  // 選択したモデルで絞り込み
  // supportData = DB.get('support') || {};
  supportData = DB.bulk_get();
  modelData = _.get(supportData, 'search.models.' + _.get(supportData, 'search.tab', ''), []);
  data.columns = filterModelData(data.columns, modelData);
  this.supportModel = new SupportModel({data:data});

  // 検索条件を読み込み
  condition = this.loadCondition();

  $form = this.$searchForm;
  // 検索条件を復帰
  _.forEach(condition, function(val, key) {
    $el = $form.find('[name^=' + key + ']');
    switch (_.get($el, '0.tagName', '').toLowerCase()) {
      case 'select':
        _.forEach(val, function(category) {
          $el.find('option[value="' + category + '"]').prop('selected', true);
        });
        break;
      case 'input':
        $el.val(val);
        break;
      default:
        break;
    }
  });

  // 検索処理を実行
  this.search();
};

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

/**
 * 検索条件を読み込み
 *
 * @returns {*}
 */
App.prototype.loadCondition = function loadCondition() {
  var supportData;

  // supportData = DB.get('support') || {};
  // supportData = DB.get('detail');

  // return _.get(supportData, 'detail');
  return DB.get('support_detail');
};

/**
 * 検索条件を保存
 *
 * @param condition
 */
App.prototype.saveCondition = function saveCondition(condition) {
  // var supportData;

  // supportData = DB.get('support') || {};
  // supportData = DB.get('detail');
  // supportData.detail = condition;

  // DB.set('detail', supportData);
  DB.set('support_detail', condition);
};

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

  condition = this.getCondition();
  this.saveCondition(condition);

  supportData = this.supportModel.find(condition);
  this.supportView.render(supportData);

  // 印刷ボタンの有効・無効を切り替え
  $('.js-print-btn').toggleClass('disabled', (supportData.rows.length === 0));
};

var app;
$(function() {
  // 初期設定
  configure(data);

  app = new App({
    $searchForm: $('form'),
    supportView: new SupportView({
      $el: $('.js-support-view'),
      template: $('#template').text()
    }),
    categoryFilterView: new View({
      $el: $('.js-category-filter'),
      template: $('#js-tmpl-category-filter').text()
    })
  });

  // 初期表示
  app.initialize();

  // 検索条件が変更されたときに更新
  $('.js-category-filter').on('change', function() {
    app.search();
  });

  $('.js-condition')
    .observeUpdate(CONFIG.SEARCH_TIMEOUT, CONFIG.SEARCH_MIN_LENGTH)
    .bind('change update', function() {
      app.search();
    });

  // 検索条件をリセット
  $(document).on('click', '.js-btn-reset', function(ev) {
    ev.preventDefault();
    
    // テキスト入力検索をリセット
    $('.js-condition').val('').trigger('keydown');
    
    // カテゴリのフィルタをリセット
    $('select.js-category-filter').multipleSelect('uncheckAll'); 
  });

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

  $('.js-category-filter').multipleSelect({
    placeholder: 'Filter by Category',
    selectAllText: 'all'
  });

  $(document).on('click', '.disabled', function(ev) {
    ev.preventDefault();
  });
});

/**
 * 表示器カラムの情報を選択したモデルで絞り込み
 *
 * @param columns
 * @param conditions
 * @returns {Array|*}
 */
function filterModelData(columns, conditions) {
  var result, keys, key;

  if (! conditions.length) {
    return columns;
  }

  result = _.filter(columns, function(item) {
    return _.some(conditions, function(val) {
      keys = _.keys(val);

      for (var i = 0, l = keys.length; i < l; i++) {
        key = keys[i];

        // 文字列同士で比較
        if (_.get(item, key)+'' !== _.get(val, key)+'') {
          return false;
        }
      }
      return true;
    });
  });

  return result;
}








(function($){ 
    
    $(function(){
        // スクロールが発生した時に処理を行う
        $(window).scroll(function () {
 
            var $table = $(".detable");          // テーブルの要素を取得
            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);

