// -------------------------------------------------------------------------- Image Gallery --------------------------------------------------------------------------

var gallThumbContainerWidth = 205; // full width of thumb container incl. paddings, margin, border
var gallImageContainerWidth = 610; // full width of image container
var gallThumbDisplayDefault=3;				// thumbs in row
var gallThumbDisplay=3;				// thumbs in row

var gallPages;
var gallThumbsSteps = 10;			// animation-steps
var gallThumbsIntervals = 10;	// animation-intervals in msecs
var gallThumbsDelay = 1.8;		// >1: start delayed, <1: end delayed
var gallImageSteps = 20;			// animation-steps
var gallImageIntervals = 20;	// animation-intervals in msecs
var gallImageDelay = 2;				// >1: start delayed, <1: end delayed
var gallScrolling = false;		// scrolling-flag
var gallStartThumb;						// first thumb in row
var gallActiveImage;					// image displayed
var gallActiveDisplay;				// what to dosplay (internal)
var gallScrollEl;							// scrolling element
var gallScrollDir;						// scroll direction
var gallKeepScrolling;				// keep scrolling while mouse down
var gallThumbsPrefetchDefault=3;			// thumbs prefetch for scrolling
var gallImagePrefetchDefault=3;			  // images prefetch for scrolling
var gallThumbsPrefetch;			// thumbs prefetch for scrolling
var gallImagePrefetch;			// images prefetch for scrolling
var fadeImage=true;						// use fade transition
var hostName='';

function gallScrollAnim(el, startPos, endPos, elType) { // animate panel display
	var steps = eval('gall'+elType.ucfirst()+'Steps');
	var intervals = eval('gall'+elType.ucfirst()+'Intervals');
	var delay = eval('gall'+elType.ucfirst()+'Delay');
	if(el.leftChange) window.clearInterval(el.leftChange);
	var actStep = 0;
	gallScrolling = true;
	el.leftChange = window.setInterval(
		function() { 
			el.nextLeft = gallSmoothSize(startPos, endPos, steps, actStep, delay);
			el.style.left = el.nextLeft + "px"; 
			actStep++;
			if(actStep > steps) {
				window.clearInterval(el.leftChange);
				gallResetScrolling(elType);
			}
		} 
	,intervals)
}

function gallSmoothSize(minVal, maxVal, totalSteps, actStep, delay) { // generate smooth animation steps
	var delta = maxVal - minVal; 
	var step = minVal + (Math.pow(((1 / totalSteps) * actStep), delay) * delta); 
	return Math.floor(step);
} 	

function getElementsByClassName(node, classname) {
	var a = [];
	var re = new RegExp('\\b' + classname + '\\b');
	var els = node.getElementsByTagName("*");
	for(var i=0,j=els.length; i<j; i++)
		if(re.test(els[i].className)) a.push(els[i]);
	return a;
}

String.prototype.ucfirst = function()	{
	var x = this.split(/\s+/g);
	for(var i = 0; i < x.length; i++) {
		var parts = x[i].match(/(\w)(\w*)/);
		x[i] = parts[1].toUpperCase() + parts[2].toLowerCase();
	}
	return x.join(' ');
}	

function gallGenerateDisplay(elType, scroller) { // generate image display
	var outStr = '';
	if(elType=='image') {
		thisFirstDisplay = gallActiveImage;
		thisDisplayCount = 1;
	}
	if(elType=='thumbs') {
		thisFirstDisplay = gallStartThumb;
		thisDisplayCount = gallThumbDisplay;
	}
	if(scroller) { // add prev+next
		thisPrefetch = eval('gall'+elType.ucfirst()+'Prefetch');
		thisFirstDisplay-thisPrefetch <= 0 ? thisDisplay = gallPages.length+(thisFirstDisplay-thisPrefetch) : thisDisplay = thisFirstDisplay-thisPrefetch;
		thisDisplayCount+=(2*thisPrefetch);
		idAdd='Scroll';
	}
	else {
		thisDisplay = thisFirstDisplay;
		idAdd='';
	}
	for(var i=0; i<thisDisplayCount; i++) {
		if(thisDisplay>=gallPages.length) thisDisplay=0;

		thisLabel = gallPages[thisDisplay][0];
		thisImage = hostName+gallPages[thisDisplay][1];
		thisThumb = hostName+gallPages[thisDisplay][2];
		if(elType=='image') {
			outStr+= '<div class="gallImage" id="gallImage'+idAdd+thisDisplay+'"><img src="'+thisImage+'"><div class="gallImageLabel">'+thisLabel+'</div></div>';
		}
		if(elType=='thumbs') {
			thisDisplay==gallActiveImage ? classAdd=' activeThumb' : classAdd='';
			outStr+= '<div class="gallThumb'+classAdd+'" id="gallThumb'+idAdd+thisDisplay+'" onclick="gallThumbClick('+thisDisplay+')"><img src="'+thisThumb+'"></div>';
		}
		thisDisplay++;
	}
	return outStr;
}

