//Gallery page
var galleryArray = []; //our array of gallery items

$(document).ready(function(){
  $(".subsection-gallery #content #text ul li:nth-child(4n+1)").addClass("left-edge");
  $(".subsection-gallery #content #text ul li:nth-child(4n)").addClass("right-edge");
  $(".subsection-gallery #content #text ul li").hover(
    function(){
      $(this).addClass("hover");
    },
    function(){
      $(this).removeClass("hover");
    }
  );
  
  //Binding the pop up and galleryArray
  $(".subsection-gallery #content #text ul li a").each(
    function (intIndex){
      //Add the item to our gallery array
      galleryArray[intIndex] = new GalleryObj(
      	$(this).attr("href"),
      	$(this).children("span.description").html(),
      	$(this).children("span.copyright-year").html(),
      	$(this).children("span.photographer").html()
      );
      //And bind an onclick event
      $(this).click(
        function() {
          GalleryPopup(intIndex);
          return false;
        }
      );
    }
  );
});

function GalleryPopup(intIndex){
  //Get the gallery image
  galleryImage = galleryArray[intIndex];
  
  if (intIndex == 0){
    var bck = ""; 
  }
  else {
    var bck = "<li id=\"gallery-nav-back\"><a href=\"#\" class=\"replace\"><em></em>Back</a></li>";
  }
  
  if (intIndex == (galleryArray.length - 1)){
    var nxt = ""; 
  }
  else {
    var nxt = "<li id=\"gallery-nav-next\"><a href=\"#\" class=\"replace\"><em></em>Next</a></li>";
  }
  
  $("#main-content-wrapper").append(
    "<div id=\"gallery-popup\">" +
    "<!--[if lte IE 6]>" +
    "<div class=\"innerwrap\">" +
    "<![endif]-->" +
    "<div class=\"gallery-inner\">" +
    "<div class=\"content\">" +
    "<p class=\"image\"><img src=\"" +
    galleryImage.largeSrc +
    "\" alt=\"Picture of " + galleryImage.description + ". \" /></p>" +
    "<p class=\"details\">" +
    "<span class=\"copyright-year\">" +
    galleryImage.copyrightYear +
    " </span>" +
    "<span class=\"photographer\">" +
    galleryImage.photographer +
    "</span></p>" +
    "<p class=\"description\">" +
    galleryImage.description +
    "</p>" +
    "</div>" +
    "<div class=\"navigation\">" +
    "<ul>" +
    bck +
    "<li id=\"gallery-nav-close\"><a href=\"#\" class=\"replace\"><em></em>Close</a></li>" +
    nxt +
    "</ul>" +
    "</div>" +
    "</div>" +
    "<!--[if lte IE 6]>" +
    "</div>" +
    "<![endif]-->" +
    "</div>"
  );

  //Close button
  $("#gallery-nav-close a").click(
    function(){
      ClosePopup();
      return false;
    }
  );
  
  //Back button
  $("#gallery-nav-back a").click(
    function(){
      ClosePopup();
      GalleryPopup(intIndex - 1);
      return false;
    }
  );
  
  //Next button
  $("#gallery-nav-next a").click(
    function(){
      ClosePopup();
      GalleryPopup(intIndex + 1);
      return false;
    }
  );
    
  //Don't follow the link
  return false;
}

function ClosePopup() {
  $("#gallery-popup").remove().unbind("click");
}

function GalleryObj(largeSrc, description, copyrightYear, photographer) {
	this.largeSrc = largeSrc;
	this.description = description;
	this.copyrightYear = copyrightYear;
	this.photographer = photographer;
}