// parent object for all clock types
// osrt of abstract class
function Clock(clockID) { 

    // default id and run interval return code
    this.clockId = "clockID";
    this.setIntervalReturnCode = '';

    // one can now change this and change the time that the update occurs
    this.updateInterval = 1000;

    // reference back to self
    var clockObj = this;

}

// function to start a clock
Clock.prototype.startClock = function() {
    // create an object to reference later
    var clockObj = this;

    // create a variable as a pointer to this function
    var runClock = function() { clockObj.runClock(); }

    //call the set timeout function with our function and one second
    this.setIntervalReturnCode = window.setInterval(runClock, this.updateInterval);
}

// function to stop a clock
Clock.prototype.stopClock = function() { clearTimeout(this.setIntervalReturnCode); } 

// function to set the id
Clock.prototype.setId = function(clockId) { this.clockId = clockId; }

// default function to run the clock that should be overridden by subclas
Clock.prototype.runClock = function() { throw("Override this function"); }

// pretty basic and stupid thing to show a digital clock
// clockId is the id of an element that supports innerHTML
function DigitalClock() {
	this.clockText = "Time: ";
	
	this.showSeconds = true;
}

DigitalClock.prototype = new Clock;

// the meat of the object
// this actually updates the clock
DigitalClock.prototype.runClock = function() { 
    var datenow = new Date();

    var hrs = datenow.getHours();
    var min = datenow.getMinutes();
    var sec = datenow.getSeconds();
	
    min = (min < 10 ) ? "0" + min : min ;
    sec = (sec < 10 ) ? "0" + sec : sec ;

    var clockformat = this.clockText + hrs + ":" + min + ":" + sec;

    // one could turn off seconds and only show minutes
    // then one could also setup the updateInterval for 60000
    // so we only update the clock every minute
    if ( ! this.showSeconds ) { clockformat = clockText + hrs + ":" + min; }

    var clock = "";
    if ( document.getElementById ) {
        clock = document.getElementById(this.clockId);
        // no clock return
        if ( clock == "" ) { 
            return false;
        }
        clock.innerHTML = clockformat;
     } else {
        // only support browser that are newer
        return false;
    }
    return true;
}


function BinaryClock() { 

    // this sets up the columns and rows
    var rows = 4;
    var cols = 6;
                
    // this sets a column of data based on the time part that is passed in
    var setColumnData = function(column, timeComponent) { 
        var binaryTime = WebBrowser.math.convertFromBaseTenToBaseX(2, timeComponent);
        var bhlen = new String(binaryTime).length;
        var diff = rows - bhlen;
        for ( var j = 0; j < diff; j+=1 ) { 
            var tdid = this.clockId + "_row_" + j + "_col_" + column;
            var tdObj = document.getElementById(tdid);
            if ( tdObj ) { tdObj.innerHTML = "0"; }
        }
        var d = 0;
        for ( var j = rows-1; j >= diff; j-=1 ) { 
            var trd = (+d) + (+diff);
            var on = binaryTime.substring(d,d+1);
            var tdid = this.clockId + "_row_" + trd + "_col_" + column;
            var tdObj = document.getElementById(tdid);
            if ( tdObj ) { tdObj.innerHTML = on; }
            d += 1;
        }
    }

    this.setColumn = function(start, data) {  
        // is it less than 10
        if ( data >= 10 ) { 
            var sh = new String(data);
            setColumnData.call(this, start, sh.substring(0,1));	
            setColumnData.call(this, start+1, sh.substring(1));	
        } else {
            setColumnData.call(this, start, 0);	
            setColumnData.call(this, start+1, data);	
        }
    }

     this.render = function() { 
         var parent = document.getElementById(this.clockId);
         if ( parent ) { 
             var data = '<table>';
             for ( var i = 0; i < rows; i += 1 ) { 
                 data += '<tr>';
                 for ( var j = 0; j < cols; j += 1 ) { 
                     var tdid = this.clockId + "_row_" + i + "_col_" + j;
                     data += '<td id="' + tdid + '"></td>';
                 }
                 data += '</tr>';
             }
             data += '</table>';
             parent.innerHTML = data;
         }
         this.runClock();
      }						
}

BinaryClock.prototype = new Clock;

BinaryClock.prototype.runClock = function() { 

    var today = new Date();
    var hour = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();
    
    this.setColumn(0, hour);
    this.setColumn(2, min);
    this.setColumn(4, sec);
}