/*----- require common.js -----*/
/*-------- このスクリプトは、SORD100.js または SORD120.js から利用されます。 --------*/


var ymd  = null;  // クリックした日付
var ymdh = null;  // クリックした大枠時間帯
var rsvc = null;  // クリックした予約コード
var type = null;  // 処理区分

var REQUEST_DELIVER          = 1;  // 当日時間指定
var REQUEST_TAKEOUT          = 2;  // 当日ピックアップ
var REQUEST_RESERVE          = 3;  // 予約

var DELIVERY_NOW             = 1;  // 今すぐ配達してもらう
var DELIVERY_DEFER           = 2;  // (今日)指定の時間に配達してもらう
var DELIVERY_TAKEOUT         = 3;  // (今日)お店で受け取る
var DELIVERY_RESERVE_DELIVER = 4;  // (明日以降)配達してもらう
var DELIVERY_RESERVE_TAKEOUT = 5;  // (明日以降)お店で受け取る


// 大枠時間帯指定を描画します。
function renderRange(data)
{
  var icon_1    = '<img src="/image/shared/ico_early_discount.gif" width="15" height="15" alt="早期割引" class="floatL" />';
  var icon_0    = '<img src="/image/shared/ico_reserve_privilege.gif" width="15" height="15" alt="予約特典" class="floatL" />';
  var icon_null = '<img src="/image/shared/spacer.gif" width="0" height="15" alt="" class="floatL" />';
  var icon_ok   = '<img src="/image/shared/ico_receipt_ok.gif" width="15" height="15" alt="選択可能" />';      // ●
  var icon_few  = '<img src="/image/shared/ico_receipt_few.gif" width="17" height="15" alt="残りわずか" />';   // ▲
  var icon_ng   = '<img src="/image/shared/ico_receipt_ng.gif" width="15" height="15" alt="選択不可" />';      // ×
  var table     = $('<table></table>');
  var header    = $('<tr><td class="time empty head"></td><td class="head"></td><td class="head"></td><td class="head"></td><td class="head"></td><td class="head end"></td></tr>');

  // ヘッダー描画
  header.children('td').empty();
  for (var index in data.head)
  {
    var tdIndex = new Number(index) + 1;
    var buf = $('<span class="text">' + data.head[index].reserve_nm + '</span>');
    if (data.head[index].reserve_c)
    {
      buf = $('<span class="float_box text info"></span>');
      if (data.head[index].icon != null) buf.append(eval('icon_' + data.head[index].icon));
      buf.append(data.head[index].reserve_nm);
      buf.attr('reserve_c', data.head[index].reserve_c);
      buf.bind('mouseover', function() { $(this).next('div.info').show(); });
      buf.bind('mouseout', function() { $(this).next('div.info').hide(); });
    }
    header.children('td:eq(' + tdIndex + ')').append(buf);
    if (data.head[index].info) header.children('td:eq(' + tdIndex + ')').append('<div class="info hidden">' + data.head[index].info + '</div>');
  }
  table.append(header);
  // 時間帯描画
  for (var range in data.body)
  {
    var row = $('<tr><td class="time"><span class="text">'+ range + '時台</span></td><td class="ng"></td><td class="ng"></td><td class="ng"></td><td class="ng"></td><td class="ng end"></td></tr>');
    for (var index in data.body[range])
    {
      var tdIndex    = new Number(index) + 1;
      var reserve_c  = data.body[range][index].reserve_c;
      var yyyymmddhh = data.body[range][index].ymdh;
      var reserve_nm = data.head[index].reserve_nm;
      var status     = data.body[range][index].status;
      var icon_type  = 'icon_' + data.head[index].icon;
      var buf        = $('<span class="mark">' + icon_ng + '</span>');
      if (status != 'ng')
      {
        buf = $('<a href="javascript:" class="mark" icon="' + icon_type + '" ymdh="' + yyyymmddhh + '" reserve_c="' + reserve_c + '" reserve_nm="' + reserve_nm + '">' + eval('icon_' + status) + '</a>');
        row.children('td:eq(' + tdIndex + ')').removeClass('ng');                                                      // クリック可なのでcssClass 'ng'を除去
        row.children('td:eq(' + tdIndex + ')').addClass(status);                                                       // 代わりにステータスの名を持つcssClassを付与
        // 時間帯大枠のボタンのクリックイベントに以下の処理をバインド
        buf.bind('click', function() {
          $('.confirm').hide();                                                                                        // 予約ボタンを隠す
          $('#selected_time_confirm').hide();                                                                          // 時間変更確認ボタンを隠す
          $('.time_setting .time_segment').hide();                                                                     // 表示中の詳細時間枠を隠す
          $('.service_name span.reserve_nm').text($(this).attr('reserve_nm'));                                         // 詳細時間枠の予約名を書き換え
          ymdh = $(this).attr('ymdh');                                                                                 // このボタンの年月日時を取得
          rsvc = $(this).attr('reserve_c');                                                                            // このボタンの予約コードを取得
          var icon = eval($(this).attr('icon'));
          $('div.service_name span.reserve_icon').empty();
          $('div.service_name span.reserve_icon').append(icon);
          $.getJSON(urlJsonReserveDetail, { type:type, target_ymd:ymd, target_ymdh:ymdh, reserve_c:rsvc }, renderRangeDetail);    // 処理区分、対象年月日時、予約コードを渡し、詳細時間枠を描画 urlJsonReserveDetail @common.js
        });
      }
      row.children('td:eq(' + tdIndex + ')').append(buf);
    }
    table.append(row);
  }
  $('#time_table').empty();
  $('#time_table').append(table);
  $('.range:hidden').show();
  //if ($('dl.selected_day').length) $.scrollTo($('dl.selected_day'), 200);
}

