var video = document.createElement('video');
var canvas = document.getElementById('picture');
var ctx = canvas.getContext('2d');

// polyfill from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement.toBlob
if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function (callback, type, quality) {

    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
        len = binStr.length,
        arr = new Uint8Array(len);

    for (var i=0; i<len; i++ ) {
     arr[i] = binStr.charCodeAt(i);
    }

    callback( new Blob( [arr], {type: type || 'image/png'} ) );
  }
 });
}

var bachURL = './bach.png';
var bach = new Image();
bach.src = bachURL;
var bach_ready = false;
bach.onload = function() {
  bach_ready = true;
};

var videoOpts = { 'video' : true };

ctx.textAlign = 'center';
ctx.font = '14px "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif';

var trigger = document.getElementById('trigger');
var cancel = document.getElementById('cancel');
var save = document.getElementById('save');
var notifier = document.getElementById('notifier');

var snapURL, snap = new Image();
var startTime = null;
var currentTime = null;
var flash = null;

// this function takes care of text on the display
var writeMessage;

function buttonDisplay(triggerDisplay, cancelDisplay, saveDisplay) {
  trigger.style.display = triggerDisplay ? 'inline-block' : 'none';
  cancel.style.display = cancelDisplay ? 'inline-block' : 'none';
  save.style.display = saveDisplay ? 'inline-block' : 'none';
}


