11 files changed, 684 insertions, 123 deletions

diff --git a/css/spinningwheel.css b/css/spinningwheel.css
new file mode 100755
index 0000000..dd5df67
--- /dev/null
+++ b/css/spinningwheel.css
@@ -0,0 +1,92 @@
+#sw-wrapper {
+	position:absolute; z-index:1000;
+	left:0;
+	width:100%;
+	font-family:helvetica, sans-serif;
+	background:rgba(0,0,0,0.7);
+	text-align:left;
+}
+
+#sw-header {
+	position:relative;
+	width:100%; height:43px;
+	border-top:1px solid #000; border-bottom:1px solid #000;
+	background:url(../images/sw-header.png) 0 0 repeat-x;
+	opacity: 0.9;
+}
+
+#sw-cancel, #sw-done {
+	position:absolute;
+	top:7px;
+	height:20px; line-height:20px;
+	padding:0 5px; margin:0;
+	border-width:5px;
+	font-size:12px; font-weight:bold;
+	text-shadow:rgba(0,0,0,0.8) 0 -1px 0;
+	color:#fff;
+}
+
+#sw-cancel {
+	left:7px;
+	float:left;
+	-webkit-border-image:url(../images/sw-button-cancel.png) 5;
+}
+
+#sw-done {
+	right:7px;
+	float:right;
+	-webkit-border-image:url(../images/sw-button-done.png) 5;
+}
+
+.sw-pressed { opacity:0.4; }
+
+#sw-slots-wrapper {
+	position:relative; z-index:999;
+	display:block;
+	height:215px;
+	padding:0 11px;
+	overflow:hidden;
+}
+
+#sw-slots {
+	display:table;
+	width:100%;
+	background:#fcfcfc;
+}
+
+#sw-slots div {
+	display:table-cell;
+	height:100%;
+	padding-top:86px;
+	border-left:2px solid #0d0e0f;
+	background-color:#fcfcfc;
+	background-image: url(sw-slot-border.png);
+	background-position: 0 0, 100% 0;
+	background-repeat: repeat-y;
+}
+
+#sw-slots div:first-child { border:0; }
+
+#sw-slots ul {
+	padding:0 0 85px 0; margin:0;
+	list-style:none;
+}
+
+#sw-slots .sw-right { text-align:right; }
+#sw-slots .sw-shrink { width:1%; }
+#sw-slots .sw-readonly { background:#ddd; }
+
+#sw-slots li {
+	padding:0 8px;
+	height:44px;
+	overflow:hidden;
+	font:bold 24px/44px Helvetica,sans-serif;
+}
+
+#sw-frame {
+	position:absolute; z-index:1000;
+	left:0; right:0; bottom:0;
+	height:183px;
+	border-width:16px;
+	-webkit-border-image:url(../images/sw-alpha.png) 16;
+}
\ No newline at end of file
diff --git a/images/sw-alpha.png b/images/sw-alpha.png
new file mode 100755
index 0000000..b80659a
--- /dev/null
+++ b/images/sw-alpha.png
diff --git a/images/sw-button-cancel.png b/images/sw-button-cancel.png
new file mode 100755
index 0000000..cea9e38
--- /dev/null
+++ b/images/sw-button-cancel.png
diff --git a/images/sw-button-done.png b/images/sw-button-done.png
new file mode 100755
index 0000000..a1e8f32
--- /dev/null
+++ b/images/sw-button-done.png
diff --git a/images/sw-header.png b/images/sw-header.png
new file mode 100755
index 0000000..db4ec27
--- /dev/null
+++ b/images/sw-header.png
diff --git a/images/sw-slot-border.png b/images/sw-slot-border.png
new file mode 100755
index 0000000..d9f6026
--- /dev/null
+++ b/images/sw-slot-border.png
diff --git a/includes/inc_timers.php b/includes/inc_timers.php
index 31d663e..bf14074 100644
--- a/includes/inc_timers.php
+++ b/includes/inc_timers.php
@@ -13,11 +13,15 @@ print " <li class=\"textbox\"><span class=\"header\">Incoming feature</span";
 print " <p>This is just a template...</p></li></ul>";
 print " <ul class=\"pageitem\">";
 print "  <li class=\"textbox\"> <span class=\"header\">Current timers</span> </li>";
-print "  <li class=\"menu\"><a href=\"edit_timer.html\"> <img alt=\"list\" src=\"images/pictos/timers.png\" /><span class=\"name\">23.02.2010: TF1 Gran Torino</span><span class=\"arrow\"></span></a></li>";
-print "  <li class=\"menu\"><a href=\"edit_timer.html\"> <img src=\"images/pictos/timers.png\" /><span class=\"name\">12.03.2010: Canal + Les Guignols de l'Info </span><span class=\"arrow\"></span></a></li>";
+print "  <li class=\"menu\"><a href=\"javascript:sendForm('23.02.2010: TF1 Gran Torino')\"> <img alt=\"list\" src=\"images/pictos/timers.png\" /><span class=\"name\">23.02.2010: TF1 Gran Torino</span><span class=\"arrow\"></span></a></li>";
+print "<form name=\"23.02.2010: TF1 Gran Torino\" id=\"23.02.2010: TF1 Gran Torino\" method=\"post\" action=\"index.php\"><input name=\"action\" type=\"hidden\" id=\"action\" value=\"edit_timer\"/><input name=\"timer\" type=\"hidden\" id=\"timer\" value=\"23.02.2010: TF1 Gran Torino\" /></form>";
+print "  <li class=\"menu\"><a href=\"javascript:sendForm('23.02.2010: TF1 Gran Torino')\"> <img src=\"images/pictos/timers.png\" /><span class=\"name\">12.03.2010: Canal + Les Guignols de l'Info </span><span class=\"arrow\"></span></a></li>";
+print "<form name=\">12.03.2010: Canal + Les Guignols de l'Info\" id=\">12.03.2010: Canal + Les Guignols de l'Info\" method=\"post\" action=\"index.php\"><input name=\"action\" type=\"hidden\" id=\"action\" value=\"edit_timer\"/><input name=\"timer\" type=\"hidden\" id=\"timer\" value=\">12.03.2010: Canal + Les Guignols de l'Info\" /></form>";
 print "</ul>";
 print "<ul class=\"pageitem\">";
