/*=========================================================================================
    File Name: fullcalendar.js
    Description: Fullcalendar
    --------------------------------------------------------------------------------------
    Item Name: Robust - Responsive Admin Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/


$(document).ready(function(){


	/************************************
	*				json				*
	************************************/
	var calendarE8 = document.getElementById('fc-json');
    var fcJson = new FullCalendar.Calendar(calendarE8, {
		header: {
			left: 'prev,next today',
			center: 'title',
			right: "dayGridMonth,timeGridWeek,timeGridDay",
		},
		defaultDate: '2016-06-12',
		editable: true,
		plugins: ["dayGrid", "timeGrid", "interaction"],
		eventLimit: true, // allow "more" link when too many events
		events: {
			url: '../../../app-assets/data/fullcalendar/php/get-events.php',
			error: function() {
				$('#script-warning').show();
			}
		},
		loading: function(bool) {
			$('#loading').toggle(bool);
		}
	});

	fcJson.render();

	/****************************************
	*				Languages				*
	****************************************/
	var initialLocaleCode = 'en';
	var localeSelectorEl = document.getElementById('lang-selector');
	var calendarE8 = document.getElementById('fc-languages');
    var fcLanguages = new FullCalendar.Calendar(calendarE8, {
		header: {
			left: 'prev,next today',
			center: 'title',
			right: "dayGridMonth,timeGridWeek,timeGridDay",
		},
		defaultDate: '2016-06-12',
		locale: initialLocaleCode,
		buttonIcons: false, // show the prev/next text
		weekNumbers: true,
		plugins: ["dayGrid", "timeGrid", "interaction"],
		navLinks: true, // can click day/week names to navigate views
		editable: true,
		eventLimit: true, // allow "more" link when too many events
		events: [
			{
				title: 'All Day Event',
				start: '2016-06-01'
			},
			{
				title: 'Long Event',
				start: '2016-06-07',
				end: '2016-06-10'
			},
			{
				id: 999,
				title: 'Repeating Event',
				start: '2016-06-09T16:00:00'
			},
			{
				id: 999,
				title: 'Repeating Event',
				start: '2016-06-16T16:00:00'
			},
			{
				title: 'Conference',
				start: '2016-06-11',
				end: '2016-06-13'
			},
			{
				title: 'Meeting',
				start: '2016-06-12T10:30:00',
				end: '2016-06-12T12:30:00'
			},
			{
				title: 'Lunch',
				start: '2016-06-12T12:00:00'
			},
			{
				title: 'Meeting',
				start: '2016-06-12T14:30:00'
			},
			{
				title: 'Happy Hour',
				start: '2016-06-12T17:30:00'
			},
			{
				title: 'Dinner',
				start: '2016-06-12T20:00:00'
			},
			{
				title: 'Birthday Party',
				start: '2016-06-13T07:00:00'
			},
			{
				title: 'Click for Google',
				url: 'http://google.com/',
				start: '2016-06-28'
			}
		]
	});

	fcLanguages.render();

	// build the language selector's options
	// build the locale selector's options
    fcLanguages.getAvailableLocaleCodes().forEach(function(localeCode) {
		var optionEl = document.createElement('option');
		optionEl.value = localeCode;
		optionEl.selected = localeCode == initialLocaleCode;
		optionEl.innerText = localeCode;
		localeSelectorEl.appendChild(optionEl);
	  });

	  // when the selected option changes, dynamically change the calendar option
	  localeSelectorEl.addEventListener('change', function() {
		if (this.value) {
			fcLanguages.setOption('locale', this.value);
		}
	  });


	/****************************************
	*				Time Zones				*
	****************************************/
	/****************************************
	*				Time Zones				*
	****************************************/
	var initialTimeZone = 'local';
	var calendarE9 = document.getElementById('fc-timezones');
    var fcTimezones = new FullCalendar.Calendar(calendarE9, {
		header: {
			left: 'prev,next today',
			center: 'title',
			right: "dayGridMonth,timeGridWeek,timeGridDay",
		},
		defaultDate: '2016-06-12',
		plugins: ["dayGrid", "timeGrid", "interaction", "momentTimezone"],
		editable: true,
		navLinks: true, // can click day/week names to navigate views
		timeZone: initialTimeZone,
		selectable: true,
		eventLimit: true, // allow "more" link when too many events
		events: {
			url: '../../../app-assets/data/fullcalendar/php/get-events.php',
			failure: function() {
				document.getElementById('script-warning').style.display = 'inline'; // show
			}
		},
		eventTimeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' },
		dateClick: function(arg) {
			console.log('dateClick', fcTimezones.formatIso(arg.date));
		},
		select: function(arg) {
			console.log('select', fcTimezones.formatIso(arg.start), fcTimezones.formatIso(arg.end));
		}
	});

	fcTimezones.render();

	// load the list of available timezones, build the <select> options
	$.getJSON('../../../app-assets/data/fullcalendar/php/get-timezones.php', function(timezones) {
		$.each(timezones, function(i, timezone) {
			if (timezone != 'UTC') { // UTC is already in the list
				$('#timezone-selector').append(
					$("<option/>").text(timezone).attr('value', timezone)
				);
			}
		});
	});

	// when the timezone selector changes, dynamically change the calendar option
	calendarE9.addEventListener('change', function() {
		fcTimezones.setOption('timeZone', this.value);
	});
});