var nrImages = 2;
var offScreenContext;
// var that need to be array
var fadeTime = [];
var fadeTimeCounter = [];
var stillTime = []; // in millsec - 8
var doFade = [];
var t = [];

var timer_is_on=0;
var imagePaths;
var stepTime = 100;
var startTime;
var steigung = 0;
var destWidth;
var destHeight;
var xSpace;
var border;
var maxWidth;
var maxHeight;
var xOffs;
var destImg;
var destPix;
var tmpImg;
var tmpPix;

var drawImgs = [];
var oldBufs = [];
var newBufs = [];
var choosePics = [];
var imgLoaded = 0;

var newT = 0;

function timedCount()
{
	
	if ( imgLoaded >= nrImages ) 
	{  	
		
		for ( var i=0;i<nrImages;i++) 
		{
			
			if ( ( t[i] % ( (stillTime[i] + fadeTime[i] ) / stepTime) == 0 ) && doFade[i] == 0 ) 
			{
				doFade[i] = 1;
				fadeTimeCounter[i] = 0;
			}
			
			if ( doFade[i] == 1 && fadeTimeCounter[i] < ( fadeTime[i] / stepTime ) ) 
			{	
				
				// wenn fade beginnt hol ein neues bild
				if ( fadeTimeCounter[i] == 0 ) 
				{
					oldBufs[i] = newBufs[i];
					
					if ( choosePics.length == 0 ) 
					{
						choosePics = imagePaths;
					}
					
					// load New Pic To Offscreen
					drawImgs[i].onload = loadAndDraw (i, drawImgs[i], context, destWidth, destHeight, 
													  steigung, false);
					
					newInd = Math.floor ( Math.random() * (choosePics.length -1));
					drawImgs[i].src = choosePics[newInd];
					choosePics.splice(newInd, 1);
				}
				blendToBuffer(
							  context,
							  newBufs[i],
							  oldBufs[i],
							  destWidth, 
							  destHeight, 
							  maxWidth, 
							  maxHeight, 
							  i,
							  destPix, 
							  xOffs, 
							  xSpace * -1.0 + border,
							  fadeTimeCounter[i] / ( fadeTime[i] / stepTime ) // 1.0 -> newImg, 0.0 -> oldImg
							  );			
				context.putImageData(destImg, 0, 0);
				fadeTimeCounter[i]++;
				t[i] = 0;
			} else {
				doFade[i] = 0;
			}
		}
	}
	
	newT=setTimeout("timedCount()",stepTime);
	
	for (var j=0;j<nrImages;j++) t[j] += newT;
}


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

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

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

function zk_slideshow (images, _destWidth, _destHeight, _steigung, _xOffs, _maxWidth, _maxHeight, _border) 
{
	var newInd = 0;
	var index = 0;
	
	context = getCanvas();
	imagePaths = images;
	choosePics = imagePaths;
	steigung = _steigung;
	border = _border;

	destHeight = _destHeight;							
	// calculate white space
	xSpace = Math.floor ( (destHeight / steigung * -1) + 0.5 );
	destWidth = _destWidth + xSpace - (border * 2);

	xOffs = _xOffs;
	maxWidth = _maxWidth;
	maxHeight = _maxHeight;
	
	// create offscreen canvas
	var offScreen = document.createElement('canvas');
	offScreen.width = destWidth;
    offScreen.height = destHeight;
	offScreenContext = offScreen.getContext('2d');
	
	// create destination buffer
	destImg = context.getImageData(0, 0, maxWidth, maxHeight);
	destPix = destImg.data;

	// 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() * 15 ), 4 ) * 1000 );
		stillTime.push( Math.max( Math.floor ( Math.random() * 15 ), 4 ) * 1000 );
		fadeTimeCounter.push(0);
		doFade.push(0);
		t.push(1 );
		newBufs.push( 0 );
		oldBufs.push( 0 );
		drawImgs.push( new Image() );

		newInd = Math.floor ( Math.random() * (choosePics.length -1) );
		drawImgs[i].src = choosePics[newInd];
		drawImgs[i].onload = loadAndDraw (i, drawImgs[i], context, destWidth, destHeight, steigung, 1.0, true);
		choosePics.splice(newInd, 1);
	}
	// startTimer
	timedCount();
}

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

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

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

