var GALLERY_CONFIG_DIREKTORY = "conf";

function showPhotoIndex () {
   showPhotoGallery(null);
}

function showPhotoGallery (galleryPath) {
   $("#photogalleries").fadeOut(500, 
      function () {
      	 $("#photoindex").empty();
         $("#photothumbnails").empty();
         $("#photoarea").empty();
         // Photoindex
         if (galleryPath == null) {            
            generateIndexContent()              
         }
         // Gallery
         else {           
            generateDetailContent(galleryPath)                       
         }         
         $("#photogalleries").fadeIn(500);        
      }
   );   
}


function generateIndexContent () {
   $.getJSON(getContentPath()+GALLERY_CONFIG_DIREKTORY+"/galleries.json", {foo: new Date()}, function(data) {
	 	$.each(data.galleries, function(i,gallery){   		
   	   $("#photoindex").append("<div id='photogallery'>"
   	                          +"<img src='"+gallery.thumbnail+"' onclick='showPhotoGallery(\""+gallery.path+"\");'/>"
   	                          +"<p/><span class='gallerythtitle'>"+gallery.title+"</span>"
   	                          +"</div>"
   	   );
   	});
   });
}

function generateDetailContent(galleryPath) {
   $("#photothumbnails").append("<ul>");
   $.getJSON(getContentPath()+GALLERY_CONFIG_DIREKTORY+"/"+galleryPath,
      function(data) {
      	$("#photothumbnails").append("<a href='#' onclick='JavaScript:showPhotoIndex();'><< zurück</a><p/>");
      	$.each(data.photos, function(i,photo){            
           $("#photothumbnails").append("<li>");   	   
           $("#photothumbnails").append("<img src='"+photo.thumbnail+"' onclick='showPhoto(\""+photo.path+"\");'/>");
           $("#photothumbnails").append("</li>");                           
        });
        $("#photothumbnails").append("</ul>");           
   });
}

function showPhoto(path) {                                              
   $("#photoarea").fadeOut(400,
      function(){
         $("#photoarea").empty();
         $("#photoarea").append("<img id='photo' src='"+path+"' width='600px'/>");
         $("#photoarea").fadeIn(400);
   }); 
}