path: root/js/app.ui.js

/*jslint devel: true*/
/*global $, app, tizen, TemplateManager */

/**
 * @class Ui
 */
function Ui() {
	'use strict';
}

(function () { // strict mode wrapper
	'use strict';
	Ui.prototype = {

		templateManager: null,

		/**
		 * UI module initialisation
		 */
		init: function UI_init(app) {
			this.app = app;
			this.templateManager = new TemplateManager();
			$(document).ready(this.domInit.bind(this));

			// init inner objects
			this.home.context = this;
			this.alarm.context = this;
			this.new_event.context = this;
		},

		/**
		 * When DOM is ready, initialise it
		 */
		domInit: function UI_domInit() {
			this.templateManager.loadToCache(['home', 'alarm', 'new_event', 'event', 'all_day_event'], this.initPages.bind(this));
			// Disable text selection
			$.mobile.tizen.disableSelection(document);
		},

		/**
		 * Append pages to body and initialise them
		 */
		initPages: function UI_initPages() {
			var pages = [];

			pages.push(this.templateManager.get('home'));
			pages.push(this.templateManager.get('alarm'));
			pages.push(this.templateManager.get('new_event'));

			$('body').append(pages.join(''));
			this.fixContentHeight();

			this.home.init();
			this.alarm.init();

			if (!app.ui.new_event.initialized) {
				app.ui.new_event.init();
			}

			$(":jqmData(role='tabbar')").first().delegate( "a", "vmouseup", function ( event ) {
				$(this).removeClass( $.mobile.activeBtnClass );
			});

			$("#new_event").on('pagebeforeshow', function () {
				app.ui.new_event.updateDateFormat();
				app.ui.new_event.setStartDate();
				app.ui.new_event.setEndDate();
				$("#demo-date-1").datetimepicker("value", new Date());
				$("#demo-date-2").datetimepicker("value", new Date());
				$('#add-event-btn').removeClass('disabled');
				// workaround for N_SE-43733
				$(".ui-datefield-selected").removeClass('ui-datefield-selected');
				$(".ui-popupwindow").hide();
			});

			$(document).ready(function () {
				if ($('input[type=radio]:checked').val() !== 'Yes') {
					$("#customDuration").addClass('ui-disabled');
				}

				$('input[type=radio]').change( function () {
					if ($(this).val() === 'Yes') {
						$("#customDuration").removeClass('ui-disabled');
						$("#customDuration").focus();
					} else {
						$("#customDuration").blur();
						$("#customDuration").addClass('ui-disabled');
					}
				});

				$('#customDuration').on('blur', function () {
					var value = Math.abs(parseInt($(this).val()));
					if (isNaN(value)) {
						value = 0;
					}
					$(this).val(value);
				});
			});
			$(".customDuration, #customDuration").on("tap change", function (e) {
				$("#yes_1").attr('checked', true).checkboxradio('refresh');
				$.each($('#new_alarm input:radio'), function () {
					$(this).attr('checked', $(this).val() === 'Yes')
						.checkboxradio('refresh');
				});
				$("#customDuration").removeClass('ui-disabled');
				$("#customDuration").trigger("focus");
			});

			document.addEventListener('webkitvisibilitychange', function (event) {
				$(".ui-popup").popup('close');
				app.ui.new_event.updateDateFormat();
				if (document.webkitVisibilityState === 'visible') {
					app.loadEvents();
					if ($.mobile.activePage.attr('id') === "new_event") {
						if (app.eventId !== 0) {
							app.model.isEventExists(app.eventId, null, function () {
								$.mobile.changePage('#home');
							});
						}
					}
				}
			});

			$("input#customDuration").on("input keypress keyup", function (e) {
				var val = parseInt($(this).val(), 10),
					max = parseInt($(this).attr("max"), 10),
					min = 0;

				if (val > max){
					alert('Alarm can not be set above '+ max +' minutes');
					$(this).val(max);
					app.ui.alarm.updateDurationLabel();
				} else if (val < min) {
					alert('Alarm can not be set below 0 minutes (Off)');
					$(this).val(min);
				}
			});

			window.addEventListener('tizenhwkey', function(e) {
				if (e.keyName == "back") {
					if ($.mobile.activePage.attr('id') === 'home') {
						tizen.application.getCurrentApplication().exit();
					} else if ($.mobile.activePage.attr('id') === 'new_event') {
						$.mobile.changePage("#home");
					} else {
						history.back();
					}
				}
			});

			$.mobile.changePage('#home', 'pop', false, true);
		},

		/**
		 * Contains methods related to the #home page
		 * @namespace
		 */
		home: {
			init: function UI_home_init() {
				var app = this.context.app, self = this, alarm = this.context.alarm;

				$("#demo-date-1, #demo-date-2").datetimepicker();
				$("#allDay").slider();

				$('#exit_btn').on('tap', app.exit.bind(app));
				$("input:radio").checkboxradio();
				alarm.setValue();
				alarm.updateDurationLabel();

				// buttons in the events list
				$('#events_list').on('tap', '.remove_event_btn', function () {
					var eventId = $(this).parents('.event').data('eventid');
					app.model.deleteEvent(eventId);
				});

				$('#events_list').on('click', '.edit_event_btn', function () {
					var eventId = $(this).parents('.event').data('eventid'),
						event = app.model.editEvent(eventId),
						field,
						date,
						duration,
						key,
						properties = ['summary', 'startDate', 'endDate'];

					app.eventId = eventId;
					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);
								} 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.setValue(duration);
					alarm.updateDurationLabel();

					$.mobile.changePage("#new_event");
					// set select allDay property
					app.ui.new_event.setSelectAllDay(event.isAllDay);
					app.ui.new_event.updateDateFormat();
				});

				$('#newEventBtn').on('tap', function () {
					app.eventId = 0;
					// workaround - if just initied once again, datepickers remembers the date
					$('#new_event h1').text('New event');
					$('#title').val('');
					app.ui.new_event.setSelectAllDay(false);
					app.ui.new_event.updateDateFormat();
					alarm.setValue(0);
					alarm.updateDurationLabel();
				});

				$("#homeDateFilter").change(function () {
					app.homeDateFilter =
						app.ui.new_event.getDateFromPicker($(this));
					app.loadEvents();
				});

				this.loadEvents();
			},

			TZD2Date: function (tzdate) {
				return new Date(
					tzdate.getFullYear(),
					tzdate.getMonth(),
					tzdate.getDate(),
					tzdate.getHours(),
					tzdate.getMinutes(),
					tzdate.getSeconds(),
					tzdate.getMilliseconds()
				);
			},

			/**
			 * Get start date value from the form (#demo-date-1 field)
			 *
			 * @returns {string}
			 */
			getStartDate: function UI_home_getStartDate() {
				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)
			 *
			 * @returns {string}
			 */
			getEndDate: function UI_home_getEndDate() {
				var endDate = $('#demo-date-2').attr('data-date');
				return endDate;
			},
			/**
			 * Get the title from the form (#title field)
			 *
			 * @returns {string}
			 */
			getTitle: function UI_home_getTitle() {
				return $('#title').val();
			},
			/**
			 * Get the description from the form (#des field)
			 *
			 * @returns {string}
			 */
			getDescription: function UI_home_getDescription() {
				return $('#des').val();
			},
			/**
			 * Get the location from the form (#location field)
			 *
			 * @returns {string}
			 */
			getLocation: function UI_home_getLocation() {
				return $('#location').val();
			},
			/**
			 * Wrapper for app.loadEvents
			 * @param {Object} e event
			 * @param {Date} date selected date
			 */
			loadEvents: function UI_home_loadEvents(e, date) {
				this.context.app.loadEvents(date);
			},

			/**
			 * Returns text for separating list items with events
			 * Skips repeated values
			 *
			 * @param {Object} event
			 * @returns {string}
			 */
			getSeparatorText: function UI_home_getSeparatorText(event) {
				var previous = '';

				// redefine itself
				this.getSeparatorText = function (event) {
					if (event === undefined) {
						previous = '';
						return undefined;
					}

					var startDate = event.startDate,
						str = this.formatDate(startDate);

					if (previous === str) {
						return ''; // skip it - already returned
					}
					previous = str; // store in the closure for future comparison

					return str;
				};

				return this.getSeparatorText(event);
			},

			formatDate: function UI_home_formatDate(date) {
				var monthNames = [
					"January", "February", "March", "April", "May", "June",
					"July", "August", "September", "October", "November", "December" ];

				this.formatDate = function UI_home_formatDate(date) {
					return date.getDate() + ". " + monthNames[date.getMonth()] + " " + date.getFullYear();
				};
				return this.formatDate(date);
			},

			/**
			 * Format hour
			 * @param {TZDate} date
			 * @returns {string}
			 */
			formatHour: function UI_home_formatHour(date) {
				return date.getHours() + ':' + this.pad(date.getMinutes());
			},

			/**
			 * Zero-pads a positive number to 2 digits
			 */
			pad: function UI_home_pad(number) {
				return number < 10 ? '0' + number : number;
			},

			/**
			 * Creates HTML representing the given array of alarms
			 *
			 * @param {Alarm[]} alarms
			 * @returns {string}
			 */
			getAlarmsHtml: function UI_home_getAlarmsHtml(alarms) {
				var alarm = '', j, len;

				len = alarms.length;

				if (len) {
					alarm += '<p class="ui-li-aside ui-li-desc"><img src="img/clock.png"/>';

					for (j = 0; j < len; j += 1) {
						alarm += alarms[j].before.length;
						alarm += ' ' + alarms[j].before.unit;
					}
					alarm += '</p>';
				}
				return alarm;
			},
			/**
			 * Load the events into the #event_popup.
			 *
			 * Callback function for app.loadEvents.
			 * @param {Array} events
			 */
			onEventSearchSuccess: function UI_home_onEventSearchSuccess(events) {
				events.reverse();

				var i = 0, j = 0,
					str = "",
					event,
					alarm = '',
					dividerText = '',
					templateParameters = {},
					tmplName;

				// content
				str = '';
				if (events.length !== 0) {
					for (i = 0; i < events.length; i += 1) {
						event = events[i];

						dividerText = this.getSeparatorText(event);

						if (dividerText) {
							str += '<li data-role="list-divider">'
								+ dividerText + '</li>';
						}

						alarm = this.getAlarmsHtml(event.alarms);

						templateParameters = {
							uid: event.id.uid,
							startDate: this.formatHour(event.startDate),
							endDate: this.formatHour(event.endDate),
							summary: event.summary || '[No title]',
							location: event.location,
							description: event.description,
							alarm: alarm
						};

						tmplName = event.isAllDay ? 'all_day_event' : 'event';
						str += this.context.templateManager.get(tmplName,
							templateParameters);
					}
				} else {
					dividerText = this.getSeparatorText({
						startDate: app.homeDateFilter
					});

					if (dividerText) {
						str += '<li data-role="list-divider">'
							+ dividerText + '</li>';
					}

					str += '<li>No events found</li>';
				}
				this.getSeparatorText(); // clear the separator state

				$('#events_list ul').html(str);
				$('#events_list ul').listview();
				$('#events_list ul').data('listview').refresh();
				$('#events_list ul input.edit_event_btn').button();
				$('#events_list ul input.remove_event_btn').button();
			},

			/**
			 * Error handler for event search
			 */
			onEventSearchError: function UI_home_onEventSearchError() {
				console.error("event search error");
			},

			updateHomeDateFilter: function () {
				$("#homeDateFilter")
					.datetimepicker("value", app.homeDateFilter);
			}
		},

		/**
		 * Contains methods related to the #alarm page
		 * @namespace
		 */
		alarm: {
			init: function UI_alarm_init() {
				$("#customDuration").val("");
			},
			setValue: function (duration) {
				if(typeof duration == "undefined") {
					duration = 0;
				}

				$.each($('#new_alarm input:radio'), function () {
					$(this).attr('checked', parseInt($(this).val(), 10) === duration)
						.checkboxradio('refresh');
				});
				
				if (!$("#new_alarm input[type=radio]:checked").val()) {
					$('#yes_1').attr('checked', true).checkboxradio('refresh');
					$("#customDuration").val(duration).removeClass('ui-disabled');
				}
				return duration;
			},

			getValue: function () {
				var value = parseInt($("#new_alarm input[type=radio]:checked").val(), 10);
				if(isNaN(value))
				{
					value = Math.abs(parseInt($("#customDuration").val()));
					if (isNaN(value)) {
						value = 0;
					}
				} else {
					$("#customDuration").val("").addClass('ui-disabled');
				}
				return value;
			},

			/**
			 * Read and set alarm duration label
			 *
			 * @returns {string} Label
			 */
			updateDurationLabel: function (eventAndAlarm) {
				var label = this.getValue();
				if (label === -1) {
					label = "Off";
				} else {
					label += " minute(s) before";
				}
				$('#alarm').text(label);
				return label;
			}
		},

		/**
		 * Contains methods related to the new event page
		 * @namespace
		 */
		new_event: {
			initialized: false,
			animateStatus: false,

			init: function () {
				this.assignFields();
				this.updateDateFormat();
				this.setStartDate();
				this.setEndDate();
				this.addEvents();
				this.initialized = true;
			},

			addEvents: function () {
				var self = this;

				this.allday.change(this.updateDateFormat.bind(this));
				this.start.change(this.validStart.bind(this));
				this.end.change(this.validEnd.bind(this));

				$("#new_event").on('pageshow', function () {
					self.animateStatusChange.bind(self)();
				});

				/* old events */
				$('#add-event-btn').on('tap', this.addEvent.bind(this));
				$('#add-event-cancel-btn').on('tap', this.cancel.bind(this));
				//alarm selection confirm
				$('#add-alarm').on('tap', app.switchAlarm.bind(app));
				// go to alarm selection
				$('#add_alarm').on('tap', function (e) {
					e.preventDefault();
					$.mobile.changePage('#new_alarm');
				});
			},

			animateStatusChange: function () {
				var self = this;
				this.end.next().find('span').not('.ui-datefield-seperator')
					.off('tap')
					.on('tap', function (e) {
						self.animateStatus =
							$(e.target).hasClass('ui-btn-picker');
				});
			},

			validStart: function () {
				this.setStartDate();
				if (this.startDate > this.endDate) {
					this.end.datetimepicker("value", this.startDate);
					this.setEndDate();
				}
			},

			validEnd: function () {
				if (this.startDate > this.getDateFromPicker(this.end)) {
					this.setDateValue(this.end, this.endDate)
					this.showWarning('End date cannot be earlier than initial date');
				} else {
					this.setEndDate();
				}
			},

			validAll: function () {
				this.validStart();
				this.validEnd();
			},

			showWarning: function (text) {
				this.popup.children('p').text(text);
				this.popup.popup('open', {
					positionTo: "window"
				});
			},

			assignFields: function () {
				this.allday = $("#allDay");
				this.start = $("#demo-date-1");
				this.end = $("#demo-date-2");
				this.popup = $("#popup");
			},

			updateDateFormat: function () {
				var date = tizen.time.getDateFormat(true),
				time = tizen.time.getTimeFormat();
				if (this.allday.val() === '1') {
					this.format = "MMM dd yyyy";
					this.end.parent().parent().hide();
					this.end.parent().parent().prev().hide();
				} else {
					if (time === "h:m:s") {
						this.format = "MMM dd yyyy HH:mm";
					} else {
						this.format = "MMM dd yyyy hh:mm tt";
					}
					this.end.parent().parent().show();
					this.end.parent().parent().prev().show();
				}
				this.setDateFormat(this.start);
				this.setDateFormat(this.end);
			},

			setDateFormat: function (field) {
				field.datetimepicker("option", "format", this.format)
					.datetimepicker();
			},

			setDateValue: function (field, date) {
				var sp = field.next().find('span').not('.ui-datefield-seperator');
				field.datetimepicker("value", date);
				if (this.animateStatus) {
					sp.animationComplete(function () {
						setTimeout(function () {
							field.datetimepicker("value", date);
						}, 700);
						sp.off('animationComplete');
					});
				}
			},

			setStartDate: function () {
				this.startDate = this.getDateFromPicker(this.start);
			},

			setEndDate: function () {
				this.endDate = this.getDateFromPicker(this.end);
			},

			getDateFromPicker: function (field) {
				return field.data('datetimepicker').options.date;
			},

			/* methods before new event refactor */

			setSelectAllDay: function (value) {
				value = value ? 1 : 0;
				app.ui.new_event.allday.find("option")
					.attr('selected', false);
				app.ui.new_event.allday.find("option[value='" + value + "']")
					.attr('selected', true);
					app.ui.new_event.allday.slider("refresh");
			},

			addEvent: function Ui_newEvent_addEvent(e) {
				e.preventDefault();
				e.stopPropagation();
				app.switchAlarm();
				var button = $('#add-event-btn');
				if (!button.hasClass('disabled')) {
					button.addClass('disabled');
					if (app.eventId === 0) {
						this.context.app.addEvent(e, function(){
							$.mobile.changePage('#home');
						});
					} else {
						this.context.app.updateEvent(e, function(){
							$.mobile.changePage('#home');
						});
					}
				}
			},

			cancel: function Ui_newEvent_cancel(e) {
				e.preventDefault();
				e.stopPropagation();
				$.mobile.changePage('#home');
			}
		},

		fixContentHeight: function Ui_fixContentHeight() {
			var contentHeight = screen.availHeight - $('div[data-role="header"]').outerHeight() - $('div[data-role="footer"]').outerHeight();
			$('div[data-role="content"]').css('height', contentHeight);
		}
	};

}());