var message_catalog = {
    'コメントを書く(140文字以内)': {
        'cs': '我要留言(140字以内)',
        'ct': '我要留言(140字以內)',
        'ko': '덧글쓰기(140자 이내)',
        'en': 'Write a comment (maximum 140 characters)',
        'th': 'เขียนข้อความ (ไม่เกิน  １４０ ตัว)'
    },
    "お名前": {
      'cs': "姓名",
      'ct': "姓名",
      'ko': "이름 ",
      'en': "Name",
      'th': "ชื่อ"
    },
    "投稿者名": {
      'cs': "姓名",
      'ct': "姓名",
      'ko': "이름 ",
      'en': "Name",
      'th': "ชื่อ"
    },
    "メールアドレス": {
        'cs': "邮箱地址",
        'ct': "電子郵件地址",
        'ko': "이메일",
        'en': "Email address",
        'th': "เมล์ address"
    },
    "本文": {
        'cs': "内容",
        'ct': "內容",
        'ko': "내용",
        'en': "Comment",
        'th': "อความ"
    },
    "投稿する": {
        "cs": "确定送出",
        "ct": "確定送出",
        "ko": "덧글등록",
        "en": "Post a comment",
        "th": "ส่งข้อความ"
    },
    "コメント一覧(コメント投稿)": {
        "cs": "留言一览",
        "ct": "留言一覽",
        "ko": "전체덧글보기",
        "en": "View all the comments",
        "th": "อ่านข้อความ"
    },
    "エラーメッセージ": {
        "cs": 'Error messages',
        "ct": 'Error messages',
        "ko": "오류 메세지",
        "en": "Error messages",
        "th": "ส่งผิดพลาด"
    },
    "名前を入力してください": {
        "cs": "请输入姓名",
        "ct": "請輸入姓名",
        "ko": "이름을 입력해 주세요.",
        "en": "Enter your name",
        "th": "กรุณากรอกชื่อ"
    },
    "名前が長すぎます": {
      "cs": "姓名超过字数限制",
      "ct": "姓名超過字數限制",
      "ko": "이름이 너무 깁니다.",
      "en": "Name should be shorter",
      "th": "ชื่อยาวเกินไป"
    },
    "メールアドレスが長すぎます": {
        "cs": "邮箱地址超過字數限制",
        "ct": "電子郵件地址超過字數限制",
        "ko": "이메일 주소가 너무 깁니다.",
        "en": "Email address should be shorter",
        "th": "เมล์ address ยาวเกินไป"
    },
    "本文が長すぎます(１４０文字以内)": {
        "cs": "本文超过字数限制",
        "ct": "本文超過字數限制",
        "ko": "내용은 140자 이내로 써 주세요.",
        "en": "Comment should be shorter (maximum 140 characters)",
        "th": "ข้อความยาวเกินไป"
    },
    "本文を入力してください": {
        "cs": "请输入本文",
        "ct": "請輸入本文",
        "ko": "내용을 입력해 주세요.",
        "en": "Please enter comment",
        "th": "กรุณากรอกข้อความ"
    },
    "本文中にリンクを含めることはできません": {
        "cs": "本文中无法建立联结",
        "ct": "本文中無法建立聯結",
        "ko": "본문내용에 링크를 삽입할 수 없습니다.",
        "en": "Links cannot be included in comments",
        "th": "ภายในข้อความไม่สามารถริงค์ได้"
    },
    "本文にHTMLタグは入力できません": {
      "cs": "本文中不可含HTML标籤",
      "ct": "本文中不可含HTML標籤",
      "ko": "본문내용에 HTML태그를 사용할 수 없습니다.",
      "en": "HTML tags cannot be included in comments",
      "th": "ไม่สามารถกรอกข้อความชนิด HTML"
  }
}
function get_lang() {
  var path = window.location.pathname.split('/');
  if (path.length > 2) {
    return path[1];
  } else {
    return null;
  }
}
function i18n(message) {
  if (message in message_catalog && lang && lang in message_catalog[message]
      && message_catalog[message][lang]) {
    return message_catalog[message][lang];
  } else {
    return message;
  }
}
var lang=null;
var comments = {};
comments.show = function(thread_id) {
  document.write('<div id="thread_'+thread_id+'"></div>');
  $(document).ready(function(){
    lang = get_lang();
    cserv.show_thread(thread_id, '#thread_'+thread_id);
  });
}
var util = {
  escape_selector: function(str) {
    str = str.replace(/\./,'\\.');
    return str;
  }
}

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';
  }
  var target = $(util.escape_selector(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++) {
      var comment = data['comments'][i];
      var c = '<div class="comment" id="'+comment.id+'">'
      c += '<div class="user">';
      c += '<span class="posted"></span>';
      c += '<span class="title">'+i18n('投稿者名')+': </span><span class="name"></span>';
      c += '<span class="email"></span>';
      if ('is_admin' in data && data['is_admin']) {
        c += '<span class="admin">[<a href="javascript:void(0);">X</a>]</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+'>');
      }
      var d = new Date(comment.created);
      d.setHours(d.getHours()+9); // to JST
      var date = d.toString();
      if ('sprintf' in $) {
        // required jquery psprintf http://plugins.jquery.com/project/psprintf
        date = $.sprintf("%04d/%02d/%02d %02d:%02d", d.getFullYear(), d.getMonth()+1, d.getDate(), d.getHours(), d.getMinutes());
      }
      elem.find('.posted').text(date);
      elem.find('.message').text(comment.message);
      cserv.register_delete_function(elem, thread_id, comment.id);
      target.append(elem);
    }
    var form = '<h4>'+i18n('コメントを書く(140文字以内)')+'</h4><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">'+i18n('お名前')+'</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="'+i18n('投稿する')+'"/>';
    form += '</span>';
    form += '</div>';
    form += '<div class="input_message">';
    form += '<label for="message">'+i18n('本文')+'</label>';
    form += '<input type="text" name="message" />';
    form += '</div>';
    form += '</form>';
    form += '</div>';
    target.append(form);
    $('.comment_form input[type="text"]').keypress(function(e) {
      if (e.keyCode == 13) {
        return false;
      }
    });
  }
  var date = new Date().getTime();
  $.getJSON(cserv.baseuri+'/comment/list/json/'+thread_id+'/?'+date+'=1&amp;jsonp=?', success);
}
cserv.register_delete_function = function(elem, thread_id, comment_id) {
  elem.find('.admin a').click(function() {
    var orig = elem.css('background-color');
    elem.css('background-color', '#cfcfcf');
    if (confirm("コメントを削除しますか?")) {
      var success = function(data) {
        if (data && 'stat' in data && data['stat'] == 'ok') {
          elem.fadeOut(1000, function() { elem.remove();});
        } else {
          elem.css('background-color', orig);
        }
      }
      var param = {
          'thread_id': thread_id,
          'comment_id': comment_id
      }
      // only authed user can access this method
      cserv.callAPI('/comment/delete', param, success);
    } else {
      elem.css('background-color', orig);
    }
  });
}
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()
  }
  param['lang'] = get_lang();
  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">&lt;'+i18n('エラーメッセージ')+'&gt;</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);
}