function gallSetGallContent(elType) { // fill thumbnails+image
	document.getElementById('gall'+elType.ucfirst()).innerHTML = gallGenerateDisplay(elType);
	document.getElementById('gall'+elType.ucfirst()+'Scroller').innerHTML = gallGenerateDisplay(elType,1);
}

function gallDisplayScroll(elType, dir) { // scroll display
	if(gallScrolling) return;
	gallScrollEl = elType;
	gallScrollDir = dir;
	panelEl=document.getElementById('gall'+elType.ucfirst()+'Scroller');
	panelEl.style.zIndex = 5;  // bring to top
	startPos=panelEl.offsetLeft;
	if(elType=='image') {
		offset = gallImageContainerWidth;
		gallActiveDisplay = gallActiveImage;
	}
	if(elType=='thumbs') {
		offset = gallThumbContainerWidth;
		gallActiveDisplay = gallStartThumb;
	}
	if(dir>0) {
		gallScrollAnim(panelEl, startPos, startPos+offset, elType);
		if(elType=='image') {gallActiveImage-1 < 0 ? gallActiveImage=gallPages.length-1 : gallActiveImage--; gallThumbClick(gallActiveImage, 1)}
		if(elType=='thumbs')  gallStartThumb-1 < 0 ? gallStartThumb =gallPages.length-1 : gallStartThumb--;
	}
	else {
		gallScrollAnim(panelEl, startPos, startPos-offset, elType);
		if(elType=='image') {gallActiveImage+1 > gallPages.length-1 ? gallActiveImage=0 : gallActiveImage++; gallThumbClick(gallActiveImage, 1)}
		if(elType=='thumbs')  gallStartThumb+1 > gallPages.length-1 ?  gallStartThumb=0 : gallStartThumb++;
	}
	document.getElementById('gall'+elType.ucfirst()).innerHTML = gallGenerateDisplay(elType);
}

function gallResetScrolling(elType) { // scrolling-elements to start position+content
	if(elType=='thumbs') {
		el = document.getElementById('gallThumbsScroller');
		elOffset = gallThumbContainerWidth;
		elContent = gallGenerateDisplay('thumbs',1);
	}
	if(elType=='image') {
		el = document.getElementById('gallImageScroller');
		elOffset = gallImageContainerWidth;
		elContent = gallGenerateDisplay('image',1);
	}
	el.style.zIndex = 0;  // bring to background
	setTimeout(
		function() { 
			el.style.left = -elOffset*eval('gall'+elType.ucfirst()+'Prefetch')+'px';
			el.innerHTML = elContent;
			gallScrolling = false;
			if(gallKeepScrolling) gallDisplayScroll(gallScrollEl, gallScrollDir)
		} 
	,100);
}

function gallToggleImageScrollers(el, disp) { // image sliders fade in/out
	fade(el, disp, 0, 70, 5, 10);
}

