// $Id$

var Comment = {
   TT_CONTAINER : '<form id="log-comment-#{id}"></form>',
   TT_MENU : '<h3><a href="javascript:Comment.form(\'#{id}\');">コメントする</a></h3>',
   TT_FORM : '<input type="text" name="name" id="name-#{id}" size="7" /><br /><textarea name="comment" id="comment-#{id}" rows="3" cols="40" /></textarea><br /><input type="button" value="コメントする" onclick="Comment.submit(#{id});" /> <input type="button" value="キャンセル" onclick="Comment.cancel(#{id});" />',
   TT_COMMENT : '<li class="log-comment"><span class="black">#{name} / #{ctime}</span><br /><p>#{data}</p></li>',

   init : function() {
      var logs = document.getElementsByClassName('log-data');
      $A(logs).each(function(log) {
         var id = log.id.substr(4);
         new Insertion.After(log,new Template(Comment.TT_CONTAINER).evaluate({id:id}));
         $('log-comment-'+id).innerHTML = new Template(Comment.TT_MENU).evaluate({id:id});
      });
   },
   form : function(id) {
      $('log-comment-'+id).innerHTML = new Template(Comment.TT_FORM).evaluate({id:id});
   },
   cancel : function(id) {
      $('log-comment-'+id).innerHTML = new Template(Comment.TT_MENU).evaluate({id:id});
   },
   submit : function(id) {
      $('log-comment-'+id).disable();
      new AjaxRequest('/diary/comment/submit',function(dat) {
         if(dat.err) {
            alert(dat.errstr);
            $('log-comment-'+id).enable();
            return;
         } else {
            // add comment
            new Insertion.Bottom('log-comments-'+id, 
                                 new Template(Comment.TT_COMMENT).evaluate({data:dat.data,ctime:dat.ctime,name:dat.name||'anonymous'}));
            Comment.cancel(id);
            $('log-comment-'+id).enable();
         }
      }).send({id:id,name:$F('name-'+id),data:$F('comment-'+id)});
   }
};
Event.observe(document,'dom:loaded',Comment.init);