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

	<div data-role="header" data-inset="true" data-position="fixed">
		<a class="btn-back" href="#"  data-transition="slide" data-rel="back">Back</a>
		<h1>Calendars</h1>
		<a href="#mobile_calendaredit" class ="header-button-edit" data-transition="slide" >Edit</a>
	</div>

	<div data-role="content" data-inset="true">
		<ul id="calendar_event_detail" data-role="listview" class="ui-listview event-details">
		
			<li class="ui-li ui-li-static ui-body-c event-primary single-day">
				<h3 class="ui-li-heading cal-event-heading"></h3>
				<p class="ui-li-desc"><strong class="cal-event-date"></strong></p>
				<p class="ui-li-desc cal-event-time"></p>

			</li>
			
			<li class="ui-li ui-li-static ui-body-c event-primary multi-day" style="display:none;">
				<h3 class="ui-li-heading cal-event-heading">Call with Josie</h3>
				
				<p class="ui-li-desc">From: <strong class="cal-event-date from"></strong></p>
				<p class="ui-li-desc cal-event-time from"></p>
				<p class="ui-li-desc">To: <strong class="cal-event-date to"></strong></p>
				<p class="ui-li-desc cal-event-time to"></p>
				
			</li>
			<li class="ui-li ui-li-static ui-body-c" style="display: none;">
				<p class="ui-li-desc"><strong>Location</strong></p>
				<p class="ui-li-desc event-location"></p>
			</li>
			<!--
			<li class="ui-li ui-li-static ui-body-c">
				<p class="ui-li-desc"><strong>Alert</strong></p>
				<p class="ui-li-desc">At time of event</p>
			</li>
			<li class="ui-li ui-li-static ui-body-c">
				<p class="ui-li-desc"><strong>Availability</strong></p>
				<p class="ui-li-desc">Busy</p>
			</li>
			-->

			<li class="ui-li ui-li-static ui-body-c" style="display: none;">
				<p class="ui-li-desc"><strong>Note</strong></p>
				<p class="ui-li-desc event-note"></p>
			</li>

		</ul>
		
		<div class="event-delete-btn">
		    <input type="button" class="cal-event-delete" value="Delete Event" onclick="calendarView.deleteEvent();" />
		</div>
		
	</div>


</div>


<script type="text/javascript">
	var calendarView = {
		data : null,
		
		getEventId : function() {
			return this.data? this.data.id : null;
		},
		
		parseData : function() {
			if(!this.data) return null;
			
			
			var startDate = this.data.startDateTime.toLocaleDateString();
			var startTime = this.data.startDateTime.format('h:MM TT');
			var endDate = this.data.endDateTime.toLocaleDateString();
			var endTime = this.data.endDateTime.format('h:MM TT');
			
			var ret = {
				title : this.getEventTitle(),
				startDate : startDate,
				startTime : startTime,
				endDate : endDate,
				endTime : endTime,
				isSingleDay : startDate === endDate
			};
			
			return ret;
			
		},

		render : function() {
			if( !this.data ) return;
			
			
			$('.ui-li-static', '#calendar_event_detail').hide();
			
			var data = this.parseData();
			
			if(data.isSingleDay) {
			
				var $node = $('.event-primary.single-day', '#mobile_calendardetail');
			
			
				$('.cal-event-heading', $node).html( data.title );
				$('.cal-event-date', $node).html( data.startDate );
				$('.cal-event-time', $node).html( 'From ' + data.startTime + ' To ' + data.endTime );
				
				$node.show();
			
			}
			else {
			
				var $node = $('.event-primary.multi-day', '#mobile_calendardetail');
				$('.cal-event-heading', $node).html( data.title );
				
				$('.cal-event-date.from', $node).html( data.startDate );
				$('.cal-event-time.from', $node).html( data.startTime );
				$('.cal-event-date.to', $node).html( data.endDate );
				$('.cal-event-time.to', $node).html( data.endTime );
				

				$node.show();
			}

			if(this.data.Location) {
				var $location = $('.event-location', '#calendar_event_detail');
				$location.html( this.data.Location );
				$location.parent().show();
			}

			if(this.data.CalMessage) {
				$('.event-note', '#calendar_event_detail').html(this.data.CalMessage).parent().show();
			}

		},

		getEventTitle : function() {
			return !this.data? '' : this.data.title;
		},
		

		deleteEvent : function() {
			
			if(!confirm("Are you sure you want to delete")) return;
			
			if(! calendarView.data ) return;
			
			var param = {
				id : calendarView.data.id,
				relative_href : calendarView.data.relative_href,
				func : 'delete'
			}
			
			$mobile.caldavglue(param, function(json) {
				calendar.deleteId(calendarView.data.id);
				$('.btn-back', '#mobile_calendardetail').click();
			});
			
		}		

	}

	$(document).delegate("#mobile_calendardetail", "pagebeforeshow", function() {
		calendarView.render();
	});


</script>
