$(document).ready(function()
{
	// Events dialog
	$('#dialog-events').dialog(
	{
		// Configuration
		modal:		true,
		draggable:	false,
		resizable:	false,
		autoOpen:	false,
		width:		600,
		height:		125,

		// Buttons
		buttons: [
			{ text: 'Close', click: function() { $(this).dialog('close'); } }
		]
	});

	// Event information dialog
	$('#dialog-event').dialog(
	{
		// Configuration
		modal:		true,
		draggable:	false,
		resizable:	false,
		autoOpen:	false,
		width:		600,
		height:		400,
		show:		'blind',
		hide:		'explode',

		// Buttons
		buttons: [
			{ text: 'Close', click: function() { $(this).dialog('close'); } }
		],

		// Retrieve selected event id
		open: function()
		{
			var eventInfo = $(this);
            $.post('events.php', { method: 'eventInfo', id: eventInfo.data('eventId') }, function( desc ){ eventInfo.html(desc); });
			//eventInfo.load('events.php', { method: 'eventInfo', id: eventInfo.data('eventId') });
		}
	});

	// Event information dialog
	$('#dialog-news').dialog(
	{
		// Configuration
		modal:		true,
		draggable:	false,
		resizable:	false,
		autoOpen:	false,
		width:		900,
		height:		600,

		// Buttons
		buttons: [
			{ text: 'Close', click: function() { $(this).dialog('close'); } }
		],

		// Retrieve selected event id
		open: function()
		{
			var articleInfo = $(this);
			articleInfo.load('news.php', { method: 'articleInfo', id: articleInfo.data('articleId') });
		}
	});

	// News article buttons
	$('.news-button').click(function( event )
	{
		event.preventDefault();

		var	eventInfo = $('#dialog-news');
		eventInfo.data('articleId', $(this).attr('href'));
		eventInfo.dialog('open');
	});

	// Initiate the calendar
	$('#calendar').datepicker(
	{
		// Configuration
		dateFormat:		'yy-mm-dd',
		defaultDate:	'2000-01-01',

		// Events
		onSelect: function( date, instance )
		{
			var	calendar	= $(this),
				events		= $('#dialog-events'),
				date		= date.split('-');

			events.dialog('option', 'title', 'Loading');
			events.dialog('option', 'height', 125);
			events.dialog('open');

			events.load('events.php',
				{
					method:	'eventList',
					year:	date[0],
					month:	date[1],
					day:	date[2]
				},
				function()
				{
					events.dialog('option', 'height', 500);
					events.dialog('option', 'position', 'center');
				}
			);
		},

		onChangeMonthYear: function( year, month, instance )
		{
			var	calendar	= $(this),
				eventList	= $('#calendarEvents');

			// Show the loader information
			eventList.find('li').remove();
			eventList.append('<li class="loader">Loading events...</li>');

			// Retrieve events from database
			$.post('events.php', { method: 'events', year: year, month: month }, function( events )
			{

				eventList.find('li').remove();

				$(events).each(function()
				{
					var	day = this.date.split('-')[2];

					calendar.find('.ui-datepicker-calendar td a').filter(function() { return $(this).text() == day; })
						.addClass('ui-state-active');

					var	li			= $('<li></li>'),
						title		= $('<h4>' + this.title + '</h4>'),
						caption		= $('<div class="hr2"></div><div class="caption">Date of event: <strong>' + this.date + '</strong></div>'),
						description	= $('<div class="description">' + this.description + '</div>'),
						button		= $('<a class="event" href="' + this.id + '" style="margin-top:10px; float:right;">Read More</a>');

					title.appendTo(li);
					caption.appendTo(li);
					description.appendTo(li);
					button.button().appendTo(li);
					li.append('<div class="clear"></div>');
					li.appendTo(eventList);

					button.click(function( event )
					{
						event.preventDefault();

						var	eventInfo = $('#dialog-event');
						eventInfo.data('eventId', $(this).attr('href'));
						eventInfo.dialog('open');
					});
				});
			}, 'json')
		}
	}).datepicker('setDate', new Date());

});