     v = @refs.video.getDOMNode()
     v.addEventListener 'timeupdate', (ev) -> 
       chapter = fetch("video_chapter")
+      controls = fetch('video_controls')
 
       text = 
         if v.currentTime < 5
-          "Sometimes a proposal bears careful thought"
+          "Proposals often require careful thought"
         else if v.currentTime < 10
           "The Pro/Con list encourages thinking about tradeoffs"
         else if v.currentTime < 14.5

require './browser_location'
require './tooltip'
require './shared'

base_text =
  fontSize: 24
  fontWeight: 200
  fontFamily: "'Avenir Next W01', 'Avenir Next', 'Lucida Grande', 'Helvetica Neue', Helvetica, Verdana, sans-serif"

h1 = _.extend {}, base_text,
  fontSize: 72
  fontWeight: 400

h2 = _.extend {}, base_text,
  fontSize: 48
  fontWeight: 700

h3 = _.extend {}, base_text,
  fontSize: 36
  fontWeight: 300

strong = _.extend {}, base_text,
  fontWeight: 600

bullet = (props) ->
  DIV
    style:
      paddingLeft: 30
      position: "relative"
      margin: "30px 0"

    DIV
      style:
        position: "absolute"
        left: 0

      switch props.point_style
        when "bullet"
          "•"
        when "pro"
          "+"
        when "con"
          "–"

    P null,
      SPAN
        style: strong
        props.strong
      SPAN null, 
        props.body

SaasHomepage = ReactiveComponent
  displayName: "SaasHomepage"
  render: ->
    DIV null, title(), Videos(), usedFor(), pricing(), contact(), story()

title = ->
  chapter = fetch("video_chapter")

  DIV
    style:
      marginTop: 50
    H1
      style: _.extend {}, h1,
        textAlign: "center"
      "Think better together" 

    H3
      style: _.extend {}, h3,
        textAlign: "center"
      
      if chapter.text 
        chapter.text 
      else 
        "Sometimes a proposal bears careful thought"
      

Videos = ReactiveComponent
  displayName: "videos"
  render: ->
    

    DIV null,         

      STYLE
        type: "text/css"
        "#homepage_video video::cue { visibility: hidden; }"

      DIV
        id: "homepage_video"
        style:
          marginTop: 40
          width: 1000

        VIDEO
          preload: "auto"
          loop: true
          autoPlay: true
          width: 1000
          ref: "video"
          
          SOURCE
            src: asset("saas_landing_page/deathstar_cam.mp4")
            type: "video/mp4"
          
          SOURCE
            src: asset("saas_landing_page/deathstar_cam.webm")
            type: "video/webm"  
        

  componentDidMount: ->

        else
          "For small and large groups alike"

      controls.value = v.currentTime / v.duration

      save controls

      if chapter.text != text
        chapter.text = text
        save chapter
    , false



bullet = (props) ->
  DIV
    style:
      paddingLeft: 30
      position: "relative"
      margin: "30px auto"
      width: TEXT_WIDTH

    DIV
      style:
        position: "absolute"
        left: -15

      switch props.point_style
        when "bullet"
          "•"
        when "pro"
          "+"
        when "con"
          "–"

    P null,
      SPAN
        style: strong
        props.strong
      SPAN 
        style: _.extend {}, base_text, 
          fontWeight: 300
        props.body


usedFor = ->

  DIV
    style:
      marginTop: 60

    H1 style: h1,
      'Consider.it creates focused discussion by:'

    bullet
      point_style: 'bullet'
      strong: "Collecting opinions on specific ideas"
      body: ", proposals, plans of action, or hypotheticals. Even job candidates, products, or designs."

    bullet
      point_style: 'bullet'
      strong: "Fostering considerate interactions"
      body: ". The interface makes it easy to consider all sides without putting people in direct conflict. Personal attacks and trolling don’t fit the format."

    bullet
      point_style: 'bullet'
      strong: "Producing an interactive summary of group thought"
      body: ". Patterns of thought across the whole group can be identified. Perhaps 80% of opposers have a single con point that can be addressed!"

    bullet
      point_style: 'bullet'
      strong: "Scaling to hundreds of people"
      body: " deliberating an issue together, without becoming overwhelming or requiring strong central leadership/facilitation."