function blendToBuffer (context, newData, oldData, srcWidth, srcHeight, dstWidth, dstHeight, 
						index, destPix, xOffs, border, blend) 
{	
	for (var line=0; line<srcHeight; line++)
	{
		for (var i=0; i<(srcWidth * 4); i+=4) 
		{
			var src = ( line * Math.floor(srcWidth+0.5) * 4 ) + i;	
			var dst = ( line * Math.floor(dstWidth+0.5) * 4 ) 
						+ i 
						+ ( ( xOffs + ( index * ( srcWidth + border ) ) ) * 4 );
			if ( newData[src + 3] != 0 ) 
			{
				for ( var j=0;j<4;j++ )
				{
					destPix[dst + j] = newData[src + j] * blend 
									   + ( ( 1 - blend ) * oldData[src + j] ); // blue	
				}
			}
		}
	}	
}

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

function loadAndDraw(i, img, context, _destWidth, _destHeight, _steigung, init ) 
{		
	var funcString = "";

	funcString = funcString+"var cutX = 0; var cutY = 0; var dW, dH;";
	
	funcString = funcString+"if ( this.height * ( "+_destWidth+" / this.width ) > "+_destHeight+" ) ";
	funcString = funcString+"{";
	funcString = funcString+"dH = this.height * ( "+_destWidth+" / this.width );";
	funcString = funcString+"dW = "+_destWidth+";";
	funcString = funcString+"} else {";
	funcString = funcString+"dW = this.width * ( "+_destHeight+" / this.height );";
	funcString = funcString+"dH = "+_destHeight+";";
	funcString = funcString+"}";
	
	funcString = funcString+"if ( Math.floor(dW + 0.5) > "+_destWidth+" ) ";
	funcString = funcString+"{";
	funcString = funcString+"cutX = Math.floor( (dW - "+_destWidth+") * 0.5 + 0.5 );";
	funcString = funcString+"} else {";
	funcString = funcString+"cutY = Math.floor( (dH - "+_destHeight+") * 0.5 + 0.5 );";
	funcString = funcString+"}";
	
	funcString = funcString+"offScreenContext.globalCompositeOperation = 'source-over';";
	funcString = funcString+"offScreenContext.fillStyle   = '#fff';";
	funcString = funcString+"offScreenContext.lineWidth = 0;";
	funcString = funcString+"offScreenContext.beginPath();";
	funcString = funcString+"offScreenContext.moveTo( 0, "+_destHeight+" );";
	funcString = funcString+"offScreenContext.lineTo( 0 + ("+_destHeight+" / steigung * -1), 0 );";
	funcString = funcString+"offScreenContext.lineTo( 0 + "+_destWidth+", 0 );";
	funcString = funcString+"offScreenContext.lineTo( 0 + ( ( "+_destHeight+" + (steigung * "+_destWidth+") ) / steigung ), "+_destHeight+" );";
	funcString = funcString+"offScreenContext.fill();";
	funcString = funcString+"offScreenContext.stroke();";
	funcString = funcString+"offScreenContext.closePath();";
	funcString = funcString+"offScreenContext.globalCompositeOperation = 'source-in';";
	funcString = funcString+"offScreenContext.drawImage(this, 0, 0, this.width, this.height, cutX * -1, cutY * -1, dW, dH);";
	
	//funcString = funcString+"document.getElementById('txt'+"+i+").value=( this.src );";

	if ( init == true ) 
	{	
		funcString = funcString+"oldBufs["+i+"] = readFromCanvas(offScreenContext, "+_destWidth+", "+_destHeight+");";		
	}
	funcString = funcString+"newBufs["+i+"] = readFromCanvas(offScreenContext, "+_destWidth+", "+_destHeight+");";
	
	// render auf den bildschirm
	funcString = funcString+"blendToBuffer(";
				  funcString = funcString+"context,";
				  funcString = funcString+"newBufs["+i+"],";
				  funcString = funcString+"oldBufs["+i+"],";
				  funcString = funcString+""+_destWidth+", ";
				  funcString = funcString+""+_destHeight+", ";
				  funcString = funcString+"maxWidth, ";
				  funcString = funcString+"maxHeight, ";
				  funcString = funcString+""+i+",";
				  funcString = funcString+"destPix, ";
				  funcString = funcString+"xOffs, ";
				  funcString = funcString+"xSpace * -1.0 + border,";
				  funcString = funcString+"0.0"; // 1.0 -> newImg, 0.0 -> oldImg
				  funcString = funcString+" );";
	funcString = funcString+"context.putImageData(destImg, 0, 0);";

	funcString = funcString+"imgLoaded++";

	return new Function(funcString);
}