$(document).ready(function () {
  // 初期設定
  configure(data);

  var remain;

  //support_blue.jsのデータを取得し、dataというオブジェクトに入れる
  var rows = "";
  var dataRows = "";
  var serieseCd = "";
  var displaySize = "";
  var groupId = "";
  var rowCount = 0;

  /****************
   *モデル別
   ****************/
  rows += '<tbody>';
  rows += '<tr>';
  rows += '<th>Series</th>';
  rows += '<th>Model Name</th>';
  rows += '<th>Model Type</th>';
  rows += '<th>Display Size</th>';
  rows += '</tr>';

  for (var i in data['columns']) {
    //シリーズコードに変更があるかどうか確認
    if(serieseCd !== data['columns'][i]['model-seriese-cd']) {
      //シリーズコードの取得
      serieseCd = data['columns'][i]['model-seriese-cd'];
      //グループ化用のIDを作成
      groupId = "mn" + serieseCd;

      // HTML作成
      rows += '<tr>';
      rows += '<td colspan="4" id="' + groupId + '" class="sername">';
      rows += data['columns'][i]['model-seriese-nm'];
      rows += '</td>';
      rows += '</tr>';

      // 同じシリーズコードが何行続くかをカウント
      rowCount = 0;
      remain = _.slice(data['columns'], i);
      _.forEach(remain, function(item) {
        if (item['model-seriese-cd'] !== serieseCd) {
          return false;
        }

        rowCount++;
      });
    }

    //グループ化用のtrとtdをつける
    rows += '<tr class="sb_' + groupId + ' sbmn">';

    if (rowCount > 0) {
      //レコード分該当のセルを結合
      rows += '<td class="merged sbm' + serieseCd + '" rowspan="' + rowCount + '">';
      rows += '<label><input type="checkbox" class="serchk js-tree-parent" id="' + data['columns'][i]['model-seriese-nm'] + '" data-group_id="' + groupId + '"/>　ALL</label>';
      rows += '</td>';

      rowCount = 0;
    }

    //レコード本体部分
    rows += '<td class="sbmn"><label>';
    rows += [
      '<input type="checkbox" class="searchModelData js-tree-child" ',
      'data-seriese-cd="' + data['columns'][i]['model-seriese-cd'] + '" ',
      'data-model-cd="' + data['columns'][i]['model-cd'] + '" ',
      'data-inner-board-id="' + data['columns'][i]['inner-board-id'] + '" ',
      'data-group_id="' + groupId + '" ',
      '/>'
    ].join('');
    rows += data['columns'][i]['model-nm'];
    rows += '</label></td>';
    rows += '<td class="sbm03">';
    rows += data['columns'][i]['type'];
    rows += '</td>';
    rows += '<td class="lst sbm04">';
    rows += formatDisplaySize(data['columns'][i]);
    rows += '</td>';

    rows += '</tr>';
  }

  rows += '</tbody>';

  //テーブルに作成したhtmlを追加する
  $("#modeltable").append(rows);

  /*******************
   *ディスプレイサイズ毎
   ******************/
  (function(data) {
    var columns;

    // 描画データ作成
    //   - 画面サイズを書式に合わせてフォーマット
    //   - 画面サイズで並べ替え
    columns = _
      .chain(data['columns'])
      .map(function(hmi_model) {
        return _.merge(hmi_model, {
          'display-size': formatDisplaySize(hmi_model)
        });
      })
      .sortBy(function(hmi_model) {
        return hmi_model['display-size'];
      })
      .value();

    // 初期化
    rows = "";
    dataRows = "";
    groupId = "";
    rowCount = 0;

    rows += '<tbody>';

    // ヘッダ行
    rows += '<tr>';
    rows += '<th>Display Size</th>';
    rows += '<th>Model Name</th>';
    rows += '<th>Model Type</th>';
    rows += '</tr>';

    var k = 0;
    _.forEach(columns, function(hmi_model, i) {
      // 画面サイズに変更があるかどうか確認
      if (displaySize !== hmi_model['display-size']) {
        // 画面サイズの取得
        displaySize = hmi_model['display-size'];
        //グループ化用のIDを作成
        groupId = "sb" +("000"+(k +1)).slice(-4);

        // HTML作成（グループヘッダ行）
        rows += '<tr>';
        rows += '<td colspan="3" id="' + groupId + '" class="sername">';
        rows += hmi_model['display-size'];
        rows += '</td>';
        rows += '</tr>';

        // 同じ画面サイズが何行続くかをカウント
        rowCount = 0;
        remain = _.slice(columns, i);
        _.forEach(remain, function(item) {
          if (item['display-size'] !== displaySize) {
            return false;
          }

          rowCount++;
        });

        // グループのインデックスをインクリメント
        k++;
      }

      //グループ化用のtrとtdをつける
      rows += '<tr class="sb_' + groupId + ' sbmn">';

      if (rowCount > 0) {
        //レコード分該当のセルを結合
        rows += '<td class="merged sbm' + groupId + '" rowspan="' + rowCount + '"><label>';
        rows += [
            '<input type="checkbox" class="serchk js-tree-parent" ',
            'id="' + hmi_model['display-size'] + '" ',
            'data-group_id="' + groupId + '" ',
            '/>'
        ].join('');
        rows += '　</label></td>';

        rowCount = 0;
      }

      //レコード本体部分
      rows += '<td class="sbds"><label>';
      rows += [
        '<input type="checkbox" class="searchDispData js-tree-child" ',
        'data-seriese-cd="' + hmi_model['model-seriese-cd'] + '" ',
        'data-model-cd="' + hmi_model['model-cd'] + '" ',
        'data-inner-board-id="' + hmi_model['inner-board-id'] + '" ',
        'data-group_id="' + groupId + '" ',
        '/>'
      ].join('');
      rows += hmi_model['model-nm'];
      rows += '</label></td>';
      rows += '<td class="sbm03">';
      rows += hmi_model['type'];
      rows += '</td>';
      rows += '</tr>';
    });

    rows += '</tbody>';

    //テーブルに作成したhtmlを追加する
    $("#displaytable").append(rows);
  }(data));

  //jquery呼出
  checkBlue();

  var checked = false;
  var checkbox ;
  var tabId;
  //ローカルストレージに対応している場合移動
  // if(window.localStorage){
    var supportData, searchData, models;

    // supportData = DB.get('support');
    supportData = DB.bulk_get();

    if (supportData) {
      searchData = _.get(supportData, 'search');

      if (searchData) {
        _.forEach(_.get(searchData, 'models', {}), function(models, tab) {
          var areaId, selector, $el;

          // 検索条件に合致するチェックボックスにチェックを入れる
          areaId = tab + 'area';
          _.forEach(models, function(hmi_model) {
            selector = [
              '#' + areaId + ' .js-tree-child',
              '[data-seriese-cd=' + hmi_model['model-seriese-cd'] + ']',
              '[data-model-cd=' + hmi_model['model-cd'] + ']',
              '[data-inner-board-id=' + hmi_model['inner-board-id'] + ']'
            ].join('');

            $el = $(selector);
            if (!! $el.length) {
              $el.prop('checked', true);
              $el.trigger('change');
            }
          });
        });

        // タブの表示を切り替え
        tabId = _.get(searchData, 'tab');
        $('#' + tabId).trigger('click');
      }
    }
  // }

  //=============================================================================
  // Show Resultボタン
  //=============================================================================
  $(".searchelink").click(function(event){
    event.preventDefault();
    event.stopPropagation();

    //ローカルストレージへ検索条件を書き込み
    var searchData = {
      tab: '',
      models: {}
    };

    //どちらのタブが選択状態かチェックする
    searchData.tab = $(".now").attr("id");

    // タブごとにチェックがついている表示器の情報を取得
    var $this, tabId, areaId, models, $el;
    $('#chgtab').find('li').each(function() {
      $this = $(this);
      tabId = $this.attr('id');
      areaId = tabId + 'area';

      models = _.map($('#' + areaId + ' .js-tree-child:checked'), function(el) {
        $el = $(el);

        return {
          'model-seriese-cd' : $el.data('seriese-cd'),
          'model-cd' : $el.data('model-cd'),
          'inner-board-id' : $el.data('inner-board-id')
        };
      });

      searchData.models[tabId] = models;
    });

    //ローカルストレージに対応している場合移動
    // if(window.localStorage){
      saveData(searchData);

      //詳細画面に移動
      location.href = "detail.htm";
    // }

    return false;
  });

  //=============================================================================
  // Resetボタン
  //=============================================================================
  $(".resetlink").click(function(event){

    $("checkbox:checked").each(function(){
      $(this).prop('checked', false);
    });

    // if(window.localStorage){
      // var localStorage = window.localStorage;
      // localStorage.removeItem("supportSearch");
    // }
    // DB.remove("support");
    DB.remove("support_search_tab");
    DB.remove("support_search_models_ds");
    DB.remove("support_search_models_mn");

  });
});

/**
 * Display Size書式に合わせる
 *   ex) 3.4 inch
 *
 * @param item
 */
function formatDisplaySize(item) {
  return _.get(item, 'inch') + ' inch';
}

/**
 * 検索条件を保存
 *
 * @param searchData
 */
function saveData(searchData) {
  // var supportData;

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

  // DB.set('support', supportData);
  DB.bulk_set(searchData);

}
