/**********author: AKS (aksus-69@yandex.ru)**********

 ********************DigitalClock********************/


function fnDigitalClock() { 

	/* Get <div> element that will be placeholder for "DigitalClock" */ 

	var oClockPlace /*: HTMLElement */ = document.getElementById("ClockPlace"), 

	/* aTimeCell will be collection of <span> elements */	
	
	aTimeCell /*: Array */ = [], 

	/* The thing that stores color value for separator ":"*/ 

	sSeparatorColor /*: String */ = "", 

	/* Two color values 
	   !!! exactly like #ClockPlace background-color & color values */ 
 
	sBackgroundColor /*: String */ = "#3F3F3F", 
	sFontColor /*: String */ = "#ffffff", 

	
	bChanger /*: boolean */ = false;  

	/* Create <span> elements */ 

	for(var i = 0; i < 5; i++) { 
		aTimeCell[i] /*: HTMLElement */ = document.createElement("span"); 
		aTimeCell[i].appendChild(document.createTextNode(":")); 

	/* Append new <span> elements to parent element (oClockPlace) */ 

		oClockPlace.appendChild(aTimeCell[i]); 
	}  

	/* Create a temporary function named fnClockWork */ 

	var fnClockWork = function() { 

	/* Create pointer to new Date */ 

		var oDate = new Date,  

	 	/* Get hours, minutes and seconds */ 

		iHours = oDate.getHours(),   
		iMinutes = oDate.getMinutes(),     
		iSeconds = oDate.getSeconds(); 

		bChanger = !bChanger;

		/* Each time when fnClockWork is called sSeparatorColor value will be changed */ 

		sSeparatorColor = (bChanger) ? sFontColor : sBackgroundColor;   

		/* Refresh content of every <span> element */ 

		aTimeCell[0].firstChild.data = (iHours < 10) ? "0" + iHours : iHours; 
		aTimeCell[2].firstChild.data = (iMinutes < 10) ? "0" + iMinutes : iMinutes; 
		aTimeCell[4].firstChild.data = (iSeconds < 10) ? "0" + iSeconds : iSeconds; 

		/* Change color of <span> elements that holds separator ":" */ 

		//aTimeCell[1].style.color = aTimeCell[3].style.color = sSeparatorColor;  
	} 

	/* Call fnClockWork to start clock ticking down */ 

	fnClockWork(); 

	/* Set inteval for fnClockWork */ 

	setInterval(fnClockWork, 500); 
} 

/* If you need, use DOM methods to handle onload event */

onload = fnDigitalClock;  
