var CommentsHandler = {
  base_url : "/comment_jsonp.php?qid="+ $('qid').value + "&aid=",
  id : 'json-request-for-comments',
  area_id : [$('area_id1').value, $('area_id2').value],
  target_id : ['commentsCity1','commentsCity2'],
  target_body_id : ['commentsCity1Body','commentsCity2Body'],
  paging_id : ['paging1','paging2'],
  page : { current : [0,0], max : [0,0]},
  comment_count : ['comment_count1','comment_count2'],
  request : function(evt) {
    location.href = '#q';
    var elem = Event.element(evt);
    var page = (!elem._page) ? 0 : elem._page;
    var scr = document.createElement('script');
    scr.src = CommentsHandler.base_url + CommentsHandler.area_id[elem._target] + '&target=' + elem._target + '&page=' + page;
    scr.charset = 'UTF-8';
    var store = $(CommentsHandler.id);
    store.replaceChild(scr,store.firstChild);
  }
};
function updateComments(arg){
  var PAGING_RANGE = 7;
  var PAGING_SIZE = 25;
  // comments
  var parent_element = document.createElement('div');
  parent_element.id = CommentsHandler.target_body_id[arg.target];
  for(var i = 0; i < arg.comments.length; i++) {
    var elem = document.createElement('dl');
    var nickname = document.createElement('dt');
    Element.addClassName(nickname,'nickname');
    nickname.innerHTML = '<span>' + (arg.page * PAGING_SIZE + i + 1) + '.</span> ' + arg.comments[i].nickname;
    elem.appendChild(nickname);

    var comment = document.createElement('dd');
    Element.addClassName(comment,'comment');
    comment.innerHTML = arg.comments[i].comment;
    elem.appendChild(comment);
    parent_element.appendChild(elem);
  }
  $(CommentsHandler.target_id[arg.target]).replaceChild(
    parent_element,
    $(CommentsHandler.target_body_id[arg.target])
  );

  // counts
  var count_element = $(CommentsHandler.comment_count[arg.target]);
  var view_max = ((arg.page + 1) * PAGING_SIZE < arg.count ) ? (arg.page + 1) * PAGING_SIZE : arg.count;
  count_element.innerHTML = (arg.count) ? '( <em>' + arg.count + '</em> 件中 <em>' + (arg.page * PAGING_SIZE + 1) + ' - ' + (view_max) + '</em> 件目 )' :  '';
  Element.addClassName(count_element, 'count');


  // paging
  var paging_element = $(CommentsHandler.paging_id[arg.target]);
  paging_element.innerHTML = '';
  if(arg.page_max <= 1) {
    Element.removeClassName(paging_element,'paging');
    return;
  }

  var createPagedElement = function(e_page,e_target,e_inner,ev, e_class) {
    var e_elem = document.createElement('li');
    if(typeof e_class != 'undefined') Element.addClassName(e_elem,e_class);
    e_elem._page = e_page;
    e_elem._target = arg.target;
    e_elem.innerHTML = e_inner;
    if(ev) Event.observe(e_elem,'click',CommentsHandler.request);
    return e_elem;
  };
  
  if(arg.page > 0) paging_element.appendChild(createPagedElement(arg.page -1, arg.target,'前へ',true, 'back'));

  var index;
  var half_range = parseInt(PAGING_RANGE/2);
  if(arg.page <= half_range) {
    index = 0;
  } else if( (arg.page_max - arg.page) < half_range) {
    index = arg.page_max - PAGING_RANGE;
  } else {
    index = (arg.page - half_range);
  }
  for(var l = index; l < index + PAGING_RANGE && l < arg.page_max ; l++) {
    var inner = (l == arg.page) ? '<em>' + (l + 1) + '</em>': (l + 1);
    var hasEvent = (l != arg.page);
    paging_element.appendChild(createPagedElement(l, arg.target,inner,hasEvent));
  }
//console.log("page: %i",arg.page);
//console.log("page_max: %i",arg.page_max);
  if(arg.page < (arg.page_max-1)) paging_element.appendChild(createPagedElement(arg.page + 1, arg.target,'次へ',true, 'next'));
  
}