///////////////////////////////////////////////////////////////////
//// Constants

var kShadowRitWidth = 7;
var kShadowTopRitHeight = 8;
var kShadowBtmHeight = 8;
var kShadowBtmLftWidth = 6;
var kShadowBtmRitWidth = 10;
var kStuffLabelTop = -3;

///////////////////////////////////////////////////////////////////
//// Globals

var gAlbumDoc = null;
var gRecentAlbumTemplate = null;
var gCommentBoxTemplate = null;
var gCommentTemplate = null;
var gSubmittingComment = null;

///////////////////////////////////////////////////////////////////
//// Misc

function cropString(aString, aLimit)
{
  return aString.length > aLimit ? aString.substr(0, aLimit) + "..." : aString;
}

///////////////////////////////////////////////////////////////////
//// Stuff Box

function initStuffBox()
{
  // Initialize each of the stuff elements.
  var stuffBoxElt = document.getElementById("stuffBox");
  var stuffElt = stuffBoxElt.firstChild;
  var stuffIndex = -1;
  while (stuffElt) {
    if (stuffElt.nodeType == 1 && stuffElt.getAttribute("stufftype"))
      initStuff(++stuffIndex, stuffElt);
    
    stuffElt = stuffElt.nextSibling;
  } 
}

function initStuff(aIndex, aStuffElt)
{
  initStuffShadow(aStuffElt);
  initStuffLabel(aStuffElt);
  
  aStuffElt.className += " " + (aIndex % 2 ? "odd" : "even");
  aStuffElt.style.visibility = "visible";
}

///////////////////////////////////////////////////////////////////
//// Shadow

/**********
 * Doesn't it suck that I have to position these shadow images manually from script?
 * This would have been so easy to do with XUL, but with HTML it's extremely painful.
 * Doing it in cross-browser HTML would be even more ridiculous.
 */
function initStuffShadow(aDivElt)
{
  var imgElt = aDivElt.getElementsByTagName("img")[0];
  var imgWidth = imgElt.offsetWidth;
  var imgHeight = imgElt.offsetHeight;
  
  var shadowTopRight = document.createElement("div");
  shadowTopRight.className = "shadow-top-right";
  shadowTopRight.style.top = "0";
  shadowTopRight.style.left = imgWidth + "px";
  shadowTopRight.style.width = kShadowRitWidth + "px";
  shadowTopRight.style.height = kShadowTopRitHeight + "px";
  
  var shadowRight = document.createElement("div");
  shadowRight.className = "shadow-right";
  shadowRight.style.top = kShadowTopRitHeight + "px";
  shadowRight.style.left = imgWidth + "px";
  shadowRight.style.width = kShadowRitWidth + "px";
  shadowRight.style.height = (imgHeight - kShadowTopRitHeight) + "px";

  var shadowBtmLft = document.createElement("div");
  shadowBtmLft.className = "shadow-bottom-left";
  shadowBtmLft.style.top = imgHeight + "px";
  shadowBtmLft.style.left = "0";
  shadowBtmLft.style.width = kShadowBtmLftWidth + "px";
  shadowBtmLft.style.height = kShadowBtmHeight + "px";

  var shadowBtm = document.createElement("div");
  shadowBtm.className = "shadow-bottom";
  shadowBtm.style.top = imgHeight + "px";
  shadowBtm.style.left = kShadowBtmLftWidth + "px";
  shadowBtm.style.width = ((imgWidth+kShadowRitWidth) - (kShadowBtmLftWidth+kShadowBtmRitWidth)) + "px";
  shadowBtm.style.height = kShadowBtmHeight + "px";

  var shadowBtmRit = document.createElement("div");
  shadowBtmRit.className = "shadow-bottom-right";
  shadowBtmRit.style.top = imgHeight + "px";
  shadowBtmRit.style.left = ((imgWidth+kShadowRitWidth) - kShadowBtmRitWidth) + "px";
  shadowBtmRit.style.width = kShadowBtmRitWidth + "px";
  shadowBtmRit.style.height = kShadowBtmHeight + "px";
  
  var parentElt = imgElt.parentNode;
  parentElt.appendChild(shadowRight);
  parentElt.appendChild(shadowTopRight);
  parentElt.appendChild(shadowBtmLft);
  parentElt.appendChild(shadowBtm);
  parentElt.appendChild(shadowBtmRit);

  aDivElt.style.height = (imgHeight + 50) + "px";
}

