var w=1200,h=200;
	var sources=new Array('js/bild1.jpg', 'js/bild2.jpg','js/bild3.jpg','js/bild4.jpg','js/bild5.jpg','js/bild6.jpg'); 
	var ll=false;
	var il=false;
	var canvas = document.getElementById('slideshow');
	var ctx = canvas.getContext('2d');
	var current=0;
	var images=loadImages(sources,imgLoaded);
	var trans=initTrans(images);
	var showFrames=50;
	var transFrames=20;
	var totalPerImage=showFrames+transFrames;
	var l=sources.length;
	var total=l*totalPerImage;	
	var logo=new Image();

	logo.onload=logoLoaded;
	logo.src='logo.png';
	
 
  // Create gradients
  var lingrad = ctx.createLinearGradient(0,0,0,150);
  lingrad.addColorStop(0, '#2a4978');
  lingrad.addColorStop(.3, '#4a94c3')



	function loadImages(sources,loadHandler){
		var ret=new Array();
		for (var i=0;i<sources.length;i++){
			ret[i]=new Image();
			if (i==sources.length-1){
				ret[i].onload=loadHandler;
			}
			ret[i].src=sources[i];
		}
		return ret;
	}

	function initTrans(images){
		var ret=new Array();
		for (var i=0;i<images.length;i++){
			ret[i]=new SimpleTrans(images[i],images[(i+1)%images.length],0,0,w,h);
		}	
		return ret;	
	}

	function logoLoaded(){
			ll=true;
			if (il==true){loaded();}
	}

	function imgLoaded(){
			il=true;
			if (ll==true) {loaded();}
	}

	function loaded(){
			setInterval(goOn,100);
			ctx.drawImage(images[0],0,0);
			update();
	}

	function update(){
		ctx.fillStyle =lingrad;
		ctx.beginPath();
		ctx.moveTo(0,100);
		ctx.bezierCurveTo(150,90,160,90,300,40);
		ctx.bezierCurveTo(460,0,600,30,800,50);
		ctx.bezierCurveTo(1000,70,1000,30,1200,0);
		ctx.lineTo(0,0);
		ctx.fill();	
		ctx.drawImage(logo,10,10);	
		for (var i=20;i>0;i--){
			ctx.fillStyle = "#ffffff";
			ctx.globalAlpha=(20-i)/20;
			ctx.fillRect(0,h-i,w,1);
		}
	}


	function goOn(){
		current=(current+1)%total;
		var curNum=Math.floor(current/totalPerImage);
		var curFrame=current%totalPerImage;
		if (curFrame<showFrames) {return;}
		trans[curNum].draw(ctx,(curFrame-showFrames+1)/transFrames);
		ctx.globalAlpha=1;
		update();
	}

	function SimpleTrans(first,second,x,y,w,h){
		this.first=first;
		this.second=second;
		this.x=x;
		this.y=y;
		this.w=w;
		this.h=h;
	}	

	SimpleTrans.prototype.draw=function(context,percentage){
			context.clearRect(this.x,this.y,this.w,this.h);	
			context.globalAlpha=1;		
			context.drawImage(this.first,this.x,this.y);
			context.globalAlpha=percentage;	
			context.drawImage(this.second,this.x,this.y);				
	}