var datepicker = document.querySelectorAll('.datepicker');

if (datepicker) {
	datepicker.forEach(function(element) {
		// BUILD
		// Header
		var header = document.createElement('header');
		element.appendChild(header);

		var prev = document.createElement('button');
		prev.textContent = 'Prev';
		header.appendChild(prev);

		var h3 = document.createElement('h3');
		header.appendChild(h3);

		var next = document.createElement('button');
		next.textContent = 'Next';
		header.appendChild(next);

		// Calendar
		var table = document.createElement('table');
		element.appendChild(table);

		var thead = document.createElement('thead');
		table.appendChild(thead);

		var tr = document.createElement('tr');
		thead.appendChild(tr);

		var weekdays = ['Mon', 'Tue', 'Wed', 'Tru', 'Fri', 'Sat', 'Dun'];

		for (var i = 0; i < 7; i++) {
			var th = document.createElement('th');
			th.textContent = weekdays[i];
			tr.appendChild(th);
		}

		var tbody = document.createElement('tbody');
		table.appendChild(tbody);

		for (var week = 0; week < 6; week++) {
			var tr = document.createElement('tr');
			tbody.appendChild(tr);

			for (var day = 0; day < 7; day++) {
				var td = document.createElement('td');
				tr.appendChild(td);
			}
		}

		var slots = tbody.querySelectorAll('td');

		// Footer
		var footer = document.createElement('footer');
		element.appendChild(footer);

		var clear = document.createElement('button');
		clear.textContent = 'Clear';
		footer.appendChild(clear);

		var range = document.createElement('p');
		footer.appendChild(range);

		var accept = document.createElement('button');
		accept.textContent = 'Accept';
		footer.appendChild(accept);

		// SET CALENDAR
		var today  = new Date();
		var month  = today.getMonth();
		var year   = today.getFullYear();
		var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

		function set_selection() {
			var from = element.getAttribute('data-from');
			var to   = element.getAttribute('data-to');

			if (from) {
				slots.forEach(function(slot) {
					var date = slot.getAttribute('data-date');

					slot.classList.remove('selected','selected-from','selected-to','included');

					// Set from
					if (date == from) {
						slot.classList.add('selected');
					}

					// Set to
					if (to && to != from ) {
						// If from is in view
						if (element.querySelector('.selected')) {
							element.querySelector('.selected').classList.replace('selected','selected-from');
						}
						
						if (slot.getAttribute('data-date') == to) {
							slot.classList.add('selected-to');
						}

						// Set included
						var from_date = new Date(element.getAttribute('data-from'));
						var to_date   = new Date(element.getAttribute('data-to'));

						if (!slot.classList.contains('empty')) {
							var date = new Date(slot.getAttribute('data-date'));

							if (date > from_date && date < to_date) {
								slot.classList.add('included');
							}
						}
					}
				});
			}
		}

		function days_selected() {
			var days_selected = 0 + ' days';
			
			from = element.getAttribute('data-from');
			to   = element.getAttribute('data-to');

			if (from) {
				days_selected = 1 + ' day';

				if (to) {
					days_selected = ((new Date(to).getTime() - new Date(from).getTime()) / (1000 * 3600 * 24) + 1) + ' days';
				}
			}

			range.textContent = days_selected;
		}

		function set_calendar() {
			// Set month and year
			h3.textContent = months[month] + ' ' + year;

			// Clear slots
			slots.forEach(function(slot) {
				slot.textContent = '';
				slot.removeAttribute('class');
				slot.removeAttribute('data-date');
			});
			
			// Set days
			var days_in_month = new Date(year, month+1, 0).getDate();
			var first_weekday = new Date(year, month, 0).getDay();

			for (var i = 0; i < days_in_month; i++) {
				var day = slots[i+first_weekday];

				set_date = function() {
					data_month = month+1;
					data_day   = i+1;

					if (data_month < 10) {
						data_month = '0' + data_month;
					}

					if (data_day < 10) {
						data_day = '0' + data_day;
					}

					return year + '-' + data_month + '-' + data_day + 'T00:00:00';
				}

				day.setAttribute('data-date', set_date());
				day.textContent = i+1;
			}
			
			slots.forEach(function(slot) {
				// Set today
				if ( new Date(slot.getAttribute('data-date')).getTime() == today.setHours(0,0,0,0) ) {
					slot.classList.add('today');
				}

				// Block empty slots
				if (slot.textContent == '') {
					slot.classList.add('empty');
				}
			});

			// Set selection and return days selected
			set_selection();
			days_selected();
		}

		set_calendar();

		// NAVIGATION
		prev.onclick = function() {
			month -= 1;

			if (month < 0) {
				month = 11;
				year -= 1;
			}

			set_calendar();
		}

		next.onclick = function() {
			month += 1;

			if (month > 11) {
				month = 0;
				year += 1;
			}

			set_calendar();
		}

		// SELECTION
		slots.forEach(function(slot) {
			slot.onclick = function() {
				var from       = element.getAttribute('data-from');
				var to         = element.getAttribute('data-to');
				var date       = slot.getAttribute('data-date');
				
				// Set from
				if (!from) {
					element.setAttribute('data-from', date);

					// FROM CALLBACK HERE
				}
				
				else {
					// Set to
					if (!to) {
						if ( new Date(date) >= new Date(from) ) {
							element.setAttribute('data-to', date);
						}

						else {
							element.setAttribute('data-from', date);
							element.setAttribute('data-to', from);
						}

						// TO CALLBACK HERE
					}

					// Reset from
					else {
						element.setAttribute('data-from', date);
						element.removeAttribute('data-to');
					}
				}

				// Set selection and return days selected
				set_selection();
				days_selected();
			}
		});

		// Clear
		clear.onclick = function() {
			element.removeAttribute('data-from');
			element.removeAttribute('data-to');

			slots.forEach(function(slot) {
				slot.classList.remove('selected', 'selected-from', 'included', 'selected-to');
			});

			days_selected();

			// CLEAR CALLBACK HERE
		}

		// Accept
		accept.onclick = function() {
			// ACCEPT CALLBACK HERE
		}
	});
}