var expanded = false;

$(document).ready( function() {
	$(".gnav").click( function() { handleGalleryClick($(this)); } );
	
	$("#closeGallery").click(function() { togglePanel(); });
} );

function handleGalleryClick(img) {	
	if(!expanded) {
		togglePanel();
	}
	loadNavigation(img.attr("alt"));
}

function loadNavigation(albumName) {
	$.getJSON("dir.php", {dir: albumName}, function(data) { loadAlbum(data); })
		.error( function() { alert('Laden foto album: ' + albumName + ' mislukt.'); });
}

function loadAlbum(thumbs) {
	var thumbsPanel = $("#thumbs");
	thumbsPanel.empty();
	for(var i = 0; i < thumbs.length; i++) {
		var th = $('<img/>');
		var path = thumbs[i];
		th.attr("src", path);
		th.attr("class", "gnav");
		th.click( function() { showImage($(this).attr('src')); } );
		thumbsPanel.append(th);
	}
	showImage(thumbs[0]);
}

function showImage(thumbName) {	
	var fileLarge = thumbName.replace(/thumbs.{5}/i, 'images/');
	$("#photo").empty();
	var img = $("<img/>");	
	img.attr("src", fileLarge);
	$("#photo").append(img);	
}

function togglePanel() {
	var contPos = $("#contentframe").offset();
	var btmPos = $("#btmpanel").offset();
	var width = 950;//$("#contentframe").width();
	var left = contPos.left
	var height = 600;//btmPos.top - contPos.top;
	var top = contPos.top;
	
	$("#gallery").css('top', top +"px");
	$("#gallery").css('left', left +"px");
	
	//width = width < 950 ? 950 : width;
	//height = height < 600 ? 600 : height;
	
	//$("#gallery").width(width+"px");
	//$("#gallery").height(height+"px");
	
	if( !expanded ) {
		// $( "#effect" ).show( selectedEffect, options, 500, callback );		
		$("#gallery").show( 'slide', {}, 500, callback );		
	} else {
		$("#gallery").hide();	
	}
	expanded = !expanded;
}