function fade(el, disp, minOpacity, maxOpacity, diff, interval) { // element, in=1/out=0, minOpacity, maxOpacity, opacity diff per step, interval
	if(el.opacityChange) clearInterval(el.opacityChange);
	if(disp) {
		el.startOpacity=minOpacity;
		el.endOpacity=maxOpacity;
	} 
	else {
		el.startOpacity=maxOpacity;
		el.endOpacity=minOpacity;
	}
	el.opacityChange = setInterval(
		function() {
			el.style.filter='alpha(opacity='+el.startOpacity+')';
			el.style.MozOpacity=el.startOpacity/100; 
			el.style.opacity=el.startOpacity/100; 
			if(el.startOpacity==el.endOpacity) clearInterval(el.opacityChange);
			disp ? el.startOpacity+=diff : el.startOpacity-=diff;
		}
	,interval)
}

function gallOpenGallery(image) { // generate gallery display
	gallStartThumb=image;
	gallActiveImage=image;
	var outStr=''+
	'<div id="gallImageFrame">'+
	'<div id="gallImageOverlay"></div>'+
	'<div id="gallImage"></div>'+
	'<div id="gallImageScroller"></div>'+
	'<div class="gallImageScroll" id="gallImagePrev" onclick="gallDisplayScroll(\'image\',1)" onmouseover="gallToggleImageScrollers(this,1)" onmouseout="gallToggleImageScrollers(this,0)"></div>'+
	'<div class="gallImageScroll" id="gallImageNext" onclick="gallDisplayScroll(\'image\',-1)" onmouseover="gallToggleImageScrollers(this,1)" onmouseout="gallToggleImageScrollers(this,0)"></div>'+
	'</div>'+
	'<div id="gallThumbsFrame">'+
	'<div id="gallThumbs"></div>'+
	'<div id="gallThumbsScroller"></div>';
	if(gallThumbDisplay == gallThumbDisplayDefault) {
		outStr+= ''+
		'<div class="gallThumbsScroll" id="gallThumbsPrev" onmousedown="gallKeepScrolling=true; gallDisplayScroll(\'thumbs\',1)" onmouseup="gallKeepScrolling=false" onmouseout="gallKeepScrolling=false">&nbsp;</div>'+
		'<div class="gallThumbsScroll" id="gallThumbsNext" onmousedown="gallKeepScrolling=true; gallDisplayScroll(\'thumbs\',-1)" onmouseup="gallKeepScrolling=false" onmouseout="gallKeepScrolling=false">&nbsp;</div>';
	}
	outStr+= '</div>';
	document.getElementById('gallery').innerHTML = outStr;
	gallSetGallContent('image');
	gallSetGallContent('thumbs');
	document.getElementById('gallImageScroller').style.left = -gallImageContainerWidth*gallImagePrefetch+'px';
	document.getElementById('gallThumbsScroller').style.left = -gallThumbContainerWidth*gallThumbsPrefetch+'px';
	if(window.addEventListener) {
		document.getElementById('gallImageFrame').addEventListener('DOMMouseScroll', wheelImage, false);
		if(gallThumbDisplay == gallThumbDisplayDefault) document.getElementById('gallThumbsFrame').addEventListener('DOMMouseScroll', wheelThumbs, false);
	}
	if(window.attachEvent) {
		document.getElementById('gallImageFrame').attachEvent('onmousewheel', wheelImage);
		if(gallThumbDisplay == gallThumbDisplayDefault) document.getElementById('gallThumbsFrame').attachEvent('onmousewheel', wheelThumbs);
	}
}

function gallThumbClick(image, noload) { // click on thumb to load image
	if(!noload) {
		if(fadeImage) {
			fadeEl=document.getElementById('gallImageOverlay');
			if(fadeEl.hide) clearTimeout(fadeEl.hide);
			fadeEl.style.filter='alpha(opacity=100)';
			fadeEl.style.MozOpacity='1'; 
			fadeEl.style.opacity='1'; 
			fadeEl.innerHTML = document.getElementById('gallImage'+gallActiveImage).innerHTML;
			fadeEl.style.display = 'block';
			gallActiveImage=image;
			gallSetGallContent('image');
			fade(fadeEl, 0, 0, 100, 10, 20);
			fadeEl.hide = setTimeout("fadeEl.style.display = 'none'" ,600);
		}
		else {
			gallActiveImage=image;
			gallSetGallContent('image');
		}
	}
	gallActiveImage=image;
	var thumbs = getElementsByClassName(document,'gallThumb');
	for(var i=0; i<thumbs.length; i++) {
		if(thumbs[i].id=='gallThumb'+gallActiveImage || thumbs[i].id=='gallThumbScroll'+gallActiveImage) thumbs[i].className = 'gallThumb activeThumb';
		else thumbs[i].className = 'gallThumb';
	}
}