function initStuffLabel(aDivElt)
{
  var imgElt = aDivElt.getElementsByTagName("img")[0];
  var imgWidth = imgElt.offsetWidth;
  var imgHeight = imgElt.offsetHeight;

  var titleElt = document.createElement("div");
  titleElt.className = "stuff-label";
  titleElt.style.left = 0;
  titleElt.style.top = (imgHeight + kStuffLabelTop) + "px";
  titleElt.style.width = (imgWidth + kShadowRitWidth) + "px";

  var title = cropString(aDivElt.getAttribute("title"), 18);
  var subtitle = cropString(aDivElt.getAttribute("subtitle"), 25);

  var artistElt = document.createElement("div");
  artistElt.className = "stuff-title";
  artistElt.appendChild(document.createTextNode(title));
  titleElt.appendChild(artistElt);

  var trackElt = document.createElement("div");
  trackElt.className = "stuff-subtitle";
  trackElt.appendChild(document.createTextNode(subtitle));
  titleElt.appendChild(trackElt);

  var parentElt = imgElt.parentNode;
  parentElt.appendChild(titleElt);
}

/////////////////////////////////////////////////////////////////////
//// Recent Albums

function initRecentAlbums()
{
  gRecentAlbumTemplate = new JHTemplate("recentAlbumTemplate");
}

function showRecentAlbums(aBoxElt)
{
  var albumsElt = document.getElementById("recentAlbumsBox");
  
  // Toggle the visibility of the popup.
  if (albumsElt.style.visibility == "visible") {
    albumsElt.style.visibility = "hidden";
  } else {
    // Load the album data.
    getRecentAlbums(5, onRecentAlbumsLoaded);
    
    // Position the popup relative to the link.
    var top = getRelativeTop(aBoxElt, albumsElt.parentNode);
    var left = getRelativeLeft(aBoxElt, albumsElt.parentNode) + aBoxElt.parentNode.offsetWidth;
    albumsElt.style.top = top + "px";
    albumsElt.style.left = left + "px";

    albumsElt.style.visibility = "visible";
  }
}

function onRecentAlbumsLoaded(aDocument)
{
  var albumsElt = document.getElementById("recentAlbumsBox");
  albumsElt.onclick = goToRecentAlbum;
  
  // Empty the list of albums first.
  while (albumsElt.lastChild)
    albumsElt.removeChild(albumsElt.lastChild);
    
  var albums = aDocument.documentElement;
  
  var album = albums.firstChild;
  var i = 0;
  while (album) {
    if (album.nodeName == "album") {
      var div = gRecentAlbumTemplate.createTemplate();
      albumsElt.appendChild(div);

      div.setAttribute("albumlink", album.getAttribute("link"));
      div.className += " " + (i%2 ? "odd" : "even");

      gRecentAlbumTemplate.setAttribute(div, "cover", "src", album.getAttribute("imagesm"));
      gRecentAlbumTemplate.setTextValue(div, "artist", album.getAttribute("artist"));
      gRecentAlbumTemplate.setTextValue(div, "album", album.getAttribute("album"));
            
      ++i;
    }
        
    album = album.nextSibling;
  }
}

function goToRecentAlbum(aEvent)
{
  var t = getEventTargetByAttr(aEvent ? aEvent.target : event.srcElement, "albumlink");
  if (t)
    document.location.href = t.getAttribute("albumlink");
}

