/*

FILE:			init_homepage.js

AUTHOR:			Alex Jonas

DESCRIPTION:	A script to initialize assorted CIDCM homepage jQuery widgets.

UPDATED:		1/30/2012

*/

	//AJAX function to retrieve a given day's CIDCM event data 
	//from the server, based on the value of the strDate parameter;
	//called by a click event on the jQuery datepicker calendar.
	function Get_Events_By_Date( strDate ) {
	
		if (!strDate) { return; }
			
		if ( $('#eventsDialog').dialog( 'isOpen' ) ) { $('#eventsDialog').dialog( 'close' ); }

		var arrEvent = [];
 
		var request = false;
			
		var arrDate = strDate.split(' ');	//Expects strDate to be in the format "yyyy mm dd"
			
		var url = '/scripts/ajax/get_events_ajax.aspx?y=' + arrDate[0] + '&m=' + arrDate[1] + '&d=' + arrDate[2];
			
		request = new XMLHttpRequest();
		
		if (!request) {
		
			alert('Error:\n\nCould not create XMLHttpRequest!');
			return;
			
		}
		
		request.open('GET', url, true);
		
		request.onreadystatechange = function() {
		
			if (request.readyState == 4) {
			
				if (request.status == 200) {
					
					//arrEvent = JSON.parse(request.responseText);
					arrEvent = eval( '(' + request.responseText + ')' );
						
					generate_event_dialog( strDate, arrEvent );
							
				} else {
					
					alert('Error:\n\nThe server returned a status of ' + request.status + ', \"' + request.statusText + '\".');
						
				}
			
			}
		
		}
		
		request.send();
		
	}
 
	//Generates a dialog box displaying CIDCM events for a given day;
	//called by the AJAX function Get_Events_By_Date();
	//uses jQuery dialog ui widget.
	function generate_event_dialog( strDate, arrEvent ) {
	
		var formattedDate,
		    myDiv,
		    myPara,
			myLink,
		    myTextNode;
			
		//Format date for display
		
		var datePart = strDate.split(' ');
		
		for (var i = 0; i < datePart.length; i++) {
		
			datePart[i] -= 0;	//Make sure all the date parts are numbers, for IE and Safari.
			
		}
		
		--datePart[1];	//Decrement month before new date object creation.
		
		var objDate = new Date(datePart[0],datePart[1],datePart[2]);
		
		var arrDate		= [];
		var dayNames	= [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ];
		var months		= [ 'Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.' ];
		
		arrDate[0] = dayNames[objDate.getDay()];
		arrDate[1] = months[objDate.getMonth()] + ' ' + objDate.getDate();
		arrDate[2] = objDate.getFullYear();
			
		formattedDate = arrDate.join(', ');
			

		//Format dialog text
			
		myDiv = document.getElementById('eventsDialog');
			
		myDiv.innerHTML = '';
			
		if (arrEvent.length) {
			
			for (var i = 0; i < arrEvent.length; i++) {
			
				myPara = document.createElement('p');
				myTextNode = document.createTextNode(arrEvent[i].title);
				myPara.appendChild(myTextNode);
				myPara.style.textAlign = 'left';
				myPara.style.fontWeight = 'bold';
				myPara.style.marginBottom = '0';
				myDiv.appendChild(myPara);
			
				myPara = document.createElement('p');
				myTextNode = document.createTextNode(arrEvent[i].location + ', ' + arrEvent[i].start + ' [ ');
				myPara.appendChild(myTextNode);
				myLink = document.createElement('a');
				myTextNode = document.createTextNode('more...');
				myLink.appendChild(myTextNode);
				myLink.setAttribute('href', ('/about/events/event.aspx?id=' + arrEvent[i].id));
				myLink.setAttribute('title', 'Click for event details');
				myPara.appendChild(myLink);
				myTextNode = document.createTextNode(' ]');
				myPara.appendChild(myTextNode);
				myPara.style.textAlign = 'left';
				myPara.style.fontSize = '85%';
				myPara.style.marginTop = '0';
				myDiv.appendChild(myPara);
				
			}
			
		} else {
			
			myPara = document.createElement('p');
			myTextNode = document.createTextNode('No events scheduled.');
			myPara.appendChild(myTextNode);
			myPara.style.textAlign = 'left';
			myPara.style.fontWeight = 'bold';
			myPara.style.marginBottom = '0';
			myDiv.appendChild(myPara);
			
		}
			
		//Set and open jQuery dialog widget;
		//see http://jqueryui.com/demos/dialog/ for details.
		$('#eventsDialog')
		.dialog( 'option', 'title', ('Events for ' + formattedDate + ':') )
		.dialog( 'open' );

	}

	$(document).ready(function() {

		//Initialize and display jQuery ui datepicker calendar;
		//grey out days with no scheduled events;
		//see http://jqueryui.com/demos/datepicker/ for details.
		$('#calendar')
		.datepicker({
			dayNamesMin : ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
			dateFormat : 'yy mm dd',
			beforeShowDay : function(date) {
				if ( scheduled[date] !== undefined ) {
					return [ true, '', 'Click for scheduled events' ];
				} else {
					return [ false, '', '' ];
				}
			},
			onSelect : function(dateText, inst) { Get_Events_By_Date(dateText); }
		});
		
		
		//Initialize jQuery dialog for showing events by date;
		//see http://jqueryui.com/demos/dialog/ for details.
		$('#eventsDialog')
		.dialog({
			autoOpen : false
		});
		
		
		//Initialize jQuery Cycle for Spotlight Items;
		//see http://jquery.malsup.com/cycle/ for details.
		$('#slideshow')
		.after('<div id="ctrlSpotlight"></div>')
		.cycle({
			fx:			'fade',
			speed:		1000,
			timeout:	7500,
			sync:		false,
			pause:		1,
			prev:		'#ctrlPrev',
			next:		'#ctrlNext',
			pager:		'#ctrlSpotlight'
		});

	});