<div id="mobile_calendarcreate" data-role="page">

	<div data-role="header" data-inset="true" data-position="fixed">
		<a class="btn-back" href="#"  data-transition="slide" data-rel="back">Cancel</a>
		<h1>Add Event</h1>
		<a href="#" class ="header-button-save" onclick="calendarEvent.createEvent();">Done</a>
	</div>
	
	<form id="form_new_event">
	<div data-role="content" data-inset="true">
		<ul data-role="listview" class="cal-event-detail ui-listview event-details">
			<li>
				<p class="ui-li-desc cal-title"><input type="text" name="title" placeholder="Title"/></p>
			</li>
			<li>
				<p class="ui-li-desc cal-location"><input type="text" name="location" placeholder="Location" /></p>
			</li>
		</ul>
		
		<ul data-role="listview" class="cal-event-detail ui-listview event-details event-start-end">
			<li>
				<p class="ui-li-desc cal-event-title cal-event-start"><b>Start</b></p>
				<input type="date" name="startDate" value="" onchange="onChangeDate(this);"/>
				<input type="time" name="startTime" value="09:00" onchange="onChangeDate(this);"/>
				<p class="ui-li-desc cal-event-title"><b>End</b></p>
				<input type="date" name="endDate"  value=""/>
				<input type="time" name="endTime" value="09:30"/>
			</li>
		</ul>
		
		<ul data-role="listview" class="cal-event-detail ui-listview event-details event-start-end event-notes">
			<li>
				<p class="ui-li-desc cal-notes"></p>
				<p class="ui-li-desc cal-notes"><textarea rows="2" cols="20" name="CalMessage" placeholder="Notes"></textarea></p>
			</li>
		</ul>
	</div>
	</form>


</div>

<div id="mobile_calendaredit" data-role="page">

	<div data-role="header" data-inset="true" data-position="fixed">
		<a class="btn-back" href="#"  data-transition="slide" data-rel="back">Cancel</a>
		<h1>Edit Event</h1>
		<a href="#" class ="header-button-save" onclick="calendarEvent.updateEvent();">Done</a>
	</div>
	
	<form id="form_edit_event">
	<div data-role="content" data-inset="true">
		<ul data-role="listview" class="cal-event-detail ui-listview event-details">
			<li>
				<h3 class="ui-li-heading cal-event-heading"><input type="text" name="title" placeholder="Title" /></h3>
			</li>
			<li>
				<p class="ui-li-desc cal-location"><input type="text" name="location" placeholder="Location" /></p>
			</li>
		</ul>
		
		<ul data-role="listview" class="cal-event-detail ui-listview event-details event-start-end">
			<li>
				<p class="ui-li-desc cal-event-title cal-event-start"><b>Start</b></p>
				<input type="date" name="startDate" value="" onchange="onChangeDate(this);"/>
				<input type="time" name="startTime" value="" onchange="onChangeDate(this);"/>
				<p class="ui-li-desc cal-event-title"><b>End</b></p>
				<input type="date" name="endDate"  value=""/>
				<input type="time" name="endTime" value=""/>
			</li>
		</ul>

		<ul data-role="listview" class="cal-event-detail ui-listview event-details event-start-end event-notes">
			<li>
				<p class="ui-li-desc cal-notes"></p>
				<p class="ui-li-desc cal-notes"><textarea rows="2" cols="20" name="CalMessage" placeholder="Notes"></textarea></p>
			</li>
		</ul>

	</div>
	</form>

</div>


