$(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 = $('#show li'),
        current = 0,
        slideshow = {width:0,height:0};
 
    setTimeout(function(){
 
        if(supportCanvas){
            $('#show 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);
            });
        }
 
        $('#show .arrow').click(function(){
            var li            = slides.eq(current),
                canvas        = li.find('canvas'),
                nextIndex    = 0;
 
				nextIndex = current >= slides.length-1 ? 0 : current+1;

            var next = slides.eq(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');
                    });
                });
            }
            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);
    }
 
});



$(window).load(function(){

	// The window.load event guarantees that
	// all the images are loaded before the
	// auto-advance begins.
	
		var timeOut = null;
 
		(function autoAdvance(){
		
			// Simulating a click on the next arrow.
			$('#show .next').trigger('click',[true]);		
			
			// Schedulling a time out in 5 seconds.
			timeOut = setTimeout(autoAdvance,4000);		
		})();


});