var Video = require('./video');
var Assets = require('./assets');

var Game = function(canvas) {
  this.canvas = canvas;

  this.width = 300;

  this.height = 300;

  this.assets = new Assets();

  this.states = null;
  this.debug = null;
  this.input = null;
  this.video = null;

  this.config = {
    useRetina: true,
    initializeCanvas: true,
    initializeVideo: true,
    addInputEvents: true,
    showPreloader: true,
    fixedStep: false,
    stepTime: 0.01666,
    maxStepTime: 0.01666
  };

  this.configure();

  if (this.config.initializeVideo) {
    this.video = new Video(this, canvas, this.config);
  }
};

Game.prototype.setSize = function(width, height) {
  this.width = width;
  this.height = height;

  if (this.video) {
    this.video.setSize(width, height);
  }

  if (this.states) {
    this.states.resize();
  }
};

Game.prototype.preloading = function(time) {
  if (!this.config.showPreloader && !(this.video && this.video.ctx)) { return; }

  if (this.video.ctx) {
    if (this._preloaderWidth === undefined) { this._preloaderWidth = 0; }

    var width = Math.min(this.width * 2/3, 300);
    var height = 20;

    var y = (this.height - height) / 2;
    var x = (this.width - width) / 2;

    var currentWidth = width * this.assets.progress;
    this._preloaderWidth = this._preloaderWidth + (currentWidth - this._preloaderWidth) * time * 10;

    this.video.ctx.save();

    this.video.ctx.fillStyle = '#a9c848';
    this.video.ctx.fillRect(0, 0, this.width, this.height);

    this.video.ctx.fillStyle = '#f6ffda';
    this.video.ctx.font = '300 40px sans-serif';
    this.video.ctx.textAlign = 'center';
    this.video.ctx.textBaseline = 'bottom';
    this.video.ctx.fillText("Potion.js", this.width/2, y);

    this.video.ctx.fillStyle = '#88a237';
    this.video.ctx.fillRect(x, y + 15, width, height);

    this.video.ctx.strokeStyle = '#88a237';
    this.video.ctx.lineWidth = 2;
    this.video.ctx.beginPath();
    this.video.ctx.rect(x - 5, y + 10, width + 10, height + 10);
    this.video.ctx.closePath();
    this.video.ctx.stroke();

    this.video.ctx.fillStyle = '#f6ffda';
    this.video.ctx.fillRect(x, y + 15, this._preloaderWidth, height);

    this.video.ctx.strokeStyle = '#f6ffda';
    this.video.ctx.lineWidth = 2;
    this.video.ctx.beginPath();

    this.video.ctx.moveTo(x + this._preloaderWidth, y + 10);
    this.video.ctx.lineTo(x - 5, y + 10);
    this.video.ctx.lineTo(x - 5, y + 10 + height + 10);
    this.video.ctx.lineTo(x + this._preloaderWidth, y + 10 + height + 10);

    this.video.ctx.stroke();
    this.video.ctx.closePath();

    this.video.ctx.restore();
  }
};

Game.prototype.configure = function() {};

Game.prototype.focus = function() {};

Game.prototype.blur = function() {};

module.exports = Game;

@@ -981,24 +981,109 @@
 ideo.ctx) %7B%0A
+    var color1 = '#b9ff71';%0A    var color2 = '#8ac250';%0A    var color3 = '#648e38';%0A%0A
     if (this
@@ -1513,17 +1513,14 @@
 e = 
-'#a9c848'
+color2
 ;%0A  
@@ -1582,50 +1582,8 @@
 );%0A%0A
-    this.video.ctx.fillStyle = '#f6ffda';%0A
     
@@ -1605,17 +1605,17 @@
 font = '
-3
+4
 00 40px 
@@ -1711,16 +1711,70 @@
 bottom';
+%0A%0A    this.video.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
 %0A    thi
@@ -1822,16 +1822,20 @@
 dth/2, y
+ + 2
 );%0A%0A    
@@ -1855,39 +1855,167 @@
 x.fillStyle = '#
-88a237'
+d1ffa1';%0A    this.video.ctx.fillText(%22Potion.js%22, this.width/2, y);%0A%0A    this.video.ctx.strokeStyle = this.video.ctx.fillStyle = color3
 ;%0A    this.video
@@ -2060,52 +2060,8 @@
 );%0A%0A
-    this.video.ctx.strokeStyle = '#88a237';%0A
     
@@ -2244,32 +2244,61 @@
 x.stroke();%0A%0A   
+ this.video.ctx.strokeStyle =
  this.video.ctx.
@@ -2305,33 +2305,30 @@
 fillStyle = 
-'#f6ffda'
+color1
 ;%0A    this.v
@@ -2392,52 +2392,8 @@
 );%0A%0A
-    this.video.ctx.strokeStyle = '#f6ffda';%0A
     

add style to preloading text