// Add a comment div thingy to each dd in the document.
$(document).ready(function()
{
  $("dt").each(function()
  {
    var comment_key = $('body').attr('id') + '-' + $(this).attr('id');
    var thelink = $('<a class="commentlink" href="#">add/view comments (beta)</a>').toggle(showComments, hideComments);
    thelink.data('comment_key', comment_key);
    thelink.data('comments_fetched', false);
    var thediv = $('<div class="commentdiv" id="' + comment_key + '_comments"></div>');
    thediv.hide();
    
    $(this).next("dd").after(thelink);
    thelink.after(thediv);
  });
});

// Called for link click, so this = link.
function showComments()
{
  if(!$(this).data('comments_fetched'))
  {
    fetchComments($(this).data('comment_key'), $(this).next());
    $(this).data('comments_fetched', true);
  }
  
  $(this).next().slideDown();
  $(this).html('hide comments');
  return false;
}

// Called for link click, so this = link.
function hideComments()
{
  $(this).next().slideUp();
  $(this).html('add/view comments (beta)');
  return false;
}

function fetchComments(key, div)
{
  $.getJSON('/dynacomments.cgi', {key:key}, reloadCommentDiv);
}

function reloadCommentDiv(data)
{
  var commenthtml = '';
  var commentdiv = $("#" + data.key + "_comments");
  
  // Check for error key.
  if(data.error)
  {
    commenthtml += '<div class="error">' + data.error + '</div>';
    commentdiv.html(commenthtml);
  }
  else
  {
    $.each(data.comments, function(i,comment)
    {
      commenthtml += '<div class="comment">';
      commenthtml += '<p class="submitter">' + comment.submitter + '</p>';
      commenthtml += '<p class="date">' + comment.date + '</p>';
      commenthtml += '<p class="text">' + comment.comment + '</p>';
      commenthtml += '</div>'
    });
    commentdiv.html(commenthtml);
    commentdiv.append(commentForm(data.allowed_tags, data.key));
  }
}

function commentForm(allowed_tags, key)
{
  var formstring = '<form class="commentform" method="post" action="/dynacomments.cgi">';
  formstring += '<h3>Add a comment</h3>';
  formstring += '<h4>html tags allowed: ' + allowed_tags + '</h4>';
  formstring += '<label for="' + key + '-name">Name</label><input type="text" name="name" id="' + key + '-name" len="30">';
  formstring += '<label for="' + key + '-url">URL</label><input type="text" name="url" id="' + key + '-url" size="50">';
  formstring += '<label for="' + key + '-commentinput">Comment</label><textarea name="comment" id="' + key + '-commentinput" rows="10" cols="60"></textarea><br>';
  formstring += '<input type="hidden" name="key" value="' + key + '">';
  formstring += '<input type="submit" name="submit" value="Submit Comment">';
  formstring += '</form>';
  
  var jqform = $(formstring).submit(submitComment);
  return jqform;
}

function trim(string)
{
  if(string)
  {
    return string.replace(/^\s+|\s+$/g, "");
  }
  else
  {
    return "";
  }
}

function stripSpaces(theform)
{
  theform.name.value = trim(theform.name.value);
  theform.url.value = trim(theform.url.value);
  theform.comment.value = trim(theform.comment.value);
}

function confirmSubmit(theform)
{
  stripSpaces(theform);

  var ok = true;
  if(theform.comment.value == '')
  {
    var textarea = $('#' + theform.key.value + '-commentinput');
    textarea.css("border", "1px solid red");
    textarea.prev("label").css("color", "red").text("Please enter a comment");
    ok = false;
  }
  return ok;
}

function submitComment()
{
  if(confirmSubmit(this))
  {
    $.post("/dynacomments.cgi", $(this).serialize(), reloadCommentDiv, "json");
  }

  return false;
}