var currentName;
var currentAlbum;


function build_bigPictureFromName(picture, album) {
   var nextName = $('name', $(picture)).text();
   var nextDate = $('date', $(picture)).text();
   build_bigpicture(nextName, nextDate, album);
}

function build_bigpicture(name, date, album) {

   if ($(".bigpicture")) {
      //Notice that if we do closeBigPicture here, we disable the
      //slideshow..
      $(".bigpicture").remove();
   }

   currentName = name;
   currentAlbum = album;
   
   var picture = "http://www.loodin.se/pics/" + date + "/" + name + ".jpg";
   var w;
   var h;

   if (typeof window.innerWidth != 'undefined') {
      w = window.innerWidth;
      h = window.innerHeight;
   }

   // IE6 in standards compliant mode (i.e. with a valid doctype as the first
   // line in the document)
   else if (typeof document.documentElement != 'undefined'
      && typeof document.documentElement.clientWidth != 'undefined'
         && document.documentElement.clientWidth != 0) {
      w = document.documentElement.clientWidth;
      h = document.documentElement.clientHeight;
   }
   // older versions of IE
   else {
      w = document.getElementsByTagName('body')[0].clientWidth;
      h = document.getElementsByTagName('body')[0].clientHeight;
   }

   var sidePadding = 20;
   var heightPadding = 100;
   var windowHeightPadding = 150;
   var windowWidthPadding = 150;
   var imageHeight;
   var imageWidth;

   var frame = $("<div><h3><center>" + date + "</center></h3></div>")
   .addClass('loading').css("left", ((w - 500) / 2) + getXScroll())
   .css("top", ((h - 500) / 2) + getYScroll());

   // build the close-icon
   frame.append("<a class='closeIcon'></a>");
   $("a[class=closeIcon]", frame).click(closeBigPicture);

   // load image, calculate a big for best viewing
   var theImage = new Image();
   $(theImage)
   .load( function() {

      imageHeight = theImage.height;
      imageWidth = theImage.width;

      frame.css("top",
            ((h - imageHeight - 100) / 2 + getYScroll())
            + "px");
      frame.css("left", ((w - imageWidth) / 2 + getXScroll())
            + "px");

      frame.css("height", imageHeight + heightPadding);
      frame.css("width", imageWidth + sidePadding);
      frame.removeClass('loading');
      frame.addClass('bigpicture');
      $(this).insertAfter($("h3", frame));
      $(this).css("left", sidePadding / 2);
      $(this).addClass('bigimage');
      
      enableKeyListener();

      // navArea: next
      var nextArea = $("<div class='navNext'></div>")
      .css("height", imageHeight)
      .css("width", (imageWidth * 0.2))
      .css("background", "url(bajs.png)")
      .hover(
            function() {
               $(this)
               .css("background",
               "url(arrowright.png) no-repeat center center");
            },
            function() {
               $(this).css("background",
               "url(bajs.png)");
            }).click( function() {
               gotoNextPicture(name, album);
            });

      $(frame).append(nextArea);

      // navArea:prev
      var prevArea = $("<div class='navPrev'></div>")
      .css("height", imageHeight)
      .css("width", (imageWidth * 0.2))
      .css("background", "url(bajs.png)")
      .hover(
            function() {
               $(this)
               .css("background",
               "url(./arrowleft.png) no-repeat center center");
            },
            function() {
               $(this).css("background",
               "url(bajs.png)");
            }).click( function() {
               gotoPrevPicture(name, album);
            });
      $(frame).append(prevArea);
      
      // navArea:play
      var playArea = $("<div class='navPlay'></div>")
      .css("height", (imageHeight * 0.2))
      .css("width", imageWidth)
      .css("background", "url(bajs.png)")
      .hover(
            function() {
               $(this)
               .css("background",
               "url(./arrowright.png) no-repeat center center");
            },
            function() {
               $(this).css("background",
               "url(bajs.png)");
            }).click( function() {
               playSlideshow(name, album);
            });
      $(frame).append(playArea);
      
      // Add image footer
      var footer = $("<div class='bigPictureFooter'></div");
      footer.append("<div class=desc></div");
      $.get('getComments.php', {
         name :name
      }, function(xml) {
         var description = $("description", xml).text();
         $(".desc").append(description);
         var count = $("comment", xml).size();
         $(footer).append(
               "<a class='commentLink' href='#'>Comments: ("
               + count + ")</a>");
         buildComments(xml, name);
      });
      frame.append(footer);
   }) // End of load();

   .attr('src', "getPicture.php?x=" + (w) + "&y=" + (h) + "&picture=" +name  + "&date=" + date);
   $("body").append(frame);

   delete theImage;

   //Add the link name to hash so people can link to pictures.
   location.hash = name;
}

function buildComments(xml, name) {
   var commentBox = $("<div class='commentBox'></div>");
   var commentList = $("<ul></ul>").addClass('commentList');

   $("comment", xml).each(
         function() {
            var li = $("<li></li>");
            var author = $("author", this).text();
            var text = $("text", this).text();
            var date = $("date", this).text();

            li.append($("<div>/<div").append($("<p> " + text + "</p>"))
                  .append("-" + author));
            li
            .append($("<h5></h5").append(
                  $("<span></span>").append(date)));
            commentList.append(li);
         });
   commentBox.append(commentList);
   commentBox.append("<div class='addCommentLink'>"
         + "<a class='addComment' href = '#'>Add Comment</a></div>");
   $(".bigpicture").append(commentBox);
   $(".commentBox").hide();

   var commentForm = $(
   "<form id=commentFormId><label for=commentArea>Comment</label><textarea id=commentArea></textarea><label for=authorArea>Author</label><input type=text id='authorArea'><button id=commentButton>Add</button></form>")
   .addClass("commentForm");

   $(".commentBox").append(commentForm);

   $("#commentButton").click( function(e) {
      e.preventDefault();
      addComment(name);
   });
   $("#commentFormId").submit( function(e) {
      e.preventDefault();
      addComment(name);
   });

   $(".commentForm").hide();

   $(".addComment").toggle( function() {
      $(".commentForm").slideDown();
   }, function() {
      $(".commentForm").slideUp();
   });

   $(".commentLink").toggle( function() {
      $(".commentBox").slideDown();
   }, function() {
      $(".commentBox").slideUp();
   });
}

function addComment(name) {
   var author = $("#authorArea").val();
   var comment = $("#commentArea").val();
   $.get("comment.php", {
      author :author,
      comment :comment,
      picture :name
   }, function(xml) {
      $("#authorArea").val('');
      $("#commentArea").val('');
      // Set correct number of results in link
      var count = $("count", xml).text();
      $(".commentLink").text("Comments (" + (count) + ")");
   });

   $(".commentForm").slideUp();

   // Create new commentlist element
   var li = $("<li></li>");
   li.append($("<div>/<div").append($("<p> " + comment + "</p>")).append(
         "-" + author));
   li.append($("<h5></h5").append($("<span></span>").append(date)));

   // Add a class to it to be able to refer to it, and slide it some
   li.addClass("newcomment");
   $(".commentList").append(li);
   $(".newcomment").hide();
   $(".newcomment").slideDown();
   $(".newcomment").removeClass("newcomment");
}

function closeBigPicture() {
   if (interval != "uninitialized") {
      quitSlideShow();
   }
   
   $(".bigpicture").remove();
   
   disableKeyListener();
}