<aura:component controller="CaseLogController" 
                implements="force:appHostable,flexipage:availableForAllPageTypes"
                access="global">

    <!--Include the css from static resource-->
    <ltng:require styles="{!$Resource.SLDS +
             '/assets/styles/salesforce-lightning-design-system-ltng.css'}"  afterScriptsLoaded="{!c.doScriptLoad}"/>

    <aura:attribute name="start" type="String"/>
    <aura:attribute name="stop" type="String"/>
    <aura:attribute name="sObj" type="String"/>
    <aura:attribute name="field" type="String"/>
    <aura:attribute name="stopwatch" type="Object"/>
    <aura:attribute name="LogEntry" type="Case_Log__c[]"/>
    
    <!-- Handle component initialization in a client-side controller -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="slds-clearfix slds-card">
		<div class="slds-text-heading_medium slds-align_absolute-center">
            <div aura:id="time">
                Time: 00:00:00
            </div>
        </div>
        <div class="slds-button-group slds-align_absolute-center" role="group">
                <button id="start" class="slds-button slds-button_success" onclick="{!c.onClick}">Start</button>
                <button id="stop" class="slds-button slds-button_brand" onclick="{!c.onClick}">Pause</button>
                <button id="reset" class="slds-button slds-button_destructive" onclick="{!c.onClick}">Finish</button>
        </div>
        
           <ul>
      <aura:iteration items="{!v.LogEntry}" var="log">
         <li type="dice">Entry Name : {!log.Name}</li>
         <hr/>
      </aura:iteration>
   </ul>
    </div>
</aura:component>

({
     doInit: function(component, event, helper) {
     //call apex class method
      var action = component.get("c.getLogEntry");
      action.setCallback(this, function(response) {
       //store state of response
       var state = response.getState();
       if (state === "SUCCESS") {
        //set response value in LogEntry attribute on component.
        component.set('v.LogEntry', response.getReturnValue());
       }
      });
      $A.enqueueAction(action);
     },
    doScriptLoad : function(component, event, helper) {

	},

    onClick : function(component, event, helper) {
        var div = component.find("time").getElement();
        var id = event.target.id;
        var	clsStopwatch = function() {
            // Private vars
            var	startAt	= startAt || 0;	// Time of last start / resume. (0 if not running)
            var	lapTime	= lapTime || 0;	// Time on the clock when last stopped in milliseconds

            var	now	= function() {
                return (new Date()).getTime();
            };

            // Public methods
            // Start or resume
            this.start = function() {
                
    
                startAt	= startAt ? startAt : now();
            };

            // Stop or pause
            this.stop = function() {
                // If running, update elapsed time otherwise keep it
                lapTime	= startAt ? lapTime + now() - startAt : lapTime;
                startAt	= 0; // Paused
            };

            // Reset
            this.reset = function() {
                lapTime = startAt = 0;
            };

            // Duration
            this.time = function() {
                return lapTime + (startAt ? now() - startAt : 0);
            };
        };

        var stopwatch = component.get("v.stopwatch");
        var x = stopwatch || new clsStopwatch();
        if(!stopwatch){
        	component.set("v.stopwatch", x);
        }

        function pad(num, size) {
            var s = "0000" + num;
            return s.substr(s.length - size);
        }

        function formatTime(time) {
            var h = 0;
            var m = 0;
            var s = 0;
            var newTime = '';

            h = Math.floor( time / (60 * 60 * 1000) );
            time = time % (60 * 60 * 1000);
            m = Math.floor( time / (60 * 1000) );
            time = time % (60 * 1000);
            s = Math.floor( time / 1000 );

            newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2); 
            return newTime;
        }

        function update() {
            div.innerHTML = "Time: " + formatTime(x.time());
        }

   		switch(id){
            case "start":
                
                setInterval(update, 1000);
                x.start();
                break;
            case "stop":
                x.stop();
                update();
                break;
            case "reset":
                x.stop();
                x.reset();
                update();
                break;
            default:
                stop();
                break;
        }
        

	}
})

public with sharing class CaseLogController {

    public static List<Case_log__c> getLogEntry() {
        list<Case_Log__c> l = [SELECT Id, Case__c, Name, In_Progress__c, Length__c, Time__c 
                             		FROM Case_Log__c WHERE In_Progress__c = true LIMIT 1];
        
        if (l.size() == 0) {
            Case_log__c newlog = new Case_log__c();
            l.add(newlog);
            insert l;
        }
        return l;
    }
    
}