var Canvas = {
  initialize: function() {
    this.canvas = $('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.currentImage = null;
  },
  
  crossfadeImage: function(target, options) {
    new Effect.CanvasCrossfade(this.canvas, this.currentImage, target, options);
    this.currentImage = target;
  },
  
  drawImage: function(image) {
    this.canvas.width = this.canvas.getWidth();
    this.canvas.height = this.canvas.getHeight();

    this.ctx.drawImage(image, 0, 0, this.canvas.getWidth(), this.canvas.getHeight());
    this.currentImage = image;
  },
  
  resize: function() {
    if(this.currentImage)  
      this.drawImage(this.currentImage);
  }
  
}

Effect.CanvasCrossfade = Class.create();
Object.extend(Object.extend(Effect.CanvasCrossfade.prototype, Effect.Base.prototype), {
  initialize: function(canvas, source, target) {
    this.canvas = $(canvas);
    this.source = source;
    this.target = target;
    this.options = Object.extend({
      width: this.canvas.getWidth(),
      height: this.canvas.getHeight()
    }, arguments[3] || {});
    this.start(this.options);
  },
  setup: function() {
    this.canvas.width = this.canvas.getWidth();
    this.canvas.height = this.canvas.getHeight();

    this.ctx = this.canvas.getContext('2d');
  },
  update: function(position) {
    this.ctx.globalCompositeOperation = 'destination-over';
    this.ctx.clearRect(0,0,this.canvas.getWidth(),this.canvas.getHeight());
		
    this.ctx.globalAlpha = 1 - position;
    this.ctx.drawImage(this.source, 0, 0, this.options.width, this.options.height);
    this.ctx.globalAlpha = position;
    this.ctx.drawImage(this.target, 0, 0, this.options.width, this.options.height);
  }
});