Updated Private -> RSA

Change-Id: Ieab56594979d64728659cb00c11eca72cbf37f98

11 files changed, 308 insertions, 122 deletions

diff --git a/.project b/.project
new file mode 100644
index 0000000..8e610f5
--- /dev/null
+++ b/.project
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>EventManager</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.wst.common.project.facet.core.builder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>json.validation.builder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.tizen.web.jslint.nature.JSLintBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.tizen.web.css.nature.CSSBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.wst.validation.validationbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.tizen.web.project.builder.WebBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>json.validation.nature</nature>
+		<nature>org.tizen.web.jslint.nature.JSLintNature</nature>
+		<nature>org.tizen.web.css.nature.CSSNature</nature>
+		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
+		<nature>org.eclipse.wst.common.project.facet.core.nature</nature>
+		<nature>org.tizen.web.project.builder.WebNature</nature>
+	</natures>
+</projectDescription>
diff --git a/config.xml b/config.xml
index 071e1b0..82c92ee 100644
--- a/config.xml
+++ b/config.xml
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets"
-	id="http://sample-web-application.tizen.org/EventManager" version="2.1.0"
+	id="http://sample-web-application.tizen.org/EventManager" version="2.2.0"
 	viewmodes="maximized">
 	<tizen:application id="VJTVhzmnwf.EventManager"
-		package="VJTVhzmnwf" required_version="2.1" />
+		package="VJTVhzmnwf" required_version="2.2" />
 	<content src="index.html" />
 	<icon src="icon.png" />
 	<name>EventManager</name>
diff --git a/css/style.css b/css/style.css
index c6e536f..c6780ef 100644
--- a/css/style.css
+++ b/css/style.css
@@ -88,4 +88,14 @@ li.event .ui-li-aside {
 }
 .ui-tabbar:not(.ui-tabbar-persist) a.ui-btn-active .ui-btn-text, .ui-tabbar:not(.ui-tabbar-persist) .ui-btn-show-style .ui-btn-text {
 	border:none;
+}
+.allDayIdentifier {
+	width:56px;
+	text-align:center;
+}
+.allDaySwitcherTitle, .allDaySwitcher {
+	display: inline-block;
+}
+.ui-datefield .ui-datefield-month {
+	line-height: 46px;
 }
\ No newline at end of file
diff --git a/img/red_x.gif b/img/red_x.gif
index 25fd4c5..52d3cba 100644
--- a/img/red_x.gif
+++ b/img/red_x.gif
diff --git a/js/app.js b/js/app.js
index 9a11fdd..5859cb3 100644
--- a/js/app.js
+++ b/js/app.js
@@ -97,6 +97,7 @@ var App = null;
 				this.alarmN = [];
 				this.alarm = false;
 			}
+
 			app.ui.alarm.updateDurationLabel();
 		},
 
@@ -128,7 +129,7 @@ var App = null;
 				calendarItemInit = null,
 				fullDay = false;
 
-			fullDay = this.fullDay;
+			fullDay = this.ui.home.getAllDayInfo();
 			selectedDate = this.ui.home.getStartDate();
 
 			duration = this.calculateDuration(
@@ -145,7 +146,6 @@ var App = null;
 				duration: duration,
 				summary: this.ui.home.getTitle()
 			};
