selectedDays = [];

$(document).ready(function()
{


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

		// 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:		600,
		show:		'blind',
		hide:		'explode',

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

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



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

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

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

			dlg.load('system/components/events/front/events.php',
				{
					method:	'eventList',
					year:	parseInt(date[0]),
					month:	parseInt(date[1]),
					day:	parseInt(date[2])
				},
				function( response )
				{
					dlg.dialog('option', 'height', 600);
					dlg.dialog('option', 'position', 'center');
				}
			);

            selectedDays = calendar.find('a.active-day').map(function(){ return parseInt($(this).text()); });
            setTimeout('updateSelectedDays()', 150);

            return false;
		},

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

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

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

				eventList.find('span, div').remove();

				$(events).each(function()
				{
                    /**
                     * Hack
                     *
                     * All months are returned (instead of just retrieveing events for the active month) and therefore
                     * days are highlighted on the datepicker which shouldn't be. The following only highlights days
                     * for the active month on the datepicker.
                     */
                    if ( parseInt(this.date.split('-')[0]) != year || parseInt(this.date.split('-')[1]) != month )
                        return true;

                    var	day = this.date.split('-')[2];
					calendar.find('.ui-datepicker-calendar td a').filter(function() { return $(this).text() == day; })
						.addClass('active-day');

					var	li			= $('<div align="left"></div>'),
						title		= $('<div id="' + this.id + '"><strong>' + this.date + '</strong>: <a class="event" >' + this.title + '</a></div>')
						//caption		= $('<div class="caption"></strong></div>'),
						//description	= $('<div class="description">' + this.description + '</div>'),
						//button		= $('<a class="event" href="' + this.id + '" style="margin-top:0px; float:right;">></a>');



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

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

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


});

/*
$(document).on('click', '.ui-datepicker-calendar > tbody td > a.ui-state-default', function()
{
    console.log(this);
    var calendar    = $('#cal');//,
        //date        = calendar.getDate();

    console.log('live click: '+ date);
});
*/

function updateSelectedDays()
{
    $('.ui-datepicker-calendar').find('a.ui-state-default').filter(function() { return $.inArray(parseInt($(this).text()), selectedDays) >= 0; })
        .addClass('active-day');
}