AutoSlide + AutoReset of Demo screen + Title on mosaic screen. #32

application/controllers/home.php

@@ -5,6 +5,7 @@ class Home extends MY_Controller
 	function __construct()
 	{
 		parent::__construct();
+        $this->load->model('measure');
 	}
 
 	function index()
@@ -17,9 +18,29 @@ function index()
         }
 
 		$this->load->view('header', $this->_headerData);
-		$this->load->view('home');
+		$this->load->view('home', $this->homeMessage());
 		$this->load->view('footer');
 	}
+
+    private function homeMessage(){
+
+        $rand = rand ( 0 , 3 );
+
+        $watchBrands = array('Seiko', 'Rolex', 'Omega');
+        $videos = array('Omega.mp4', 'Rolex.mp4', 'Zenith.mp4');
+
+        $video = vid_url('Zenith.mp4');
+
+        if($rand >= 0 && $rand <= 2){
+            return array('title'=>$this->measure
+                ->getMeasuresCountByWatchBrand($watchBrands[$rand]) . 
+                ' ' . $watchBrands[$rand] . ' measured on Toolwatch.io',
+                'video_url'=>vid_url($videos[$rand]));
+        }else{
+            return array('title'=>$this->measure->getMeasuresWeeklyAverageAccuracy() .
+                ' spd average accuracy measured this week', 'video_url'=>$video);
+        }
+    }
 
     function logout()
     {

application/models/measure.php

@@ -125,4 +125,29 @@ function deleteMesure($measureId){
         return $this->update($measureId, $data) !== false;
     }
 
+    function getMeasuresCountByWatchBrand($watchBrand){
+        return $this->select("count(1) as cnt")
+             ->join("watch", "watch.watchId = measure.watchId")
+             ->find_by("UPPER(brand)", strtoupper($watchBrand))
+             ->cnt;
+    }
+
+    function getMeasuresWeeklyAverageAccuracy(){
+
+        $totalAccuracy = 0;
+
+        $measures = $this->select()
+            ->where('statusId', 2)
+            ->where('accuracyReferenceTime >=', microtime() - 604800000)
+            ->find_all();
+
+        foreach ($measures as $measure) {
+            $totalAccuracy = $totalAccuracy + 
+                $this->computeAccuracy($measure);
+        }
+
+        return sprintf("%.2f", $totalAccuracy / sizeof($measures));
+
+    }
+
 }

application/views/home.php

@@ -1,6 +1,7 @@
 <div class="home-intro">
     <div class="home-intro-overlay">
-      <video id="home-video" src="<?php echo vid_url('home.mp4');?>" width="100%" height="100%" autoplay loop muted></video>
+      <video id="home-video" src="<?php echo $video_url;?>" width="100%" height="100%" autoplay loop muted></video>
+
         <div class="container container-fluid first slogan-home">
 
             <?php if(!$this->agent->is_mobile()){ ?>
@@ -29,13 +30,6 @@
                 </div>
             </div>
 
-            <div class="row continue">
-                <div class="col-md-12">
-                    <center>
-                        <span class="fa fa-chevron-down"></span>
-                    </center>
-                </div>
-            </div>
             <?php } ?>
 
 
@@ -44,7 +38,7 @@
 </div>
 
 <div class="home-picto">
