/**
 * @license
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

foam.CLASS({
  package: 'com.google.foam.demos.sevenguis',
  name: 'Timer',
  extends: 'foam.u2.Element',

  exports: [ 'as data' ],

  requires: [
    'foam.u2.ProgressView',
    'foam.u2.RangeView'
  ],

  axioms: [
    foam.u2.CSS.create({
      code: function() {/*
        ^ { padding: 10px !important; font-size: 18px; }
        ^ .elapsed { margin-top: 10px; }
        ^ .label { display: inline-block; width: 130px; }
        ^ .foam-u2-ActionView- { width: 332px !important; margin-top: 16px !important; }
        ^ input { margin-left: 12px; }
        ^ .foam-u2-RangeView- { width: 182px; }
        ^ row { display: block; min-height: 30px; }
      */}
    })
  ],

  properties: [
    {
      name: 'progress',
      label: 'Elapsed Time',
      expression: function(duration, elapsedTime) {
        return this.duration ? 100 * Math.min(1, 1000 * this.elapsedTime / this.duration) : 100;
      },
      view: { class: 'foam.u2.ProgressView' }
    },
    {
      name: 'elapsedTime',
      // units: 's',
      label: '',
      value: 0
    },
    {
      class: 'Int',
      name: 'duration',
      units: 'ms',
      view: { class: 'foam.u2.RangeView', maxValue: 10000 },
      value: 5000
    },
    {
      name: 'lastTick_',
      hidden: true,
      value: 0
    }
  ],

  methods: [
    function init() {
      this.SUPER();
      this.duration$.sub(this.tick);
      this.tick();
    },

    function initE() {
      this.
        addClass(this.myClass()).
        start('row').start('span').addClass('label').add('Elapsed Time:').end().add(this.PROGRESS).end().
        start('row').addClass('elapsed').add(this.elapsedTime$.map(function(t) { return t.toFixed(1); })).end().
        start('row').start('span').addClass('label').add('Duration:').end().add(this.DURATION).end().
        add(this.RESET);
    }
  ],

  actions: [
    function reset() {
      this.elapsedTime = this.lastTick_ = 0;
      this.tick();
    }
  ],

  listeners: [
    {
      name: 'tick',
      isFramed: true,
      code: function() {
        if ( 1000 * this.elapsedTime >= this.duration ) return;
        var now = Date.now();
        if ( this.lastTick_ ) this.elapsedTime += (now - this.lastTick_)/1000;
        this.elapsedTime = Math.min(this.duration/1000, this.elapsedTime);
        this.lastTick_ = now;
        this.tick();
      }
    }
  ]
});

@@ -835,74 +835,15 @@
 %0A%0A  
-axioms: %5B%0A    foam.u2.CSS.create(%7B%0A      code: function() %7B/*%0A    
+css: %60%0A
     
@@ -895,20 +895,16 @@
 ; %7D%0A    
-   
- 
 %5E .elaps
@@ -924,28 +924,24 @@
 op: 10px; %7D%0A
-    
     %5E .label
@@ -978,36 +978,32 @@
 h: 130px; %7D%0A    
-  
-  
 %5E .foam-u2-Actio
@@ -1063,28 +1063,24 @@
 mportant; %7D%0A
-    
     %5E input 
@@ -1098,28 +1098,24 @@
 ft: 12px; %7D%0A
-    
     %5E .foam-
@@ -1150,20 +1150,16 @@
 ; %7D%0A    
-   
- 
 %5E row %7B 
@@ -1200,26 +1200,9 @@
 %7D%0A  
-    */%7D%0A    %7D)%0A  %5D
+%60
 ,%0A%0A 

Update CSS style.