/////////////////////////////////////////////////////////////////////
//// Comments

function initComments()
{
  gCommentTemplate = new JHTemplate("commentTemplate"); 
  gCommentBoxTemplate = new JHTemplate("commentBoxTemplate"); 
}

function toggleComments(aEntryId)
{
  var twistyElt = document.getElementById("commentTwisty" + aEntryId);
  if (twistyElt.getAttribute("open") == "true") {
    hideComments(aEntryId);
  } else {
    showComments(aEntryId);
  }
}

function hideComments(aEntryId)
{
  var twistyElt = document.getElementById("commentTwisty" + aEntryId);
  twistyElt.removeAttribute("open");
  twistyElt.className = "comment-twisty";

  twistyElt.parentNode.removeChild(twistyElt.nextSibling);
}

function showComments(aEntryId)
{
  var twistyElt = document.getElementById("commentTwisty" + aEntryId);
  twistyElt.setAttribute("open", "true");
  twistyElt.className = "comment-twisty comment-twisty-open";

  var commentBoxElt = gCommentBoxTemplate.createTemplate();
  gCommentBoxTemplate.setAttribute(commentBoxElt, "form", "onsubmit", "onSubmitComments('" + aEntryId + "')");
  gCommentBoxTemplate.setAttribute(commentBoxElt, "entryid", "value", aEntryId.replace(/^0*/, ""));
  twistyElt.parentNode.insertBefore(commentBoxElt, twistyElt.nextSibling);

  var cacheKiller = new Date().getTime(); // Make url unique to prevent loading it from cache
  var url = "/content/blog/comments/" + aEntryId + ".xml?" + cacheKiller;
  loadXMLDocument(url, onCommentsLoaded);
}

function onCommentsLoaded(aDoc)
{
  if (!aDoc || !aDoc.documentElement)
    return;

  var entryId = aDoc.documentElement.getAttribute("entryid");
  if (!entryId)
    return;

  var twistyElt = document.getElementById("commentTwisty" + entryId);

  var commentBoxElt = twistyElt.nextSibling;
  
  var commentCount = 0;
  var child = aDoc.documentElement.firstChild;
  while (child) {
    if (child.nodeType == 1) {
      var div = gCommentTemplate.createTemplate();
      commentBoxElt.insertBefore(div, commentBoxElt.firstChild);

      var authorElt = null, urlElt = null, timeStampElt = null, bodyElt = null;
      var commentChild = child.firstChild;
      while (commentChild) {
        if (commentChild.nodeType == 1) {
          if (commentChild.nodeName == "author") {
            authorElt = commentChild;
          } else if (commentChild.nodeName == "url")  {
            urlElt = commentChild;
          } else if (commentChild.nodeName == "timestamp")  {
            timeStampElt = commentChild;
          } else if (commentChild.nodeName == "body")  {
            bodyElt = commentChild;
          }
        }
        commentChild = commentChild.nextSibling;
      }

      if (urlElt.firstChild)
        gCommentTemplate.setAttribute(div, "link", "href", urlElt.firstChild.nodeValue);
      if (authorElt.firstChild)
        gCommentTemplate.setTextValue(div, "link", authorElt.firstChild.nodeValue);
      gCommentTemplate.setTextValue(div, "timestamp", timeStampElt.firstChild.nodeValue);
      if (bodyElt.firstChild)
        gCommentTemplate.setInnerHTML(div, "body", toInnerXML(bodyElt));

      ++commentCount;
    }
    
    child = child.nextSibling;
  }
  
  if (commentCount > 0)
    twistyElt.innerHTML = commentCount + " Comments";
}

function onSubmitComments(aEntryId)
{
  gSubmittingComment = aEntryId;
}

function onCommentSubmitted()
{
  if (gSubmittingComment) {
    hideComments(gSubmittingComment);
    showComments(gSubmittingComment);
    gSubmittingComment = null;
  }
}