var Curve = new Class({
  
});

/*
*/
var ImageLoaderClass = new Class({

  
  initialize: function()
  {
    this.allImages = $H();
    this.queue = [];
  },
  
  
  loadImage: function(imageSrc, requester)
  {
    // first check to see that don't already have this image
    if(requester.onError && requester.onLoad)
    {
      if(this.allImages.has(imageSrc)) 
      {
        console.log('We have this image already returning it');
        return this.allImages.get(imageSrc);
      }
      else
      {
        console.log('New image, downloading it');
        this.queue.push({src: imageSrc, requester:requester});
        this.loadNextImage();
      }
    }
    else
    {
      console.error('Error: Requester does not implement onError or onLoad');
    }
  },
  
  
  loadImages: function(imageBase, requester)
  {
    
  },
  
  
  loadNextImage: function()
  {
    if(!this.isLoading)
    {
      this.isLoading = true;
      
      // get the first one in line
      var nextImage = this.queue.shift();
      var newImage = new Image();
      
      newImage.addEvent('error', function() {
        console.log('Error loading image!');
        this.isLoading = false;
        // let the requets know the image loading failed
        nextImage.requester.onError(nextImage.src);
        if(this.queue.length > 0) this.loadNextImage();
      }.bind(this));
      
      newImage.addEvent('load', function(_evt) {
        console.log('Loaded image!');
        this.isLoading = false;
        // store the new image
        this.allImages.set(nextImage.src, newImage);
        // let the requester know
        nextImage.requester.onLoad(newImage);
        if(this.queue.length > 0) this.loadNextImage();
      }.bind(this));
      
      newImage.setProperty('src', nextImage.src);
    }
  }

});
var ImageLoader = new ImageLoaderClass();

var Sprite = new Class({
  
  options: 
  {
    size: {x:0, y:0},
    frameCount: 10,
    position: {x:0, y:0}
  },
  
  
  Implements: [Options, Events],
  
  
  initialize: function(el, options)
  {
    this.setOptions(options);

    this.totalFrames = 0;
    this.currentFrame = 0;
    this.multiplier = 1;
    
    this.size = this.options.size;
    this.position = this.options.position;
    this.frameCount = this.options.frameCount;
    
    this.frames = [];
    this.canvas = new Element('canvas', {
      'class': 'sprite',
      styles:
      {
        display: 'none',
        position: 'absolute',
        left: this.position.x,
        top: this.position.y,
        opacity: 0.5
      }
    });
    
    this.context = this.canvas.getContext('2d');
    this.context.fillStyle = 'rgb(255, 25, 255)';
    
    this.canvas.injectInside($('main'));
  },
  
  
  setSize: function(size)
  {
    this.size = {x: size.x, y: size.y};
    this.canvas.setProperty('width', size.x);
    this.canvas.setProperty('height', size.y);
    this.canvas.setStyles({
      width: size.x,
      height: size.y
    });
  },
  
  
  changeImageSize: function(multipler)
  {
    this.canvas.setProperty('width', this.size.x/multipler);
    this.canvas.setProperty('height', this.size.y/multipler);
  },
  
    
  loadImages: function(imageBase)
  {
    // queue them up
    this.frameCount.times(function(i) {
      ImageLoader.loadImage('images/'+imageBase+'-'+(i+1)+'.jpg', this);
    }.bind(this));
  },
  
  
  onError: function(src)
  {
    console.log('error loading image ' + src);
  },
  
  
  onLoad: function(img)
  {
    console.log(this);
    // use the first image for dimensions
    if(this.frames.length == 0)
    {
      this.setSize({x: img.width, y: img.height});
    }
    this.frames.push(img);
    
    if(this.frames.length == this.frameCount) 
    {
      this.canvas.setStyle('display', 'block');
      this.animate();
    }
  },
  
  
  animate: function()
  {
    this.currentFrame = this.currentFrame % this.frameCount;
    
    this.context.clearRect(0, 0, this.size.x, this.size.y);
    this.context.drawImage(this.frames[this.currentFrame], 0, 0);
    
    this.currentFrame++;
    this.totalFrames++;
    
    if(this.totalFrames % 120 == 0)
    {
      this.changeImageSize(this.multiplier);
      this.multiplier = this.multiplier * 2;
      
      if(this.multiplier == 256)
      {
        this.multiplier = 1;
      }
    }
    
    setTimeout(this.animate.bind(this), 41);
  }
  
  
});

window.addEvent('domready', function() {
  var s = new Sprite();
  s.loadImages('bullet');  
  var s = new Sprite(null, {position:{x:100, y: 100}});
  s.loadImages('bullet');
  var s = new Sprite(null, {position:{x:200, y: 0}});
  s.loadImages('bullet');
  var s = new Sprite(null, {position:{x:300, y: 100}});
  s.loadImages('bullet');
  var s = new Sprite(null, {position:{x:400, y: 0}});
  s.loadImages('bullet');
  var s = new Sprite(null, {position:{x:500, y: 100}});
  s.loadImages('bullet');
});