zachdrago/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Fuzzy clock" />

<script src="https://dl.dropboxusercontent.com/u/804978/%23hexClock/jquery-ui.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/804978/%23hexClock/jquery-1.3.2.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/804978/%23hexClock/fuzzyclock.js"></script>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

<link href='http://fonts.googleapis.com/css?family=Lato:100, 200, 300, 400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:100, 200, 300, 400' rel='stylesheet' type='text/css'>

<!-- <script src="jquery.min.js"></script> -->
</head>


<body onload="dotime()" style="transition: all 0.8s; -webkit-transition: all 0.8s; background: rgb(32, 53, 67);">

	<table>
		<tbody>
		<tr>
			<td>
				<h3 id="fuzzy-clock"></h3>
			</td>
		</tr>
			<tr>
				<td id="numbers" height="100%" width="100%" align="center" valign="middle">
					<h1 id="t">00 : 46 : 59</h1>
					<h2 id="h">#004659</h2>
				</td>
			</tr>
		</tbody>
	</table>


<script>
	$( function(){
		$( 'h3' ).fuzzyclock();
	} )
</script>

<script type="text/javascript">


	function dotime(){

		$("body").css({"transition": "all 0.8s", "-webkit-transition": "all 0.8s"});

		var d = new Date();
		var hours = d.getHours();
		var mins = d.getMinutes();
		var secs = d.getSeconds();

		if (hours < 10){hours = "0" + hours};
		if (mins < 10){mins = "0" + mins};
		if (secs < 10){secs = "0" + secs};

		hours.toString();
		mins.toString();
		secs.toString();

		var hex = "#" + hours + mins + secs;

		$("#t").html(hours +" : "+ mins +" : "+ secs);
		$("#h").html(hex);

		document.body.style.background = hex;

		setTimeout(function(){ dotime();}, 1000);
	}</script>


</body>
</html>

## jsbin.wolala.css
h3 {
		color: #fff;
		text-align: center;
		font-size: 6em;
		font-weight: 100;
		font-family: 'Lato', sans-serif;
		text-shadow: 0px 0px 30px #6a6a6a;

	}

	@media all and (max-width: 1024px) {

		h1 {
		  width: 300px;
      height: 60px;
      border: solid .5px white;
      border-bottom: none;
      padding-top: 20px;
		  font-family: 'Lato', sans-serif;
			font-size: 2em;
			font-weight: 100;
			color: white;
			transition:all 0.6s;
			-webkit-transition:all 0.6s;
			text-shadow: 0px 0px 2px #cccccc;
		}

		h2 {
		  width: 300px;
      height: 60px;
      border: solid .5px white;
      border-top: none;
			font-family: 'Lato', sans-serif;
			font-size: 2em;
			font-weight: 100;
			color: white;
			transition:all 0.6s;
			-webkit-transition:all 0.6s;
			margin-top: -20px;
			text-shadow: 0px 0px 2px #cccccc;
		}

	}

	@media all and (min-width: 1024px) {

		h1 {
			font-family: 'Lato', sans-serif;
			font-size: 2em;
			font-weight: 100;
			color: white;
			transition:all 0.6s;
			-webkit-transition:all 0.6s;
			text-shadow: 0px 0px 2px #cccccc;
		}
		h2 {
			font-family: 'Lato', sans-serif;
			font-size: 2em;
			font-weight: 100;
			color: white;
			transition:all 0.6s;
			-webkit-transition:all 0.6s;
			margin-top: -20px;
			text-shadow: 0px 0px 2px #cccccc;
		}

		}

		table {
			position:absolute;
			width:100%;
			height:100%;
			top:0px;
			left:0px;
		}

		td#numbers {
			position: fixed;
			top: 420px;
		}

## jsbin.wolala.js
/**
 * @author Horia Dragomir hdragomir@gmail.com http://hdragomir.com
 */
