context = window
logger = context.JK.logger

mixins = []


# make sure this is actually us opening the window, not someone else (by checking for MixerStore)

accessOpener = false
if window.opener?
  try
    m = window.opener.MixerStore
    accessOpener = true
  catch e


if accessOpener
  VideoActions = window.opener.VideoActions
  VideoStore = window.opener.VideoStore

#mixins.push(Reflux.listenTo(VideoStore, 'onVideoStateChanged'))

  @PopupHowToUseVideo = React.createClass({

  render: () ->
    `<div className="how-to-use-video">
      <div className="popup-contents">
        <div className="control-holder">
          <a className="control start-video" onClick={this.startVideo}>
            <span className="helper" />
            <img src="/assets/content/webcam-icon-gray.png" width="20" height="20" />
            <span id="recording-status">Start Webcam</span>
          </a>
        </div>

        <div className="important-note">
          <h5>
            Important Note
          </h5>
          <div className="contents">
            You can start and stop your webcam at any time by navigating to the Webcam menu of the video window and selecting Start/Stop Webcam.
          </div>
        </div>
      </div>

      <div className="field">
        <input type="checkbox" name="dont_show" /><label htmlFor="dont_show">Don't show this again</label>
      </div>

      <div className="close-behavior">
        <a className="button-orange close-link" onClick={this.close}>CLOSE</a>
      </div>
    </div>`

  close: () ->
    $root = jQuery(this.getDOMNode())
    $dontShow = $root.find('input[name="dont_show"]')
    VideoActions.howToUseVideoPopupClosed($dontShow.is(':checked'))
    window.close()

  startVideo: (e) ->
    e.preventDefault
    VideoActions.startVideo()

  windowUnloaded: () ->

    $root = jQuery(this.getDOMNode())
    $dontShow = $root.find('input[name="dont_show"]')

    VideoActions.howToUseVideoPopupClosed($dontShow.is(':checked'))

  componentDidMount: () ->
    $(window).unload(@windowUnloaded)

    $root = jQuery(this.getDOMNode())

    $dontShow = $root.find('input[name="dont_show"]')
    context.JK.checkbox($dontShow)

    @resizeWindow()

    # this is necessary due to whatever the client's rendering behavior is.
    setTimeout(@resizeWindow, 300)

  componentDidUpdate: () ->
    @resizeWindow()

  resizeWindow: () =>
    $container = $('#minimal-container')
    width = $container.width()
    height = $container.height()

    # there is 20px or so of unused space at the top of the page.   can't figure out why it's there. (above #minimal-container)
    mysteryTopMargin = 20

    # deal with chrome in real browsers
    offset = (window.outerHeight - window.innerHeight) + mysteryTopMargin

    # handle native client chrome that the above outer-inner doesn't catch
    #if navigator.userAgent.indexOf('JamKazam') > -1

    #offset += 25

    window.resizeTo(width, height + offset)
})