VIDEO_STREAM = null
angular.module('selfieApp').directive 'camera', ['$compile', ($compile) ->
  restrict: 'A'
  link: (scope, element, attrs) ->
    element.on 'click', ->
      [ew,eh] = [element[0].width, element[0].height]
      navigator.getUserMedia mediaOpts(ew,eh)
      , (stream) ->
        VIDEO_STREAM = stream
        html = "<video width='#{ew}' height='#{eh}' src='#{window.URL.createObjectURL stream}' usermedia></video>"
        e = $compile(html)(scope)
        element.replaceWith e
        e[0].play()
      , (err) -> console.log "err", err
  ]
angular.module('selfieApp').directive 'usermedia', ['$compile', ($compile) ->
  restrict: 'A'
  link: (scope, element, attrs) ->
    canvas = document.createElement('canvas')
    context = canvas.getContext('2d')
    element.on 'click', ->
      [ew,eh] = [element[0].width, element[0].height]
      canvas.width = ew
      canvas.height = eh
      context.drawImage(element[0], 0, 0, ew, eh)
      html = "<img src='#{canvas.toDataURL('image/png')}' camera class='selfie_img' width='#{ew}' height='#{eh}'>"
      e = $compile(html)(scope)
      element[0].pause()
      VIDEO_STREAM.stop() if VIDEO_STREAM
      element.replaceWith e
  ]