var PreloadScene = tine._scene({
  initialize: function() {
    this.addLayer('background');
    this.addLayer('objects');

    var width = game.canvas.width;
    var height = game.canvas.height;

    // BACKGROUND
    // var background = game.create.shape();
    // background.graphics.f('#d5f2ef').r(0, 0, width, height);
    // this.addObject(background, 'background');

    var sky = game.create.shape({regX:-width/2, regY:-height/2});
    sky.graphics
      .rf(["#1D3A58", "#000"], [0, 1], width/2, height/2, 0, width/2, height/2, Math.max(width, height))
      .r(0, 0, width, height)
    this.addObject(sky, 'background');


    var text = game.create.text('LD#32', {
      font:'72px aero',
      color: '#336482',
      textAlign: 'center',
      // regY: 72,
      x: width/2,
      y: height/2-62,
    })
    this.addObject(text, 'objects')

    // OBJECTS
    this.progressbar = new tine.ProgressBar(
      '#336482',
      '#ffffff',
      tine.LEFT_TO_RIGHT,
      width, 10, 0, 1
    )
    this.progressbar.x = 0;
    this.progressbar.y = height-30;
    this.addObject(this.progressbar, 'objects');

    // VARIABLES
    this.targetProgress = 0;
    this.progressSpeed = 3.0;
    
    // EVENTS
    game.load.on('progress', this._onProgress, this);
  },

  update: function() {
    if (this.progressbar.value < this.targetProgress) {
      this.progressbar.value += this.progressSpeed*this.targetProgress*game.time.fdelta;
    } else if (this.progressbar.value > this.targetProgress) {
      this.progressbar.value = this.targetProgress;
    }
  },

  //---------------------------------------------------------------------------
  // CALLBACKS
  //---------------------------------------------------------------------------
  _onProgress: function(e) {
    this.targetProgress = e.progress;
  }
})