var	destMargin = 50;
var	smalMargin = 512;
var growSpeed  = 10;
var growIncrement = 10;
var imageWidth = 0;
var imageHeight = 0;

var	intervalId			= null;
var	loaderId			= null;

var opacity = 0;
var opacityInterval = 0;

var currentImageIndex	= -1;
var imageSizePercent	= 100;

var margin = smalMargin;
var navigatorOn = false;

var imageArray = new Array();

var clientHeight = 600;
var clientWidth = 800;

var status = "";
var progressWidth = 1;

/*
	=============================
	functions handling image size
	=============================
*/
function showImagePercent()
{
	var element = document.getElementById( 'imageFullSize' );
	element.innerHTML = Math.floor(imageSizePercent) + "/100%";
}

function scalePicture( element )
{
	if( currentImageIndex >= 0 && imageArray[currentImageIndex].img.width && imageArray[currentImageIndex].img.height )
	{
		showImagePercent();
		var width = Math.floor(imageArray[currentImageIndex].img.width * imageSizePercent / 100);
		var height = Math.floor(imageArray[currentImageIndex].img.height * imageSizePercent / 100);

		element.width = width;
		element.height = height;
		
		element = document.getElementById( 'picFrame' );
		if( width <= clientWidth && height<=clientHeight )
		{
			element.style.maxWidth = width + "px";
			element.style.maxHeight = height + "px";
			element.style.overflow = "hidden";
		}
		else
		{
			element.style.maxWidth = (width+20) + "px";
			element.style.maxHeight = (height+20) + "px";
			element.style.overflow = "scroll";
		}
	}
}

function makeImageBigger()
{
	if( imageSizePercent < 400 )
	{
		imageSizePercent += 25;
		scalePicture( document.getElementById( 'pic' ) );
	}
}

function makeImageSmaller()
{
	if( imageSizePercent >= 50 )
	{
		imageSizePercent -= 25;
		scalePicture( document.getElementById( 'pic' ) );
	}
}

function fullSizeImage()
{
	imageSizePercent = 100;
	scalePicture( document.getElementById( 'pic' ) );
}

function areaSizeImage( areaWidth, areaHeight )
{
	if( currentImageIndex >= 0 )
	{
		var width = imageArray[currentImageIndex].img.width;
		var height = imageArray[currentImageIndex].img.height;

		if( !width || !height )
		{
			width = imageArray[currentImageIndex].maxWidth;
			height = imageArray[currentImageIndex].maxHeight;
		}
		
		if( width && height )
		{
			var widthRatio = areaWidth ? width / areaWidth : 0;
			var heightRatio = areaHeight ? height / areaHeight : 0;

			var ratio;
			if( widthRatio > heightRatio )
				ratio = widthRatio;
			else
				ratio = heightRatio;
				
			if( !ratio )
				ration = 1;
				
			imageSizePercent = 100 / ratio;
			scalePicture( document.getElementById( 'pic' ) );
		}
	}
}

function screenSizeImage()
{
	areaSizeImage( clientWidth, clientHeight );
}

/*
	============================
	functions handling navigator
	============================
*/
function showNavigator()
{
	if( currentImageIndex >= 0 &&  !intervalId )	// do not show during growth
	{
		var element = document.getElementById( 'imageNavigator' );
		element.style.visibility = 'visible';
	}
	navigatorOn = true;
}

function hideNavigator()
{
	var element = document.getElementById( 'imageNavigator' );
	element.style.visibility = 'hidden';
	navigatorOn = false;
}

/*
	==============================
	functions handling image array
	==============================
*/
function galleryImage( imgFile, maxWidth, maxHeight )
{
	this.imgFile = imgFile;
	this.maxWidth = maxWidth;
	this.maxHeight = maxHeight;
	this.img = new Image();
}

function addGalleryImage( imgFile, maxWidth, maxHeight )
{
	var theImage = new galleryImage( imgFile, maxWidth, maxHeight );
	imageArray[imageArray.length] = theImage;
}

function showNextImage()
{
	if( currentImageIndex >= 0 )
	{
		if( currentImageIndex +1 < imageArray.length )
			currentImageIndex++;
		else
			currentImageIndex = 0;

		progressWidth = 1;
		loadImage();
	}
}

function showPrevImage()
{
	if( currentImageIndex >= 0 )
	{
		if( currentImageIndex > 0 )
			currentImageIndex--;
		else
			currentImageIndex = imageArray.length-1;

		progressWidth = 1;
		loadImage();
	}
}


/*
	================
	show new picture
	================
*/
function makeImageInvisible()
{
	var element = document.getElementById( 'pic' );

	element.src = "imagempty.gif";
	opacity = 0;
	element.style.opacity = opacity;
	element.style.filter = "alpha(opacity="+(opacity*100)+")";
}

