// Javascript Clock.
// Requires MochiKit

/* Constructor */
function Clock(base_name){
    // Date properties
    this.days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
    this.months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'Novemeber', 'December');
    
    // Display properties...
    this.base_name = base_name;
    this.pos_x = 10;
    this.pos_y = 10;
    this.width = 200;
    this.height = 60;
    this.from_right = false;
    this.time_sep = ':';
    
    // Timers.
    this.refresh_interval = 500;
    this.ticker = null;  
}

Clock.prototype.Update = function(){
    this.date = new Date();
    this.hours = this.date.getHours();
    this.mins = this.date.getMinutes();
    this.secs = this.date.getSeconds();
    this.dow = this.date.getDay();
    this.day = this.date.getDate();
    this.month = this.date.getMonth();
    this.year = this.date.getFullYear();
    if((this.day == 1)||(this.day == 21)||(this.day == 31)){ this.day_suff = 'st'; }
    else if((this.day == 2)||(this.day == 22)){ this.day_suff = 'nd'; }
    else if((this.day == 3)||(this.day == 23)){ this.day_suff = 'rd'; }
    else { this.day_suff = 'th'; }
}

Clock.prototype.Draw = function(){
    document.write('<div id="' + this.base_name + '" style="background-color: white; position: absolute; top: 10px; right: 10px; width: 200px; height: 32px; border: solid 1px blue; font-family: helvetica, monospaced; font-size: 14px;">');
    document.write('<div id="' + this.base_name + '_time" style="font-size: 20pt; text-align: center; margin: auto; width: 200px;"></div>');
    document.write('<div id="' + this.base_name + '_date" style="display: none; text-align: center; margin: auto; width: 200px;"></div>');
    document.write('</div>');
    var self = this;
    document.getElementById(this.base_name).addEventListener('click', function(){ self.ShowDate(); setTimeout(self.ShowTime, 3000); }, false);
    this.Refresh();
}

Clock.prototype.Refresh = function(){
    this.Update();
    if(this.time_sep == ':'){ this.time_sep = ' '; } else { this.time_sep = ':'; }
    if(this.hours < 10){ this.hours = '0' + this.hours; }
    if(this.mins < 10){ this.mins = '0' + this.mins; }
    if(this.secs < 10){ this.secs = '0' + this.secs; }
    document.getElementById(this.base_name + '_time').innerHTML = this.hours + ':' + this.mins;
    document.getElementById(this.base_name + '_date').innerHTML = this.days[this.dow] + '<br />' + this.day + this.day_suff + ' ' + (this.months[this.month]) + ' ' + this.year;
    var self = this;
    this.ticker = setTimeout(function(){ self.Refresh(); }, this.refresh_interval);
}

Clock.prototype.ShowDate = function(){
    document.getElementById(this.base_name + '_time').style.display = 'none';
    document.getElementById(this.base_name + '_date').style.display = 'block';
}

Clock.prototype.ShowTime = function(){
    document.getElementById(this.base_name + '_time').style.display = 'block';
    document.getElementById(this.base_name + '_date').style.display = 'none';
}