var _delay = 1;

$(document).ready(function(){
      $.ajax({
	      type: "GET",
	      url: "/Flash.ashx",
	      dataType: "xml",
	      success: function(xml) {
		  var html__ = "";
		  var width__ = $(xml).find('width').text();
		  var height__ = $(xml).find('height').text();
		  _delay = $(xml).find('delay').text();
		  $(xml).find('image').each(function(){
			html__ += '<li><img src="'+$(this).text()+'" width="'+width__+'" height="'+height__+'" /></li>';
		  });
		  $('#slideshow').css({
		      width: width__,
	              height: height__
		  });
		  $('#my_list').css({
		      width: width__,
	              height: height__
		  });
		  $('#my_list').html(html__);
		  initSlide();
	      }
      });
});

var initSlide = function(){
    var supportCanvas = 'getContext' in document.createElement('canvas');

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

    setTimeout(function(){

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

                if(!slideshow.width){

		    slideshow.width = this.width;
                    slideshow.height = this.height;
                }

                createCanvasOverlay(this);
            });
        }

         setInterval(function(){
            var li = slides.eq(current),
            canvas = li.find('canvas'),

            nextIndex = current >= slides.length-1 ? 0 : current+1;

            var next = slides.eq(nextIndex);

            if(supportCanvas){
                canvas.fadeIn(function(){
                    next.show();
                    
		    current = nextIndex;
		    
                    li.fadeOut(function(){
                        li.removeClass('slideActive');
                        canvas.hide();
                        next.addClass('slideActive');
                    });
                });
            }
            else {
                current=nextIndex;
                next.addClass('slideActive').show();
                li.removeClass('slideActive').hide();
            }
        },parseFloat(_delay)*1000);

    },100);
    
    function createCanvasOverlay(image){

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

        canvas.width = slideshow.width;
        canvas.height = slideshow.height;

        canvasContext.drawImage(image,0,0);

        var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height),
        data = imageData.data;

        for(var i = 0,z=data.length;i<z;i++)
	{
            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));
            ++i;
        }

        canvasContext.putImageData(imageData,0,0,0,0,imageData.width,imageData.height);

        image.parentNode.insertBefore(canvas,image);
    }

};