function makeImageVisible()
{
	var element = document.getElementById( 'pic' );
	if( !opacityInterval )
	{
		opacity = 0;
		opacityInterval = window.setInterval( "makeImageVisible();", growSpeed );
	}
	else if( opacity < 0.9 )
	{
		if( element.src != imageArray[currentImageIndex].img.src )
			element.src = imageArray[currentImageIndex].img.src;
		opacity += 0.1;
	}
	else
	{
		opacity = 1;
	}
	
	element.style.opacity = opacity;
	element.style.filter = "alpha(opacity="+(opacity*100)+")";

	if( opacity >= 1 && opacityInterval )
	{
		window.clearInterval( opacityInterval );
		opacityInterval = 0;
	}
}

function showInlinePic( imgFile )
{
	var	element = document.getElementById( 'inlineImage' );
	element.src = imgFile;
}

function loadImage()
{
	if( currentImageIndex >= 0 )
	{
		var element = document.getElementById( "imagePos" );
		element.innerHTML = (currentImageIndex+1) + "/" + imageArray.length;
			
		element = document.getElementById( 'pic' );
		if( progressWidth >= clientWidth 
		|| (imageArray[currentImageIndex].img.src && imageArray[currentImageIndex].img.complete) 
		|| imageArray[currentImageIndex].img.width 
		|| imageArray[currentImageIndex].img.height
		)
		{
			if( loaderId )
			{
				window.clearInterval( loaderId );
				loaderId = 0;
			}

			status = "";
			window.status = imageArray[currentImageIndex].img.width + "px * " + imageArray[currentImageIndex].img.height + "px ";

			makeImageInvisible();

			
			var  scaleWidth, scaleHeight;
			
			var tmpString = imageWidth + "x";
			if( tmpString.toUpperCase() == "AUTOX" )
				scaleWidth = clientWidth;
			else
				scaleWidth = imageWidth;
				
			tmpString = imageHeight + "x";
			if( tmpString.toUpperCase() == "AUTOX" )
				scaleHeight = clientHeight;
			else
				scaleHeight = imageHeight;
				
			if( scaleWidth || scaleHeight )
				areaSizeImage( scaleWidth, scaleHeight );
			else
				scalePicture( element );

			element = document.getElementById( 'progressBar' );
			element.style.display = "none";
			element = document.getElementById( 'progress' );
			element.style.width = "1px";
			progressWidth = 1;

			window.setTimeout( "makeImageVisible();", 500 );
		}
		else
		{
			status += "*";
			window.status = status;

			imageArray[currentImageIndex].img.src = imageArray[currentImageIndex].imgFile;
			makeImageInvisible();
			if( !loaderId )
				loaderId = window.setInterval( "loadImage();", 100 );

			element = document.getElementById( 'progressBar' );
			element.style.display = "block";
			element = document.getElementById( 'progress' );
			element.style.width = progressWidth + "px";
			progressWidth += 1;
		}
	}
}

function showPic( imgFile, maxWidth, maxHeight )
{
	var element;

	// setup  margin to a small frame
	margin = smalMargin;

	// search picture in our picture array
	currentImageIndex = -1;
	for( i=0; i<imageArray.length; i++ )
	{
		if( imageArray[i].imgFile == imgFile )
		{
			currentImageIndex = i;
			break;
		}
	}
	if( currentImageIndex < 0 )
	{
		currentImageIndex = imageArray.length;
		addGalleryImage( imgFile, maxWidth, maxHeight );
	}


	// setup the client size
	if( window.innerHeight )
	{
		clientHeight = window.innerHeight - 2*destMargin;
	}
	else if( document.documentElement && document.documentElement.clientHeight )
	{
		clientHeight = document.documentElement.clientHeight - 2*destMargin;
	}
	else if( document.body && document.body.clientHeight )
	{
		clientHeight = document.body.clientHeight - 2*destMargin;
	}
	
	if( window.innerWidth )
	{
		clientWidth = window.innerWidth - 2*destMargin;
	}
	else if( document.documentElement && document.documentElement.clientWidth )
	{
		clientWidth = document.documentElement.clientWidth - 2*destMargin;
	}
	else if( document.body && document.body.clientWidth )
	{
		clientWidth = document.body.clientWidth - 2*destMargin;
	}

	element = document.getElementById( 'gray' );
	element.style.display = 'block';
	element.style.visibility = 'visible';

	element = document.getElementById( 'picFrame' );

	element.style.top = smalMargin + "px";
	element.style.left = smalMargin + "px";
	element.style.right = smalMargin + "px";
	element.style.bottom = smalMargin + "px";
	element.style.visibility = 'visible';

	loadImage();

	if( intervalId )
	{
		window.clearInterval( intervalId );
		intervalId = 0;
	}

	if( margin > destMargin )
		intervalId = window.setInterval( "increasFrame()", growSpeed );
	else
	{
		element = document.getElementById( 'imageNavigator' );
		element.style.top = margin+"px";
		element.style.left = margin+"px";
	}
}

