var currentShow;
var currentIndex = 0;

$(document).ready(function() {
   $("#stories").hide();
   $("#slideshows").hide();
   
   $.getJSON("singles.json", {}, function(show) {
      currentShow = show;
      initShow();
   });
   
   $("#stories_link").click(function() {
      $("#stories").slideToggle("normal");
      return false;
   });
   
   $("#slideshows_link").click(function() {
      $("#slideshows").slideToggle("normal");
      return false;
   });
   
   $("li li").mouseover(function() {
      $(this).css("border-right", "1px dotted #CCC");
   });
   
   $("li li").mouseout(function() {
      $(this).css("border-right", "0px");
   });
   
   $(".loadShow").click(function() {
      var jsonSrc = $(this).attr("href");
      $.getJSON(jsonSrc, {}, function(show) {
         currentShow = show;
         initShow();
      });
      
      return false;
   });
   
   $(".loadHtml").click(function() {
      var xhtml = $(this).attr("href");
      $("#content").load(xhtml);
      return false;
   });
});
		
var initShow = function() {
   if(currentShow != null) {
      currentIndex = 0;
      for(var i = 0; i < currentShow.length; i++) {
         jQuery("<img>").attr("src", currentShow[i].src);
      }
      showPhoto(currentShow[currentIndex]);
   }
   
   return false;
}

var showNext = function() {
   currentIndex++;
   if(currentIndex == currentShow.length) {
      currentIndex = 0;
   }

   showPhoto(currentShow[currentIndex]);
}

var showPrevious = function() {
   if(currentIndex > 0) {
      currentIndex--;
   } else {
      currentIndex = (currentShow.length - 1);
   }

   showPhoto(currentShow[currentIndex]);
}

var showPhoto = function(photo) {
   var html = "";
   var caption = photo.caption || "";
   
   html = '<p class="photo"><img src="'+photo.src+'" alt="'+caption+'" title="" /></p>'
         + '<div class="previous"><img src="icon_left.png" alt="Zurück"/></div><div class="next"><img src="icon_right.png" alt="Weiter"/></div><p class="caption">'+caption+'</p>';
   
   $("#content").html(html);
   
   $(".previous").click(function() {
      showPrevious();
   });
   $(".next").click(function() {
      showNext();
   });
   
   return false;
}