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'))


@PopupConfigureVideoGear = React.createClass({

  mixins: mixins
  logger: context.JK.logger

  render: () ->
    `<div className="configure-video-geaor">
      <div className="popup-contents">
        <div classNmae="video-header">
          <h2 className="subcaption">video is not configured</h2>
          <div className="subcaption">
            If you might like to use video in sessions, please select a webcam to use, and a video resolution and frame rate to capture. Then click the TEST WEBCAM button to verify that you see video from your webcam properly. In sessions, you can choose to turn video on or off any time.
          </div>
        </div>

        <div className="webcam-container">
          <WebcamViewer isVisible={true} />
        </div>

        <div className="important-note">
          <h5>
            Important Note
          </h5>
          <div className="contents">
            You can update your video configuration any time in your Account settings, or in the menus of the video window while in a session.
          </div>
        </div>
        <div className="clearall" />
      </div>

      <div className="close-behavior">
        <span className="field">
          <input type="checkbox" name="dont_show" /><label htmlFor="dont_show">Don't show this again</label>
        </span>
          <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.configureVideoPopupClosed($dontShow.is(':checked'))
    window.close()

  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)
})