Six Blocks Version

1 files changed, 130 insertions, 0 deletions

diff --git a/Blocks/countdown/js/lrtk.js b/Blocks/countdown/js/lrtk.js
new file mode 100644
index 0000000..04fa8c8
--- /dev/null
+++ b/Blocks/countdown/js/lrtk.js
@@ -0,0 +1,130 @@
+$(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(){
+                
+                window.console && window.console.time && console.time('Generated In');
+                
+                if(supportCanvas){
+                        $('#slideshow img').each(function(){
+
+                                if(!slideshow.width){
+                                        // Taking the dimensions of the first image:
+                                        slideshow.width = this.width;
+                                        slideshow.height = this.height;
+                                }
+                                
+                                // Rendering the modified versions of the images:
+                                createCanvasOverlay(this);
+                        });
+                }
+                
+                window.console && window.console.timeEnd && console.timeEnd('Generated In');
+                
+                $('#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);
+                        
+                        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 elements is the alpha value, but we leave it the same.
+                        ++i;
+                }
+                
+                // Putting the modified imageData back to the canvas.
+                canvasContext.putImageData(imageData,0,0);
+                
+                // Inserting the canvas in the DOM, before the image:
+                image.parentNode.insertBefore(canvas,image);
+        }
+        
+});