// make picture frame bigger
function increasFrame()
{
	var element = document.getElementById( 'picFrame' );

	if( margin > (destMargin+growIncrement) )
	{
		margin -= growIncrement;
		element.style.top = margin + "px";
		element.style.left = margin + "px";
		element.style.right = margin + "px";
		element.style.bottom = margin + "px";
	}
	else
	{
		margin = destMargin;
		element.style.top = destMargin + "px";
		element.style.left = destMargin + "px";
		element.style.right = destMargin + "px";
		element.style.bottom = destMargin + "px";

		if( intervalId )
		{
			window.clearInterval( intervalId );
			intervalId = 0;
		}

		element = document.getElementById( 'imageNavigator' );
		element.style.top = margin+"px";
		element.style.left = margin+"px";
		if( navigatorOn )
			element.style.visibility = "visible";
	}
}

/*
	====================
	hide current picture
	====================
*/
function hidePicture()
{
	if( intervalId )
	{
		window.clearInterval( intervalId );
		intervalId = 0;
	}
	if( loaderId )
	{
		window.clearInterval( loaderId );
		loaderId = 0;
	}
	progressWidth = 1;

	hideNavigator();
	intervalId = window.setInterval( "decreaseFrame()", growSpeed );
}

// make picture frame smaller or hide completely
function decreaseFrame()
{
	var element = document.getElementById( 'picFrame' );

	if( margin < smalMargin )	// not yet small enough?
	{
		margin += growIncrement;
		element.style.top = margin + "px";
		element.style.left = margin + "px";
		element.style.right = margin + "px";
		element.style.bottom = margin + "px";

		element = document.getElementById( 'imageNavigator' );
		element.style.top = margin+"px";
		element.style.left = margin+"px";
	}
	else
	{
		margin = smalMargin;
		element.style.top = smalMargin + "px";
		element.style.left = smalMargin + "px";
		element.style.right = smalMargin + "px";
		element.style.bottom = smalMargin + "px";

		hideNavigator();
		element.style.visibility = 'hidden';

		makeImageInvisible();

		element = document.getElementById( 'gray' );
		element.style.visibility = 'hidden';

		currentImageIndex = -1;

		if( intervalId )
		{
			window.clearInterval( intervalId );
			intervalId = 0;
		}
	}
}

document.write(	'<div id="gray" style="visibility: hidden; position: fixed; z-index: 1; top:0; left: 0; right:0; bottom:0; background-color:#000000; opacity:0.7; filter:alpha(opacity=70);">&nbsp;</div>' );
document.write(	'<div id="picFrame" class="picFrame" onMouseOver="showNavigator();" onMouseOut="hideNavigator();"' );
	document.write(	'style="visibility: hidden; position: fixed; z-index: 10; top:50px; left: 50px; right:50px; bottom:50px;"' );
document.write(	'>' );
	document.write( '<table id="progressBar" width="100%" style="margin-top:60px;"><tr><td id="progress" style="width:1px; background-color:#FFFFFF;">&nbsp;</td><td>&nbsp;</td></table>' );
	document.write(	'<center><img id="pic"></center>' );
	document.write(	'<div class="imageNavigator" id="imageNavigator" style="z-index:20;">' );
		document.write(	'<a class="prevImage" href="javascript:showPrevImage();" title="Vorheriges Bild">&lt;&lt;</a>&nbsp;' );
		document.write(	'<span class="imagePos" id="imagePos"></span>&nbsp;' );
		document.write(	'<a class="closeImage" href="javascript:hidePicture();">Schließen</a>&nbsp;' );
		document.write(	'<span id="imageZoom"><a class="imageZoom" href="javascript:makeImageSmaller();" title="Bild Verkleinern">&nbsp;-&nbsp;</a>&nbsp;' );
		document.write(	'<a class="imageFullSize" id="imageFullSize" href="javascript:fullSizeImage();" title="Bildgröße 100%">100%</a>&nbsp;' );
		document.write(	'<a class="imageFullSize" id="imageScreenSize" href="javascript:screenSizeImage();" title="Bildgröße auf Bildschirm">Bildschirm</a>&nbsp;' );
		document.write(	'<a class="imageZoom" href="javascript:makeImageBigger();" title="Bild Vergrößern">&nbsp;+&nbsp;</a>&nbsp;</span>' );
		document.write(	'<a class="nextImage" href="javascript:showNextImage();" title="Nächstes Bild">&gt;&gt;</a>' );
	document.write(	'</div>' );
document.write(	'</div>' );