<script type="text/javascript">
	var calendarEvent = {

		renderCreateContent : function()	{	
		
			var date = new Date;
			var dateStr = date.format('yyyy-mm-dd');
	
			$('input[name=title]', '#form_new_event').val('');
			$('input[name=location]', '#form_new_event').val('');
			$('input[name=startDate]', '#form_new_event').val(dateStr);
			$('input[name=endDate]', '#form_new_event').val(dateStr);
			$('textarea[name=CalMessage]', '#form_new_event').val('');

		},
	
		renderEditContent : function()	{

			var data = calendarView['data'];
			if(!data) return;

			$('.cal-event-heading input', '#form_edit_event').val(data['title']);
			$('.cal-location input', '#form_edit_event').val(data['Location']);

			var start = data.startDateTime;
			var end = data.endDateTime;
			
			$('input[name=startDate]', '#form_edit_event').val( start.format('yyyy-mm-dd') );
			$('input[name=startTime]', '#form_edit_event').val( start.format('HH:MM') );			
			
			$('input[name=endDate]', '#form_edit_event').val( end.format('yyyy-mm-dd') );
			$('input[name=endTime]', '#form_edit_event').val( end.format('HH:MM') );

			$('textarea[name=CalMessage]', '#form_edit_event').val( data.CalMessage );

		},

		toDateTime : function(date, time) {
			var dateParts = date.split('-');
			var timeParts = time.split(':');

			var dt = new Date(dateParts[0], dateParts[1]-1, dateParts[2], timeParts[0], timeParts[1]);
			return dt;
		},

		unixGMT : function(date, time) {
			var dt = this.toDateTime(date, time);
			return Math.round( dt.getTime()/1000 ) - dt.getTimezoneOffset()*60;
		},
		
		createEvent : function() {

			var formData = $('#form_new_event').serializeObject();
			var start = this.unixGMT(formData.startDate, formData.startTime);
			var end = this.unixGMT(formData.endDate, formData.endTime);
			
			if(start >= end) {
				alert('Date or time is not correct. Please check again');
				return;
			}

			var param = {
				func 		: 'add',
				Msg_Type 	: 'General',
				Msg_Title 	: formData.title,
				Location  	: formData.location,
				startDate 	: start,
				endDate 	: end,
				Msg_Text    : formData.CalMessage,
				relative_href : calendars.getCurHref()

			};

			if(!param.Msg_Title) {
				alert('Title cannot be empty');
				return;
			}

			if(param.DateEnd - param.DateStart < 0){
				alert('Date or Time is not correct. Please check again.');
				return;
			}

			$mobile.caldavglue(param, function(json) {
				// update local data

				if(json.status == 201) {
					var item = {
						id            : json.id,
						title         : param.Msg_Title,
						CalMessage    : param.Msg_Text,
						Location      : param.Location,
						allDay        : false,
						relative_href : calendars.getCurHref(),
						startDateTime : calendarEvent.toDateTime(formData.startDate, formData.startTime),
						endDateTime   : calendarEvent.toDateTime(formData.endDate, formData.endTime)
					};

					calendar.data.push(item);

				}

				$('.btn-back', '#mobile_calendarcreate').click();

			});
		},
		
		pushEndTime : function($node) {
		
			var date = 	$('input[name=startDate]', $node).val();
			var time = 	$('input[name=startTime]', $node).val();
			
			var start = this.toDateTime(date, time);
			var end = new Date( start.getTime() + 60 * 30 * 1000 );
			
			$('input[name=endDate]', $node).val( end.format('yyyy-mm-dd') );	
			$('input[name=endTime]', $node).val( end.format('HH:MM') );	
		
		},

		updateEvent : function() {
		
			var data = calendarView['data'];
			if(!data) return;
			
			var formData = $('#form_edit_event').serializeObject();
			var start = this.unixGMT(formData.startDate, formData.startTime);
			var end = this.unixGMT(formData.endDate, formData.endTime);

			if(start >= end) {
				alert('Date or time is not correct. Please check again');
				return;
			}			
			
			var param = {
				Category       : 'General',
				DateEnd        : end,
				DateStart      : start,
				Location       : formData.location,
				CalMessage     : formData.CalMessage,
				RecurrenceType : 0,
				Title          : formData.title,
				alertPosition  : 'Before',
				alertTrigger   : 15,
				alertType      : 'None',
				allday         : false,
				availablity    : 'Busy',
				func           : 'updatecal',
				id             : data.id,
				relative_href  : data.relative_href
			};
		
			$mobile.caldavglue(param, function(json) {

				var startDateTime= calendarEvent.toDateTime(formData.startDate, formData.startTime);
				var endDateTime= calendarEvent.toDateTime(formData.endDate, formData.endTime);

				calendarView.data['title'] = formData.title;
				calendarView.data['CalMessage'] = formData.CalMessage;
				calendarView.data['startDateTime'] = startDateTime;
				calendarView.data['endDateTime'] = endDateTime;
				calendarView.data['Location'] = formData.location;

				$('.btn-back', '#mobile_calendaredit').click();
			});		
		
		}

	};
	
	function onChangeDate(c) {
		calendarEvent.pushEndTime( $(c).parent() );
	}

	//
	// Create
	//
	$(document).delegate("#mobile_calendarcreate", "pagebeforeshow", function() {
	
		calendarEvent.renderCreateContent();
		
	});	
	
	
	//
	// Edit
	//
	$(document).delegate("#mobile_calendaredit", "pagebeforeshow", function() {

		calendarEvent.renderEditContent();

	});


</script>