// we need an FSM here
var fsm = new machina.Fsm({
  initialize : function() {
  },
  // _save is a utility function that uploads the file...
  _save : function() {
    var fd = new FormData();
    var self = this;

    canvas.toBlob(function(blob) {
      fd.append("1279_3067-answer", blob, self.filename);

      var request = new XMLHttpRequest();
      request.open(
        "POST",
        "http://www.wqxr.org/crowdsourcing/bach-face/api/submit_survey_questions_json/"
      );
      request.send(fd);

    }, 'image/png');
    this.outURL = 'https://media2.wnyc.org/i/raw/1/'+this.filename;
  },
  initialState : 'initializing',
  states : {
    'initializing' : {
      _onEnter : function() {
        var self = this;
        var errorCallback = function(error) {
          self.transition('denied_access')
        };

        buttonDisplay();

        writeMessage = function() {
          ctx.fillText('Please allow us to', 270, 232);
          ctx.fillText('access your camera', 270, 250);
        }

        if(bowser.mobile || bowser.tablet) {
          return this.transition('mobile');
        }


        notifier.style.display = 'block';
        if(bowser.chrome) {
          notifier.style.right = '50px';
          notifier.innerHTML = 'Activate your camera! <i class="fa fa-arrow-up"></i>';
        } else if(bowser.firefox) {
          notifier.style.left = '40px';
          notifier.innerHTML = '<i class="fa fa-arrow-up"></i> Activate your camera!';
        }

        // kick off the video, if we can...
        if(navigator.getUserMedia) {
          navigator.getUserMedia(videoOpts, function(stream) {
            self.transition('viewing');
            video.src = stream;
            video.play();
          }, errorCallback);
        } else if(navigator.webkitGetUserMedia) {
          navigator.webkitGetUserMedia(videoOpts, function(stream) {
            self.transition('viewing');
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
          }, errorCallback);
        } else if(navigator.mozGetUserMedia) {
          navigator.mozGetUserMedia(videoOpts, function(stream){
            self.transition('viewing');
            video.src = window.URL.createObjectURL(stream);
            video.play();
          }, errorCallback);
        } else {
          self.transition('unsupported');
        }
      }
    },
    'unsupported' : {
      _onEnter : function() {
        notifier.style.display = 'none'

        buttonDisplay();

        writeMessage = function() {
          ctx.fillText('Your browser won\'t let', 270, 250-18*2);
          ctx.fillText('you be Bach today.', 270, 250-18);
          ctx.fillText('(Please try again in', 270, 250+18);
          ctx.fillText('Chrome or Firefox.)', 270, 250+18*2);
        }
      }
    },
    'mobile' : {
      _onEnter : function() {
        notifier.style.display = 'none';

        buttonDisplay();

        writeMessage = function() {
          ctx.fillText('Unfortunately, you', 270, 250-18*3);
          ctx.fillText('cannot be Bach', 270, 250-18*2);
          ctx.fillText('on a mobile device.', 270, 250-18);
          ctx.fillText('(Please try again in', 270, 250+18);
          ctx.fillText('Chrome or Firefox', 270, 250+18*2);
          ctx.fillText('on your computer.)', 270, 250+18*3)
        }
      }
    },
    'denied_access' : {
      _onEnter : function() {
        buttonDisplay();

        notifier.style.display = 'block';
        if(bowser.chrome) {
          notifier.innerHTML = '<img src="chrome_icon.png" style="margin:5px 0 -5px;"/> Please reset your webcam settings.';
          notifier.style.right = '30px';
        } else if(bowser.firefox) {
          notifier.style.left = '0px';
          notifier.innerHTML = 'You\'ve disabled your webcam for this page.';
        }

        writeMessage = function() {
          ctx.fillText('You have decided not', 270, 250-18*3);
          ctx.fillText('to be Bach today.', 270, 250-18*2);

          ctx.fillText('You\'ll need to allow', 270, 250+18*0);
          ctx.fillText('access to your webcam', 270, 250+18*1);
          ctx.fillText('for us to bring you Bach.', 270, 250+18*2);
        }
      }
    },
    'viewing' : {
      _onEnter : function() {
        notifier.style.display = 'none';

        buttonDisplay(true);
        trigger.classList.add('fa-camera', 'fa-refresh');
        trigger.classList.remove('fa-save');
        trigger.innerHTML = "Snap my Bach";

        writeMessage = function() {
          ctx.fillText('Starting the camera...', 270, 250);
        }
      },
      trigger : function () {
        this.transition('snapped');
        snapURL = canvas.toDataURL('image/png');
        snap.src = snapURL;
        flash = currentTime;
      }
    },
    'snapped' : {
      _onEnter : function() {
        notifier.style.display = 'none';

        buttonDisplay(true, true, true);

        trigger.classList.remove('fa-camera', 'fa-refresh');
        trigger.classList.add('fa-save');
        trigger.innerHTML = "Save my Bach";
        save.style.visibility = 'hidden';
        cancel.style.visibility = 'visible';

        var url = this.savedUrl = canvas.toDataURL('image/png');

        this.filename = CryptoJS.MD5(url).toString() + String(+new Date()) + '.png';
      },
      cancel : function() {
        this.transition('viewing');
      },
      // this tweets the image
      // trigger : function() {
      //   this._save();
      //   var url = this.outURL;
      //   window.open(
      //     'https://twitter.com/share?via=WQXR&hashtags=illbebach&url='+url,
      //     'twitter',
      //     'height=400,width=600,left=10,top=10,menubar=no,location=no,status=no'
      //   );
      // },
      // this offers the image for download
      trigger : function(evt) {

        trigger.href = this.savedUrl;
        trigger.download = 'illbebach.png';

        this.transition('saved');
      }
    },
    'saved' : {
      _onEnter : function() {
        notifier.style.display = 'none';

        buttonDisplay(true, true, true);

        trigger.classList.remove('fa-camera', 'fa-save');
        trigger.classList.add('fa-refresh');
        trigger.innerHTML = "Another Bach?";
        save.style.visibility = 'visible';
        cancel.style.visibility = 'hidden';

        this.filename = CryptoJS.MD5(this.savedUrl).toString() + String(+new Date()) + '.png';
      },
      save : function() {

        save.href = this.savedUrl;
        save.download = 'illbebach.png';

        this.transition('saved');
      },
      trigger : function() {
        // weirdly, these have to be here, in the event handler...
        trigger.removeAttribute('href');
        trigger.removeAttribute('download');

        this.transition('viewing');
      }
    }
  }
});


trigger.addEventListener('click', function() {
  fsm.handle('trigger');
});
cancel.addEventListener('click', function() {
  fsm.handle('cancel');
});
save.addEventListener('click', function() {
  fsm.handle('save');
});

var flashTime = 250; // ms

function step(timestamp) {
  currentTime = timestamp;
  if(startTime === null) { startTime = timestamp; }
  if(['snapped', 'saved'].indexOf(fsm.state) > -1) {
    ctx.drawImage(snap, 0, 0, canvas.width, canvas.height);
    if((timestamp - flash) < (flashTime * 2)) {
      ctx.fillStyle = 'rgba(255,255,255,'+Math.min(1, 1 + (1 - (timestamp - flash)/flashTime))+')';
      ctx.fillRect(0,0,canvas.width, canvas.height);
    }
  } else {
    ctx.fillStyle = 'black';
    ctx.fillRect(0,0,canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    writeMessage();
    ctx.save();
    ctx.translate(canvas.width, 0);
    ctx.scale(-1, 1);
    ctx.drawImage(video, 0, 50, canvas.width, canvas.width * video.videoHeight / video.videoWidth );
    ctx.restore();
    if(bach_ready) {
      ctx.drawImage(bach, 0, 0, canvas.width, canvas.width * bach.height / bach.width);
    }
  }
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);