-print " <li class=\"menu\"><a href=\"new_timer.html\"><span class=\"name\">New Timer</span><span class=\"arrow\"></span></a></li>";
+print " <li class=\"menu\"><a href=\"javascript:sendForm('new_timer')\"><span class=\"name\">New Timer</span><span class=\"arrow\"></span></a></li>";
+print "<form name=\"new_timer\" id=\"new_timer\" method=\"post\" action=\"index.php\"><input name=\"action\" type=\"hidden\" id=\"action\" value=\"new_timer\"/></form>";
+
 print "</ul>";
 
 print "</div>\r\n";
diff --git a/includes/include.php b/includes/include.php
index ca86aea..e7d46ab 100755
--- a/includes/include.php
+++ b/includes/include.php
@@ -48,6 +48,12 @@ function selectpage()
 		case ("timers"):
 			gen_timers();
 			break;
+		case ("new_timer"):
+			gen_new_timer();
+			break;
+		case ("edit_timer"):
+			gen_edit_timer();
+			break;
 		case ("startstream"):
 			$type = $_REQUEST['type'];
 			$name = $_REQUEST['name'];
@@ -105,6 +111,15 @@ function gen_timers()
 {
         include('includes/inc_timers.php');
 }
+function gen_new_timer()
+{
+        include('new_timer.html');
+}
+function gen_edit_timer()
+{
+        include('edit_timer.html');
+}
+
 
 
 function start_stream($type, $name, $title, $desc, $qname, $qparams, $category, $url)