-    <div class="container container-fluid">
+    <div id="demo-screen" class="container container-fluid">
 <?php if(!$this->agent->is_mobile()){ ?>
          <div class="row">
 
@@ -100,11 +94,11 @@
 </div>
 
 <?php if(!$this->agent->is_mobile()){ ?>
-<div class="home-mosa">
+<div id="mosa-screen" class="home-mosa">
 
         <div class="home-mosa-stats">
             <img src="<?php echo img_url('logo-blue.png');?>">
-            <h2>XXX Followers on Instagram.</h2>
+            <h2><?php echo $title; ?></h2>
             <p>The most convenient way to measure 
 the accuracy of your mechanical watch.</p>
         </div>

assets/css/main.css

@@ -785,7 +785,8 @@ button[name=syncDone],
   box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #929292 inset;
 }
 
-.mejs-container .mejs-controls { visibility:hidden !important; }
+.mejs-container .mejs-controls{ visibility:hidden !important; }
+
 
 .slogan-home h1{
   color: #FFFFFF;
@@ -911,4 +912,9 @@ footer .links{
 
  #demo-fourth-step{
   margin-top: 50px;
+ }
+
+ video{
+  background-color: black;
+  opacity: 0.7;
  }

assets/js/application.js

@@ -11,25 +11,6 @@ $(document).ready(function()
        resizeContent();
     });
 
-    setInterval("changeBackground()", 7000);
-
-
-    $(window).scroll(function()
-    {
-        if(window.location.pathname == "/")
-        {
-             if( $(window).scrollTop() >= '70')
-            {
-                $('header').addClass('blue');   
-            }
-            else
-            {
-                $('header').removeClass('blue');   
-            }
-        }
-
-    });
-
     /*
      * Modal Update
      */

assets/js/home.logic.js

@@ -2,22 +2,76 @@
 var delta =  Math.floor((Math.random() * 10) + 1) - 5;
 var d;
 
+var activeIndex = 0;
+var possibleIndex = ["home-video", "demo-screen", "mosa-screen"];
+var animationUnderWay = false;
+var timeouts = [];
+
 $( window ).resize(function() {
   initSize();
 });
 
+
+
 $( document ).ready(function() {
 
+
+    var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
+    $(window).bind(mousewheelevt, function(e){
+
+        if(!animationUnderWay){
+            for (var i=0; i<timeouts.length; i++) {
+                clearTimeout(timeouts[i]);
+            }
+
+            $("#demo-second-step").show();
+            $("#demo-third-step").hide();
+            $("#demo-fourth-step").hide();
+            $("#demo-sync-time").html(5);
+            $("#inputUserTime").val("");
+            $("#demo-pointer").removeAttr('style');
+
+            animationUnderWay = true;
+            var evt = window.event || e //equalize event object     
+            evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
+            var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
+
+            if(delta > 0) {
+                activeIndex = activeIndex -1;
+            } else {
+                activeIndex = activeIndex +1;
+            }   
+
+            if(activeIndex!==0){
+                $('header').addClass('blue');   
+            }else{
+                $('header').removeClass('blue');   
+            }
+
+            if(activeIndex === 1){
+                timeouts.push(setTimeout(countDownDisplay, 1000));
+            }
+
+            $('html, body').animate({
+                scrollTop: $("#"+possibleIndex[activeIndex]).offset().top - 70
+            }, 2000, function() {
+                animationUnderWay = false;
+            });
+        }else{
+            e.preventDefault();
+        }
+
+    });
+
     $("#demo-third-step").hide();
     $("#demo-fourth-step").hide();
 
     initSize();
 
 
-    $('video,audio').mediaelementplayer({features: []});
-
-    $(".continue").click(function(){
-        setTimeout(countDownDisplay, 1000);
+    $('video,audio').mediaelementplayer({
+        enableAutosize: true,
+        features: []
     });
 
     $( "#demo-cta" ).click(function() {
@@ -27,16 +81,20 @@ $( document ).ready(function() {
         $("#demo-pointer").hide();
         $("#demo-third-step").hide();
         $("#demo-fourth-step").fadeToggle();
-        console.log();
         $(".watch-accuracy").html(result.toFixed(0));
     });
 
 
 });
 
+function initCounDown(){
+
+}
+
 function initSize(){
 
-    var windowHeight = $(window).height();   
+    var windowHeight = $(window).height();  
+
     var headerHeight = $('header').height();   
     var sloganHeight = $(".slogan-home");
     var windowRealHeight = windowHeight - headerHeight;
@@ -63,7 +121,7 @@ function countDownDisplay(){
 
     $("#demo-sync-time").html(countdown - 1);
     if(countdown > 1){
-        setTimeout(countDownDisplay, 1000);
+        timeouts.push(setTimeout(countDownDisplay, 1000));
     }else{
         d = new Date(new Date().getTime());
         similateInput();
@@ -115,7 +173,7 @@ function writeToInput(text, i){
     if(i < text.length){
         $("#inputUserTime").val($("#inputUserTime").val() + text.charAt(i));
         i = i +1;
-        setTimeout(writeToInput, Math.round(Math.random() * (300 - 100) + 100), text, i);
+        timeouts.push(setTimeout(writeToInput, Math.round(Math.random() * (300 - 100) + 100), text, i));
     }else{
         clickCTA();
     }