pricing = ->

contact = (local) ->

  teamMember = (props) ->
    DIV
      style:
        display: "inline-block"
        margin: "20px 15px"
        textAlign: "center"
      IMG
        src: props.src
        style:
          borderRadius: "50%"
          display: "inline-block"
          width: 200
          textAlign: "center"

      DIV
        style:
          textAlign: "center"
        props.name

      A
        href: "mailto:#{props.email}"
        style: _.extend {}, a, 
          textAlign: "center"
        props.email

  DIV 
    id: 'contact'
    style:
      marginTop: 60

    H1
      style: _.extend {}, h1, 
        marginBottom: 30

      "Get in touch with us,"
      BR null
      "We'd love to get to know you!"

    DIV 
      style: 
        margin: 'auto'
        width: TEXT_WIDTH 
        textAlign: 'center'
      "Write us a "
      A
        href: "mailto:admin@consider.it"
        style: a
        "nice electronic letter"

      ". Or we can reach out to you:"

      FORM
        action: "http://chalkboard.us7.list-manage1.com/subscribe/post?u=9cc354a37a52e695df7b580bd&amp;id=d4b6766b00"
        id: "mc-embedded-subscribe-form"
        method: "post"
        name: "mc-embedded-subscribe-form"
        novalidate: "true"
        target: "_blank"
        style:
          display: "inline-block"
          margin: "10px 0 20px 0"

        INPUT
          id: "mce-EMAIL"
          name: "EMAIL"
          placeholder: "email address"
          type: "email"
          defaultValue: ""
          style:
            fontSize: 24
            padding: "8px 12px"
            width: 380
            border: '1px solid #999'

        BUTTON
          name: "subscribe"
          type: "submit"
          style:
            fontSize: 24
            marginLeft: 8
            display: "inline-block"
            backgroundColor: if local.hover_contactme then logo_red else 'white'
            color: if local.hover_contactme then 'white' else '#999'
            fontWeight: 500
            border: "1px solid #{if local.hover_contactme then 'transparent' else '#999'}"
            borderRadius: 16
            padding: '8px 18px'
          onMouseEnter: => local.hover_contactme = true; save local
          onMouseLeave: => local.hover_contactme = false; save local
          "Contact me"

      DIV null, 
        "We work out of Seattle, WA, Portland, OR, and the Internet."

    DIV 
      style: 
        textAlign: 'center'
        marginTop: 30

      teamMember
        src: asset("saas_landing_page/travis.jpg")
        name: "Travis Kriplean"
        email: "travis@consider.it"

      teamMember
        src: asset("saas_landing_page/kevin.jpg")
        name: "Kevin Miniter"
        email: "kevin@consider.it"
   
      teamMember
        src: asset("saas_landing_page/mike.jpg")
        name: "Michael Toomim"
        email: "toomim@consider.it"

story = ->

Page = ReactiveComponent

  displayName: "Page"
  mixins: [ AccessControlled ]

  render: ->
    loc = fetch("location")
    auth = fetch("auth")

    DIV null,
      if auth.form
        Auth()
      else unless @accessGranted()
        SPAN null
      else
        switch loc.url
          when "/dashboard/create_subdomain"
            CreateSubdomain key: "/page/dashboard/create_subdomain"
          else
            SaasHomepage key: "homepage"


Root = ReactiveComponent
  displayName: "Root"

  render: ->
    loc = fetch 'location'
    app = fetch '/application'

    DIV
      style: base_text

      BrowserLocation()
      StateDash()
      Header()
      DIV
        style:
          width: 1000
          backgroundColor: "white"
          margin: "auto"
          paddingBottom: 20
        BrowserHacks()
        Page(key: "/page" + loc.url)

      Tooltip()

      if app.dev
        Development()



window.Saas = Root

require './application_loader'