diff --git a/javascript/spinningwheel-min.js b/javascript/spinningwheel-min.js
new file mode 100755
index 0000000..a2b68dd
--- /dev/null
+++ b/javascript/spinningwheel-min.js
@@ -0,0 +1 @@
+var SpinningWheel={cellHeight:44,friction:0.003,slotData:[],handleEvent:function(e){if(e.type=="touchstart"){this.lockScreen(e);if(e.currentTarget.id=="sw-cancel"||e.currentTarget.id=="sw-done"){this.tapDown(e)}else{if(e.currentTarget.id=="sw-frame"){this.scrollStart(e)}}}else{if(e.type=="touchmove"){this.lockScreen(e);if(e.currentTarget.id=="sw-cancel"||e.currentTarget.id=="sw-done"){this.tapCancel(e)}else{if(e.currentTarget.id=="sw-frame"){this.scrollMove(e)}}}else{if(e.type=="touchend"){if(e.currentTarget.id=="sw-cancel"||e.currentTarget.id=="sw-done"){this.tapUp(e)}else{if(e.currentTarget.id=="sw-frame"){this.scrollEnd(e)}}}else{if(e.type=="webkitTransitionEnd"){if(e.target.id=="sw-wrapper"){this.destroy()}else{this.backWithinBoundaries(e)}}else{if(e.type=="orientationchange"){this.onOrientationChange(e)}else{if(e.type=="scroll"){this.onScroll(e)}}}}}}},onOrientationChange:function(e){window.scrollTo(0,0);this.swWrapper.style.top=window.innerHeight+window.pageYOffset+"px";this.calculateSlotsWidth()},onScroll:function(e){this.swWrapper.style.top=window.innerHeight+window.pageYOffset+"px"},lockScreen:function(e){e.preventDefault();e.stopPropagation()},reset:function(){this.slotEl=[];this.activeSlot=null;this.swWrapper=undefined;this.swSlotWrapper=undefined;this.swSlots=undefined;this.swFrame=undefined},calculateSlotsWidth:function(){var div=this.swSlots.getElementsByTagName("div");for(var i=0;i<div.length;i+=1){this.slotEl[i].slotWidth=div[i].offsetWidth}},create:function(){var i,l,out,ul,div;this.reset();div=document.createElement("div");div.id="sw-wrapper";div.style.top=window.innerHeight+window.pageYOffset+"px";div.style.webkitTransitionProperty="-webkit-transform";div.innerHTML='<div id="sw-header"><div id="sw-cancel">Cancel</div><div id="sw-done">Done</div></div><div id="sw-slots-wrapper"><div id="sw-slots"></div></div><div id="sw-frame"></div>';document.body.appendChild(div);this.swWrapper=div;this.swSlotWrapper=document.getElementById("sw-slots-wrapper");this.swSlots=document.getElementById("sw-slots");this.swFrame=document.getElementById("sw-frame");for(l=0;l<this.slotData.length;l+=1){ul=document.createElement("ul");out="";for(i in this.slotData[l].values){out+="<li>"+this.slotData[l].values[i]+"</li>"}ul.innerHTML=out;div=document.createElement("div");div.className=this.slotData[l].style;div.appendChild(ul);this.swSlots.appendChild(div);ul.slotPosition=l;ul.slotYPosition=0;ul.slotWidth=0;ul.slotMaxScroll=this.swSlotWrapper.clientHeight-ul.clientHeight-86;ul.style.webkitTransitionTimingFunction="cubic-bezier(0, 0, 0.2, 1)";this.slotEl.push(ul);if(this.slotData[l].defaultValue){this.scrollToValue(l,this.slotData[l].defaultValue)}}this.calculateSlotsWidth();document.addEventListener("touchstart",this,false);document.addEventListener("touchmove",this,false);window.addEventListener("orientationchange",this,true);window.addEventListener("scroll",this,true);document.getElementById("sw-cancel").addEventListener("touchstart",this,false);document.getElementById("sw-done").addEventListener("touchstart",this,false);this.swFrame.addEventListener("touchstart",this,false)},open:function(){this.create();this.swWrapper.style.webkitTransitionTimingFunction="ease-out";this.swWrapper.style.webkitTransitionDuration="400ms";this.swWrapper.style.webkitTransform="translate3d(0, -260px, 0)"},destroy:function(){this.swWrapper.removeEventListener("webkitTransitionEnd",this,false);this.swFrame.removeEventListener("touchstart",this,false);document.getElementById("sw-cancel").removeEventListener("touchstart",this,false);document.getElementById("sw-done").removeEventListener("touchstart",this,false);document.removeEventListener("touchstart",this,false);document.removeEventListener("touchmove",this,false);window.removeEventListener("orientationchange",this,true);window.removeEventListener("scroll",this,true);this.slotData=[];this.cancelAction=function(){return false};this.cancelDone=function(){return true};this.reset();document.body.removeChild(document.getElementById("sw-wrapper"))},close:function(){this.swWrapper.style.webkitTransitionTimingFunction="ease-in";this.swWrapper.style.webkitTransitionDuration="400ms";this.swWrapper.style.webkitTransform="translate3d(0, 0, 0)";this.swWrapper.addEventListener("webkitTransitionEnd",this,false)},addSlot:function(values,style,defaultValue){if(!style){style=""}style=style.split(" ");for(var i=0;i<style.length;i+=1){style[i]="sw-"+style[i]}style=style.join(" ");var obj={values:values,style:style,defaultValue:defaultValue};this.slotData.push(obj)},getSelectedValues:function(){var index,count,i,l,keys=[],values=[];for(i in this.slotEl){this.slotEl[i].removeEventListener("webkitTransitionEnd",this,false);this.slotEl[i].style.webkitTransitionDuration="0";if(this.slotEl[i].slotYPosition>0){this.setPosition(i,0)}else{if(this.slotEl[i].slotYPosition<this.slotEl[i].slotMaxScroll){this.setPosition(i,this.slotEl[i].slotMaxScroll)}}index=-Math.round(this.slotEl[i].slotYPosition/this.cellHeight);count=0;for(l in this.slotData[i].values){if(count==index){keys.push(l);values.push(this.slotData[i].values[l]);break}count+=1}}return{keys:keys,values:values}},setPosition:function(slot,pos){this.slotEl[slot].slotYPosition=pos;this.slotEl[slot].style.webkitTransform="translate3d(0, "+pos+"px, 0)"},scrollStart:function(e){var xPos=e.targetTouches[0].clientX-this.swSlots.offsetLeft;var slot=0;for(var i=0;i<this.slotEl.length;i+=1){slot+=this.slotEl[i].slotWidth;if(xPos<slot){this.activeSlot=i;break}}if(this.slotData[this.activeSlot].style.match("readonly")){this.swFrame.removeEventListener("touchmove",this,false);this.swFrame.removeEventListener("touchend",this,false);return false}this.slotEl[this.activeSlot].removeEventListener("webkitTransitionEnd",this,false);this.slotEl[this.activeSlot].style.webkitTransitionDuration="0";var theTransform=window.getComputedStyle(this.slotEl[this.activeSlot]).webkitTransform;theTransform=new WebKitCSSMatrix(theTransform).m42;if(theTransform!=this.slotEl[this.activeSlot].slotYPosition){this.setPosition(this.activeSlot,theTransform)}this.startY=e.targetTouches[0].clientY;this.scrollStartY=this.slotEl[this.activeSlot].slotYPosition;this.scrollStartTime=e.timeStamp;this.swFrame.addEventListener("touchmove",this,false);this.swFrame.addEventListener("touchend",this,false);return true},scrollMove:function(e){var topDelta=e.targetTouches[0].clientY-this.startY;if(this.slotEl[this.activeSlot].slotYPosition>0||this.slotEl[this.activeSlot].slotYPosition<this.slotEl[this.activeSlot].slotMaxScroll){topDelta/=2}this.setPosition(this.activeSlot,this.slotEl[this.activeSlot].slotYPosition+topDelta);this.startY=e.targetTouches[0].clientY;if(e.timeStamp-this.scrollStartTime>80){this.scrollStartY=this.slotEl[this.activeSlot].slotYPosition;this.scrollStartTime=e.timeStamp}},scrollEnd:function(e){this.swFrame.removeEventListener("touchmove",this,false);this.swFrame.removeEventListener("touchend",this,false);if(this.slotEl[this.activeSlot].slotYPosition>0||this.slotEl[this.activeSlot].slotYPosition<this.slotEl[this.activeSlot].slotMaxScroll){this.scrollTo(this.activeSlot,this.slotEl[this.activeSlot].slotYPosition>0?0:this.slotEl[this.activeSlot].slotMaxScroll);return false}var scrollDistance=this.slotEl[this.activeSlot].slotYPosition-this.scrollStartY;if(scrollDistance<this.cellHeight/1.5&&scrollDistance>-this.cellHeight/1.5){if(this.slotEl[this.activeSlot].slotYPosition%this.cellHeight){this.scrollTo(this.activeSlot,Math.round(this.slotEl[this.activeSlot].slotYPosition/this.cellHeight)*this.cellHeight,"100ms")}return false}var scrollDuration=e.timeStamp-this.scrollStartTime;var newDuration=(2*scrollDistance/scrollDuration)/this.friction;var newScrollDistance=(this.friction/2)*(newDuration*newDuration);if(newDuration<0){newDuration=-newDuration;newScrollDistance=-newScrollDistance}var newPosition=this.slotEl[this.activeSlot].slotYPosition+newScrollDistance;if(newPosition>0){newPosition/=2;newDuration/=3;if(newPosition>this.swSlotWrapper.clientHeight/4){newPosition=this.swSlotWrapper.clientHeight/4}}else{if(newPosition<this.slotEl[this.activeSlot].slotMaxScroll){newPosition=(newPosition-this.slotEl[this.activeSlot].slotMaxScroll)/2+this.slotEl[this.activeSlot].slotMaxScroll;newDuration/=3;if(newPosition<this.slotEl[this.activeSlot].slotMaxScroll-this.swSlotWrapper.clientHeight/4){newPosition=this.slotEl[this.activeSlot].slotMaxScroll-this.swSlotWrapper.clientHeight/4}}else{newPosition=Math.round(newPosition/this.cellHeight)*this.cellHeight}}this.scrollTo(this.activeSlot,Math.round(newPosition),Math.round(newDuration)+"ms");return true},scrollTo:function(slotNum,dest,runtime){this.slotEl[slotNum].style.webkitTransitionDuration=runtime?runtime:"100ms";this.setPosition(slotNum,dest?dest:0);if(this.slotEl[slotNum].slotYPosition>0||this.slotEl[slotNum].slotYPosition<this.slotEl[slotNum].slotMaxScroll){this.slotEl[slotNum].addEventListener("webkitTransitionEnd",this,false)}},scrollToValue:function(slot,value){var yPos,count,i;this.slotEl[slot].removeEventListener("webkitTransitionEnd",this,false);this.slotEl[slot].style.webkitTransitionDuration="0";count=0;for(i in this.slotData[slot].values){if(i==value){yPos=count*this.cellHeight;this.setPosition(slot,yPos);break}count-=1}},backWithinBoundaries:function(e){e.target.removeEventListener("webkitTransitionEnd",this,false);this.scrollTo(e.target.slotPosition,e.target.slotYPosition>0?0:e.target.slotMaxScroll,"150ms");return false},tapDown:function(e){e.currentTarget.addEventListener("touchmove",this,false);e.currentTarget.addEventListener("touchend",this,false);e.currentTarget.className="sw-pressed"},tapCancel:function(e){e.currentTarget.removeEventListener("touchmove",this,false);e.currentTarget.removeEventListener("touchend",this,false);e.currentTarget.className=""},tapUp:function(e){this.tapCancel(e);if(e.currentTarget.id=="sw-cancel"){this.cancelAction()}else{this.doneAction()}this.close()},setCancelAction:function(action){this.cancelAction=action},setDoneAction:function(action){this.doneAction=action},cancelAction:function(){return false},cancelDone:function(){return true}};
\ No newline at end of file
diff --git a/javascript/spinningwheel.js b/javascript/spinningwheel.js
new file mode 100755
index 0000000..1147d3a
--- /dev/null
+++ b/javascript/spinningwheel.js
@@ -0,0 +1,492 @@
+/**
+ * 
+ * Find more about the Spinning Wheel function at
+ * http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch/11
+ *
+ * Copyright (c) 2009 Matteo Spinelli, http://cubiq.org/
+ * Released under MIT license
+ * http://cubiq.org/dropbox/mit-license.txt
+ * 
+ * Version 1.4 - Last updated: 2009.07.09
+ * 
+ */
+
+var SpinningWheel = {
+	cellHeight: 44,
+	friction: 0.003,
+	slotData: [],
+
+
+	/**
+	 *
+	 * Event handler
+	 *
+	 */
+
+	handleEvent: function (e) {
+		if (e.type == 'touchstart') {
+			this.lockScreen(e);
+			if (e.currentTarget.id == 'sw-cancel' || e.currentTarget.id == 'sw-done') {
+				this.tapDown(e);
+			} else if (e.currentTarget.id == 'sw-frame') {
+				this.scrollStart(e);
+			}
+		} else if (e.type == 'touchmove') {
+			this.lockScreen(e);
+			
+			if (e.currentTarget.id == 'sw-cancel' || e.currentTarget.id == 'sw-done') {
+				this.tapCancel(e);
+			} else if (e.currentTarget.id == 'sw-frame') {
+				this.scrollMove(e);
+			}
+		} else if (e.type == 'touchend') {
+			if (e.currentTarget.id == 'sw-cancel' || e.currentTarget.id == 'sw-done') {
+				this.tapUp(e);
+			} else if (e.currentTarget.id == 'sw-frame') {
+				this.scrollEnd(e);
+			}
+		} else if (e.type == 'webkitTransitionEnd') {
+			if (e.target.id == 'sw-wrapper') {
+				this.destroy();
+			} else {
+				this.backWithinBoundaries(e);
+			}
+		} else if (e.type == 'orientationchange') {
+			this.onOrientationChange(e);
+		} else if (e.type == 'scroll') {
+			this.onScroll(e);
+		}
+	},
+
+
+	/**
+	 *
+	 * Global events
+	 *
+	 */
+
+	onOrientationChange: function (e) {
+		window.scrollTo(0, 0);
+		this.swWrapper.style.top = window.innerHeight + window.pageYOffset + 'px';
+		this.calculateSlotsWidth();
+	},
+	
+	onScroll: function (e) {
+		this.swWrapper.style.top = window.innerHeight + window.pageYOffset + 'px';
+	},
+
+	lockScreen: function (e) {
+		e.preventDefault();
+		e.stopPropagation();
+	},
+
+
+	/**
+	 *
+	 * Initialization
+	 *
+	 */
+
+	reset: function () {
+		this.slotEl = [];
+
+		this.activeSlot = null;
+		
+		this.swWrapper = undefined;
+		this.swSlotWrapper = undefined;
+		this.swSlots = undefined;
+		this.swFrame = undefined;
+	},
+
+	calculateSlotsWidth: function () {
+		var div = this.swSlots.getElementsByTagName('div');
+		for (var i = 0; i < div.length; i += 1) {
+			this.slotEl[i].slotWidth = div[i].offsetWidth;
+		}
+	},
+
+	create: function () {
+		var i, l, out, ul, div;
+
+		this.reset();	// Initialize object variables
+
+		// Create the Spinning Wheel main wrapper
+		div = document.createElement('div');
+		div.id = 'sw-wrapper';
+		div.style.top = window.innerHeight + window.pageYOffset + 'px';		// Place the SW down the actual viewing screen
+		div.style.webkitTransitionProperty = '-webkit-transform';
+		div.innerHTML = '<div id="sw-header"><div id="sw-cancel">Cancel</' + 'div><div id="sw-done">Done</' + 'div></' + 'div><div id="sw-slots-wrapper"><div id="sw-slots"></' + 'div></' + 'div><div id="sw-frame"></' + 'div>';
+
+		document.body.appendChild(div);
+
+		this.swWrapper = div;													// The SW wrapper
+		this.swSlotWrapper = document.getElementById('sw-slots-wrapper');		// Slots visible area
+		this.swSlots = document.getElementById('sw-slots');						// Pseudo table element (inner wrapper)
+		this.swFrame = document.getElementById('sw-frame');						// The scrolling controller
+
+		// Create HTML slot elements
+		for (l = 0; l < this.slotData.length; l += 1) {
+			// Create the slot
+			ul = document.createElement('ul');
+			out = '';
+			for (i in this.slotData[l].values) {
+				out += '<li>' + this.slotData[l].values[i] + '<' + '/li>';
+			}
+			ul.innerHTML = out;
+
+			div = document.createElement('div');		// Create slot container
+			div.className = this.slotData[l].style;		// Add styles to the container
+			div.appendChild(ul);
+	
+			// Append the slot to the wrapper
+			this.swSlots.appendChild(div);
+			
+			ul.slotPosition = l;			// Save the slot position inside the wrapper
+			ul.slotYPosition = 0;
+			ul.slotWidth = 0;
+			ul.slotMaxScroll = this.swSlotWrapper.clientHeight - ul.clientHeight - 86;
+			ul.style.webkitTransitionTimingFunction = 'cubic-bezier(0, 0, 0.2, 1)';		// Add default transition
+			
+			this.slotEl.push(ul);			// Save the slot for later use
+			
+			// Place the slot to its default position (if other than 0)
+			if (this.slotData[l].defaultValue) {
+				this.scrollToValue(l, this.slotData[l].defaultValue);	
+			}
+		}
+		
+		this.calculateSlotsWidth();
+		
+		// Global events
+		document.addEventListener('touchstart', this, false);			// Prevent page scrolling
+		document.addEventListener('touchmove', this, false);			// Prevent page scrolling
+		window.addEventListener('orientationchange', this, true);		// Optimize SW on orientation change
+		window.addEventListener('scroll', this, true);				// Reposition SW on page scroll
+
+		// Cancel/Done buttons events
+		document.getElementById('sw-cancel').addEventListener('touchstart', this, false);
+		document.getElementById('sw-done').addEventListener('touchstart', this, false);
+
+		// Add scrolling to the slots
+		this.swFrame.addEventListener('touchstart', this, false);
+	},
+
+	open: function () {
+		this.create();
+
+		this.swWrapper.style.webkitTransitionTimingFunction = 'ease-out';
+		this.swWrapper.style.webkitTransitionDuration = '400ms';
+		this.swWrapper.style.webkitTransform = 'translate3d(0, -260px, 0)';
+	},
+	
+	
+	/**
+	 *
+	 * Unload
+	 *
+	 */
+
+	destroy: function () {
+		this.swWrapper.removeEventListener('webkitTransitionEnd', this, false);
+
+		this.swFrame.removeEventListener('touchstart', this, false);
+
+		document.getElementById('sw-cancel').removeEventListener('touchstart', this, false);
+		document.getElementById('sw-done').removeEventListener('touchstart', this, false);
+
+		document.removeEventListener('touchstart', this, false);
+		document.removeEventListener('touchmove', this, false);
+		window.removeEventListener('orientationchange', this, true);
+		window.removeEventListener('scroll', this, true);
+		
+		this.slotData = [];
+		this.cancelAction = function () {
+			return false;
+		};
+		
+		this.cancelDone = function () {
+			return true;
+		};
+		
+		this.reset();
+		
+		document.body.removeChild(document.getElementById('sw-wrapper'));
+	},
+	
+	close: function () {
+		this.swWrapper.style.webkitTransitionTimingFunction = 'ease-in';
+		this.swWrapper.style.webkitTransitionDuration = '400ms';
+		this.swWrapper.style.webkitTransform = 'translate3d(0, 0, 0)';
+		
+		this.swWrapper.addEventListener('webkitTransitionEnd', this, false);
+	},
+
+
+	/**
+	 *
+	 * Generic methods
+	 *
+	 */
+
+	addSlot: function (values, style, defaultValue) {
+		if (!style) {
+			style = '';
+		}
+		
+		style = style.split(' ');
+
+		for (var i = 0; i < style.length; i += 1) {
+			style[i] = 'sw-' + style[i];
+		}
+		
+		style = style.join(' ');
+
+		var obj = { 'values': values, 'style': style, 'defaultValue': defaultValue };
+		this.slotData.push(obj);
+	},
+
+	getSelectedValues: function () {
+		var index, count,
+		    i, l,
+			keys = [], values = [];
+
+		for (i in this.slotEl) {
+			// Remove any residual animation
+			this.slotEl[i].removeEventListener('webkitTransitionEnd', this, false);
+			this.slotEl[i].style.webkitTransitionDuration = '0';
+
+			if (this.slotEl[i].slotYPosition > 0) {
+				this.setPosition(i, 0);
+			} else if (this.slotEl[i].slotYPosition < this.slotEl[i].slotMaxScroll) {
+				this.setPosition(i, this.slotEl[i].slotMaxScroll);
+			}
+
+			index = -Math.round(this.slotEl[i].slotYPosition / this.cellHeight);
+
+			count = 0;
+			for (l in this.slotData[i].values) {
+				if (count == index) {
+					keys.push(l);
+					values.push(this.slotData[i].values[l]);
+					break;
+				}
+				
+				count += 1;
+			}
+		}
+
+		return { 'keys': keys, 'values': values };
+	},
+
+
+	/**
+	 *
+	 * Rolling slots
+	 *
+	 */
+
+	setPosition: function (slot, pos) {
+		this.slotEl[slot].slotYPosition = pos;
+		this.slotEl[slot].style.webkitTransform = 'translate3d(0, ' + pos + 'px, 0)';
+	},
+	
+	scrollStart: function (e) {
+		// Find the clicked slot
+		var xPos = e.targetTouches[0].clientX - this.swSlots.offsetLeft;	// Clicked position minus left offset (should be 11px)
+
+		// Find tapped slot
+		var slot = 0;
+		for (var i = 0; i < this.slotEl.length; i += 1) {
+			slot += this.slotEl[i].slotWidth;
+			
+			if (xPos < slot) {
+				this.activeSlot = i;
+				break;
+			}
+		}
+
+		// If slot is readonly do nothing
+		if (this.slotData[this.activeSlot].style.match('readonly')) {
+			this.swFrame.removeEventListener('touchmove', this, false);
+			this.swFrame.removeEventListener('touchend', this, false);
+			return false;
+		}
+
+		this.slotEl[this.activeSlot].removeEventListener('webkitTransitionEnd', this, false);	// Remove transition event (if any)
+		this.slotEl[this.activeSlot].style.webkitTransitionDuration = '0';		// Remove any residual transition
+		
+		// Stop and hold slot position
+		var theTransform = window.getComputedStyle(this.slotEl[this.activeSlot]).webkitTransform;
+		theTransform = new WebKitCSSMatrix(theTransform).m42;
+		if (theTransform != this.slotEl[this.activeSlot].slotYPosition) {
+			this.setPosition(this.activeSlot, theTransform);
+		}
+		
+		this.startY = e.targetTouches[0].clientY;
+		this.scrollStartY = this.slotEl[this.activeSlot].slotYPosition;
+		this.scrollStartTime = e.timeStamp;
+
+		this.swFrame.addEventListener('touchmove', this, false);
+		this.swFrame.addEventListener('touchend', this, false);
+		
+		return true;
+	},
+
+	scrollMove: function (e) {
+		var topDelta = e.targetTouches[0].clientY - this.startY;
+
+		if (this.slotEl[this.activeSlot].slotYPosition > 0 || this.slotEl[this.activeSlot].slotYPosition < this.slotEl[this.activeSlot].slotMaxScroll) {
+			topDelta /= 2;
+		}
+		
+		this.setPosition(this.activeSlot, this.slotEl[this.activeSlot].slotYPosition + topDelta);
+		this.startY = e.targetTouches[0].clientY;
+
+		// Prevent slingshot effect
+		if (e.timeStamp - this.scrollStartTime > 80) {
+			this.scrollStartY = this.slotEl[this.activeSlot].slotYPosition;
+			this.scrollStartTime = e.timeStamp;
+		}
+	},
+	
+	scrollEnd: function (e) {
+		this.swFrame.removeEventListener('touchmove', this, false);
+		this.swFrame.removeEventListener('touchend', this, false);
+
+		// If we are outside of the boundaries, let's go back to the sheepfold
+		if (this.slotEl[this.activeSlot].slotYPosition > 0 || this.slotEl[this.activeSlot].slotYPosition < this.slotEl[this.activeSlot].slotMaxScroll) {
+			this.scrollTo(this.activeSlot, this.slotEl[this.activeSlot].slotYPosition > 0 ? 0 : this.slotEl[this.activeSlot].slotMaxScroll);
+			return false;
+		}
+
+		// Lame formula to calculate a fake deceleration
+		var scrollDistance = this.slotEl[this.activeSlot].slotYPosition - this.scrollStartY;
+
+		// The drag session was too short
+		if (scrollDistance < this.cellHeight / 1.5 && scrollDistance > -this.cellHeight / 1.5) {
+			if (this.slotEl[this.activeSlot].slotYPosition % this.cellHeight) {
+				this.scrollTo(this.activeSlot, Math.round(this.slotEl[this.activeSlot].slotYPosition / this.cellHeight) * this.cellHeight, '100ms');
+			}
+
+			return false;
+		}
+
+		var scrollDuration = e.timeStamp - this.scrollStartTime;
+
+		var newDuration = (2 * scrollDistance / scrollDuration) / this.friction;
+		var newScrollDistance = (this.friction / 2) * (newDuration * newDuration);
+		
+		if (newDuration < 0) {
+			newDuration = -newDuration;
+			newScrollDistance = -newScrollDistance;
+		}
+
+		var newPosition = this.slotEl[this.activeSlot].slotYPosition + newScrollDistance;
+
+		if (newPosition > 0) {
+			// Prevent the slot to be dragged outside the visible area (top margin)
+			newPosition /= 2;
+			newDuration /= 3;
+
+			if (newPosition > this.swSlotWrapper.clientHeight / 4) {
+				newPosition = this.swSlotWrapper.clientHeight / 4;
+			}
+		} else if (newPosition < this.slotEl[this.activeSlot].slotMaxScroll) {
+			// Prevent the slot to be dragged outside the visible area (bottom margin)
+			newPosition = (newPosition - this.slotEl[this.activeSlot].slotMaxScroll) / 2 + this.slotEl[this.activeSlot].slotMaxScroll;
+			newDuration /= 3;
+			
+			if (newPosition < this.slotEl[this.activeSlot].slotMaxScroll - this.swSlotWrapper.clientHeight / 4) {
+				newPosition = this.slotEl[this.activeSlot].slotMaxScroll - this.swSlotWrapper.clientHeight / 4;
+			}
+		} else {
+			newPosition = Math.round(newPosition / this.cellHeight) * this.cellHeight;
+		}
+
+		this.scrollTo(this.activeSlot, Math.round(newPosition), Math.round(newDuration) + 'ms');
+ 
+		return true;
+	},
+
+	scrollTo: function (slotNum, dest, runtime) {
+		this.slotEl[slotNum].style.webkitTransitionDuration = runtime ? runtime : '100ms';
+		this.setPosition(slotNum, dest ? dest : 0);
+
+		// If we are outside of the boundaries go back to the sheepfold
+		if (this.slotEl[slotNum].slotYPosition > 0 || this.slotEl[slotNum].slotYPosition < this.slotEl[slotNum].slotMaxScroll) {
+			this.slotEl[slotNum].addEventListener('webkitTransitionEnd', this, false);
+		}
+	},
+	
+	scrollToValue: function (slot, value) {
+		var yPos, count, i;
+
+		this.slotEl[slot].removeEventListener('webkitTransitionEnd', this, false);
+		this.slotEl[slot].style.webkitTransitionDuration = '0';
+		
+		count = 0;
+		for (i in this.slotData[slot].values) {
+			if (i == value) {
+				yPos = count * this.cellHeight;
+				this.setPosition(slot, yPos);
+				break;
+			}
+			
+			count -= 1;
+		}
+	},
+	
+	backWithinBoundaries: function (e) {
+		e.target.removeEventListener('webkitTransitionEnd', this, false);
+
+		this.scrollTo(e.target.slotPosition, e.target.slotYPosition > 0 ? 0 : e.target.slotMaxScroll, '150ms');
+		return false;
+	},
+
+
+	/**
+	 *
+	 * Buttons
+	 *
+	 */
+
+	tapDown: function (e) {
+		e.currentTarget.addEventListener('touchmove', this, false);
+		e.currentTarget.addEventListener('touchend', this, false);
+		e.currentTarget.className = 'sw-pressed';
+	},
+
+	tapCancel: function (e) {
+		e.currentTarget.removeEventListener('touchmove', this, false);
+		e.currentTarget.removeEventListener('touchend', this, false);
+		e.currentTarget.className = '';
+	},
+	
+	tapUp: function (e) {
+		this.tapCancel(e);
+
+		if (e.currentTarget.id == 'sw-cancel') {
+			this.cancelAction();
+		} else {
+			this.doneAction();
+		}
+		
+		this.close();
+	},
+
+	setCancelAction: function (action) {
+		this.cancelAction = action;
+	},
+
+	setDoneAction: function (action) {
+		this.doneAction = action;
+	},
+	
+	cancelAction: function () {
+		return false;
+	},
+
+	cancelDone: function () {
+		return true;
+	}
+};
\ No newline at end of file
diff --git a/new_timer.html b/new_timer.html
index bbede52..1ffc224 100755
--- a/new_timer.html
+++ b/new_timer.html
@@ -7,6 +7,8 @@
 <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />

 <link href="css/style.css" rel="stylesheet" type="text/css" />

 <script src="javascript/functions.js" type="text/javascript"></script>