// 詳細時間帯指定を描画します。
function renderRangeDetail(data)
{
  var cols = data.body.length;
  if (cols > 1)  // 時間選択あり
  {
    $('.segment_multi tr').empty();
    $('.segment_multi tr').append('<td class="head"><span class="text">時間の指定</span></td>');
    for (var index in data.body)
    {
      data.body[index].range;
      data.body[index].status;
      var ymdhm = data.body[index].ymdhm;
      var buf   = $('<td class="select_ng"><span class="text">' + data.body[index].range + '</span></td>');
      if (data.body[index].status)
      {
        if (data.body[index].status == 'ok')
        {
          buf = $('<td class="select_ok"><a href="javascript:" class="link" ymdhm="' + ymdhm + '">' + data.body[index].range + '</a></td>');
          buf.children('a').bind('click', function() {
            $('#reserve_c').val(rsvc);
            $('#target_ymdhm').val($(this).attr('ymdhm'));
            $('.segment_one .range').text($(this).text());
            $('.segment_multi').hide();
            $('.segment_one').show();
            $('.confirm').show('blind');
            $('#selected_time_confirm').queue(function() {
              $('#selected_time_confirm:hidden').show('blind');
              //if ($('#TB_overlay').length)
                //$('#TB_ajaxContent').scrollTo('+=500px', 200);
              //else
                //$.scrollTo($('#footer'), 200);
              $(this).dequeue();
              if (ie8) {
                $('div#main div.section div.time_setting div#time_table').css('padding-bottom','10px');
                $('div#main div.section div.time_setting div#time_table').css('margin-bottom','0px');
              }
            });
          });
        } else {
          buf = $('<td class="select_ok">' + data.body[index].range + '</td>');
        }
      }
      $('.segment_multi tr').append(buf);
    }
    $('.segment_multi tr td:last').addClass('end');
    $('.segment_multi').show();
    $('.segment_multi').queue(function() {
      //$.scrollTo($('div#time_table tr:last'), 200);
      $.scrollTo($('div.early_discount_set'), {speed:200, axis:'y'} );
      $(this).dequeue();
    });
  }
  else  // 時間選択なし
  {
    var ymdhm = ymd + data.body[0].range.substr(0, 5).replace(':', '');
    $('#reserve_c').val(rsvc);
    $('#target_ymdhm').val(ymdhm);
    $('.segment_one .range').text(data.body[0].range);
    $('.segment_one').show('blind');
    if (data.body[0].status) $('.confirm').show('blind');
    if ($('#selected_time_confirm')) $('#selected_time_confirm:hidden').show('blind');
  }
}