// globals
var gImages = new Array();
var currentImage = 0;
var standardWidth = '928px'; 
// init gallery
function initGallery(title, subtitleArray, year, imgArray, materialArray, ausstellung, zeitraum, ort, fotografie){
	// reset currentImage
	currentImage = 0;
	// fill images array
	gImages = imgArray;
	// set standard with of image gallery containter
	$('imageGalleryContainer').setStyle('width', standardWidth);
	//
	// build html code for meta info container //
	//
	// title
	var metaInfoCode = '<ul><li><span class="metaInfoText"><strong>&raquo;'+title+'&laquo; ('+year+')</strong></span></li></ul>';
	// material
	if(materialArray[0] != ''){
		metaInfoCode += '<ul>';
		for(i=0; i<materialArray.length; i++){
			metaInfoCode += '<li><span class="metaInfoText">'+materialArray[i]+'</span></li>';
		}
		metaInfoCode += '</ul>';
	}
	// ausstellung, zeitraum + ort
	if((subtitleArray[0] != '')||(ausstellung != "")||(zeitraum != "")||(ort != "")){
		metaInfoCode += '<ul>';
		// sub title
		if(subtitleArray[0] != ''){
			for(i=0; i<subtitleArray.length; i++){
				metaInfoCode += '<li><span class="metaInfoText">';
				if(i==0){
					metaInfoCode += '&raquo;';
				}
				metaInfoCode += subtitleArray[i]
				if(i==subtitleArray.length-1){
					metaInfoCode += '&laquo;';
				}
				metaInfoCode +='</span></li>';
			}
		}
		if(ausstellung != ""){
			metaInfoCode += '<li><span class="metaInfoText">'+ausstellung+'</span></li>';
		}
		if(ort != ""){
			metaInfoCode += '<li><span class="metaInfoText">'+ort+'</span></li>';
		}
		if(zeitraum != ""){
			metaInfoCode += '<li><span class="metaInfoText">'+zeitraum+'</span></li>';
		}
		metaInfoCode += '</ul>';
	}
	// fotografie
	if(fotografie != ""){
		metaInfoCode += '<ul>';
		metaInfoCode += '<li><span class="metaInfoText">Fotografie: '+fotografie+'</span></li>';
		metaInfoCode += '</ul>';
	}
	// fill meta info container with code
	$('metaInfoContainer').set({html: metaInfoCode});
	// hide meta info container if no content
	if((materialArray[0] == "")&&(ausstellung == "")&&(ort == "")&&(fotografie == "")){
		$('metaInfoContainer').setStyle('visibility','hidden');
	}else{
		$('metaInfoContainer').setStyle('visibility','visible');
	}
	// 
	// build html code for pagination container //
	//
	// reset html code
	var paginationCode = "";
	// do this just if there are more than one image
	if(gImages.length > 1){
		// add text
		paginationCode = "<di>Weitere Bilder: ";
		// show first image
		paginationCode += '<a href="javascript:void(0)" onclick="loadImage(0)" class="firstImage">&laquo; </a>';
		// show prev image function
		paginationCode += '<a href="javascript:void(0)" onclick="loadPrevImage()" class="prevNextImage">&#8249; </a>';
		// pagination with href to js function
		for(i=0; i<gImages.length; i++){
			// pageination number one higher than counter
			tempNumber = i+1;
			// html code
			paginationCode += '<a href="javascript:void(0)" onclick="loadImage('+i+')" class="paginationLink" id="image'+i+'">'+tempNumber+'</a>';
			// add ',' if not last one
			if(i<gImages.length-1){
				paginationCode += ', ';
			}
		}
		// show next image function
		paginationCode += '<a href="javascript:void(0)" onclick="loadNextImage()" class="prevNextImage"> &#8250;</a>';
		// show last image
		paginationCode += '<a href="javascript:void(0)" onclick="loadImage('+(gImages.length-1)+')" class="lastImage"> &raquo;</a></div>';
		// fill image gallery container with html code
		$('paginationContainer').set({html: paginationCode});
		// show pagination container if there are more than one image
		$('paginationContainer').setStyle('visibility','visible');
	}else{
		// hide pagination container if just one image
		$('paginationContainer').setStyle('visibility','hidden');
	}
	// load first image in image container
	loadImage(0);
	// show image gallery
	showImageGallery(true);
	// resize
	resizeOverlay();
}
// load image
function loadImage(imageID){
	// do this just if there are more than one image
	if(gImages.length > 1){
		// reset style of old pagination href
		$("image"+currentImage).setStyle('font-weight', 'normal');
		$("image"+currentImage).setStyle('color', '#999');
		// set style of current pagination href
		$("image"+imageID).setStyle('font-weight', 'bold');
		$("image"+imageID).setStyle('color', '#fff');
	}
	// set current image
	currentImage = imageID;
	// add class with loading gif
	$('imageGalleryContainer').addClass('imageGalleryLoading');
	// hide old image
	$('imageContainer').setStyle('visibility', 'hidden');
	// hide/show meta info container
	if(currentImage == 0){
		$('metaInfoContainer').setStyle('visibility','visible');
	}else{
		$('metaInfoContainer').setStyle('visibility','hidden');
	}
	// load new image
	var newImage = new Asset.images([gImages[imageID]], { 
		// loading completed
	    onComplete: function(){ 
			// remove class with loading gif
			$('imageGalleryContainer').removeClass('imageGalleryLoading');
			// set width + height of image gallery container
			$('imageGalleryContainer').setStyle('width', newImage[0].width);
			$('imageGalleryContainer').setStyle('height', newImage[0].height);
			// get all elements inside image container
			var lastImage = $('imageContainer').getChildren();
			// check if there are already images
			if(lastImage.length > 0){
				// replace image
				newImage[0].replaces(lastImage[0]);
			}else{
				// create new image
				$('imageContainer').grab(newImage[0]);
			}
			// add click event
			newImage[0].addEvent('click',loadNextImage);
			// show new image (just if container is visible)
			if($('imageGalleryContainer').getStyle('visibility') == 'visible'){
				$('imageContainer').setStyle('visibility', 'visible');
			}
			// check if image has more with than window
			if(newImage[0].width+32>window.getWidth()){
				$('imageGalleryOverlay').setStyle('width', newImage[0].width+32);
			}else{
				$('imageGalleryOverlay').setStyle('width', '100%');
				$('imageGalleryOverlay').setStyles({top: window.getScrollTop(), height: window.getHeight()});
			}
	    }
	}); 
}
// load prev next image
function loadPrevImage(){
	// set currentImage
	if(currentImage == 0){
		tempImageID = gImages.length-1;
	}else{
		tempImageID = currentImage-1;
	}
	// load Image
	loadImage(tempImageID);
}
function loadNextImage(){
	// set currentImage
	if(currentImage == gImages.length-1){
		tempImageID = 0;
	}else{
		tempImageID = currentImage+1;
	}
	// load Image
	loadImage(tempImageID);
}
// show image gallery
function showImageGallery(booleanState){
	// reset position
	var scrollTop = $(window).getScroll().y;
	$('imageGalleryContainer').setStyle('top', scrollTop+24);
	// visible image container + opacity overlay
	if(booleanState == true){
		$('imageGalleryOverlay').setStyle('visibility', 'visible');
		$('imageGalleryContainer').setStyle('visibility', 'visible');
	}else{
		$('imageGalleryOverlay').setStyle('visibility', 'hidden');
		$('imageGalleryContainer').setStyle('visibility', 'hidden');
		$('metaInfoContainer').setStyle('visibility','hidden');
		$('imageContainer').setStyle('visibility', 'hidden');
		$('paginationContainer').setStyle('visibility','hidden');
		// bugfix
		window.scrollTo(0,window.getScrollTop());
		
	}
}
// resize overlay
function resizeOverlay(){
	// overlay
	if($('imageGalleryOverlay').getStyle('visibility') == 'hidden'){ return; };//resize only if visible
	$('imageGalleryOverlay').setStyles({top: window.getScrollTop(), height: window.getHeight()});
}