/*
* Render Date picker
*/
(function($) {
$.ti.pickDates = $.prototype = {

	html:	$([	'<div id="swapableContent">',
					'<h2><img src="/shared/resource/images/itinerary_planner/nl/text/overlay-headings/pick-dates.png" alt="Selecteer je reisdata" height="28"/></h2>',
					'<p>Kom je naar Ierland en weet je ook al wanneer? Misschien weet je nog niet precies wanneer je op reis gaat, of alleen dat je hier in een bepaalde maand of een bepaald seizoen bent. Maak dan een keuze uit de opties en de Reisplanner komt met suggesties. Zo kun je met je Reis beginnen. Veel plezier!</p>',
					'<form action="" method="" id="pickDates">',
						'<fieldset>',
							'<h3 class="section">Wanneer ga je op reis?</h3>',
							'<div class="section">',
								'<label for="notSure">',
									'<input type="radio" name="datePicker" id="notSure" class="radio" value="notSure" />',
								'Ik weet het nog niet precies </label>',
							'</div>',
							'<div class="section">',
								'<label for="exactDate" id="exactDateLabel">',
									'<input type="radio" name="datePicker" id="exactDate" class="radio" value="exactDate" />',
								'Ik weet de exacte data </label>',
								'<div id="exactDateToggler" style="display:none;">',
									'<p>Zodra je de exacte reisdata invult, is je Reisplanner uniek voor jou en je reis naar Ierland.</p>',
									'<div id="exactDates">',
										'<div class="date">',
											'<label for="startDate">Begindatum:',
												'<input type="text" id="startDate" />',
											'</label>',
										'</div>',
										'<div class="date">',
											'<label for="endDate">Einddatum:',
												'<input type="text" id="endDate" />',
											'</label>',
										'</div>',
									'</div>',
								'</div>',
							'</div>',
							'<div class="section lastSection">',
								'<label for="timeOfYear" id="timeOfYearLabel">',
									'<input type="radio" name="datePicker" id="timeOfYear" class="radio" value="timeOfYear" />',
								'Ik weet de tijd van het jaar:</label>',
								'<div id="timeOfYearToggler" style="display:none;">',
									'<p>Kies de tijd van het jaar waarin je naar Ierland wilt reizen; zo kunnen we aanbiedingen en tips selecteren die bij jouw wensen passen.</p>',
									'<div id="months">',
										'<ul id="monthList"></ul>',
									'</div>',
									'<div class="slider">',
										'<div id="prevYear" class="date-nav"><img src="/shared/resource/images/itinerary_planner/buttons/prev-next-months.png" width="36" height="36" alt="vorige" /></div>',
										'<div id="dateSlider"></div>',
										'<div id="nextYear" class="date-nav"><img src="/shared/resource/images/itinerary_planner/buttons/prev-next-months.png" width="36" height="36" alt="volgende" /></div>',
									'</div>',
								'</div>',
							'</div>',
						'</fieldset>',
						'<input type="image" class="button" src="/shared/resource/images/itinerary_planner/nl/buttons/save.png" alt="Opslaan" height="22" id="saveDates"/>',
					'</form>',
				'</div>'
			].join('')),

	currentDate:	new Date(),
	currentDay: 0,
	currentMonth: 0,
	currentYear: 0,

	setUpPicker: function() {

		// Set current day, month and year
		$.ti.pickDates.currentDay = $.ti.pickDates.currentDate.getDate();
		$.ti.pickDates.currentMonth = $.ti.pickDates.currentDate.getMonth();
		$.ti.pickDates.currentYear = $.ti.pickDates.currentDate.getFullYear();

		// Kill date pickers on close
		$('#close').unbind('click.closePopup');
		$('#close').bind('click.closePopup', function() {
			$("#startDate").removeClass('hasDatepicker').datepicker("destroy");
			$("#endDate").removeClass('hasDatepicker').datepicker("destroy");
		});

		// Add existing start date if present
		if($.ti.tripData.trip.tripStartDate) {
			$("#startDate").val($.ti.tripData.trip.tripStartDate);
		}
		// Add existing end date if present
		if($.ti.tripData.trip.tripEndDate) {
			$("#endDate").val($.ti.tripData.trip.tripEndDate);
		}

		// Create date picker "from" calender
		$("#startDate").removeClass('hasDatepicker').datepicker({
			minDate:	$.ti.pickDates.currentDate,
			onSelect:	function() {
								$("#endDate").datepicker('option', 'minDate', $("#startDate").datepicker('getDate'));
						},
			dateFormat: 'yy-mm-dd',
			constrainInput: true,
			showOtherMonths: true
		});

		// Create date picker "to" calender
		$("#endDate").removeClass('hasDatepicker').datepicker({
			minDate: $.ti.pickDates.currentDate,
			defaultDate: +1,
			onSelect: function() {
								$("#startDate").datepicker('option', 'maxDate', $("#endDate").datepicker('getDate'));
						},
			dateFormat: 'yy-mm-dd',
			constrainInput: true,
			showOtherMonths: true
		});

		// Hide initial state of datepicker before we interact with it.
		$('#ui-datepicker-div').hide();

		$.ti.pickDates.accordion();
		$.ti.pickDates.calculateMonths();
		$.ti.pickDates.setMonthCarousel();

		$.ti.pickDates.monthListItems = $('#monthList > li');

		$($.ti.pickDates.monthListItems).removeClass('active');
		$($.ti.pickDates.monthListItems[0]).addClass('active');

		// Create date slider
		$("#dateSlider").slider({
			animate: true,
			min:0,
			max:11,
			slide: function(event, ui) {
				$($.ti.pickDates.monthListItems).removeClass('active');
				$($.ti.pickDates.monthListItems[ui.value]).addClass('active');
			}
		});

		// Add save event
		$('#saveDates').bind('click.saveDates', function(event){
			event.preventDefault();

			switch($('input[name=datePicker]:checked').attr('id')) {
				case 'exactDate':	$.ti.pickDates.checkExact();
									break;
				case 'timeOfYear':	$.ti.pickDates.setMonth();
									break;
				case 'notSure':		$.ti.pickDates.setVague();
									break;
			}

		});
	},

	checkExact: function() {
		$.ti.validate.check('#exactDates', {
			rules: {
				startDate: {
					"required": 'Begindatum vereist',
					"date": 'Geldige datum vereist'
				},
				endDate: {
					"required": 'Einddatum vereist',
					"date": 'Geldige datum vereist',
					"notLess": [$('#startDate').val(), 'Einddatum kan niet voor begindatum liggen']
				}
			},
			success: function() {$.ti.pickDates.setExact();}
		});
	},

	setExact: function() {
		// Kill any previous instance of date pickers
		$("#startDate").removeClass('hasDatepicker').datepicker("destroy");
		$("#endDate").removeClass('hasDatepicker').datepicker("destroy");

		// Set start, end and duration values
		$.ti.tripData.trip.tripStartDate = $('#startDate').val();
		$.ti.tripData.trip.tripEndDate = $('#endDate').val();
		$.ti.pickDates.setDuration();

		// Update dates and close popup
		$.ti.pickDates.showDates();
		$.ti.popup.close();

		$.ti.createTripCalendar.resetCalender();
		$.ti.panel.datesChanged = 'exact_dates';
	},

	// Calculate the trip length in days
	setDuration: function() {
		var start, end;
		// Get start and end date objects n.b. '-' changed to '/' for IE
		start = new Date($.ti.tripData.trip.tripStartDate.replace(/-/g, '/'));
		end = new Date($.ti.tripData.trip.tripEndDate.replace(/-/g, '/'));

		// Calculate difference in days
		$.ti.tripData.trip.tripDuration = ((end - start) / 86400000) + 1; // (1000 * 60 * 60 * 24) = 1 day;
	},

	// Set dates based on selection of a month from slider
	setMonth: function() {
		var item, month, year, nextWeek, nextWeekDay, nextWeekMonth, nextWeekYear;

		item = $('li.active', '#monthList');
		month = parseInt($(item).attr('rel'), 10);
		year = parseInt($('span', item).text(), 10);

		if(month === this.currentMonth && year === this.currentYear) {
			// insert leading zero on month if necessary
			month = $.ti.utils.padNumber(month + 1);

			// Set startDate
			$.ti.tripData.trip.tripStartDate = year + '-' + month + '-' + this.currentDay;
		} else {
			// insert leading zero on month if necessary
			month = $.ti.utils.padNumber(month + 1);

			// Set start and end dates
			$.ti.tripData.trip.tripStartDate = year + '-' + month + '-' + "01";
		}

		// Set EndDate
		var lastDate = $.ti.pickDates.getLastDate(month, year);
		$.ti.tripData.trip.tripEndDate = year + '-' + month + '-' + lastDate;

		// Seet duration
		$.ti.pickDates.setDuration();

		// Update dates and close popup
		$.ti.pickDates.showDates();
		$.ti.popup.close();
		$.ti.createTripCalendar.resetCalender();
		$.ti.panel.datesChanged = 'time_of_year';
	},

	getLastDate: function(month, year) {
		var dd = new Date(year, month, 0);
		return dd.getDate();
	},

	// Remove start and end dates and set duration to "7" for "not sure" users
	setVague: function() {
		$.ti.tripData.trip.tripStartDate = null;
		$.ti.tripData.trip.tripEndDate = null;
		$.ti.tripData.trip.tripDuration = 7;

		// Update dates and close popup
		$.ti.pickDates.showDates();
		$.ti.popup.close();
		$.ti.createTripCalendar.resetCalender();
		$.ti.panel.datesChanged = 'not_sure';
	},

	startMonth: new Date().getMonth(),

//Jan => Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec

	monthNames: {
		 0: 'Jan',
		 1: 'Feb',
		 2: 'Maart',
		 3: 'Apr',
		 4: 'Mei',
		 5: 'Juni',
		 6: 'Juli',
		 7: 'Aug',
		 8: 'Sept',
		 9: 'Okt',
		10: 'Nov',
		11: 'Dec'
	},

	dayNames: {
		0: 'Sun',
		1: 'Mon',
		2: 'Tue',
		3: 'Wed',
		4: 'Thu',
		5: 'Fri',
		6: 'Sat'
	},

	accordion: function() {
		$('input[name=datePicker]').bind('click.toggles', function(event) {
			switch(event.target.id) {
				case 'notSure':	$('#exactDateToggler').slideUp(500);
								$('#timeOfYearToggler').slideUp(500);
								break;
				case 'exactDate':	$('#exactDateToggler').slideDown(500);
									$('#timeOfYearToggler').slideUp(500);
									break;
				case 'timeOfYear':	$('#exactDateToggler').slideUp(500);
									$('#timeOfYearToggler').slideDown(500);
									break;
			}
		});
	},

	calculateMonths: function() {
		if(!$('#monthList > li').length) {
			var dates = {
				count: 0,
				year: this.currentDate.getFullYear(),
				month: this.startMonth
			};

			for (dates.count = 0; dates.count < 12; dates.count += 1) {
				$('#monthList').append($('<li rel="' + dates.month + '">' + this.monthNames[dates.month] +'<span>' + dates.year + '</span></li>'));
				dates.month = (dates.month + 1);
				if(dates.month === 12) {
					dates.year = (dates.year + 1);
					dates.month = 0;
				}
			}
		}
	},

	monthSliderView: 0,
	monthSliderLength: 0,

	setMonthCarousel: function() {
		$('#nextYear > img').bind('click.nextYear', function() {
			if($.ti.pickDates.monthSliderView === $.ti.pickDates.monthSliderLength) {
				$.ti.pickDates.createTwelveMonths($.ti.pickDates.monthSliderView +1);
				$.ti.pickDates.monthSliderLength = ($.ti.pickDates.monthSliderLength + 1);
			}
			$.ti.pickDates.monthSliderView = ($.ti.pickDates.monthSliderView + 1);
			$('#monthList').animate({"left":"-=468px", duration: 2000, easing: 'easeout'});
			$.ti.pickDates.resetSlider(12);
		});
		$('#prevYear > img').bind('click.prevYear', function() {
			if($.ti.pickDates.monthSliderView > 0) {
				$.ti.pickDates.monthSliderView = ($.ti.pickDates.monthSliderView - 1);
				$('#monthList').animate({"left":"+=468px", duration: 2000, easing: 'easeout'});
				$.ti.pickDates.resetSlider(-12);
			}
		});
	},

	resetSlider: function(operator) {
		var settings = {
			min: $('#dateSlider').slider('option', 'min') + operator,
			max: $('#dateSlider').slider('option', 'max') + operator,
			current: $('#dateSlider').slider('option', 'value') + operator
		};

		$.ti.pickDates.monthListItems = $('#monthList > li');

		$('#dateSlider').slider('option', {
				'min': settings.min,
				'max': settings.max,
				'value': settings.current
			});

		$($.ti.pickDates.monthListItems[(settings.current - operator)]).removeClass('active');
		$($.ti.pickDates.monthListItems[settings.current]).addClass('active');
	},

	createTwelveMonths: function(view) {
		var settings = {
			count: 0,
			month: $.ti.pickDates.currentDate.getMonth(),
			year: $.ti.pickDates.currentDate.getFullYear() + view
		};

		for(settings.count = 0; settings.count < 12; settings.count += 1) {
			$('#monthList').append($('<li rel="' + settings.month + '">' + this.monthNames[settings.month] + '<span>' + settings.year + '</span></li>'));
			settings.month = (settings.month + 1);
			if(settings.month === 12) {
				settings.year = (settings.year + 1);
				settings.month = 0;
			}
		}
	},

	// Render exact days date onto calender
	showDates: function() {
		var dates = {
			start: {
				obj: '',
				day: '',
				month: '',
				year: ''
			},
			end: {
				obj: '',
				day: '',
				month: '',
				year: ''
			},
			startString: '',
			endString: ''
		};

		function getDayMonthYear(date) {
			dates[date].day = dates[date].obj.getDate();
			dates[date].month = $.ti.pickDates.monthNames[dates[date].obj.getMonth()];
			dates[date].year = dates[date].obj.getFullYear();
		}

		if($.ti.tripData.trip.tripStartDate) {
			// Reformat dates with "/" instead of "-" for IE
			dates.startString = $.ti.tripData.trip.tripStartDate.replace(/-/g, '/');
			dates.endString = $.ti.tripData.trip.tripEndDate.replace(/-/g, '/');

			// Get start and end date objects
			dates.start.obj = new Date(dates.startString);
			dates.end.obj = new Date(dates.endString);

			// Get Start day month and year
			getDayMonthYear("start");

			// Clear old calender dates
			$('#calendarDates').empty();
			if($.ti.tripData.trip.tripDuration <= 1) {
				// Create single day date
				if ('cn'==='nl')
				{
					$('#calendarDates').append('<span>'+dates.start.year+'</span> '+dates.start.month+' '+dates.start.day+'???planner.calendar.date???');
				}
				else
				{
					$('#calendarDates').append(dates.start.day + ' ' + dates.start.month + ' <span>' + dates.start.year + '</span>');
				}
			} else {
				// Get end day, month and year
				getDayMonthYear("end");

				if ('cn'==='nl')
				{
					if(dates.start.year === dates.end.year) {
						$('#calendarDates').append('<span>'+dates.start.year+'</span> '+dates.start.month+dates.start.day+'???planner.calendar.date??? - '+dates.end.month+' '+dates.end.day+'???planner.calendar.date???');
					} else {
						$('#calendarDates').append('<span>'+dates.start.year+'</span> '+dates.start.month+dates.start.day+'???planner.calendar.date??? - <span>'+dates.end.year+'</span> '+dates.end.month+' '+dates.end.day+'???planner.calendar.date???');
					}
				}
				else
				{
					if(dates.start.year === dates.end.year) {
						// Create multiple day date within same year
						$('#calendarDates').append(dates.start.day + ' ' + dates.start.month + ' - ' + dates.end.day + ' ' + dates.end.month + ' <span>' + dates.end.year + '</span>');
					} else {
						// Create multiple day date across two years
						$('#calendarDates').append(dates.start.day + ' ' + dates.start.month + ' <span>' + dates.start.year + '</span> - ' + dates.end.day + ' ' + dates.end.month + ' <span>' + dates.end.year + '</span>');
					}
				}
			}
		} else {
			dayN='Dag ';
			if (dayN.indexOf('#')>0)
				$('#calendarDates').text(dayN.replace(/#/,''+(1))+' - '+dayN.replace(/#/,''+($.ti.tripData.trip.tripDuration)));
			else
				$('#calendarDates').text(dayN+' 1 - '+dayN+' '+$.ti.tripData.trip.tripDuration);
		}
	}

};
})(jQuery);