function Drawings() {
  this.userBmd;
  this.userSprite;
  this.graphics;
  this.targetDrawing;
  this.targetBMD;
  this.isDown = false;

  this.pixelsShared = 0;
  this.pixelsOff = 0;
  this.pixelsTarg = 0;

  this.potentialDrawings = 7;
  this.chosenMode = "";
  this.timah;
  this.countdownText;
  this.countdown = 5;
  this.lastPosition = { x: -2, y: -2 }
  this.music;
  this.overSound;
}

Drawings.prototype = {
  preload: function() {

  },
  create: function() {



      this.pixelsShared = 0;
      this.pixelsOff = 0;
      this.pixelsTarg = 0;

      //background for game
      this.add.sprite(0,0, "bg");

      //drawing that the user is trying to recreate
      var randomDrawingIndex = Math.ceil(Math.random() * this.potentialDrawings);

      //randomly outline or scribble in
      if(FingerPuppets.nextGame == "fill") {
        this.chosenMode = "silhouette";
        this.targetDrawing = this.add.sprite(0,0, "drawing"+randomDrawingIndex+"_color");
      } else {
        this.chosenMode = "line";
        this.targetDrawing = this.add.sprite(0,0, "drawing"+randomDrawingIndex+"_line");
      }

      //random amount of time
      this.countdown = 15 + Math.round(  Math.random() * 15 );

      //bitmap to compare against
      this.targetBMD = this.add.bitmapData(800, 600);
      this.targetBMD.draw(this.targetDrawing);

      //bitmap data to render drawing to
      this.userBmd = this.add.bitmapData(800, 600);
      this.userSprite = this.add.sprite(0, 0, this.userBmd);

      //timer text
      var text = this.countdown;
      var style = { font: "65px LightUpTheWorld", fill: "#222", align: "center" };
      this.countdownText = this.add.text(this.world.centerX-300, 0, text, style);

      //start the timer
      this.timah = this.time.create(false);
      this.timah.loop(1000, this.updateCountdown, this);
      this.timah.start();

      this.finalScore = 0;
      this.isDown = false;
      this.doneScoring = false;
  },
  update: function() {
    if(this.countdown > 0) {
      //if touching GROSS
      if (this.input.activePointer.isDown)
      {

        //this catches out 'firstDown' state
        if(!this.isDown) {
          this.isDown = true;
          this.lastPosition = { x: this.input.x, y: this.input.y };
        }
        
        if(this.lastPosition.x > 0) {
           //draw line to bitmap data
           //this.userBmd.context.beginPath();
           this.userBmd.context.beginPath();
           this.userBmd.context.moveTo(this.lastPosition.x, this.lastPosition.y);
           this.userBmd.context.strokeStyle = "rgb(41, 128, 185)";
           this.userBmd.context.lineWidth = 17;
           this.userBmd.context.lineJoin = "round";

           this.userBmd.context.lineTo(this.input.x, this.input.y);
           this.userBmd.context.closePath();
           this.userBmd.context.stroke();
        }


      } else {
        //if the mouse WAS down and is now up, reset
        if(this.isDown) {
          this.isDown = false;
        }
      }

      this.lastPosition = { x: this.input.x, y: this.input.y };

      //if we want to draw to it
      this.userBmd.dirty = true;
    }
    else if(this.doneScoring) {
      this.continueDelay -= this.time.elapsed;
      // Countdown is finished and we're done scoring
      if(this.input.activePointer.justPressed() && this.continueDelay < 0) {
        // Go back to the hub
        this.game.state.start("hub");
      }
    }
    
  },
  compare: function() {
      //calculate pix % diff
      var x = 0;
      var y = 0;
      var targPixel, drawnPixel;

      //mask
      var diffmap = this.make.bitmapData(800, 600);
      diffmap.alphaMask(this.targetBMD, this.userBmd)

      this.add.sprite(0, 0, diffmap); //debug

      //get the number of shared pixels and the number of 'off' pixels
      //wow.
      diffmap.update();
      diffmap.processPixelRGB(this.calcCloseness, this);

      //get the target number of pixels.
      this.targetBMD.update();
      this.targetBMD.processPixelRGB(this.calcNeeded, this);

      //draw our original sprite
      this.targetDrawing.kill();
      this.userSprite.kill();

      //caculate success rate
      var percentRight = this.pixelsShared / this.pixelsTarg;
      var percentWrong = this.pixelsOff / this.pixelsTarg;
      this.finalScore = 0;

      if(this.chosenMode == "silhouette") {
        this.finalScore = Math.floor( (percentRight - percentWrong) * 100);
      } else {
        this.finalScore = Math.floor( (percentRight - (percentWrong/10) ) * 100);
      }
      this.doneScoring = true;
      this.continueDelay = 2000;

      var text1 = "Time's up!\n You scored " + this.finalScore + "%\n";
      var text2 = "Touch to continue\n";

      this.overRipped1 = this.add.sprite(this.world.centerX, 0, "ripped");
      this.overRipped1.anchor.setTo(.5, .25);
      var style = { font: "60px LightUpTheWorld", fill: "#222", align: "center" };
      this.overText1 = this.add.text(this.world.centerX, 0, text1, style);
      this.overText1.anchor.setTo(.5, 0);
      this.add.tween(this.overRipped1).from({y: "-200"}, 1000, Phaser.Easing.Quartic.Out, true);
      this.add.tween(this.overText1).from({y: "-200"}, 1000, Phaser.Easing.Quartic.Out, true);

      this.overRipped2 = this.add.sprite(this.world.centerX, this.world.height, "ripped");
      this.overRipped2.anchor.setTo(.5, .5);
      this.overText2 = this.add.text(this.world.centerX, this.world.height + 45, text2, style);
      this.overText2.anchor.setTo(.5, 1);
      this.add.tween(this.overRipped2).from({y: "+200"}, 1000, Phaser.Easing.Quartic.Out, true);
      this.add.tween(this.overText2).from({y: "+200"}, 1000, Phaser.Easing.Quartic.Out, true);
  },
  updateCountdown: function() {
      this.countdown --;
      if(this.countdown <= 0) {
        if(this.countdownText.text !== "Scoring...\n") {
          this.countdownText.setText("Scoring...\n");
          return;
        }
        this.compare();

        //check to see if they get a winning score
        if(this.finalScore >= 50) {
          //mo score, mo problems
          FingerPuppets.score++;

          //muuu
          this.overSound = this.add.sound("winSound");
        } else {
          //sad noise
          this.overSound = this.add.sound("loseSound");
        }

        this.overSound.play();

        this.timah.stop();
        this.countdownText.setText("");
      } else {
        this.countdownText.setText( this.countdown );
      }
  },
  calcCloseness: function(pixel) {
      
      if(pixel.a > 0) {
          //if the pixels are all this bleh grey, they colored out of the lines
          if(pixel.r === 41 && pixel.g === 128 && pixel.b === 185) { // rgb(41, 128, 185)
            this.pixelsOff ++;
          } else {
            this.pixelsShared ++;
          }
      }

      return pixel;
  },
  calcNeeded: function(pixel) {

      if(pixel.a > 0) {
          this.pixelsTarg++;
      }

      return pixel;
  },
  nextGame: function() {
    this.game.state.start('hub');

  }
};

module.exports = Drawings;