// TODO キャンセル時の入力チェック
// TODO 全員キャンセルしたときに参加者テーブルのヘッダを非表示にする
// TODO 参加者がいないときに「参加者はまだいません」メッセージを出す

var CancelPanel = function() {

  this.form = $('#cancelForm');
  this.targetIdField = $('#cancelTargetId');
  this.targetEventIdField = $('#cancelTargetEventId');
  this.passwordField = $('#cancelPassword');
  
  this.form.ajaxForm({
    
    success: function(data, dataType) {
      cancelPanel.target.event.processCancelResponse(data, dataType);
    },
    
    error: function(xhr, textStatus, errorThrown) {
    	cancelPanel.target.event.showError(textStatus);
    }

  });

  this.cancelButton = $('#cancelButton');
  this.cancelButton.click(function(e) {
    cancelPanel.form.submit();
    cancelPanel.form.fadeOut();
    cancelPanel.passwordField.val('');
  });

  this.yappariyameruButton = $('#cancelYappariyameruButton');
  this.yappariyameruButton.click(function(e) {
    cancelPanel.form.fadeOut();
    cancelPanel.passwordField.val('');
  });

};

$.extend(CancelPanel.prototype, {
  
  setTargetParticipant: function(participant) {
    this.target = participant;
    this.targetIdField.val(participant.id);
    this.targetEventIdField.val(participant.event.id);
  },
  
  show: function(top, left) {
    this.form.css({ top: top, left: left });
    this.form.fadeIn();
  }
  
});


// ----------------------------------------------


var Participant = function(event, id, name, comment, datetime) {

  var participant = this;

  this.event = event;
  this.id = id;
  this.name = name;
  this.comment = comment;
  this.datetime = datetime;

  this.rec = $('<tr />');
  this.cancelLink = $('<a href="javascript:void(0)">キャンセル</a>');
  this.cancelLink.id = 'cancelLink-' + id;
  this.cancelLink.click(function(e) {
    cancelPanel.setTargetParticipant(participant);
    cancelPanel.show(e.pageY, e.pageX);
  });

  var nameTd = $('<td>' + name + '</td>');
  var commentTd = $('<td title="' + comment + '">' + comment.truncate(30, '...') + '</td>');
  var datetimeTd = $('<td>' + datetime + '</td>');
  var cancelTd = $('<td />');
  cancelTd.append(this.cancelLink);

  this.rec.append(nameTd);
  this.rec.append(commentTd);
  this.rec.append(datetimeTd);
  this.rec.append(cancelTd);

};

// サーバなしでエミュレートするためのロジック、あとで消す
Participant.serial = (function() {
  var num = 10;
  return function() {
    return num++;
  };
})();

function format(date) {
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var hour = date.getHours();
  var min = date.getMinutes();
  if (month < 10) month = '0' + month;
  if (day < 10) day = '0' + day;
  if (hour < 10) hour = '0' + hour;
  if (min < 10) min = '0' + min;
  return month + '月' + day + '日' + ' ' + hour + ':' + min;
}


// ----------------------------------------------


var Event = function(id) {

  this.id = id;
  this.participants = [];

  this.tab = $('#participantsTableTemplate').clone();
  this.tab.id = 'participantsTable-' + id;
  var tabHolder = $('#participantsTableHolder-' + id);
  tabHolder.empty();
  tabHolder.append(this.tab);
  
  this.messageHolder = $('#joinFormMessage-' + id);

  $('#showJoinFormLink-' + id).click(function() {
    $('#joinForm-' + id).slideToggle();
  });
  $('#joinSubmitButton-' + id).click(function() {
    $('#joinForm-' + id).submit();
  });

  var event = this;
  $('#joinForm-' + id).ajaxForm({
	
    beforeSubmit: function(data, jqForm, options) {
      for ( var i in data ) {
        var input = $(data[i]);
        switch (input.attr('name')) {
          case 'name'   : var name    = input.val(); break;
          case 'email'  : var email   = input.val(); break;
          case 'comment': var comment = input.val(); break;
          case 'pass'   : var pass    = input.val(); break;
        }
      }
      var error = '';
      if (String.isBlank(name)) {
        error += "名前を入力してください\n";
      }
      if (String.isBlank(email)) {
        error += "E-Mailアドレスを入力してください\n";
      }
      if (String.isBlank(pass)) {
        error += "キャンセル用パスワードを入力してください\n";
      }
      if (!String.isBlank(error)) {
        alert(error);
        return false;
      }
      return true;
    },
    
    success: function (data, dataType) {
    	event.processJoinResponse(data, dataType);
    },
    
    error: function(xhr, textStatus, errorThrown) {
    	event.showError(textStatus);
    }

  });

};

$.extend(Event, {
  init: function(urlBase) {
	Event.urlBase = urlBase;
  }
});

$.extend(Event.prototype, {

  addAndHighlight: function(participant) {
    this.add(participant);
    participant.rec.effect('highlight', {}, 1500);
  },
  
  add: function(participant) {
    this.participants.push(participant);
    if (this.tab.css('display') == 'none' && this.participants.length == 1) {
      this.tab.toggle('fold');
    }
    this.tab.append(participant.rec);
  },
  
  cancel: function(participantId) {
    for (var i = 0; i<this.participants.length; i++) {
      var p = this.participants[i];
      if (p.id == participantId) {
        p.rec.fadeOut();
        setTimeout(function() {
          p.rec.remove();
        }, 1000);
        this.participants.splice(i, 1);
        break;
      }
    }
  },
  
  processJoinResponse: function(data, dataType) {
    var obj = $.parseJSON(data);
    if (obj.success) {
      var participant = new Participant(this, obj.id, obj.name, obj.comment, obj.datetime);
      this.addAndHighlight(participant);
      this.showMessage(obj.message);
      $('#joinForm-' + this.id).resetForm();
    } else {
      this.showError(obj.message);
    }
  },
  
  processCancelResponse: function(data, dataType) {
    var obj = $.parseJSON(data);
    if (obj.success) {
      this.cancel(obj.id);
      this.showMessage(obj.message);
    } else {
      this.showError(obj.message);
    }
  },
  
  showMessage: function(message) {
    this.messageHolder.css('color', 'blue');
    this.messageHolder.text(message);
    this.messageHolder.css('display', 'block');
  },
  
  showError: function(message) {
    this.messageHolder.css('color', 'red');
    this.messageHolder.text(message);
    this.messageHolder.css('display', 'block');
  }
  
});