+<link rel="stylesheet" href="css/spinningwheel.css" type="text/css" media="all" />

+<script type="text/javascript" src="javascript/spinningwheel-min.js?v=1.4"></script>

 <title>Title of your page</title>

 <meta content="keyword1,keyword2,keyword3" name="keywords" />

 <meta content="Description of your page" name="description" />

@@ -35,6 +37,66 @@ function updateOrientation() {
 	frm = document.getElementById(formid);

 	frm.submit();

 }

+function openSelectDate() {

+	var now = new Date();

+	var now_year = now.getFullYear();

+	var now_month = now.getMonth()+1;

+	var now_day = now.getDate();

+	var layer = 'layer_date';

+	var days = { };

+	var years = { };

+	var months = { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' };

+	

+	for( var i = 1; i < 32; i += 1 ) {

+		days[i] = i;

+	}

+

+	for( i = now.getFullYear(); i < now.getFullYear()+5; i += 1 ) {

+		years[i] = i;

+	}

+

+	SpinningWheel.addSlot(days, 'right', now_day);

+	SpinningWheel.addSlot(months, '', now_month);

+	SpinningWheel.addSlot(years, 'right', now_year );

+	

+	SpinningWheel.setCancelAction(cancel_date);

+	SpinningWheel.setDoneAction(done_date);

+	

+	SpinningWheel.open();

+}

+

+function done_date() {

+	var results = SpinningWheel.getSelectedValues();

+	document.getElementById('layer_date').innerHTML = results.values.join(' ');

+}

+

+function cancel_date() {

+	document.getElementById('layer_date').innerHTML = 'Select timer date';

+}

+function openSelectTime(layer) {

+	var now = new Date();

+	var now_hour = now.getHours();

+	var now_minute = now.getMinutes()+1;

+	var hours = { };

+	var minutes = { };

+	

+	for( var i = 00; i < 24; i += 1 ) {

+		hours[i] = i;

+	}

+

+	for( var i = 00; i < 60; i += 1 ) {

+		minutes[i] = i;

+	}

+

+	SpinningWheel.addSlot(hours, 'right', now_hour);

+	SpinningWheel.addSlot(minutes, '', now_minute);

+	

+	SpinningWheel.setCancelAction( function() {} );

+	SpinningWheel.setDoneAction(function () {var results = SpinningWheel.getSelectedValues(); document.getElementById(layer).innerHTML = results.values.join(' ');});

+	

+	SpinningWheel.open();

+}

+

 </script>

 </head>

 

@@ -53,7 +115,7 @@ iStream
   <ul class="pageitem">

     <li class="textbox"><span class="header">Recording name</span></li>

     <li class="bigfield">

-      <input type="text" name="rec_name" />

+      <input type="text" placeholder="Enter recording name" name="rec_name" />

     </li>

   </ul>

   <ul class="pageitem">

@@ -69,128 +131,23 @@ iStream
       </select>

       <span class="arrow"></span></li>

   </ul>

+    

   <ul class="pageitem">

-    <li class="textbox"><span class="header">Start time</span></li>

-    <li class="select">

-      <select name="start_hour">

-        <option>Hour</option>

-        <option value="1">1</option>

-        <option value="2">2</option>

-        <option value="3">3</option>

-        <option value="4">4</option>

-        <option value="5">5</option>

-        <option value="6">6</option>

-        <option value="7">7</option>

-        <option value="8">8</option>

-        <option value="9">9</option>

-        <option value="10">10</option>

-        <option value="11">11</option>

-        <option value="12">12</option>

-        <option value="13">13</option>

-        <option value="14">14</option>

-        <option value="15">15</option>

-        <option value="16">16</option>

-        <option value="17">17</option>

-        <option value="18">18</option>

-        <option value="19">19</option>

-        <option value="20">20</option>

-        <option value="21">21</option>

-        <option value="22">22</option>

-        <option value="23">23</option>

-        <option value="00">00</option>

-      </select>

-      <span class="arrow"></span></li>

-    <li class="select">

-      <select name="start_minute">

-        <option>Minutes</option>

-        <option value="1">1</option>

-        <option value="2">2</option>

-        <option value="3">3</option>

-        <option value="4">4</option>

-        <option value="5">5</option>

-        <option value="6">6</option>

-        <option value="7">7</option>

-        <option value="8">8</option>

-        <option value="9">9</option>

-        <option value="10">10</option>

-        <option value="11">11</option>

-        <option value="12">12</option>

-        <option value="13">13</option>

-        <option value="14">14</option>

-        <option value="15">15</option>

-        <option value="16">16</option>

-        <option value="17">17</option>

-        <option value="18">18</option>

-        <option value="19">19</option>

-        <option value="20">20</option>

-        <option value="21">21</option>

-        <option value="22">22</option>

-        <option value="23">23</option>

-        <option value="24">24</option>

-      </select>

-      <span class="arrow"></span></li>

+   <li class="textbox"><span class="header">Date</span></li>

+   <li class="menu"><a class="noeffect" href="javascript:openSelectDate()">

+  <span class="name" id="layer_date">Select timer date</span><span class="arrow"></span></a></li>

   </ul>

-  <ul class="pageitem">

-    <li class="textbox"><span class="header">End time</span></li>

-    <li class="select">

-      <select name="start_hour">

-        <option>Hour</option>

-        <option value="1">1</option>

-        <option value="2">2</option>

-        <option value="3">3</option>

-        <option value="4">4</option>

-        <option value="5">5</option>

-        <option value="6">6</option>

-        <option value="7">7</option>

-        <option value="8">8</option>

-        <option value="9">9</option>

-        <option value="10">10</option>

-        <option value="11">11</option>

-        <option value="12">12</option>

-        <option value="13">13</option>

-        <option value="14">14</option>

-        <option value="15">15</option>

-        <option value="16">16</option>

-        <option value="17">17</option>

-        <option value="18">18</option>

-        <option value="19">19</option>

-        <option value="20">20</option>

-        <option value="21">21</option>

-        <option value="22">22</option>

-        <option value="23">23</option>

-        <option value="24">24</option>

-      </select>

-      <span class="arrow"></span></li>

-    <li class="select">

-      <select name="start_minute">

-        <option>Minutes</option>

-        <option value="1">1</option>

-        <option value="2">2</option>

-        <option value="3">3</option>

-        <option value="4">4</option>

-        <option value="5">5</option>

-        <option value="6">6</option>

-        <option value="7">7</option>

-        <option value="8">8</option>

-        <option value="9">9</option>

-        <option value="10">10</option>

-        <option value="11">11</option>

-        <option value="12">12</option>

-        <option value="13">13</option>

-        <option value="14">14</option>

-        <option value="15">15</option>

-        <option value="16">16</option>

-        <option value="17">17</option>

-        <option value="18">18</option>

-        <option value="19">19</option>

-        <option value="20">20</option>

-        <option value="21">21</option>

-        <option value="22">22</option>

-        <option value="23">23</option>

-        <option value="24">24</option>

-      </select>

-      <span class="arrow"></span></li>

+  	<ul class="pageitem">

+	<li class="textbox"><span class="header">Start time</span></li>

+   <li class="menu"><a class="noeffect" href="javascript:openSelectTime('layer_starttime')">

+  <span class="name" id="layer_starttime">Select start time</span><span class="arrow"></span></a></li>

+  </ul>

+  	<ul class="pageitem">

+	<li class="textbox"><span class="header">End time</span></li>

+   <li class="menu"><a class="noeffect" href="javascript:openSelectTime('layer_endtime')">

+  <span class="name" id="layer_endtime">Select end time</span><span class="arrow"></span></a></li>

   </ul>

+  

 <ul class="pageitem">

 <li class="button">

 			<input name="Submit input" type="submit" value="Submit input" /></li>