 require './browser_location'
 require './tooltip'
 require './shared'
+require './slider'
+require './development'
+require './state_dash'
+
+SAAS_PAGE_WIDTH = 1000
+TEXT_WIDTH = 730
 
 base_text =
   fontSize: 24
-  fontWeight: 200
+  fontWeight: 400
   fontFamily: "'Avenir Next W01', 'Avenir Next', 'Lucida Grande', 'Helvetica Neue', Helvetica, Verdana, sans-serif"
 
 h1 = _.extend {}, base_text,
-  fontSize: 72
+  fontSize: 48
   fontWeight: 400
+  textAlign: 'center'
 
 h2 = _.extend {}, base_text,
-  fontSize: 48
-  fontWeight: 700
-
-h3 = _.extend {}, base_text,
   fontSize: 36
   fontWeight: 300
+  textAlign: 'center'
 
 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
+nav_link_style = _.extend {}, base_text,
+  fontWeight: 600
+  fontSize: 24
+  color: 'white'
+  marginLeft: 40
+  cursor: 'pointer'
+
+a = _.extend {}, base_text,
+  color: logo_red
+  cursor: 'pointer'
+  textDecoration: 'underline'
+
 
 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"
+    DIV null, 
+      Video()
+      usedFor()
+      pricing()
+      contact(@local)
+      story()
+
+
+Header = ReactiveComponent
+  displayName: "Header"
+  render: ->
+    current_user = fetch("/current_user")
+
+    DIV null,
+      DIV
+        style:
+          position: "relative"
+          margin: "0 auto"
+          backgroundColor: logo_red
+          height: 75
+
+        IMG
+          src: asset("saas_landing_page/considerit_logo.svg")
+          style:
+            position: "relative"
+            top: 23
+            left: 12
+            height: 68
+
+      # nav menu
+      DIV 
+        style: 
+          width: SAAS_PAGE_WIDTH
+          margin: 'auto'
+          position: 'relative'
+          top: -34
+
+
+        DIV 
+          style: 
+            position: 'absolute'
+            right: 0
+
+          A 
+            style: nav_link_style
+            href: "#pricing"
+            'pricing'
+          A 
+            style: nav_link_style
+            href: "#contact"
+            'contact'
+          A 
+            style: nav_link_style
+            href: "#story"
+            'story'              
+
+      DIV 
+        style:
+          fontSize: 24
+          fontWeight: 300
+          color: logo_red
+          position: 'relative'
+          left: 16
+          top: 4
+        "for thinking together"
+
+
+
+VIDEO_SLIDER_WIDTH = 250
+Video = ReactiveComponent
+  displayName: "video"
   render: ->
     
-
-    DIV null,         
-
-      STYLE
-        type: "text/css"
-        "#homepage_video video::cue { visibility: hidden; }"
-
+    chapter = fetch("video_chapter")
+    controls = fetch('video_controls')
+
+    if !controls.playing?
+      controls.playing = true
+      save controls
+
+    DIV null,        
       DIV
         id: "homepage_video"
         style:
-          marginTop: 40
-          width: 1000
+          width: SAAS_PAGE_WIDTH
 
         VIDEO
           preload: "auto"
           loop: true
           autoPlay: true
-          width: 1000
+          width: SAAS_PAGE_WIDTH
           ref: "video"
-          
+
           SOURCE
-            src: asset("saas_landing_page/deathstar_cam.mp4")
+            src: asset("saas_landing_page/with_screen.mp4")
             type: "video/mp4"
           
           SOURCE
-            src: asset("saas_landing_page/deathstar_cam.webm")
-            type: "video/webm"  
+            src: asset("saas_landing_page/with_screen.webm")
+            type: "video/webm"   
+
+
+      DIV
+        style:
+          marginTop: 10
+          position: 'relative'
+
+
+        H2
+          style: _.extend {}, h2,
+            textAlign: "center"
+          
+          if chapter.text 
+            chapter.text 
+          else 
+            "Sometimes a proposal bears careful thought"
+
+        DIV 
+          onMouseEnter: (ev) => @local.hover_player = true; save @local
+          onMouseLeave: (ev) => @local.hover_player = false; save @local
+
+          style: 
+            width: VIDEO_SLIDER_WIDTH + 80
+            margin: 'auto'
+            #padding: '15px 10px'
+            position: 'relative'
+            opacity: if @local.hover_player then 1 else .5
+            top: -10
+          I 
+            className: "fa fa-#{if controls.playing then 'pause' else 'play'}"
+            onClick: (ev) => 
+              controls = fetch('video_controls')
+              controls.playing = !controls.playing
+              save controls
+              if controls.playing 
+                @refs.video.getDOMNode().play()
+              else
+                @refs.video.getDOMNode().pause()
+
+            style:       
+              fontSize: 10
+              color: '#ccc'
+              #position: 'relative'
+              padding: '12px 12px'
+              cursor: 'pointer'
+              visibility: if @local.hover_player then 'visible' else 'hidden'
+              left: -12
+
+          Slider
+            key: 'video_controls'
+            width: VIDEO_SLIDER_WIDTH
+            handle_height: if @local.hover_player then 20 else 4
+            base_height: 4
+            base_color: '#ECECEC'
+            slider_style: 
+              margin: 'auto'
+              position: 'absolute'
+              top: '50%'
+              marginTop: -2
+              left: 40
+            handle_props: 
+              color: logo_red
+
+            onMouseDownCallback: (ev) =>
+              video = @refs.video.getDOMNode()
+              video.pause()
+
+            onMouseMoveCallback: (ev) => 
+              controls = fetch('video_controls')
+              video = @refs.video.getDOMNode()
+              video.currentTime = controls.value * video.duration
+
+            onMouseUpCallback: (ev) => 
+              controls = fetch('video_controls')
+              video = @refs.video.getDOMNode()
+              video.play() if controls.playing
+
+            onClickCallback: (ev) =>
+              controls = fetch('video_controls')
+              video = @refs.video.getDOMNode()
+              video.pause()
+              video.currentTime = controls.value * video.duration
+              video.play() if controls.playing
+
         
 
   componentDidMount: ->

        else if v.currentTime < 41
          "Histogram shows the spectrum of opinion"
        else if v.currentTime < 46
          "Points ranked by salience across whole population"
        else if v.currentTime < 53
          "Now explore patterns of thought!"
        else if v.currentTime < 58

    v = @refs.video.getDOMNode()
    v.addEventListener 'timeupdate', (ev) -> 
      chapter = fetch("video_chapter")
      controls = fetch('video_controls')

      text = 
        if v.currentTime < 5
          "Proposals often require careful thought"
        else if v.currentTime < 10
          "The Pro/Con list encourages thinking about tradeoffs"
        else if v.currentTime < 14.5
