var nrSlidWin = 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;
	var newBufInd = 0;
	
	// startTimer
	if ( imgLoaded >= (nrSlidWin * 2) ) 
	{  	

		for ( var sWin=0;sWin<nrSlidWin;sWin++ ) 
		{					
			if ( t[sWin] > ( stillTime[sWin] / stepTime ) ) 
			{
				fadePos = ( t[sWin] - (stillTime[sWin] / stepTime) ) / ( fadeTime[sWin] / stepTime ); // 1.0 -> newImg, 0.0 -> oldImg
				
				newBufInd = ( bufPointer[sWin] +1 ) % 2;
				
				context.globalAlpha = 1.0;
				// schon vorhandenes bild mit 100 % alpha zeichnen
				context.drawImage(bufs[ bufPointer[sWin] ][sWin], 
								  bufsPar[ bufPointer[sWin] ][sWin][0], bufsPar[ bufPointer[sWin] ][sWin][1], 
								  bufsPar[ bufPointer[sWin] ][sWin][2], bufsPar[ bufPointer[sWin] ][sWin][3],
								  (destWidth + border) *sWin, 0, destWidth, destHeight);
				
				context.globalAlpha = fadePos;					
				// neues bild mit fadepos alpha zeichnen
				context.drawImage(bufs[ newBufInd ][sWin], 
								  bufsPar[ newBufInd ][sWin][0], bufsPar[ newBufInd ][sWin][1], 
								  bufsPar[ newBufInd ][sWin][2], bufsPar[ newBufInd ][sWin][3],
								  (destWidth + border) *sWin, 0, destWidth, destHeight);
				
				if ( shownames != '') { drawNameRect( sWin ); }
				context.globalAlpha = fadePos;			
				if ( shownames != '') { drawName(newBufInd, sWin); }
				context.globalAlpha = 1-fadePos;
				if ( shownames != '') { drawName(bufPointer[sWin], sWin); }
				
				// ende des fades, hol ein neues bild, 
				// bufPointer zeigt an wohin es geladen werden soll
				// wenn fertig, wird der bufPointer hochgezählt
				if ( t[sWin] > ( ( fadeTime[sWin] + stillTime[sWin] ) / stepTime -1) )
				{
					getNextImg(sWin, bufPointer[sWin], false, false, false, showCredit);
					bufPointer[sWin] = newBufInd;
					t[sWin] = 0;
				}	
			}
			t[sWin]++;
		}
	}
	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, _nrSlidWin, _steady, _destWidth, _destHeight, 
					   _maxWidth, _maxHeight, _border, _shownames, _showCredit) 
{
	var newInd = 0;
	var index = 0;
	
	//document.getElementById('post0').innerHTML = imgLoaded;
	
	nrSlidWin = _nrSlidWin;
	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 sWin=0;sWin<nrSlidWin;sWin++) 
	{	
		// 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 ) 
		{
			// lade zwei bilder
			getNextImg(sWin, 1, true, false, shownames, showCredit);
			getNextImg(sWin, 0, true, true, shownames, showCredit);
		} else {
			getNextImg(sWin, bufPointer[sWin], true, false, false, showCredit);
		}
	}
	
	if ( steady == 0 ) 
	{ 
		timedCount(); 
	}
}

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

function getNextImg(slidWin, bufPoint, isInit, draw, drawNames, drawCredit) 
{
	//document.getElementById("post"+(+slidWin * 2 +bufPoint)).innerHTML = "get image: at win:"+slidWin+" bufpoint: "+bufPoint;
	
	// lade ein bilder und stell es dar, das bild am index [0] wird dargestellt		
	newInd = Math.floor ( Math.random() * (choosePics.length -1) );
	bufs[ bufPoint ][slidWin].src = choosePics[newInd];
	bufs[ bufPoint ][slidWin].onload = loadAndDraw (slidWin, bufs[ bufPoint ][slidWin], bufPoint, context, destWidth, 
													destHeight, draw, border, drawNames, drawCredit);
	
	bufsPath[ bufPoint ][slidWin] = choosePics[newInd];
	
	choosePics.splice(newInd, 1);
	
	if ( choosePics.length == 0 ) 
	{
		for (var i=0;i<imagePaths.length;i++) 
		{
			choosePics.push(imagePaths[i]);
		}
	}
}

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

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

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

function drawName(bufPoint, slidWin) 
{
	var name;
	
	context.fillStyle = '#FFF'; // blue
	context.font         = '18px BlenderMedium';
	context.textBaseline = 'top';
	
	name = bufsPath[ bufPoint ][slidWin].split("/");
	name = name[name.length - 1].split(".")[0].replace("_", " ");
	name = name.replace("_", " ");
	context.fillText  (name, 7 + (destWidth + border) * slidWin, destHeight - namesHeight + 7);
}

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

function drawCredit(bufPoint, slidWin) 
{
	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(slidWin, img, bufPoint, 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[ "+bufPoint+" ]["+slidWin+"] = [];";
	funcString = funcString+"bufsPar[ "+bufPoint+" ]["+slidWin+"].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) *slidWin)+", 0, "+_destWidth+", "+_destHeight+");";
	funcString = funcString+"}";
	funcString = funcString+"if ( "+drawNames+" == true && shownames != '') { drawNameRect( "+slidWin+" ); }";
	funcString = funcString+"context.globalAlpha = 1.0;";
	funcString = funcString+"if ( "+drawNames+" == true && shownames != '') { drawName( bufPointer["+slidWin+"], "+slidWin+"); };";
	funcString = funcString+"if ( "+drawCredits+" != 0) { drawCredit( bufPointer["+slidWin+"], "+slidWin+") }";
	
	funcString = funcString+"imgLoaded++;";
	return new Function(funcString);
}