$(window).load(function(){

    // We are listening to the window.load event, so we can be sure
    // that the images in the slideshow are loaded properly.

    // Testing wether the current browser supports the canvas element:
    var supportCanvas = 'getContext' in document.createElement('canvas');

    // The canvas manipulations of the images are CPU intensive,
    // this is why we are using setTimeout to make them asynchronous
    // and improve the responsiveness of the page.

    var slides = $('#slideshow li'),
        current = 0,
        slideshow = {width:0,height:0};

    setTimeout(function(){

        if(supportCanvas){
            $('#slideshow img').each(function(){

                if(!slideshow.width){
                    // Saving the dimensions of the first image:
                    slideshow.width = this.width;
                    slideshow.height = this.height;
                }

                // Rendering the modified versions of the images:
                createCanvasOverlay(this);
            });
        }

		// Arrows links-rechts

        $('#slideshow .arrow').click(function(){
            var li            = slides.eq(current),
                canvas        = li.find('canvas'),
                nextIndex    = 0;

            // Depending on whether this is the next or previous
            // arrow, calculate the index of the next slide accordingly.

            if($(this).hasClass('next')){
                nextIndex = current >= slides.length-1 ? 0 : current+1;
            }
            else {
                nextIndex = current <= 0 ? slides.length-1 : current-1;
            }

            var next = slides.eq(nextIndex);
            var infoboxChange = nextIndex + 1;
            changeInfobox(infoboxChange);

            if(supportCanvas){

                // This browser supports canvas, fade it into view:

                canvas.fadeIn(function(){

                    // Show the next slide below the current one:
                    next.show();
                    current = nextIndex;

                    // Fade the current slide out of view:
                    li.fadeOut(function(){
                        li.removeClass('slideActive');
                        canvas.hide();
                        next.addClass('slideActive');
                    });
                });
            }
            else {

                // This browser does not support canvas.
                // Use the plain version of the slideshow.

                current=nextIndex;
                next.addClass('slideActive').show();
                li.removeClass('slideActive').hide();
            }
        });
        
    // Mouseover
        
	$('#slideshow .prev').mouseover(function(){
            var li            = slides.eq(current),
                canvas        = li.find('canvas'),
                nextIndex    = 0;


			
            if($(this).hasClass('preview1')){ 
            	 var next = slides.eq(0);
            	 nextIndex = 0;
            }
            
             if($(this).hasClass('preview2')){
            	 var next = slides.eq(1);
            	 nextIndex = 1;
            }
            
             if($(this).hasClass('preview3')){
            	 var next = slides.eq(2);
            	 nextIndex = 2;
            }
            
             if($(this).hasClass('preview4')){
            	 var next = slides.eq(3);
            	 nextIndex = 3;
            }
            
             if($(this).hasClass('preview5')){
            	 var next = slides.eq(4);
            	 nextIndex = 4;
            }
            
            var infoboxChange = nextIndex + 1;
            changeInfobox(infoboxChange);
            
            if(current!=nextIndex){

	            if(supportCanvas){
	
	                // This browser supports canvas, fade it into view:
	
	                canvas.fadeIn(function(){
	
	                    // Show the next slide below the current one:
	                    next.show();
	                    current = nextIndex;
	
	                    // Fade the current slide out of view:
	                    li.fadeOut(function(){
	                        li.removeClass('slideActive');
	                        canvas.hide();
	                        next.addClass('slideActive');
	                        eliminateSlideActive();
	                        activateSlideActive(nextIndex);
	                    });
	                });
	            }
	            else {
	
	                // This browser does not support canvas.
	                // Use the plain version of the slideshow.
	
	                current=nextIndex;
	                next.addClass('slideActive').show();
	                li.removeClass('slideActive').hide();
	                eliminateSlideActive();
	                activateSlideActive(nextIndex);
	            }
            }
            
        });
		
		// Show on Klick (Hat nur in Fehlerfall die Funktion das Richtige Slide anzuzeigen)
		
		$('#slideshow .prev').click(function(){
            var li            = slides.eq(current),
                canvas        = li.find('canvas'),
                nextIndex    = 0;


            if($(this).hasClass('preview1')){ 
            	 var next = slides.eq(0);
            	 nextIndex = 0;
            }
            
             if($(this).hasClass('preview2')){
            	 var next = slides.eq(1);
            	 nextIndex = 1;
            }
            
             if($(this).hasClass('preview3')){
            	 var next = slides.eq(2);
            	 nextIndex = 2;
            }
            
             if($(this).hasClass('preview4')){
            	 var next = slides.eq(3);
            	 nextIndex = 3;
            }
             if($(this).hasClass('preview5')){
            	 var next = slides.eq(4);
            	 nextIndex = 4;
            }

         
            eliminateSlideActive();
            activateSlideActive(nextIndex);
            current = nextIndex;
        });

		// Pfeiltasten Support
		
		$(document).bind('keydown',function(event){
                      
           // 39 -> Rechts; 37 -> Links;
           
          	if (document.getElementById('slideshow').style.display == 'block'){
           		//alert(event.keyCode);
           		var li            = slides.eq(current),
                canvas        = li.find('canvas'),
                nextIndex    = 0;
				
				if (event.keyCode == 39 || event.keyCode == 37){
					
		            if(event.keyCode == 39){
		                nextIndex = current >= slides.length-1 ? 0 : current+1;
		            }
		            else {
		                nextIndex = current <= 0 ? slides.length-1 : current-1;
		            }
		
		            var next = slides.eq(nextIndex);
		            var infoboxChange = nextIndex + 1;
		            changeInfobox(infoboxChange);
		
		            if(supportCanvas){
		
		                // This browser supports canvas, fade it into view:
		
		                canvas.fadeIn(function(){
		
		                    // Show the next slide below the current one:
		                    next.show();
		                    current = nextIndex;
		
		                    // Fade the current slide out of view:
		                    li.fadeOut(function(){
		                        li.removeClass('slideActive');
		                        canvas.hide();
		                        next.addClass('slideActive');
		                    });
		                });
		            }
		            else {
		
		                // This browser does not support canvas.
		                // Use the plain version of the slideshow.
		
		                current=nextIndex;
		                next.addClass('slideActive').show();
		                li.removeClass('slideActive').hide();
		            }
				}	
        	}
        });
		

////////////
    },100);
    
    // This function takes an image and renders
    // a version of it similar to the Overlay blending
    // mode in Photoshop.

    function createCanvasOverlay(image){

        var canvas            = document.createElement('canvas'),
            canvasContext    = canvas.getContext("2d");

        // Make it the same size as the image
        canvas.width = slideshow.width;
        canvas.height = slideshow.height;

        // Drawing the default version of the image on the canvas:
        canvasContext.drawImage(image,0,0);

        // Taking the image data and storing it in the imageData array:
        var imageData    = canvasContext.getImageData(0,0,canvas.width,canvas.height),
            data        = imageData.data;

        // Loop through all the pixels in the imageData array, and modify
        // the red, green, and blue color values.

        for(var i = 0,z=data.length;i<z;i++){

            // The values for red, green and blue are consecutive elements
            // in the imageData array. We modify the three of them at once:

            data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
                        (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
                        (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
                        (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));

            // After the RGB channels comes the alpha value, which we leave the same.
            ++i;
        }

        // Putting the modified imageData back on the canvas.
        canvasContext.putImageData(imageData,0,0,0,0,imageData.width,imageData.height);

        // Inserting the canvas in the DOM, before the image:
        image.parentNode.insertBefore(canvas,image);
    }

});

function removeActive(){
	
	
}

function changeInfobox(infoId){
	
	// Alle Infotexte unsichtbar machen und den ausgewählten sichtbar machen
	
	document.getElementById('infobox1').style.display = 'none';
	document.getElementById('infobox2').style.display = 'none';
	document.getElementById('infobox3').style.display = 'none';
	document.getElementById('infobox4').style.display = 'none';
	document.getElementById('infobox5').style.display = 'none';
	document.getElementById('infobox'+infoId).style.display = 'block';
	
}

function eliminateSlideActive(){
	//Deaktivieren aller Slides
	$("li:eq(0)").removeClass("slideActive");
	$("li:eq(1)").removeClass("slideActive");
	$("li:eq(2)").removeClass("slideActive");
	$("li:eq(3)").removeClass("slideActive");
	$("li:eq(4)").removeClass("slideActive");
	
	//Alle Slides unsichtbar
	$("li:eq(0)").css("display", "none");
	$("li:eq(1)").css("display", "none");
	$("li:eq(2)").css("display", "none");
	$("li:eq(3)").css("display", "none");
	$("li:eq(4)").css("display", "none");
}

function activateSlideActive(slideId){
	$("li:eq("+ slideId +")").addClass("slideActive");
	if(slideId==0)
	$("li:eq("+ slideId +")").css("display", "block");
	else
	$("li:eq("+ slideId +")").css("display", "list-item");
}

function showOverlay(){
	
	// Erstellen eines Overlays im DOM
	
	document.getElementById('slideshow').style.display = 'block';
	div = document.createElement("div");
   	div.setAttribute('id', 'overlay');
   	div.setAttribute('className', 'overlayBG');
 	div.setAttribute('class', 'overlayBG');
 	div.setAttribute('onclick', 'removeOverlay()');
	// div.setAttribute('style', 'background-color: rgba(0,0,0,0.5)');
 	document.getElementsByTagName("body")[0].appendChild(div);
 	
 	// Mainpage ausfaden und Slideshow einfaden
 	
	 $('#mainpage').fadeTo('slow', 0.1, function() {
     	$('#slideshow').fadeTo('slow', 1.0, function() {
      // Animation abgeschlossen
    	});
    });
	
}

function removeOverlay(){
	document.getElementsByTagName("body")[0].removeChild(document.getElementById("overlay"));
	
	// Slideshow ausfaden und Mainpage einfaden
	
    $('#slideshow').fadeTo('slow', 0.0, function() {
     	$('#mainpage').fadeTo('slow', 1.0, function() {
     	document.getElementById('slideshow').style.display = 'none';
      // Animation abgeschlossen
    	});
    });
     
}