diff --git a/awhile.png b/awhile.png
new file mode 100644
index 0000000..a72e702
Binary files /dev/null and b/awhile.png differ
diff --git a/clock_new.html b/clock_new.html
new file mode 100644
index 0000000..43ae9bb
--- /dev/null
+++ b/clock_new.html
@@ -0,0 +1,248 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <style>
+      body {
+        margin: 0px;
+        padding: 0px;
+      }
+    </style>
+	<!--<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">-->
+  </head>
+  <body>
+      <img src="awhile.png" height = 80 width=1500>
+          <div id="output"></div>
+
+	<div id="container" ></div>
+    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
+	<!--<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>-->
+    <script defer="defer">
+		function drawSelector(sWidth,sHeight) {	
+			//constants
+			var MAX_ANGULAR_VELOCITY = 360 * 5;
+			var NUM_WEDGES = 25;
+			var ANGULAR_FRICTION = 0.2;
+
+			// globals
+			var target, stage, layer, controlled = false;
+			var wheels=new Array(), startRotation=new Array(), startX=new Array(), startY=new Array();
+			var angularVelocity=new Array(), lastRotation=new Array();
+			
+		function bind(wheelNum) {
+			wheels[wheelNum].on('mousedown', function(evt) {
+				var mousePos = stage.getPointerPosition();
+				target = this.id();
+				angularVelocity[target] = 0;
+				controlled = true;
+				startRotation[target] = this.rotation();
+				startX[target] = mousePos.x;
+				startY[target] = mousePos.y;
+
+			});
+        
+			// add listeners to container
+			document.body.addEventListener('mouseup', function() {	
+				controlled = false;
+				if(angularVelocity[target] > MAX_ANGULAR_VELOCITY) {
+					angularVelocity[target] = MAX_ANGULAR_VELOCITY;
+				}
+				else if(angularVelocity[target] < -1 * MAX_ANGULAR_VELOCITY) {
+					angularVelocity[target] = -1 * MAX_ANGULAR_VELOCITY;
+				}
+				angularVelocities = [];
+			}, false);
+
+			document.body.addEventListener('mousemove', function(evt) {
+				var mousePos = stage.getPointerPosition();
+				if(controlled && mousePos && target >= 0) {
+					var x1 = mousePos.x - wheels[target].x();
+					var y1 = mousePos.y - wheels[target].y();
+					var x2 = startX[target] - wheels[target].x();
+					var y2 = startY[target] - wheels[target].y();
+					var angle1 = Math.atan(y1 / x1) * 180 / Math.PI;
+					var angle2 = Math.atan(y2 / x2) * 180 / Math.PI;
+					var angleDiff = angle2 - angle1;
+				
+					if ((x1 < 0 && x2 >=0) || (x2 < 0 && x1 >=0)) {
+						angleDiff += 180;
+					}
+                                           
+                    wheels[target].setRotation(startRotation[target] - angleDiff);
+                                           
+                    var rot = wheels[1].getRotation() % 360
+                    if(rot<0) rot = 360+rot
+                    document.getElementById("output").innerHTML = "angle="+rot
+
+                                           
+                                           
+                    time =   [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]
+                    hours = time.map(function(x) { return x * 24; });
+                    minutes = time.map(function(x) { return x * 24*60; });
+                    seconds = time.map(function(x) { return x * 24*60*60; });
+                                           
+                    if(rot>334 || rot<25) {time = seconds}
+                    else if(rot>283)  {time = minutes}
+                    else if(rot>231) {time = hours}
+                    rot = wheels[0].getRotation()
+                    wheels[0] = createWheel(0,550,45,25,time,[204,204,204], stage, 600, 20)
+                    wheels[0].setRotation(rot)
+                    layer.add(wheels[0])
+                                           
+                                          
+				}
+			}, false);
+		}
+		
+		function init() {
+				stage = new Kinetic.Stage({
+				container: 'container',
+				width: sWidth,
+				height: sHeight
+			});
+			
+			// create layer
+			layer = new Kinetic.Layer();
+        
+			// create wheels
+			wheels[0] = createWheel(0,550,45,25,[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],[204,204,204], stage, 600, 20);
+			wheels[1] = createWheel(1,500,45,7,["Seconds","Minutes","Hours","Days","Weeks","Months","Decades"],[178,178,178], stage, 600, 30);
+			wheels[2] = createWheel(2,450,45,1,["Old on"],[153,153,153], stage, 600, 30);
+			wheels[3] = createWheel(3,400,45,31,[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],[128,128,128], stage, 600, 20);
+			wheels[4] = createWheel(4,350,45,12,[1,2,3,4,5,6,7,8,9,10,11,12],[102,102,102], stage, 600, 20);
+			wheels[5] = createWheel(5,300,45,40,[2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019],[77,77,77], stage, 600, 12);
+			wheels[6] = createWheel(6,250,250,1,["\nShare"],[153,153,153], stage, 600, 80);
+			
+			// add wheels to layer
+			layer.add(wheels[0]);
+			layer.add(wheels[1]);
+			layer.add(wheels[2]);
+			layer.add(wheels[3]);
+			layer.add(wheels[4]);
+			layer.add(wheels[5]);
+			layer.add(wheels[6]);
+			// add layer to stage
+			stage.add(layer);
+			
+			// wheels cache
+			wheels[0].cache({x: -1* 550,y: -1* 550,width: 550 * 2,height: 550 * 2}).offset({x: 550,y: 550});
+			wheels[1].cache({x: -1* 500,y: -1* 500,width: 500 * 2,height: 500 * 2}).offset({x: 500,y: 500});
+			wheels[3].cache({x: -1* 400,y: -1* 400,width: 400 * 2,height: 400 * 2}).offset({x: 400,y: 400});
+			wheels[4].cache({x: -1* 350,y: -1* 350,width: 350 * 2,height: 350 * 2}).offset({x: 350,y: 350});
+			wheels[5].cache({x: -1* 300,y: -1* 300,width: 300 * 2,height: 300 * 2}).offset({x: 300,y: 300});
+			
+			layer.draw();
+
+			// bind events
+			bind(0);bind(1);bind(3);bind(4);bind(5);
+			var anim0 = new Kinetic.Animation(function animate(frame) {
+					var angularVelocityChange = angularVelocity[0] * frame.timeDiff * (1 - ANGULAR_FRICTION) / 1000;
+					angularVelocity[0] -= angularVelocityChange;
+					angularVelocity[0] = ((wheels[0].getRotation() - lastRotation[0]) * 1000 / frame.timeDiff);
+					lastRotation[0] = wheels[0].getRotation();
+			}, layer);
+			anim0.start();
+			
+			var anim1 = new Kinetic.Animation(function animate(frame) {
+					var angularVelocityChange = angularVelocity[1] * frame.timeDiff * (1 - ANGULAR_FRICTION) / 1000;
+					angularVelocity[1] -= angularVelocityChange;
+					angularVelocity[1] = ((wheels[1].getRotation() - lastRotation[1]) * 1000 / frame.timeDiff);
+					lastRotation[1] = wheels[1].getRotation();
+			}, layer);
+			anim1.start();
+			blerg();
+			var anim3 = new Kinetic.Animation(function animate(frame) {
+					var angularVelocityChange = angularVelocity[3] * frame.timeDiff * (1 - ANGULAR_FRICTION) / 1000;
+					angularVelocity[3] -= angularVelocityChange;
+					angularVelocity[3] = ((wheels[3].getRotation() - lastRotation[3]) * 1000 / frame.timeDiff);
+					lastRotation[3] = wheels[3].getRotation();
+			}, layer);
+			anim3.start();
+			
+			var anim4 = new Kinetic.Animation(function animate(frame) {
+					var angularVelocityChange = angularVelocity[4] * frame.timeDiff * (1 - ANGULAR_FRICTION) / 1000;
+					angularVelocity[4] -= angularVelocityChange;
+					angularVelocity[4] = ((wheels[4].getRotation() - lastRotation[4]) * 1000 / frame.timeDiff);
+					lastRotation[4] = wheels[4].getRotation();
+			}, layer);
+			anim4.start();
+			
+			var anim5 = new Kinetic.Animation(function animate(frame) {
+					var angularVelocityChange = angularVelocity[5] * frame.timeDiff * (1 - ANGULAR_FRICTION) / 1000;
+					angularVelocity[5] -= angularVelocityChange;
+					angularVelocity[5] = ((wheels[5].getRotation() - lastRotation[5]) * 1000 / frame.timeDiff);
+					lastRotation[5] = wheels[5].getRotation();
+			}, layer);
+			anim5.start();
+		}
+		
+		function createWheel(wheelId, wheelRadius, wheelInnerRadius, numOfWedges, values, wheelColor, stage, wY, valueFont) {
+			var wheel, valueIndex=0;
+			wheel = new Kinetic.Group({
+				x: stage.getWidth() / 2,
+				y: wY,
+				id: wheelId
+			});
+			for(var n = 0; n < numOfWedges; n++) {
+				addWedge(n);
+			}
+			
+			function getValue() {
+				return values[valueIndex++] + '';
+			}
+			
+			function addWedge(n) {
+				var value = getValue();
+				var r = wheelColor[0];
+				var g = wheelColor[1];
+				var b = wheelColor[2];
+				var angle = 360 / numOfWedges;
+
+				var endColor = 'rgb(' + r + ',' + g + ',' + b + ')';
+				r += 100;g += 100;b += 100;
+				var startColor = 'rgb(' + r + ',' + g + ',' + b + ')';
+
+				var wedge = new Kinetic.Group({
+					rotation: n * 360 / numOfWedges,
+				});
+
+				var wedgeBackground = new Kinetic.Arc({
+					outerRadius: wheelRadius,
+					innerRadius: wheelRadius - wheelInnerRadius,
+					angle: angle,
+					fillRadialGradientStartRadius: 0,
+					fillRadialGradientEndRadius: wheelRadius,
+					fillRadialGradientColorStops: [0, startColor, 1, endColor],
+					fill: '#64e9f8',
+					fillPriority: 'radial-gradient',
+					/*stroke: '#ccc',*/
+					strokeWidth: 0,
+					rotation: (90 + angle/2) * -1
+				});
+
+				wedge.add(wedgeBackground);
+
+				var text = new Kinetic.Text({
+					text: value,
+					fontFamily: 'Calibri',
+					fontSize: valueFont,
+					fill: 'dimgray',
+					align: 'center',
+					stroke: 'dimigray',
+					strokeWidth: 0,
+					listening: false
+				});
+        
+				text.offsetX(text.width()/2);
+				text.offsetY(wheelRadius - 15);
+        
+				wedge.add(text);
+				wheel.add(wedge);
+			}
+			return wheel;
+		}
+		init();
+	}	
+	drawSelector(1400,600);	
+    </script>
+  </body>
+</html>
