var comments = {}
comments.show = function(thread_id) {
  document.write('<div id="thread_'+thread_id+'"></div');
  $(document).ready(function(){
    cserv.show_thread(thread_id, '#thread_'+thread_id);
  });
}
var cserv = {}
//cserv.domain = 'http://localhost:8000';
cserv.baseuri ='/comment';

cserv.show_thread = function(thread_id, target_name) {
  if (typeof target_name == 'undefined') {
    target_name = '#thread';
  }
  target = $(target_name);
  target.empty();
  var success = function(data, stat) {
    if (!('stat' in data) || data['stat'] != 'ok') {
      return;
    }
    // @TODO: check referer
    for (var i=0; i < data['comments'].length; i++) {
      // @TODO: admin delete mode
      var comment = data['comments'][i];
      var c = '<div class="comment" id="'+comment.id+'">'
      c += '<div class="user">';
      c += '<span class="name"></span>';
      c += '<span class="email"></span>';
      c += '<span class="posted"></span>';
      c += '</div>';
      c += '<div class="message"></div>';
      c += '</div>';
      var elem = $(c);
      elem.find('.name').text(comment.name);
      if (comment.email) {
        elem.find('.email').text('<'+comment.name+'>');
      }
      elem.find('.posted').text(comment.created);
      elem.find('.message').text(comment.message);
      target.append(elem);
    }
    var form = '<div class="comment_form">';
    form += '<div id="form_error"></div>';
    form += '<form id="post" name="post" action="javascript:cserv.post(\''+target_name+'\')">';
    form += '<input type="hidden" name="thread_id" id="thread_id" value="'+data['id']+'" />';
    form += '<div><span class="name">';
    form += '<label for="name">お名前</label>';
    form += '<input type="text" name="name" id="name" value="" />';
    form += '<span class="required">*</span>';
    form += '</span>';
    form += '<span class="email">';
    form += '<label for="email">Email</label>';
    form += '<input type="text" name="email" id="email" value="" />';
    form += '</span>';
    form += '<span class="button">';
    form += '<input type="submit" value="投稿する"/>';
    form += '</span>';
    form += '</div>';
    form += '<div class="input_message">';
    form += '<label for="message">本文</label>';
    form += '<input type="text" name="message" />';
    form += '</div>';
    form += '</form>';
    form += '</div>';
    target.append(form);
  }
  $.getJSON(cserv.baseuri+'/comment/list/json/'+thread_id+'/?jsonp=?', success);
}

cserv.post = function(target) {
  //validation
  var form = $('#post');
  var param = {
      'thread_id': form.find('input[name="thread_id"]').val(),
      'name': form.find('input[name="name"]').val(),
      'email': form.find('input[name="email"]').val(),
      'message': form.find('input[name="message"]').val()
  }
  var errors = $('#form_error');
  errors.empty();
  var success = function(data, stat) {
    if (!('stat' in data) || data['stat'] != 'ok') {
      if ('errors' in data) {
        var msg = '<span class="alert">エラーメッセージ</span>';
        msg += "<ul>";
        for (key in data['errors']) {
          msg += '<li>'+data['errors'][key]+'</li>';
        }
        msg += "</ul>";
        errors.append(msg);
      }
      return;
    }
    cserv.show_thread(param['thread_id'],target);
  }
  cserv.callAPI('/comment/post', param, success);
}
cserv.callAPI = function(method, param, success) {
  if (cserv.baseuri.indexOf('http') == 0) {
    $.getJSON(cserv.baseuri+method+'?jsonp=?', param, success, 'json');
  } else {
    $.post(cserv.baseuri+method, param, success, 'json');
  }
}
var question = {}
question.html = { 
  active: '<a href="javascript:void(0);"><img class="button" src="/files/tohyo.gif" /></a>',
  posted: '<img class="button" src="/files/tohyo_2.gif" />'
}
question.post_answer = function(question_id, order, callback) {
  var success = function(data, stat) {
    if (data && 'stat' in data && (data['stat'] == 'ok' || data['stat'] == 'duplicated')) {
      callback();
    }
  }
  var param = {
    question_id: question_id,
    order: order
  }
  cserv.callAPI('/question/post', param, success);
  return false;
}
question.show_button = function(q) {
  for (var i=0; i < q['answers'].length; i++) {
    var answer = q['answers'][i];
    var button = $('#'+q['id'].replace('.','\\.')+'_'+answer['order']);
    if (answer['posted']) {
      button.html(question.html.posted);
    } else {
      button.html(question.html.active);
      button.click(function() {
        var elem = $(this);
        var id = elem.attr('id');
        var question_id = id.substring(0,id.lastIndexOf('_'))
        var order = id.substring(id.lastIndexOf('_')+1)
        var callback = function() {
          elem.html(question.html.posted);
        }
        question.post_answer(question_id, order, callback);
      });    
    }
  }
}
question.load_answers = function(question_id) {
  var success = function(data, stat) {
    if (data && 'stat' in data && data['stat'] == 'ok') {
      question.show_button(data['question']);
    }
  }
  cserv.callAPI('/question/'+question_id, {}, success);
}