var thAr = Array();
var srcAr = Array();

window.addEvent('domready', function(){
	$$('a.gallery-preview-link').each(function(a){
		var viewGal = a.getElement('span.view-gal');
		a.addEvent('mouseover', function(){
			viewGal.setStyle('visibility', 'visible');
		});
		a.addEvent('mouseout', function(){
			viewGal.setStyle('visibility', 'hidden');
		});
				
	});
});

function goToNext(ind){
	//var next = $('big-picture-container').getElement('div.next');
	//var prev = $('big-picture-container').getElement('div.prev');
	ind = Number(ind);
	if (ind < srcAr.length){
		loadNewImg(ind + 1, srcAr[ind+1]);
		/*next.set('name', String('pic-' + (ind+1)));
		if (ind == 0){
			prev.set('name', String('pic-' + (srcAr.length-1)));
		}else
			prev.set('name', String('pic-' + (ind-1)));*/
	}else{
		loadNewImg(0, srcAr[0]);
		/*next.set('name', String('pic-' + 0));
		prev.set('name', String('pic-' + (ind-1)));*/
	}
}

function goToPrev(ind){
	//var next = $('big-picture-container').getElement('div.next');
	//var prev = $('big-picture-container').getElement('div.prev');
	ind = Number(ind);
	if (ind > 0){
		loadNewImg(ind - 1, srcAr[ind-1]);
		/*if (ind < srcAr.length -1)
			next.set('name', String('pic-' + (ind+1)));
		else
			next.set('name', String('pic-' + 0));
		prev.set('name', String('pic-' + (ind-1)));*/
	}else{
		loadNewImg(srcAr.length - 1, srcAr[srcAr.length-1]);
		/*next.set('name', String('pic-' + 1));
		prev.set('name', String('pic-' + (srcAr.length -1)));*/
	}
	
}


function loadNewImg(index, image){			
	var to_update = $('big-picture-container');
	var imageUrl = image;
	
	if (thAr.length == 0){
		thAr = $$('div.gallery-thumbnail').get('onclick');
		thAr.each(function(item,ind){
			srcAr[ind] = item.split(',')[1];
			srcAr[ind] = srcAr[ind].slice(1, srcAr[ind].length - 2);
		});
	}
	
	var fadeout = new Fx.Tween(to_update, {
	'duration': 100
	});

	fadeout.start('opacity', 1, 0);
	fadeout.addEvent('onComplete', function() {
		var preload_image = new Element('img', {  
			'src': imageUrl,  
			'class': 'hide'  
		});
            	
		preload_image.addEvent('load', function() {
			var imgWidth = (preload_image.width);
			var imgHeight = (preload_image.height);
			
			// ZU GROSSE BILDER SCHRUMPFEN
			
			if (imgWidth > 888){
				imgHeight = imgHeight * (888 / imgWidth);
				imgWidth = 888;
			}
				 
            	
			var imgContainer = $('big-picture-container');
			var contWidth =  imgContainer.getStyle('width');
			var contHeight =  imgContainer.getStyle('height');
			
			if(imgWidth > 0 && imgHeight > 0){
				var fadeDuration = 700;
				if ((imgWidth+'px') == contWidth && (imgHeight+'px') == contHeight){
					fadeDuration = 0;
				}
				var sizeFade = new Fx.Morph(imgContainer, {duration : fadeDuration, transition : Fx.Transitions.easeInOut });
				sizeFade.start({
					//'width' : imgWidth, 
					'height' : imgHeight + 20
				});
				$('main').setStyle('height', 'auto');
				sizeFade.addEvent('onComplete', function(){
					
					var btnPrev = to_update.getElement('div.prev');
					var btnNext = to_update.getElement('div.next');
					
					if (index != 0){
						btnPrev.setStyle('display', 'block');
						btnPrev.setStyle('height', imgHeight + 'px');
						btnPrev.set('onclick', 'goToPrev(\'' + index + '\')');
					}else
						btnPrev.setStyle('display','none');
					
					if (index != srcAr.length-1){
						btnNext.setStyle('display','block');
						btnNext.setStyle('height', imgHeight + 'px');
						btnNext.setStyle('margin-left', (imgWidth - 72) + 'px');
						btnNext.set('onclick', 'goToNext(\'' + index + '\')');
					}else
						btnNext.setStyle('display','none');
					
					var picCont = to_update.getElement('div.pic');
					picCont.set('html', '<img src="' + image + '" width="' + imgWidth + '" height="' + imgHeight + '" />');
					picCont.set('name', 'pic-' + index);
					var fadein = new Fx.Tween(to_update, {'duration' : 200 }).start('opacity', 0 ,1);
				});
			}else{
				to_update.set('html', '<img src="' + image + '" />');
				var fadein = new Fx.Tween(to_update, {'duration' : 100 }).start('opacity', 0 ,1);
			}
		});
           	
	});
}