<link rel="stylesheet" type="text/css" media="screen" href="http://maplia.jp/script/tablesorter/theme/style.css" charset="Shift_JIS" />
<style type="text/css">
  tbody tr th {
    padding: 0 5px;
  }
  tbody tr td.number {
    text-align: center;
  }
  tbody tr td.mark {
    text-align: center;
  }
  tbody tr td.text {
    text-align: left;
  }
  tbody tr.esy td {
    background-color: #cceeff;
  }
  tbody tr.std td {
    background-color: #ccffcc;
  }
  tbody tr.hrd td {
    background-color: #ffffcc;
  }
  tbody tr.mas td {
    background-color: #ffcccc;
  }
  tbody tr.unl td {
    background-color: #eebbff;
  }
</style>
<script type="text/javascript" src="http://maplia.jp/script/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="http://maplia.jp/script/jquery.json2table.js"></script>
<script type="text/javascript">
  var musics;
  var table;
  var level_min = 0;
  var level_max = 99;
  var level_delta = 10;
  var notes_min = 0;
  var notes_max = 899;
  var notes_delta = 100;

  $(document).ready(function() {
    $.getJSON('http://revrank.maplia.jp/rev1st/api/musics?callback=?', function(data) {
      musics = data;
      table = $('#table_musics');

      select_level = $('#select_level');
      select_level.append($('<option/>', {
        value: -1, text: 'すべて'
      }));
      for (var i = level_min; i < level_max; i += level_delta) {
        select_level.append($('<option/>', {
          value: i, text: i + '~' + (i + level_delta - 1)
        }));
      }

      select_notes = $('#select_notes');
      select_notes.append($('<option/>', {
        value: -1, text: 'すべて'
      }));
      for (var i = notes_min; i < notes_max; i += notes_delta) {
        select_notes.append($('<option/>', {
          value: i, text: i + '~' + (i + notes_delta - 1)
        }));
      }

      createMusicTable();
      filterMusicTable();
    });
  });

  function createMusicTable() {
    var table_data = {};
    table_data.thead_column_classes = [
      'style_th', 'style_th', 'style_th', 'style_th', 'style_th'
    ];
    table_data.tbody_column_classes = [
      'style_th', 'text', 'mark', 'number', 'number'
    ];
    table_data.thead = [];
    table_data.tbody = [];
    table_data.thead[0] = {
      values: ['#', 'タイトル', '難易度', 'レベル', 'ノート数']
    };

    $.each(musics, function(i, music) {
      table_data.tbody[table_data.tbody.length] = {
        id: music.text_id + '_esy',
        class_name: 'esy',
        values: [
          '-', music.full_title, 'ESY',
          parseInt(music.esy.level), music.esy.notes
        ]
      };
      table_data.tbody[table_data.tbody.length] = {
        id: music.text_id + '_std',
        class_name: 'std',
        values: [
          '-', music.full_title, 'STD',
          parseInt(music.std.level), music.std.notes
        ]
      };
      table_data.tbody[table_data.tbody.length] = {
        id: music.text_id + '_hrd',
        class_name: 'hrd',
        values: [
          '-', music.full_title, 'HRD',
          parseInt(music.hrd.level), music.hrd.notes
        ]
      };
      table_data.tbody[table_data.tbody.length] = {
        id: music.text_id + '_mas',
        class_name: 'mas',
        values: [
          '-', music.full_title, 'MAS',
          parseInt(music.mas.level), music.mas.notes
        ]
      };
      if (music.unl.level) {
        table_data.tbody[table_data.tbody.length] = {
          id: music.text_id + '_unl',
          class_name: 'unl',
          values: [
            '-', music.full_title, 'UNL',
            parseInt(music.unl.level), music.unl.notes
          ]
        };
      }
    });

    table.json2table(table_data);
    table.tablesorter({sortList: [[3, 1]]});
  }

  function filterMusicTable() {
    diff = parseInt($(':radio[name="diff"]:checked').val());
    level = parseInt($('select[name="level"]').val());
    notes = parseInt($('select[name="notes"]').val());

    $.each(musics, function (i, music) {
      if ((diff == 0) || (diff == 1)) {
        $('#' + music.text_id + '_esy').show();
      } else {
        $('#' + music.text_id + '_esy').hide();
      }
      if ((diff == 0) || (diff == 2)) {
        $('#' + music.text_id + '_std').show();
      } else {
        $('#' + music.text_id + '_std').hide();
      }
      if ((diff == 0) || (diff == 3)) {
        $('#' + music.text_id + '_hrd').show();
      } else {
        $('#' + music.text_id + '_hrd').hide();
      }
      if ((diff == 0) || (diff == 4)) {
        $('#' + music.text_id + '_mas').show();
      } else {
        $('#' + music.text_id + '_mas').hide();
      }
      if ((diff == 0) || (diff == 5)) {
        $('#' + music.text_id + '_unl').show();
      } else {
        $('#' + music.text_id + '_unl').hide();
      }

      if (level != -1) {
        if ((music.esy.level < level) || (music.esy.level >= level + level_delta)) {
          $('#' + music.text_id + '_esy').hide();
        }
        if ((music.std.level < level) || (music.std.level >= level + level_delta)) {
          $('#' + music.text_id + '_std').hide();
        }
        if ((music.hrd.level < level) || (music.hrd.level >= level + level_delta)) {
          $('#' + music.text_id + '_hrd').hide();
        }
        if ((music.mas.level < level) || (music.mas.level >= level + level_delta)) {
          $('#' + music.text_id + '_mas').hide();
        }
        if (music.unl.level && ((music.unl.level < level) || (music.unl.level >= level + level_delta))) {
          $('#' + music.text_id + '_unl').hide();
        }
      }

      if (notes != -1) {
        if ((music.esy.notes < notes) || (music.esy.notes >= notes + notes_delta)) {
          $('#' + music.text_id + '_esy').hide();
        }
        if ((music.std.notes < notes) || (music.std.notes >= notes + notes_delta)) {
          $('#' + music.text_id + '_std').hide();
        }
        if ((music.hrd.notes < notes) || (music.hrd.notes >= notes + notes_delta)) {
          $('#' + music.text_id + '_hrd').hide();
        }
        if ((music.mas.notes < notes) || (music.mas.notes >= notes + notes_delta)) {
          $('#' + music.text_id + '_mas').hide();
        }
        if (music.unl.notes && ((music.unl.notes < notes) || (music.unl.notes >= notes + notes_delta))) {
          $('#' + music.text_id + '_unl').hide();
        }
      }
    });
  }
</script>
<p>
  難易度フィルター: 
  <label><input type="radio" name="diff" value="0" onchange="filterMusicTable()" checked="checked"> 全譜面</label>
  <label><input type="radio" name="diff" value="1" onchange="filterMusicTable()"> EASY</label>
  <label><input type="radio" name="diff" value="2" onchange="filterMusicTable()"> STANDARD</label>
  <label><input type="radio" name="diff" value="3" onchange="filterMusicTable()"> HARD</label>
  <label><input type="radio" name="diff" value="4" onchange="filterMusicTable()"> MASTER</label>
  <label><input type="radio" name="diff" value="5" onchange="filterMusicTable()"> UNLIMITED</label>
</p>
<p>
  レベルフィルター: <select id="select_level" name="level" onchange="filterMusicTable()"></select>
  / 
  ノート数フィルター: <select id="select_notes" name="notes" onchange="filterMusicTable()"/></select>
</p>
<table id="table_musics" class="tablesorter style_table" cellspacing="1" border="0"></table>

トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS