var nrImages = 2;
var offScreenContext;

var fadeTime = [];
var stillTime = []; // in millsec - 8
var t = [];

var timer_is_on=0;
var imagePaths = [];
var choosePics = [];
var imgLoaded = 0;
var stepTime = 50;
var startTime;
var destWidth;
var destHeight;
var border;
var maxWidth;
var maxHeight;
var destImg;
var destPix;

var drawImgs = [];
var bufs = [];
var bufsPar = [];
var bufsPath = [];

var bufPointer = [];
var init = [];
var newT = 0;
var shownames;
var steady = 0;
var showCredit;


function timedCount()
{

	var fadePos = 0;
	var newInd = 0;
	
	// startTimer
	if ( imgLoaded >= nrImages ) 
	{  	
//		alert ("timer");
		for ( var i=0;i<nrImages;i++ ) 
		{		
			// warte bis die ersten bilder geladen sind, dann lade die zweiten auf [1]
			if ( init[i] == 0 && t[i] > 5 ) 
			{	
				// lade ein bilder und stell es dar, das bild am index [1] wird dargestellt, 
				// bufpointer wird auf 0 gesetzt
				getNextImg(i, bufPointer[i], false, true, true, showCredit);
				init[i] = 1;
			}
			
			if ( t[i] > ( stillTime[i] / stepTime ) ) 
			{
				fadePos = ( t[i] - (stillTime[i] / stepTime) ) / ( fadeTime[i] / stepTime ); // 1.0 -> newImg, 0.0 -> oldImg
				oldBufPointer = ( bufPointer[i] +1 ) % 2;

				context.globalAlpha = 1.0;
				// schon vorhandenes bild mit 100 % alpha zeichnen
				context.drawImage(bufs[ oldBufPointer ][i], 
								  bufsPar[ oldBufPointer ][i][0], bufsPar[ oldBufPointer ][i][1], 
								  bufsPar[ oldBufPointer ][i][2], bufsPar[ oldBufPointer ][i][3],
								  (destWidth + border) *i, 0, destWidth, destHeight);

				context.globalAlpha = fadePos;					
				// neues bild mit fadepos alpha zeichnen
				context.drawImage(bufs[ bufPointer[i] ][i], 
								   bufsPar[ bufPointer[i] ][i][0], bufsPar[ bufPointer[i] ][i][1], 
								   bufsPar[ bufPointer[i] ][i][2], bufsPar[ bufPointer[i] ][i][3],
								   (destWidth + border) *i, 0, destWidth, destHeight);
				
				if ( shownames != '') { drawNameRect( i ); }
				context.globalAlpha = fadePos;			
				if ( shownames != '') { drawName(bufPointer[i], i); }
				context.globalAlpha = 1-fadePos;
				if ( shownames != '') { drawName(oldBufPointer, i); }

				// ende des fades, hol ein neues bild, 
				// bufPointer zeigt an wohin es geladen werden soll
				// wenn fertig, wird der bufPointer hochgezählt
				if ( t[i] > ( ( fadeTime[i] + stillTime[i] ) / stepTime -1) )
				{
					getNextImg(i, oldBufPointer, false, false, false, showCredit);
					t[i] = 0;
				}	
			}
			t[i]++;
		}
	}
	newT=setTimeout("timedCount()",stepTime);
}


//------------------------------------------------------------------------------------------------------------

function getCanvas () {
	// Get the canvas element.
	var elem = document.getElementById('myCanvas');
	if (!elem || !elem.getContext) { return; }
	
	// Get the canvas 2d context.
	var context = elem.getContext('2d');
	if (!context)  { 
		return; 
	} else {
		return context;
	}	
}

//------------------------------------------------------------------------------------------------------------

function fz_slideshow (images, _nrImages, _steady, _destWidth, _destHeight, 
					   _maxWidth, _maxHeight, _border, _shownames, _showCredit) 
{
	var newInd = 0;
	var index = 0;
	
	nrImages = _nrImages;
	steady = _steady;
	
	context = getCanvas();
	for (var i=0;i<images.length;i++) 
	{
		imagePaths.push(images[i]);
		choosePics.push(images[i]);
	}
	border = _border;

	destHeight = _destHeight;
	destWidth = _destWidth;

	maxWidth = _maxWidth;
	maxHeight = _maxHeight;
	shownames = _shownames;
	namesHeight = 30;
		
	// create destination buffer
	destImg = context.getImageData(0, 0, maxWidth, maxHeight);
	destPix = destImg.data;

	// jeweils zwei einträge zum blenden von nach
	bufs.push( [], [] );
	bufsPar.push( [], [] );
	bufsPath.push( [], [] );
	
	showCredit = _showCredit;
	
	// read pictures and blend 100% into disp buffer and tmp buffer
	for (var i=0;i<nrImages;i++) 
	{	
		// init arrays
		fadeTime.push( Math.max( Math.floor ( Math.random() * 5 ), 3 ) * 1000 );
		stillTime.push( Math.max( Math.floor ( Math.random() * 12 ), 4 ) * 1000 );
		t.push(1);
		init.push(0);
		bufPointer.push( 0 );		
		
		bufs[0].push( new Image() );
		bufs[1].push( new Image() );
		bufsPar[0].push( [] );
		bufsPar[1].push( [] );
		bufsPath[0].push( "" );
		bufsPath[1].push( "" );
		
		if ( steady == 0 ) 
		{
			getNextImg(i, bufPointer[i], true, false, false, showCredit);
		} else {
			getNextImg(i, bufPointer[i], true, true, shownames, showCredit);
		}
	}
	
	if ( steady == 0 ) 
	{ 
		timedCount(); 
	}
}

//------------------------------------------------------------------------------------------------------------

function getNextImg(ind, bufPoint, isInit, draw, drawNames, drawCredit) 
{
	// lade ein bilder und stell es dar, das bild am index [0] wird dargestellt		

	newInd = Math.floor ( Math.random() * (choosePics.length -1) );
	bufs[ bufPoint ][ind].src = choosePics[newInd];
	bufs[ bufPoint ][ind].onload = loadAndDraw (ind, bufs[ bufPoint ][ind], bufPoint, context, destWidth, 
												destHeight, draw, border, drawNames, drawCredit);
	
	bufsPath[ bufPoint ][ind] = choosePics[newInd];
	
	choosePics.splice(newInd, 1);
	
	if ( choosePics.length == 0 ) 
	{
		for (var i=0;i<imagePaths.length;i++) 
		{
			choosePics.push(imagePaths[i]);
		}
	}
}

//------------------------------------------------------------------------------------------------------------

function drawNameRect(ind) 
{
	context.globalAlpha = 0.6; // blue
	context.fillStyle = '#222'; // blue
	context.fillRect( (destWidth + border) * ind, destHeight - namesHeight, destWidth, namesHeight);
}

//------------------------------------------------------------------------------------------------------------

function drawName(bufPoint, ind) 
{
	var name;

	context.fillStyle = '#FFF'; // blue
	context.font         = '18px BlenderMedium';
	context.textBaseline = 'top';

	name = bufsPath[ bufPoint ][ind].split("/");
	name = name[name.length - 1].split(".")[0].replace("_", " ");
	name = name.replace("_", " ");
	context.fillText  (name, 7 + (destWidth + border) * ind, destHeight - namesHeight + 7);
}

//------------------------------------------------------------------------------------------------------------

function drawCredit(bufPoint, ind) 
{
	var name;

	context.fillStyle = '#000'; // blue
	context.font         = '10px Arial';
	context.textBaseline = 'top';
	context.rotate(-1.57);
	
	name = 'Fotograf: '+showCredit[0];
	context.fillText  (name, name.length * -5.2 - 1, destWidth - 13);
	context.fillText  (name, name.length * -5.2 + 1, destWidth - 13);
	context.fillText  (name, name.length * -5.2 - 1, destWidth - 11);
	context.fillText  (name, name.length * -5.2 + 1, destWidth - 11);	

	context.fillStyle = '#FFF'; // blue
	context.fillText  (name, name.length * -5.2, destWidth - 12);

}

//------------------------------------------------------------------------------------------------------------

function readFromCanvas (context, srcWidth, srcHeight, index ) 
{
	var img = context.getImageData(0, 0, srcWidth, srcHeight);
	return img.data;
}

//------------------------------------------------------------------------------------------------------------

function loadAndDraw(i, img, j, context, _destWidth, _destHeight, draw, border, drawNames, drawCredits) 
{		

	var funcString = "";

	funcString = funcString+"var cutX = 0; var cutY = 0; var dW, dH; var scaleF = 1;";
	
	// errechne die skalierten masse der zu kopierenden ausschnitts
	// wenn bildformat schmaller als ziel, setzt ein y offset
	funcString = funcString+"if ( this.height * ( "+_destWidth+" / this.width ) > "+_destHeight+" ) ";
	funcString = funcString+"{";
	funcString = funcString+"scaleF = ( this.width / "+_destWidth+" );";
	funcString = funcString+"cutX = 0;";
	funcString = funcString+"cutY = Math.floor( (this.height - ("+_destHeight+" * scaleF) ) * 0.5);";
	funcString = funcString+"} else {";
	// wenn bildformat breiter als ziel setzt einen x offset
	funcString = funcString+"scaleF = ( this.height / "+_destHeight+" );";
	funcString = funcString+"cutX = Math.floor( (this.width - ("+_destWidth+" * scaleF) ) * 0.5);";
	funcString = funcString+"cutY = 0;";
	funcString = funcString+"}";
		
	funcString = funcString+"bufsPar[ "+j+" ]["+i+"] = [];";
	funcString = funcString+"bufsPar[ "+j+" ]["+i+"].push( cutX, cutY, Math.floor("+_destWidth+" * scaleF), Math.floor("+_destHeight+" * scaleF));";

	//funcString = funcString+"alert( Math.floor("+_destWidth+" * scaleF), Math.floor("+_destHeight+" * scaleF) );";

	
	funcString = funcString+"if ( "+draw+" == true ) { ";
	funcString = funcString+"context.globalAlpha = 1.0;";
	funcString = funcString+"context.drawImage(this, cutX, cutY, "+_destWidth+" * scaleF, "+_destHeight+" * scaleF, ";
	funcString = funcString+( (_destWidth + border) *i)+", 0, "+_destWidth+", "+_destHeight+");";
	funcString = funcString+"}";
	funcString = funcString+"if ( "+drawNames+" == true && shownames != '') { drawNameRect( "+i+" ); }";
	funcString = funcString+"context.globalAlpha = 1.0;";
	funcString = funcString+"if ( "+drawNames+" == true && shownames != '') { drawName( bufPointer["+i+"], "+i+"); };";
	funcString = funcString+'if ( "'+drawCredits+'" != 0) { drawCredit( bufPointer['+i+'], '+i+') }';
	
	funcString = funcString+"bufPointer["+i+"]++;";
	funcString = funcString+"if ( bufPointer["+i+"] > 1 ) { bufPointer["+i+"] = 0; };";
	funcString = funcString+"imgLoaded++";
	return new Function(funcString);
}