var fuzzyclock = function( element, options ){
	var fz = {
		/** holds the actual element */
		canvas : null,
		/** holds the current date object */
		date : null,
		/** holds the compiled time string */
		timeString : '',
		/** holds the interval id */
		interval : 0,
		/** public options */
		options : {
			"interval" : 180000,
			'silent' : true
		},
		/** mapps numbers to words for hours */
		hoursAsStringArray : [
			'twelve',
			'one',
			'two',
			'three',
			'four',
			'five',
			'six',
			'seven',
			'eight',
			'nine',
			'ten',
			'eleven',
			'twelve'
		],

		/** maps numbers to words for minutes
		 * or actually their ranges
		*/
		minutesAsStringArray : {
            "3"     : 'a just about',
			"5" 	: 'five',
			"10"	: 'ten',
			"15"	: 'quarter',
			"20"	: 'twenty',
			"30"	: 'half',
            "56"	: 'a little'

		},

        /** maps what comes before the hour. */
        preprefixes : { "its" : "it's"},
        prefixes : {"nearly" : 'nearly', 'almost' : "almost"},

		/** maps what comes in between the verbal representation of minutes
		 * and the verbal representation of hours
		 * ignored if time is sharp ( :56 -> :04 )
		*/
		infixes : { "to" : 'to', "past" : 'past', "after" : 'after', "before" : 'before'},

        /** appended to the time string when hour is sharp ( :56 -> :04 ) */
		postfixes : { "sharp" : "o'clock" },

        /**
		 * function update
		 * regenerates internal timestring and then calls the draw function
		*/
		update : function(){
			this.date = new Date();

			var hours = this.date.getHours(),
				minutes = this.date.getMinutes(),
				MASA = this.minutesAsStringArray,
				hoursAsString, minutesAsString, infix, preprefix = " ", prefix = " ", postfix = '';

            if ( minutes <= 33 ) {
				infix = this.infixes.past;
			} else {
				infix = this.infixes.to;
				minutes = 60 - minutes;
				hours++;
			}

			hours >= 12 && ( hours -= 12 );
			hoursAsString = this.hoursAsStringArray[ hours ];

			if ( minutes <= 4 ) {
                preprefix = this.preprefixes.its;
				minutesAsString = MASA['3'];
                postfix = this.postfixes.sharp;
			} else if ( minutes <= 8 ) {
				minutesAsString = MASA['5'];
			} else if ( minutes <= 13 ) {
				minutesAsString = MASA['10'];
                infix = this.infixes.after;
			} else if ( minutes <= 19 ) {
				minutesAsString = MASA['15'];
			} else if ( minutes < 27 ) {
				minutesAsString = MASA['20'];
			} else if ( minutes < 35 ){
				minutesAsString = MASA['30'];
			} else {
              minutesAsString = MASA['56'];
            }

            this.timeString = preprefix + " " + prefix + " " + minutesAsString + " " + infix + " " + hoursAsString + " " + postfix;
			return this.draw();
		},

		/**
		 * function draw
		 * this function writes the current time string to the canvas element
		 * @param	override	{stirng}	set the canvas to a custom string
		 * @returns {funciton} 	this
		 * @private
		 */
		draw : function( override ) {
			var canvas = this.canvas.cloneNode( false );
			canvas.appendChild( this.canvas.ownerDocument.createTextNode( override || this.timeString ) );
			this.canvas.parentNode.replaceChild( canvas, this.canvas );
			this.canvas = canvas;
			return this;
		},
		/**
		 * function init
		 * saves the canvas and options
		 * @param 	element		{HTMLElement}	the element that holds the clock
		 * @param	options		{hash}			the options
		 * current options are:
		 * 		interval 	{number} 	the update frequency
		 * 		silent		{boolean}	whether to throw exceptions or not
		 *
		 * @throws Exception
		 * @returns {function} this
		 */
		init : function( element, options ){

			this.options.interval = options.interval || this.options.interval;

			for( var opt in options ){
				this.options[opt] = options[opt];
			}

			this.canvas = element;

			if( ! this.canvas && ! this.options.silent ){
				throw 'fuzzyClock : Could not do anything with "' + element + '"';
			}

			return this.start();
		},
		/**
		 * function start
		 * sets the update interval, uses scope binding.
		 * calls the update function
		 * @returns {function} this ( via this.update() )
		 */
		start : function(){
			this.interval = window.setInterval( ( function( scope ){
				return function(){
					scope.update.call( scope );
				};
			} )( this ), this.options.interval );
			return this.update();
		},
		/**
		 * function stop
		 * clears the update interval
		 * @returns {function} this
		 */
		stop : function(){
			window.clearInterval( this.interval );
			return this;
		},
		/**
		 * convenient method to get the time string
		 */
		toString : function(){
			return this.timeString;
		}
	},
	/** preset the canvas to null */
	el;

	/** if we got a selector */
	if( 'string' == typeof element ){
		/** try the classic method */
		el = document.getElementById( element.replace( /^#/, '' ) ) ||
			/** if the browser supports advanced selectors, try finding the element this way  */
			( document.querySelector && ( el = document.querySelector( element ) ) );
	} else {
		/** assume we received an HTMLElement */
		el = element;
	}
	/** we'll be using options.***, so it would suck if it was null */
	options = options || {};
	/** cal the initialization function
	 * @see fz.init
	 */
	return fz.init( el, options );
};

if( 'undefined' != typeof jQuery )
	jQuery.fn.fuzzyclock = function( options ){
		return this.each( function(){
			$( this ).data( 'fuzzyclock', new fuzzyclock( this, options ) );
		} );
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Fuzzy clock" />

	<script src="https://dl.dropboxusercontent.com/u/804978/%23hexClock/jquery-ui.min.js"></script>
	<script src="https://dl.dropboxusercontent.com/u/804978/%23hexClock/jquery-1.3.2.min.js"></script>
	<script src="https://dl.dropboxusercontent.com/u/804978/%23hexClock/fuzzyclock.js"></script>


	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

	<link href='http://fonts.googleapis.com/css?family=Lato:100, 200, 300, 400' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Raleway:100, 200, 300, 400' rel='stylesheet' type='text/css'>

	<!-- <script src="jquery.min.js"></script> -->
	</head>


	<body onload="dotime()" style="transition: all 0.8s; -webkit-transition: all 0.8s; background: rgb(32, 53, 67);">

	<table>
	<tbody>
	<tr>
	<td>
	<h3 id="fuzzy-clock"></h3>
	</td>
	</tr>
	<tr>
	<td id="numbers" height="100%" width="100%" align="center" valign="middle">
	<h1 id="t">00 : 46 : 59</h1>
	<h2 id="h">#004659</h2>
	</td>
	</tr>
	</tbody>
	</table>



	<script>
	$( function(){
	$( 'h3' ).fuzzyclock();
	} )
	</script>

	<script type="text/javascript">


	function dotime(){

	$("body").css({"transition": "all 0.8s", "-webkit-transition": "all 0.8s"});

	var d = new Date();
	var hours = d.getHours();
	var mins = d.getMinutes();
	var secs = d.getSeconds();

	if (hours < 10){hours = "0" + hours};
	if (mins < 10){mins = "0" + mins};
	if (secs < 10){secs = "0" + secs};

	hours.toString();
	mins.toString();
	secs.toString();

	var hex = "#" + hours + mins + secs;

	$("#t").html(hours +" : "+ mins +" : "+ secs);
	$("#h").html(hex);

	document.body.style.background = hex;

	setTimeout(function(){ dotime();}, 1000);
	}</script>




	</body>
	</html>
	h3 {
	color: #fff;
	text-align: center;
	font-size: 6em;
	font-weight: 100;
	font-family: 'Lato', sans-serif;
	text-shadow: 0px 0px 30px #6a6a6a;

	}

	@media all and (max-width: 1024px) {

	h1 {
	width: 300px;
	height: 60px;
	border: solid .5px white;
	border-bottom: none;
	padding-top: 20px;
	font-family: 'Lato', sans-serif;
	font-size: 2em;
	font-weight: 100;
	color: white;
	transition:all 0.6s;
	-webkit-transition:all 0.6s;
	text-shadow: 0px 0px 2px #cccccc;
	}

	h2 {
	width: 300px;
	height: 60px;
	border: solid .5px white;
	border-top: none;
	font-family: 'Lato', sans-serif;
	font-size: 2em;
	font-weight: 100;
	color: white;
	transition:all 0.6s;
	-webkit-transition:all 0.6s;
	margin-top: -20px;
	text-shadow: 0px 0px 2px #cccccc;
	}

	}

	@media all and (min-width: 1024px) {

	h1 {
	font-family: 'Lato', sans-serif;
	font-size: 2em;
	font-weight: 100;
	color: white;
	transition:all 0.6s;
	-webkit-transition:all 0.6s;
	text-shadow: 0px 0px 2px #cccccc;
	}
	h2 {
	font-family: 'Lato', sans-serif;
	font-size: 2em;
	font-weight: 100;
	color: white;
	transition:all 0.6s;
	-webkit-transition:all 0.6s;
	margin-top: -20px;
	text-shadow: 0px 0px 2px #cccccc;
	}

	}

	table {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	}

	td#numbers {
	position: fixed;
	top: 420px;
	}
	/**
	* @author Horia Dragomir hdragomir@gmail.com http://hdragomir.com
	*/
	var fuzzyclock = function( element, options ){
	var fz = {
	/** holds the actual element */
	canvas : null,
	/** holds the current date object */
	date : null,
	/** holds the compiled time string */
	timeString : '',
	/** holds the interval id */
	interval : 0,
	/** public options */
	options : {
	"interval" : 180000,
	'silent' : true
	},
	/** mapps numbers to words for hours */
	hoursAsStringArray : [
	'twelve',
	'one',
	'two',
	'three',
	'four',
	'five',
	'six',
	'seven',
	'eight',
	'nine',
	'ten',
	'eleven',
	'twelve'
	],

	/** maps numbers to words for minutes
	* or actually their ranges
	*/
	minutesAsStringArray : {
	"3" : 'a just about',
	"5" : 'five',
	"10" : 'ten',
	"15" : 'quarter',
	"20" : 'twenty',
	"30" : 'half',
	"56" : 'a little'

	},

	/** maps what comes before the hour. */
	preprefixes : { "its" : "it's"},
	prefixes : {"nearly" : 'nearly', 'almost' : "almost"},

	/** maps what comes in between the verbal representation of minutes
	* and the verbal representation of hours
	* ignored if time is sharp ( :56 -> :04 )
	*/
	infixes : { "to" : 'to', "past" : 'past', "after" : 'after', "before" : 'before'},

	/** appended to the time string when hour is sharp ( :56 -> :04 ) */
	postfixes : { "sharp" : "o'clock" },

	/**
	* function update
	* regenerates internal timestring and then calls the draw function
	*/
	update : function(){
	this.date = new Date();

	var hours = this.date.getHours(),
	minutes = this.date.getMinutes(),
	MASA = this.minutesAsStringArray,
	hoursAsString, minutesAsString, infix, preprefix = " ", prefix = " ", postfix = '';

	if ( minutes <= 33 ) {
	infix = this.infixes.past;
	} else {
	infix = this.infixes.to;
	minutes = 60 - minutes;
	hours++;
	}

	hours >= 12 && ( hours -= 12 );
	hoursAsString = this.hoursAsStringArray[ hours ];

	if ( minutes <= 4 ) {
	preprefix = this.preprefixes.its;
	minutesAsString = MASA['3'];
	postfix = this.postfixes.sharp;
	} else if ( minutes <= 8 ) {
	minutesAsString = MASA['5'];
	} else if ( minutes <= 13 ) {
	minutesAsString = MASA['10'];
	infix = this.infixes.after;
	} else if ( minutes <= 19 ) {
	minutesAsString = MASA['15'];
	} else if ( minutes < 27 ) {
	minutesAsString = MASA['20'];
	} else if ( minutes < 35 ){
	minutesAsString = MASA['30'];
	} else {
	minutesAsString = MASA['56'];
	}

	this.timeString = preprefix + " " + prefix + " " + minutesAsString + " " + infix + " " + hoursAsString + " " + postfix;
	return this.draw();
	},

	/**
	* function draw
	* this function writes the current time string to the canvas element
	* @param override {stirng} set the canvas to a custom string
	* @returns {funciton} this
	* @private
	*/
	draw : function( override ) {
	var canvas = this.canvas.cloneNode( false );
	canvas.appendChild( this.canvas.ownerDocument.createTextNode( override \|\| this.timeString ) );
	this.canvas.parentNode.replaceChild( canvas, this.canvas );
	this.canvas = canvas;
	return this;
	},
	/**
	* function init
	* saves the canvas and options
	* @param element {HTMLElement} the element that holds the clock
	* @param options {hash} the options
	* current options are:
	* interval {number} the update frequency
	* silent {boolean} whether to throw exceptions or not
	*
	* @throws Exception
	* @returns {function} this
	*/
	init : function( element, options ){

	this.options.interval = options.interval \|\| this.options.interval;

	for( var opt in options ){
	this.options[opt] = options[opt];
	}

	this.canvas = element;

	if( ! this.canvas && ! this.options.silent ){
	throw 'fuzzyClock : Could not do anything with "' + element + '"';
	}

	return this.start();
	},
	/**
	* function start
	* sets the update interval, uses scope binding.
	* calls the update function
	* @returns {function} this ( via this.update() )
	*/
	start : function(){
	this.interval = window.setInterval( ( function( scope ){
	return function(){
	scope.update.call( scope );
	};
	} )( this ), this.options.interval );
	return this.update();
	},
	/**
	* function stop
	* clears the update interval
	* @returns {function} this
	*/
	stop : function(){
	window.clearInterval( this.interval );
	return this;
	},
	/**
	* convenient method to get the time string
	*/
	toString : function(){
	return this.timeString;
	}
	},
	/** preset the canvas to null */
	el;

	/** if we got a selector */
	if( 'string' == typeof element ){
	/** try the classic method */
	el = document.getElementById( element.replace( /^#/, '' ) ) \|\|
	/** if the browser supports advanced selectors, try finding the element this way */
	( document.querySelector && ( el = document.querySelector( element ) ) );
	} else {
	/** assume we received an HTMLElement */
	el = element;
	}
	/ we'll be using options., so it would suck if it was null /
	options = options \|\| {};
	/** cal the initialization function
	* @see fz.init
	*/
	return fz.init( el, options );
	};

	if( 'undefined' != typeof jQuery )
	jQuery.fn.fuzzyclock = function( options ){
	return this.each( function(){
	$( this ).data( 'fuzzyclock', new fuzzyclock( this, options ) );
	} );
	};