-
 			this.calendarItemInit = calendarItemInit;
 
 			if (this.alarmN) {
@@ -163,27 +163,27 @@ var App = null;
 		},
 
 		updateEvent: function (e, callback) {
-			var new_values, selectedDate, duration;
+			var new_values, selectedDate, duration, fullDay;
 
 			selectedDate = this.ui.home.getStartDate();
+			fullDay = this.ui.home.getAllDayInfo();
 
 			duration = this.calculateDuration(
 				selectedDate,
 				this.ui.home.getEndDate(),
-				false
+				fullDay
 			);
-
 			new_values = {
 				startDate: this.createTZDateFromString(selectedDate),
 				duration: duration,
 				summary: this.ui.home.getTitle(),
+				isAllDay: fullDay,
 				alarms: []
 			};
 
 			if (this.alarmN) {
 				new_values.alarms = [this.alarmN];
 			}
-
 			this.model.updateEvent(app.eventId, new_values);
 			this.loadEvents();
 			if (typeof callback === 'function'){
@@ -202,16 +202,23 @@ var App = null;
 		 * @returns {TimeDuration}
 		 */
 		calculateDuration: function calculateDuration(startDate, endDate, fullDay) {
-			var duration = 0;
-
-			if (fullDay === undefined) {
-				fullDay = false;
-			}
+			var duration = 0,
+				oneDay,
+				diffDays;
 
 			startDate = new Date(startDate);
 			endDate = new Date(endDate);
 
-			duration = Math.round((endDate.getTime() - startDate.getTime()) / 60000); // needs duration in minutes;
+			if (fullDay) {
+				oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
+
+				diffDays = Math.round(Math.abs((startDate.getTime() - endDate.getTime())/(oneDay)));
+				diffDays = (diffDays < 1 ? 1 : diffDays); //minimum 1 day duration
+				duration = diffDays * 60 * 24;
+			} else {
+				// needs duration in minutes;
+				duration = Math.round((endDate.getTime() - startDate.getTime()) / 60000);
+			}
 
 			return this.model.getTimeDuration(duration);
 		},
diff --git a/js/app.model.js b/js/app.model.js
index 8f43b8c..bdec790 100644
--- a/js/app.model.js
+++ b/js/app.model.js
@@ -42,7 +42,6 @@ var Model = function Model() {
 
 			timeDuration = this.getTimeDuration(minutes);
 			calendarAlarm = new tizen.CalendarAlarm(timeDuration, "DISPLAY", description);
-
 			return calendarAlarm;
 		},
 
@@ -91,7 +90,6 @@ var Model = function Model() {
 
 
 			calendar = this.getCalendar();
-
 			if (date) {
 				// events on 'date''
 				filter = this.getStartDateFilter(new Date(date));
@@ -127,6 +125,18 @@ var Model = function Model() {
 			return filter;
 		},
 
+		isEventExists: function(event_id, success, error) {
+			var myCalendar = this.getCalendar();
+			error = error || new Function;
+			success = success || new Function;
+			try {
+				myCalendar.get(new tizen.CalendarEventId(event_id));
+				success();
+			} catch(e) {
+				error(e);
+			}
+		},
+
 		/**
 		 * @param {string} event_id
 		 */
diff --git a/js/app.ui.js b/js/app.ui.js
index f1b051e..529f778 100644
--- a/js/app.ui.js
+++ b/js/app.ui.js
@@ -1,5 +1,5 @@
 /*jslint devel: true*/
-/*global $, app, TemplateManager */
+/*global $, app, tizen, TemplateManager */
 
 /**
  * @class Ui
@@ -32,7 +32,7 @@ function Ui() {
 		 * When DOM is ready, initialise it
 		 */
 		domInit: function UI_domInit() {
-			this.templateManager.loadToCache(['home', 'alarm', 'new_event', 'event'], this.initPages.bind(this));
+			this.templateManager.loadToCache(['home', 'alarm', 'new_event', 'event', 'all_day_event'], this.initPages.bind(this));
 			// Disable text selection
 			$.mobile.tizen.disableSelection(document);
 		},
@@ -55,14 +55,58 @@ function Ui() {
 			this.new_event.init();
 
 			document.addEventListener('webkitvisibilitychange', function (event) {
-				if (document.webkitVisibilityState === 'visible') {
-					app.loadEvents();
+				$('input').blur();
+				$(".ui-popup").popup('close');
+				if ($.mobile.activePage.attr('id') !== "new_event") {
+					if (document.webkitVisibilityState === 'visible') {
+						app.loadEvents();
+						app.ui.checkTimeFormat();
+						if (app.eventId !== 0) {
+							app.model.isEventExists(app.eventId, null, function () {
+								$.mobile.changePage('#home');
+							});
+						}
+					}
+				}
+			});
+
+			$(window).on('softkeyboardchange', function (e) {
+				if (e.originalEvent.state === "off") {
+					$("input:radio").checkboxradio("refresh");
+				}
+			});
+
+			document.addEventListener('tizenhwkey', function(e) {
+				if (e.keyName == "back") {
+					if ($.mobile.activePage.attr('id') === 'home') {
+						tizen.application.getCurrentApplication().exit();
+					} else {
+						history.back();
+					}
 				}
 			});
 
 			$.mobile.changePage('#home', 'pop', false, true);
 		},
 
+		/**
+		 * Contains method related to time format 12/24h
+		 * @namespace
+		 */
+		checkTimeFormat: function UI_checkTimeFormat () {
+			var date = tizen.time.getDateFormat(true),
+				time = tizen.time.getTimeFormat();
+			if (time === "h:m:s") {
+				//(h:m:s) 24hours format and (ap h:m:s) 12hours format
+				$("#demo-date-1, #demo-date-2").datetimepicker("option",
+					"format",
+					"MMM dd yyyy HH:mm");
+			} else {
+				$("#demo-date-1, #demo-date-2").datetimepicker("option",
+					"format",
+					"MMM dd yyyy hh:mm tt");
+			}
+		},
 
 		/**
 		 * Contains methods related to the #home page
@@ -89,42 +133,52 @@ function Ui() {
 						date,
 						duration,
 						key,
-						prop,
 						properties = ['summary', 'startDate', 'endDate'];
-
 					app.ui.new_event.dateResetLock(true);
 					app.eventId = eventId;
-					for (key in properties) {
-						if (properties.hasOwnProperty(key)) {
-							prop = properties[key];
-							if (event.hasOwnProperty(prop)) {
-								field = $('#new_event input[name="' + prop + '"]');
-								if (field.length !== 0) {
-									if (field.attr('type') === 'datetime') {
-										date = self.TZD2Date(event[prop]);
-										field.datetimepicker('value', date);
-									} else {
-										field.val(event[prop]);
-									}
+					properties.forEach(function(element){
+						if (event.hasOwnProperty(element)) {
+							field = $('#new_event input[name="' + element + '"]');
+
+							if (field.length !== 0) {
+								if (field.attr('type') === 'datetime') {
+									date = self.TZD2Date(event[element]);
+									field.datetimepicker('value', date);
+									field.datetimepicker();
+									app.ui.new_event.setSelectAllDay(event.isAllDay);
+								} else {
+									field.val(event[element]);
 								}
 							}
 						}
-					}
+					});
 
 					$('#new_event h1').text('Edit Event');
 
 					if (event.alarms.length !== 0) {
 						duration = app.retrieveTimeDurationInMinutes(event.alarms[0].before);
 					}
+
+					if(typeof duration == "undefined") {
+						duration = -1;
+					}
 					alarm.selectOption(alarm.getValue(duration || 0));
+
 					$.mobile.changePage("#new_event");
+
+					// set select allDay property
+					app.ui.new_event.setSelectAllDay(event.isAllDay);
 				});
 
 				$('#newEventBtn').on('tap', function () {
 					app.ui.new_event.dateResetLock(false);
 					app.eventId = 0;
+					$("#demo-date-1, #demo-date-2").datetimepicker();
+					$("#demo-date-1, #demo-date-2").datetimepicker(new Date());
+					// workaround - if just inietied once agan, datepickers remembers the date
 					$('#new_event h1').text('New Event');
 					$('#title').val('');
+					app.ui.new_event.setSelectAllDay(false);
 					alarm.selectOption();
 				});
 
@@ -152,6 +206,16 @@ function Ui() {
 				var startDate = $('#demo-date-1').attr('data-date');
 				return startDate;
 			},
+
+			/**
+			 * Get info if event is allDay event
+			 *
+			 * @returns {boolean}
+			 */
+			getAllDayInfo: function UI_home_getAllDayInfo() {
+				var isAllDay = $('select#allDay').val() == '1' ? true : false;
+				return isAllDay;
+			},
 			/**
 			 * Get end date value from the form (#demo-date-2 field)
 			 *
@@ -286,7 +350,8 @@ function Ui() {
 					event,
 					alarm = '',
 					dividerText = '',
-					templateParameters = {};
+					templateParameters = {},
+					tmplName;
 
 				// content
 				str = '';
@@ -294,10 +359,6 @@ function Ui() {
 				for (i = 0; i < events.length; i += 1) {
 					event = events[i];
 
-					if (event.isAllDay) { // this should be removed when fullDay support is added
-						continue;
-					}
-
 					dividerText = this.getSeparatorText(event);
 
 					if (dividerText) {
@@ -316,8 +377,8 @@ function Ui() {
 						alarm: alarm
 					};
 
-					str += this.context.templateManager.get('event', templateParameters);
-
+					tmplName = event.isAllDay ? 'all_day_event' : 'event';
+					str += this.context.templateManager.get(tmplName, templateParameters);
 				}
 				this.getSeparatorText(); // clear the separator state
 
@@ -342,7 +403,28 @@ function Ui() {
 		 */
 		alarm: {
 			init: function UI_alarm_init() {
-				$(".customDuration").hide();
+				var self = this;
+				$("input.customDuration").on('change', function () {
+					var tmpChecked,
+					val = $("input.customDuration").val() || 0;
+					$.each($('#new_alarm input:radio'), function () {
+						tmpChecked = $(this).val();
+						if ( tmpChecked === val) {
+							$(this).attr('checked', true).checkboxradio('refresh');
+						} else {
+							$(this).attr('checked', false).checkboxradio('refresh');
+						}
+					});
+					self.getValue(val);
+					app.switchAlarm();
+					self.updateDurationLabel();
+				});
+				$('#new_alarm input:radio').on('change', function () {
+					$("input.customDuration").val($(this).val());
+					self.getValue($(this).val());
+					app.switchAlarm();
+					self.updateDurationLabel();
+				});
 			},
 			/**
 			 * Read alarm duration from the UI
@@ -350,32 +432,28 @@ function Ui() {
 			 * @returns {int} Alarm duration in minutes
 			 */
 			selectOption: function (val) {
-				val = val || 0;
+				if(typeof val == "undefined") {
+					val = 0;
+				}
 				$.each($('#new_alarm input:radio'), function () {
 					$(this).attr('checked', parseInt($(this).val(), 10) === val)
 						.checkboxradio('refresh');
 				});
+				this.getValue(val);
 				app.switchAlarm();
+				this.updateDurationLabel();
 			},
 
 			getDuration: function UI_alarm_getDuration() {
-				var radioValue = 0,
-					radiobutton = null;
-
+				var self = this;
+				var radiobutton = null,
+					inputValue = $("input.customDuration").val();
 				radiobutton = $('#new_alarm :jqmData(role=controlgroup) input:radio[checked]');
-
-				radioValue = parseInt(radiobutton.val(), 10);
-				return radioValue;
+				return inputValue;
 			},
+
 			getValue: function (duration) {
-				var table = [-1, 5, 30, 60];
-				if (table.indexOf(duration) >= 0) {
-					$(".customDuration").hide();
-				} else {
-					$("input.customDuration").val(duration);
-					$("label.customDuration span.customDurationSpan").text(duration);
-					$(".customDuration").show();
-				}
+				$("input.customDuration").val(parseInt(duration, 10));
 				return duration;
 			},
 
@@ -385,7 +463,13 @@ function Ui() {
 			 * @returns {string} Label
 			 */
 			updateDurationLabel: function () {
-				var label = $('#new_alarm input:radio[checked]').next().text();
+				var label = parseInt($("input.customDuration").val(), 10);
+				if (label === -1) {
+					label = "Off";
+				} else {
+					label += " minutes before";
+				}
+				$("label.customDuration span.customDurationSpan").text(label);
 				$('#alarm').text(label);
 				return label;
 			}
@@ -399,18 +483,22 @@ function Ui() {
 			init: function UI_newEvent_init() {
 				var app = this.context.app,
 					self = this;
+
 				$("#demo-date-1, #demo-date-2").datetimepicker();
+				app.ui.checkTimeFormat();
+
 				$("#demo-date-1").bind("date-changed", function UI_newEvent_onDateChanged(e, newStartDate) {
 					var startOptions = $(this).data('datetimepicker').options,
 						that = $(this),
-						endData = $("#demo-date-2").data('datetimepicker'),
-						endOptions = typeof endData === 'object' ? endData.options : null,
 						oldStartDate,
-						diff,
-						endDate,
 						today = new Date(),
-						endDateTemp,
-						newStartDateTemp;
+						setter1 = $("#demo-date-1").datetimepicker("value"),
+						setter2 = $("#demo-date-2").datetimepicker("value");
+
+					if ( setter1 > setter2 ) {
+						$("#demo-date-2").datetimepicker("value", newStartDate);
+					}
+
 					// get the old date
 					oldStartDate = startOptions.oldDate;
 					startOptions.oldDate = newStartDate;
@@ -419,61 +507,31 @@ function Ui() {
 						console.warn('date-changed handler: old date empty');
 						return;
 					} else if (newStartDate - today < 0) {
-						$("#date-1 .ui-datefield span").animationComplete(function () {
-							newStartDate = today;
-							that.datetimepicker('value', today);
-							that.datetimepicker();
-						});
+						that.datetimepicker('value', today);
+						that.datetimepicker();
+						newStartDate = today;
 					}
-
-					endDate = endOptions.date;
-
-					// calculate time difference in minutes
-					diff = (newStartDate.getTime() - oldStartDate.getTime()) / 1000 / 60;
-
-					// move the end date by 'diff'
-					endDate.setMinutes(endDate.getMinutes() + diff);
-
-					$("#demo-date-2").datetimepicker('value', endDate);
-					$(".customDuration").hide();
 				});
 
 				$("#demo-date-2").bind("date-changed", function (e, newEndDate) {
 					var endOptions = $(this).data('datetimepicker').options,
-						that = $(this),
-						startDate = $("#demo-date-1").data('datetimepicker').options.date,
-						oldEndDate,
-						startDateTemp,
-						newEndDateTemp,
-						diff;
-
-					oldEndDate = endOptions.oldDate;
-
-					if (newEndDate - startDate < 0) {
-						$("#date-2 .ui-datefield span").animationComplete(function () {
-							alert('End date cannot be earlier than initial date');
-							that.datetimepicker('value', oldEndDate);
-							that.datetimepicker();
-						});
+						that = $(this), f = Math.floor,
+						setter1 = $("#demo-date-1").datetimepicker("value"),
+						startDate = $("#demo-date-1").data('datetimepicker').options.date;
+					if ((f(new Date(newEndDate).getTime()/1000/60)
+							- f(new Date(startDate).getTime()/1000/60)) < 0) {
+						alert('End date cannot be earlier than initial date');
+						setTimeout(function() {
+							that.datetimepicker('value', startDate);
+						}, 200);
 					} else {
 						endOptions.oldDate = newEndDate;
 					}
+				});
 
-					// calculate time difference in years (4 years delay)
-					startDateTemp = startDate;
-					startDateTemp.setSeconds(0);
-					startDateTemp.setMilliseconds(0);
-					newEndDateTemp = newEndDate;
-					newEndDateTemp.setSeconds(0);
-					newEndDateTemp.setMilliseconds(0);
-					diff = (newEndDateTemp.getTime() - startDateTemp.getTime()) / 1000 / 60 / 60 / 24 / 1461;
-					if (diff >= 1) {
-						$("#date-2 .ui-datefield span").animationComplete(function () {
-							alert('The difference between start and end date must be less than 4 years.');
-							that.datetimepicker('value', oldEndDate);
-							that.datetimepicker();
-						});
-					}
+				$("select#allDay").bind("change", function () {
+					$('.ui-datefield-hour, .ui-datefield-min, .ui-datefield-period, span[data-pat=":"]')
+						.toggle();
 				});
 
 				$('#new_event').on('pageshow', function UI_newEvent_onPageShow(event) {
@@ -486,8 +544,6 @@ function Ui() {
 					// store it for future use
 					startOptions.oldDate = new Date(startOptions.date.getTime());
 
-					// add 1 hour
-					tmpDate.setHours(tmpDate.getHours() + 1);
 					if (self.dateResetLock() !== true) {
 						if (typeof date2.datetimepicker === 'function') {
 							// set end date
@@ -497,14 +553,24 @@ function Ui() {
 						}
 					}
 
-					// enable OK button
 					$('#add-event-btn').removeClass('disabled');
+					// enable OK button
 				});
 
 				$('#switch-1').on('changed', app.switchFullDay.bind(app));
 
 				$('#add-event-btn').on('tap', this.addEvent.bind(this));
 
+				$('#add-event-btn').on('tap', function (e) {
+					var setter1 = $("#demo-date-1").datetimepicker("value"),
+						today = new Date();
+
+					if ( setter1 > today ) {
+						$('#add-event-btn').addClass('disabled');
+					}
+					$('#add-event-btn').removeClass('disabled');
+				});
+
 				$('#add-event-cancel-btn').on('tap', this.cancel.bind(this));
 
 				//alarm selection confirm
@@ -544,6 +610,22 @@ function Ui() {
 				return value;
 			},
 
+			setSelectAllDay: function (value) {
+				var select = $('select#allDay');
+				if (value) {
+					select[0].selectedIndex = 1;
+					$('.ui-datefield-hour, .ui-datefield-min, .ui-datefield-period, span[data-pat=":"]')
+						.hide();
+				} else {
+					select[0].selectedIndex = 0;
+					$('.ui-datefield-hour, .ui-datefield-min, .ui-datefield-period, span[data-pat=":"]')
+						.show();
+				}
+				try {
+					select.slider("refresh");
+				} catch (e){}
+			},
+
 			addEvent: function Ui_newEvent_addEvent(e) {
 				e.preventDefault();
 				e.stopPropagation();
diff --git a/templates/alarm.tpl b/templates/alarm.tpl
index 6b909c1..3607626 100644
--- a/templates/alarm.tpl
+++ b/templates/alarm.tpl
@@ -7,20 +7,23 @@
 
         <div data-role="content">
             <fieldset data-role="controlgroup">
-                 <input type="radio" name="radio-choice" id="radio-choice-1" value="-1" checked="checked" />
-                 <label for="radio-choice-1">Off</label>
+                 <input type="radio" name="radio-choice" id="radio-choice-0" value="-1" checked="checked" />
+                 <label for="radio-choice-0">(Off)</label>
+
+                 <input type="radio" name="radio-choice" id="radio-choice-1" value="0" />
+                 <label for="radio-choice-1">On time</label>
 
                  <input type="radio" name="radio-choice" id="radio-choice-2" value="5" />
-                 <label for="radio-choice-2">5 minute before</label>
+                 <label for="radio-choice-2">5 minutes before</label>
 
                  <input type="radio" name="radio-choice" id="radio-choice-3" value="30" />
-                 <label for="radio-choice-3">30 minute before</label>
+                 <label for="radio-choice-3">30 minutes before</label>
 
                  <input type="radio" name="radio-choice" id="radio-choice-4" value="60" />
                  <label for="radio-choice-4">1 hour before</label>
 
-                 <input class="customDuration" type="radio" name="radio-choice" id="radio-choice-5" value=0 />
-                 <label class="customDuration" for="radio-choice-5"><span class="customDurationSpan">0</span> minutes before</label>
+                 <input class="customDuration" type="number" name="radio-choice" value="0" min="-1" id="radio-choice-5" max="999"/>
+                 <label class="customDuration" for="radio-choice-5"><span class="customDurationSpan">Off</span></label>
 
             </fieldset>
             <a href="#new_event" id="add-alarm" data-role="button">Save</a>
diff --git a/templates/all_day_event.tpl b/templates/all_day_event.tpl
new file mode 100644
index 0000000..7756d1b
--- /dev/null
+++ b/templates/all_day_event.tpl
@@ -0,0 +1,9 @@
+<li class="event" data-eventid="%uid%">
+	<div class="ui-li-aside ui-li-desc">
+		<div class="allDayIdentifier">All</div>
+		<div class="allDayIdentifier">Day</div>
+	</div>
+	<div class="ul-li-desc"><span class="description">%summary|escape%</span></div>
+	<div class="editEvent"><form><input type="button" class="edit_event_btn" data-inline="true" value="edit"/></form></div>
+	<div class="deleteEvent"><form><input type="button" class="remove_event_btn" data-inline="true" value="delete"/></form></div>
+</li>
diff --git a/templates/home.tpl b/templates/home.tpl
index 048a0c0..e92510d 100644
--- a/templates/home.tpl
+++ b/templates/home.tpl
@@ -1,7 +1,7 @@
 	<!-- Start of first page: #home -->
 	<div data-role="page" id="home" data-add-back-btn="false">
 		<div data-role="header">
-			<h1>EVENT MANAGER</h1>
+			<h1>Event Manager</h1>
 		</div>
 		<div data-role="content">
 			<div id="events_list">
diff --git a/templates/new_event.tpl b/templates/new_event.tpl
index b5042f2..43ee648 100644
--- a/templates/new_event.tpl
+++ b/templates/new_event.tpl
@@ -24,9 +24,22 @@
 						<input type="datetime" name="endDate" id="demo-date-2" data-format="MMM dd yyyy HH:mm"/>
 					</span>
 				</div>
+
 				<label for="alarm">Alarm</label>
 				<div>
-					<span id="alarm">-</span> <a id="add_alarm" data-inline="true" data-role="button">change</a>
+					<span id="alarm">0 minutes before</span> <a id="add_alarm" data-inline="true" data-role="button">change</a>
+				</div>
+
+				<div data-role="dataAllDay">
+					<span class="allDaySwitcherTitle">
+						All day?
+					</span>
+					<span class="allDaySwitcher">
+						<select data-role="slider" id="allDay">
+							<option value="0"></option>
+							<option value="1"></option>
+						</select>
+					</span>
 				</div>
 			</fieldset>