function pickerPrev() {
	$(".flexible-search input.flex-date").datepick('performAction', 'prev');
}

function pickerNext() {
	$(".flexible-search input.flex-date").datepick('performAction', 'next');
}

function pickerClose() {
	$(".flexible-search input.flex-date").datepick('performAction', 'close');
}

(function($) { // Hide scope

	var myAvailCalRenderer = $.extend({}, $.datepick.themeRollerRenderer,{
				picker: '<div{popup:start} id="ui-datepicker-div"{popup:end} class="datepicker-div-to-hide ui-datepicker ui-widget ' +
						'ui-widget-content ui-helper-clearfix ui-corner-all{inline:start} ui-datepicker-inline{inline:end}">' +
						'{popup:start}<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ' +
						'ui-corner-all">{button:close}</div>{popup:end}'+
						'{months}'+
						'<div class="ui-helper-clearfix"></div>'+
						'<div id="calendar-replace"></div>'+
						'</div>',
				monthRow: '<div class="ui-datepicker-row-break">'+
						  '<div class="ui-datepicker-header ui-corner-all">'+
					      '{months}'+
						  '<a class="ui-datepicker-prev ui-corner-all" onclick="pickerPrev()"><span class="ui-icon ui-icon-circle-triangle-w"></span></a>'+
						  '<a class="ui-datepicker-next ui-corner-all" onclick="pickerNext()"><span class="ui-icon ui-icon-circle-triangle-e"></span></a>'+
						  '</div>'+
						  '</div>',
				commandButtonClass: 'button'
		});


	$.extend($.datepick, {

		myAvailCalRenderer: myAvailCalRenderer, //declare renderer for availability calendar

		addColorLegendAndRateText: function(target, bAdd, rateText) { //method to add color legend to the bottom of the availability calendar
			var replaceText = '';

			if (bAdd) {
				replaceDiv = '<div class="ui-datepicker-row-break">'+
							 '<div class="ui-datepicker-legend"><table>'+
								   '<tr><td class="color-area"><div class="available-dates"></div></td><td class="color-label">Available Dates</td><td class="other"><div class="other">'+rateText+'</div></td></tr>'+
								   '<tr><td class="color-area"><div class="selected-dates"></div></td><td class="color-label">Selected Dates</td><td class="other"><div class="other">*Rates in search results may vary</div></td></tr>'+
								   '<tr><td class="color-area"><div class="unavailable-dates"></div></td><td class="color-label">Unavailable Dates</td></tr>'+
							 '</table></div>'+
							 '</div>';
			}
			else {
				replaceDiv = '<div class="ui-datepicker-row-break">'+
							 '<div class="other">'+rateText+'</div>'
							 '<div class="other">*Rates in search results may vary</div>'+
							 '</div>';
			}

			target = $(target.target || target);
			var inst = $.data(target[0], $.datepick.dataName);
			if (inst) {
				var renderer = inst.get('renderer');

				renderer.picker = '<div{popup:start} id="ui-datepicker-div"{popup:end} class="datepicker-div-to-hide ui-datepicker ui-widget ' +
								  'ui-widget-content ui-helper-clearfix ui-corner-all{inline:start} ui-datepicker-inline{inline:end}">' +
								  '{popup:start}<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ' +
								  'ui-corner-all">{button:close}</div>{popup:end}'+
								  '{months}'+
								  '<div class="ui-helper-clearfix"></div>'+
								  replaceDiv+
								  '</div>';
			}

		},

		replaceWithError: function() { //method to show error instead of datepicker
			var w = $('.datepicker-div-to-hide').width();
			var h = $('.datepicker-div-to-hide').height();

			var replaceDiv = '<div class="ui-datepicker-error" style="width: 100%; height:100%;">'+
							 '<div class="error-header">'+
							 '<div class="error-close-section"><a class="error-close-action" href="javascript:void(0)" onclick="pickerClose();"><span class="localize-me">Close Window</span></a></div></div>'+
							 '<div class="ui-datepicker-row-break error-text-section"><div class="error-text"><p><br>Pricing data is currently unavailable.<br>Please close and try again or check back later.</p></div></div>'
							 '</div>';

			//$('#ui-datepicker-div').replaceWith(replaceDiv); - if we do this, normal date picker won't work - ui-date-picker-div applies to more than one datepicker
			$(".datepicker-div-to-hide").replaceWith(replaceDiv);
		}

	});

})(jQuery);