function wheelThumbs(event) { // onmousewheel eventhandler for thumbs
	wheel(event,'thumbs');
}

function wheelImage(event) { // onmousewheel eventhandler for images
	wheel(event,'image');
}

function wheel(event, elType) { // onmousewheel action
	var delta = 0;
	if(!event) event = window.event;
	if(event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if(window.opera) delta = -delta;
	} else if(event.detail) {
		delta = -event.detail/3;
	}
	if(delta)
		handleWheel(delta, elType);
   if(event.preventDefault)
     event.preventDefault();
   event.returnValue = false;
}

function handleWheel(delta, elType) { // wheelscroll up or down action
	if(delta<0) gallDisplayScroll(elType,-1);
	else gallDisplayScroll(elType,1);
}

// -------------------------------------------------------------------------- Index Page --------------------------------------------------------------------------

var gallIndexPicsPerRow = 4;
var gallIndexRowsPerPage = 30;
var gallIndexPages = 0;
var gallIndexNavi;

function gallGenerateIndex() {
	var outStr='<div class="gallIndexPage" id="gallIndexPage0">';
	var pics=0;
	var rows=0;
	for(var i=0; i<gallPages.length; i++) {
		thisLabel = gallPages[i][0];
		thisThumb = hostName+gallPages[i][2];
		outStr+=''+
		'<table class="gallIndexPic" onclick="gallPopSlideshow('+i+')">'+
		'<tr><td class="gallIndexPicImage"><img src="'+thisThumb+'"></td></tr>'+
		'<tr><td class="gallIndexPicLabel">'+thisLabel+'</td></tr></table>';
		pics++;
		if(pics==gallIndexPicsPerRow) {
			outStr+='<div class="endFloat"></div>';
			pics=0;
			rows++;
		}
		if(rows==gallIndexRowsPerPage) {
			gallIndexPages++;
			outStr+='</div><div class="gallIndexPage" id="gallIndexPage'+gallIndexPages+'" style="display:none;">';
			pics=0;
			rows=0;
		}
	}
	outStr+='</div>';
	return outStr;
}

function gallGenerateIndexNavi() {
	if(gallIndexPicsPerRow*gallIndexRowsPerPage > gallPages.length) return '';
	var outStr='<div class="gallIndexNav endFloat">';
	for(var i=0; i<=gallIndexPages; i++) {
		i ? classNameAdd = '' : classNameAdd = ' gallIndexNavActive';
		outStr+='<div id="gallIndexNavLink'+i+'" class="gallIndexNavLink'+classNameAdd+'" onclick="gallGotoIndex('+i+')">'+(i+1)+'</div>';
	}
	outStr+='</div>';
	return outStr;
}

function gallGotoIndex(page) {
	for(var i=0; i<=gallIndexPages; i++) {
		document.getElementById('gallIndexPage'+i).style.display = 'none';
		document.getElementById('gallIndexNavLink'+i).className = 'gallIndexNavLink';
	}
	document.getElementById('gallIndexPage'+page).style.display = 'block';
	document.getElementById('gallIndexNavLink'+page).className = 'gallIndexNavLink gallIndexNavActive';
}

function gallPopSlideshow(image, imageArray) {
	if(!imageArray && gallImages) gallPages = gallImages;
	else gallPages = imageArray;
	gallPages.length < gallThumbsPrefetchDefault ? gallThumbsPrefetch = gallPages.length : gallThumbsPrefetch = gallThumbsPrefetchDefault;
	gallPages.length < gallImagePrefetchDefault ? gallImagePrefetch = gallPages.length : gallImagePrefetch = gallImagePrefetchDefault;
	gallPages.length < gallThumbDisplayDefault ? gallThumbDisplay = gallPages.length : gallThumbDisplay = gallThumbDisplayDefault;
	popGallery();
	gallOpenGallery(image);
}