$(document).ready(function(){

	$divApptRequest = $('div#divApptRequest');
	filterProvider = '';
	filterLocation = '';
	filterType = '';
	blockLength = 15;
	endpoint = 'get_availability.cfm';

	// Timer to automatically clear the menu after 30 minutes
	// And ask the person to refresh the page.  I don't want the
	// page to automatically refresh to keep DB usage down.
	// 30*60*1000
	setTimeout(function(){
		$divApptRequest.html('<center><h1>Page Expired<br/>Please Refresh</h1></center>');
	}, 30*60*1000);


	var browTZ = (new Date().getTimezoneOffset()) * -1;
	$('#apptModal input[name=browserTZ]').val(browTZ);

	var StateCodes = 
	['AL','AK','AZ','AR','CA','CO','CT','DE','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD','MA','MI','MN','MS','MO',
	 'MT','NE','NV','NH','NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY']

	var NonStateCodes = ['DC','PR','VI'];

	if(typeof HideNonStateCodes === 'string'){
		HideNonStateCodes = (HideNonStateCodes === 'true');
	}


	try{
		if(SelectedStateCodes.trim() != ''){
			console.log(SelectedStateCodes);
			StateCodes = JSON.parse(SelectedStateCodes);
		}
		else if(!HideNonStateCodes){
			StateCodes.push.apply(StateCodes, NonStateCodes);
		}
	}
	catch(ex){
		console.log('Error Trying to Handle SelectedStateCodes');
		console.log(ex);
	}

	StateCodes.sort();

	var $selState = $('#apptModal select[name=addr_state]');
	if($selState.length > 0){
		$selState.append(arrayToOptionNodes(StateCodes));
		if(StateCodes.indexOf(ClientState) >= 0){
			$selState.val(ClientState);
		}
	}

	var $inCity = $('#apptModal input[name=addr_city]');
	if($inCity.length > 0){
		$inCity.val(ClientCity);
	}


	/*
	if(SelectedStateCodes.trim() != ''){
		console.log(SelectedStateCodes);
		StateCodes = JSON.parse(SelectedStateCodes);
	}
	else if(!HideNonStateCodes){
		StateCodes.push.apply(StateCodes, NonStateCodes);
	}


	StateCodes.sort();

	console.log('StateCodes');
	console.log(StateCodes);
	//*/




	var $div = $('div#divApptRequest');

	var weekStart = defaultWeekStart();
	var minday = ($divApptRequest.attr('data-minDaysOut') || 1) * 1;
	minday = minday > 1 ? minday : 1;
	var maxday = ($divApptRequest.attr('data-maxDaysOut') || 30) * 1;
	if(maxday < minday){
		console.log('MaxDay is less than MinDay.  Setting MaxDay to minDay+7');
		maxday = minday + 7;
	}

	$divApptRequest.attr('data-minDaysOut', minday);
	$divApptRequest.attr('data-maxDaysOut', maxday);
	$divApptRequest.prop('WeeklyAvailability', {});
	$divApptRequest.attr('data-weekstart', weekStart.getTime());


	// Add handlers

	$divApptRequest.find('table[name=tblSelection]').on('click', 'td.navArrow.arrowPrevWeek:not([disabled])', function(e){
		var weekStart = new Date(1*$divApptRequest.attr('data-weekstart')).toDate().round();
		weekStart = weekStart.sub(7).round();
		$divApptRequest.attr('data-weekstart', weekStart.getTime());
		ResetUI();
		LoadWeeklyAvailability();
	});

	$divApptRequest.find('table[name=tblSelection]').on('click', 'td.navArrow.arrowNextWeek:not([disabled])', function(e){
		var weekStart = new Date(1*$divApptRequest.attr('data-weekstart')).toDate();
		weekStart = weekStart.add(7).round();
		$divApptRequest.attr('data-weekstart', weekStart.getTime());
		ResetUI();
		LoadWeeklyAvailability();
	});


	/*
	$divApptRequest.find('table[name=tblSelection] tr td.navArrow.arrowPrevWeek').on('click', function(e){
		if(this.getAttribute('disabled') == '1'){
			console.log('Prev Button Disabled');
			return;
		}		
		var weekStart = new Date(1*$divApptRequest.attr('data-weekstart')).toDate();
		weekStart = weekStart.sub(7);
		$divApptRequest.attr('data-weekstart', weekStart.getTime());
		ResetUI();
		LoadWeeklyAvailability();
		$divApptRequest.find('[data-availability][clicked]:first').trigger('click');
	});

	$divApptRequest.find('table[name=tblSelection] tr td.navArrow.arrowNextWeek').on('click', function(e){
		if(this.getAttribute('disabled') == '1'){
			console.log('Next Button Disabled');
			return;
		}
		var weekStart = new Date(1*$divApptRequest.attr('data-weekstart')).toDate();
		weekStart = weekStart.add(7);
		$divApptRequest.attr('data-weekstart', weekStart.getTime());
		ResetUI();
		LoadWeeklyAvailability();
	});
	//*/





	function disableNavigationArrows(){
		$divApptRequest.find('table[name=tblSelection] tr td.navArrow').attr('disabled', 1);
	}

	function enableNavigationArrows(){
		$divApptRequest.find('table[name=tblSelection] tr td.navArrow').removeAttr('disabled');
	}


	$divApptRequest.find('table[name=tblSelection]').on('change', 'tr[name=selectRow] select[name=fieldSelect]', function(e){

		var $sel = $(this);
		var $opt = $sel.find('option[name=fieldOption]:checked');
		if($opt.length != 1){
			console.log('No Checked Option Found.  Returning.');
			return;
		}
		if($opt.val() == ''){
			return;
		}

		ScheduleSelectionUUID = $opt.val();

		var $row = $sel.closest('td[name=fieldOpts]');
		var $tbl = $row.closest('table[name=tblSelection');
		var index = $row.attr('data-index');

		if($opt.attr('data-global') == 1){
			clearTableSelections(index, $tbl);
		}else{
			// If it's not the global option then we'll load the next row of field selects
			createSelectionTable(index, $tbl);
		}

		// Load the availability info
		//LoadAvailability();
	});



	$divApptRequest.on('click', '[data-availability=open]', function(e){
		var name = '[name='+this.getAttribute('name')+']';
		var $date = $divApptRequest.find('td.scheduleDate'+name);
		var slots = $date.prop('dailyAvailabilitySlots');
		var caldatems = $date.prop('calendarDate')
		var caldate = new Date(caldatems);
		var $tblSlots = $divApptRequest.find('table#tblSlots');
		var $tblBody = $tblSlots.find('tbody[name=openSlots]');
		var alreadyClicked = false;

		$tblSlots.find('th[name=dateRow]').text('Appointments available on '+ caldate.format('Wwww, Mmmm d, yyyy'));
		$tblBody.html('');

		alreadyClicked = this.getAttribute('clicked') === '1';

		$divApptRequest.find('[data-availability][clicked]').removeAttr('clicked');
		$divApptRequest.find('[data-availability]'+name).attr('clicked', '1');


		var tableKeys = [];
		var tableSlots = {};

		var startSlotTime = slots[0];
		if(typeof startSlotTime == 'object'){
			startSlotTime = startSlotTime.time;
		}

		var nextHour = Date.parseTime(startSlotTime);
		nextHour = new Date(nextHour.setMinutes(0));
		var startHour = null;
		var hourString = '';

		for(var i = 0; i < slots.length;){
			var ntimestr = slots[i];
			if(typeof ntimestr == 'object'){
				ntimestr = ntimestr.time;
			}

			var ntime = Date.parseTime(ntimestr);
			if(ntime.compare(nextHour) >= 0){
				startHour = nextHour;
				nextHour = startHour.add('1h');
				hourString = startHour.format('hh:nn TT');
				tableKeys.push(hourString);
				tableSlots[hourString] = [];
			}

			if(ntime.compare(nextHour) < 0){
				tableSlots[hourString].push(slots[i]);
				i++;
			}			
		}

		var rows = [];
		for(var i in tableKeys){
			var hr = tableKeys[i];
			var displayTime = Date.parseTime(hr).format('h:nn TT');
			var timeRow = synthesizeElement({tag:"td", classes:['hourCell','noselect'], text:displayTime});
			var slots = tableSlots[hr];
			var times = [];
			for(var j in slots){
				var slotObj = slots[j];
				var ntime = slotObj;
				var slotInfo = null;			
				var dur = '';
				if(typeof slotObj === 'object'){			
					ntime = slotObj.time;
					dur = slotObj.duration;
					ntime = slotObj.display ?? ntime;
					slotInfo = slotObj.slotInfo ?? null;
				}

				var node = synthesizeElement({tag:'span', text:ntime, classes:['openSlot','noselect'], attributes:{title:ntime}, properties:{calendarDate:caldatems, slotTime:ntime, slotDuration:dur, slotInfo:slotInfo}});
				times.push(node);
			}

			var cell = {tag:'td'};
			if(times.length > 0){
				cell.children = times;
			}
			cell = synthesizeElement(cell);
			rows.push(synthesizeElement({tag:'tr', children:[timeRow, cell]}));
			spacer = synthesizeElement({tag:'td', html:"<hr/>",attributes:{colspan:2}});
			rows.push(synthesizeElement({tag:"tr", children:[spacer]}));
		}

		$tblBody.append(rows);
		$tblSlots.find('[name=msgRow]').css('visibility', 'visible');
		if(!alreadyClicked){
			var $hourCells = $tblSlots.find('td.hourCell');
			var scrollIndex = Math.min(3,  $hourCells.length);
			if(scrollIndex > 1){
				$hourCells[scrollIndex-1].scrollIntoView({behavior: "smooth", block:"center", inline:"nearest"});
			}
			//$tblBody.find('span.openSlot:first')[0].scrollIntoView({behavior: "smooth", block:"center", inline:"nearest"});
		}
	});


	$divApptRequest.on('click', '[data-availability][data-availability!=open]', function(e){
		var name = '[name='+this.getAttribute('name')+']';
		var $date = $divApptRequest.find('td.scheduleDate'+name);
		var caldate = new Date($date.prop('calendarDate'));
		var $tblSlots = $divApptRequest.find('table#tblSlots');
		var $tblBody = $tblSlots.find('tbody[name=openSlots]');
		var $node = $(this);

		var avail = $node.attr('data-availability');

		if(avail == 'unknown'){
			$tblSlots.find('th[name=dateRow]').text('Please choose a selection from the dropdows to see available appointment times.');
		}
		else{
			$tblSlots.find('th[name=dateRow]').text('No available appointments on '+ caldate.format('Wwww, Mmmm d, yyyy'));
		}
		
		$tblBody.html('');
		$tblSlots.find('[name=msgRow]').css('visibility', 'hidden');

		$divApptRequest.find('[data-availability][clicked]').removeAttr('clicked');
		$divApptRequest.find('[data-availability]'+name).attr('clicked', '1');

	});

	$divApptRequest.find('table#tblSlots').on('click', 'span.openSlot', function(e){
		var $node = $(this);
		var caldatems = $node.prop('calendarDate');
		var slotTime = $node.prop('slotTime');
		var slotDur = $node.prop('slotDuration') ?? '';
		var slotInfo = $node.prop('slotInfo') ?? '';
		var requestDate = (new Date(caldatems)).format('Mmm d, yyyy');
		var $modal = $('#apptModal');

		var $spanProvider = $modal.find('#spanProvider:has([name^=provider].requestVal)');
		var $spanLocation = $modal.find('#spanLocation:has([name^=location].requestVal)');
		var $spanType = $modal.find('#spanType:has(input[name^=apptType])');

		if($spanProvider.length > 0){
			$spanProvider.show().find('[name^=provider].requestVal').val(filterProvider);
		}
		if($spanLocation.length > 0){
			$spanLocation.show().find('[name^=location].requestVal').val(filterLocation);
		}
		if($spanType.length > 0){
			$spanType.show().find('[name^=apptType].requestVal').val(filterType);
		}

		$modal.find('input[name=date1]').val(requestDate);
		$modal.find('input[name=time1]').val(slotTime);
		$modal.find('input[name=slotDuration]').val(slotDur);
		$modal.find('input[name=slotInfo]').val(slotInfo);

		$modal.modal({backdrop: 'static', keyboard:false})
	});


	// document.addEventListener('contextmenu', function(e){e.preventDefault(); return false;}, true);



	// Finish the setup 


	ResetUI();
	loadSelections();




	function loadSelections(){
		formatRawRules();
		//console.log(ScheduleSelectionData);

		var $tbl = $('div#divApptRequest table[name=tblSelection]');
		createSelectionTable(-1, $tbl);
	}


	function formatRawRules(){
		// This corrects for the format the rules are in when they're pulled initially from the database.

		//console.log('Original Data');
		//console.log(ScheduleSelectionData);

		try{
			if(ScheduleSelectionData == ''){
				ScheduleSelectionData = {};
				return;
			}
			var rawrules = JSON.parse(ScheduleSelectionData);

			//console.log('Original Data');
			//console.log(rawrules);

			ScheduleSelectionData = {};
			for(var i in rawrules){
				var row = rawrules[i];
				var ruuid = row.uuid;
				delete row.uuid;

				row.subSelectionCount = 0;

				if(row.filters != null && row.filters > ''){
					row.filters = JSON.parse(row.filters);
				}
				if(row.subSelections != null && row.subSelections > ''){
					if(typeof row.subSelections === 'string'){
						var selections = JSON.parse(row.subSelections);
					}
					else{
						var selections = row.subSelections;
					}
					
					var ctr = 0;
					row.subSelections = {};
					for(key in selections){
						var obj = selections[key];
						row.subSelections[obj.uuid] = obj.name;
						ctr++;
					}
					row.subSelectionCount = ctr;
				}
				else{
					row.subSelections = {};
				}
				ScheduleSelectionData[ruuid] = row;
			}

			var flag = checkSelectionDataTree(ScheduleRootUUID);
			if(!flag){
				ScheduleSelectionData = {};
				$('div#divApptRequest').html('<h1>Not Available<br/>Please check back later!</ht>');
				return;
				// No active or valid rules.
			}
			else{
				var selectionTreeJSON = JSON.stringify(ScheduleSelectionData);
				//console.log('selectionTreeJSON');
				//console.log(selectionTreeJSON);
				$('#requestApptForm input[name=selectionTree]').val(selectionTreeJSON);
			}
			

			 

		}
		catch(ex){
			console.log('Caught Error When Parsing Initial Rules');
			console.log(ex);
			return;
		}

	}


	function checkSelectionDataTree(uuid){
		if(typeof ScheduleSelectionData[uuid] === 'undefined'){
			//console.log('['+uuid+'] does not exist in Schedule Selection Data');
			return false;
		}

		var rule = ScheduleSelectionData[uuid];

		if(!rule.active || rule.name == ''){
			//console.log('['+uuid+'] Rule is not active or name is empty');
			return false;
		}

		if(!rule.enableNestedSelections){
			return true;
		}
		else{
			if(rule.selectionFieldName == ''){
				//console.log('['+uuid+'] Selection Field Name is empty');
				return false;
			}

			var newSel = {};
			var newCtr = 0;

			for(var subuuid in rule.subSelections){
				var flag = checkSelectionDataTree(subuuid);
				if(flag){
					newSel[subuuid] = rule.subSelections[subuuid];
					newCtr++; 
				}
			}

			rule.subSelections = newSel;
			rule.subSelectionCount = newCtr;

			if(newCtr < 1){
				//console.log('['+uuid+'] No Sub Selections');
			}

			return (newCtr > 0);
		}
	}


	function clearTableSelections(index, $tbl){
		if(SchedulerView == 'Desktop'){
			var $rows = $tbl.find('tr[name=selectRow] td:not(:first)');
		}
		else if(SchedulerView == 'Mobile'){
			var $rows = $tbl.find('tr[name=selectRow].selection');
		}
		
		if(index < 0){
			$rows.remove();
		}
		else{
			$rows.each(function(){
				var $row = $(this);
				var i = $row.attr('data-index') & -1;

				if(i > index){
					$row.remove();
				}
				else if(SchedulerView == 'Desktop'){
					$row.attr('data-pointer', '0');
				}
				else if(SchedulerView == 'Mobile'){
					$row.find('td').attr('data-pointer', '0');
				}
			});
		}
	}




	function setFilterVarsFromSelections($tbl){
		var $selects = $tbl.find('tr[name=selectRow] td[name=fieldOpts] select[name=fieldSelect]');
		var filterkeys = ['location','provider','type'];
		filterProvider = filterLocation = filterType = '';

		$selects.each(function(){
			var opt = $(this).find('option[value!=""]:selected')[0];

			if(opt.hasAttribute('data-provider')){
				filterProvider = opt.getAttribute('data-provider');
			}
			if(opt.hasAttribute('data-location')){
				filterLocation = opt.getAttribute('data-location');
			}
			if(opt.hasAttribute('data-type')){
				filterType = opt.getAttribute('data-type');
			}	
		});

	}


	function createSelectionTable(index, $tbl){
		clearTableSelections(index, $tbl);

		index++;
		var seldata = ScheduleSelectionData[ScheduleSelectionUUID];
		setFilterVarsFromSelections($tbl);

		if(seldata.subSelectionCount == 0 || !seldata.enableNestedSelections){
			// No subselections.  Don't create any new rows
			// need to trigger the fetch
			$('table#tblSlots').find('th[name=dateRow]').text('');
			$('#requestApptForm input[name=selectUUID]').val(ScheduleSelectionUUID);
			showWeekDaySelections();
			LoadWeeklyAvailability();
			return;
		}
		ResetUI();

		ScheduleHasSubSelections = true;
		var fieldName = seldata.selectionFieldName;
		var opts = [];

		if(seldata.subSelectionCount > 1){
			opts.push(synthesizeElement({
				tag:'option',
				text:'Choose One',
				attributes:{
					'selected':'',
					'value':''
				}
			}));			
		}

		var filterkeys = ['location','provider','type'];

		for(uuid in seldata.subSelections){
			var subsel = ScheduleSelectionData[uuid];
			var attr = {
				name:'fieldOption'
			}

			if(typeof subsel.filters !== 'undefined'){
				for(var i in filterkeys){
					var fkey = filterkeys[i];
					if(typeof subsel.filters[fkey] !== 'undefined'){
						if(subsel.filters[fkey].operator == 'include' && subsel.filters[fkey].values.length == 1){
							attr['data-'+fkey] = subsel.filters[fkey].values[0];
						}
					}					
				}
			}

			opts.push(synthesizeElement({
				tag:'option',
				attributes:attr,
				value:uuid,
				text:seldata.subSelections[uuid]
			}));
		}


		var row = synthesizeElement({
				tag:'td',
				name:'fieldOpts',
				attributes:{
					'data-pointer':'1',
					'data-index':index,
					'data-fieldtype':seldata.fieldtype,
					'colspan':'2'
				},
				children:[
				synthesizeElement({
					tag:'span',
					name:'fieldName',
					classes:'sltLabel',
					text:fieldName
				}),
				synthesizeElement({
					tag:'select',
					name:'fieldSelect',
					children:opts
				})]
			});

		if(SchedulerView == 'Desktop'){
			$tbl.find('tr[name=selectRow]').append(row);
		}
		else if(SchedulerView == 'Mobile'){
			row = synthesizeElement({
				tag:'tr',
				name:'selectRow',
				classes:'selection',
				attributes:{
					'data-index':index
				},
				child:row
			});
			$tbl.find('tr[name=selectRow]:last').after(row);
		}

			
		if(seldata.subSelectionCount <= 1){
			var $sel = $(row).find('select[name=fieldSelect]');
			$sel.find('option[name="fieldOption"]:first').prop('selected', true);
			$sel.trigger('change');
			// go to the next option
		}
		else{
			$('table#tblSlots').find('th[name=dateRow]').text('Choose an option from the ' + fieldName + ' dropdown');
		}
	}



	function defaultWeekStart(){
		var minday = $divApptRequest.attr('data-minDaysOut') || 1;
		var today = (new Date()).toDate();
		var earliest = today.add(minday);
		var weekStart = earliest.sub(earliest.getDay());

		if(earliest.getDay() >= 5){
			// If the earliest date is on a friday or saturday, we'll go ahead and show next week's availability
			weekStart = weekStart.add(7);
		}

		return weekStart;
	}



	function ResetUI(){
		var defaultStart = defaultWeekStart();
		var today = (new Date()).toDate().round();
		var weekStart = new Date(1*$divApptRequest.attr('data-weekstart')).toDate().round();
		var maxDaysOut = 1*($divApptRequest.attr('data-maxDaysOut'));
		var minDaysOut = 1*($divApptRequest.attr('data-minDaysOut'));
		var farthestDate = today.add(maxDaysOut).round();
		var earliestDate = today.add(minDaysOut).round();
		var earliestStart = earliestDate.sub(earliestDate.getDay()).round();
		// Had to add the rounding to account for DST


		if(weekStart.compare(earliestStart) < 0 || farthestDate.compare(weekStart) < 0){
			console.log('Current weekstart is out of valid range.  Resetting to default');
			$divApptRequest.attr('data-weekstart', defaultStart.getTime());
			weekStart = defaultStart;
		}

		var weekEnd = weekStart.add(6).toDate();
		
		$divApptRequest.find('table[name=tblSelection] th,td[data-weekday]').filter(':not([name=selectRow])').attr('data-availability', 'unknown');

		var $scheduleDates = $divApptRequest.find('table[name=tblSelection] td.scheduleDate');
		var $indicators = $divApptRequest.find('table[name=tblSelection] td.availabilityIndicator').text('');

		for(var i = 0; i < 7; i++){
			var cssname = '[name=weekday'+i+']';
			var $curday = $scheduleDates.filter(cssname);
			var curday = weekStart.add(i);
			if(today.compare(curday) == 0){
				$curday.html('<u>'+curday.format('Mmm d, yyyy')+'<u>');
			}
			else{
				$curday.text(curday.format('Mmm d, yyyy'));
			}
			$divApptRequest.find(cssname).prop('calendarDate', curday.getTime());
			var $ind = $indicators.filter(cssname);
			if(curday.compare(earliestDate) < 0 || curday.compare(farthestDate) >= 0){
				$divApptRequest.find(cssname).attr('data-availability', 'unavailable');
			}
		}

		var $arrows = $divApptRequest.find('tr td.navArrow');
		$arrows.prop('disabled', true).css('visibility','hidden');

		if(weekStart.sub(1).compare(earliestDate) >= 0){
			$arrows.filter('.arrowPrevWeek').prop('disabled',false).css('visibility','visible');
		}
		if(weekEnd.add(1).compare(farthestDate) < 0){
			$arrows.filter('.arrowNextWeek').prop('disabled',false).css('visibility','visible');
		}

		disableNavigationArrows();
	}


	function fetchWeeklyAvailability(refetch){
		refetch = refetch || true;
		var weekStart = new Date(1*$divApptRequest.attr('data-weekstart')).toDate();
		var weekEnd = weekStart.add(6).toDate();
		var cid = 1*$divApptRequest.attr('data-clientid');
		var cache = $divApptRequest.prop('WeeklyAvailability');
		var dateRangeString = weekStart.format('yyyy/mm/dd')+'-'+weekEnd.format('yyyy/mm/dd');

		var struct = {
			 action:'getrangeslots'
			,clientid:cid
			,browserTZ: browTZ
			,selectionUUID:ScheduleSelectionUUID
			,startDate:weekStart.format('yyyy-mm-dd')
			,endDate:weekEnd.format('yyyy-mm-dd')
		};
		disableNavigationArrows();


		$.post(endpoint, struct, function(data){
			//console.log('GetRangeSlots Data');
			//console.log('Struct Sent: ');
			//console.log(struct);
			//console.log(data.trim());
			//return;
			//console.log(data);
			data = JSON.parse(data);
			//console.log(data);
			if(!data.STATUS){
				console.log('Error Fetching availability');
				console.log(data);
				return;
			}
			data = data.ANSWER;
			//console.log(data);

			if(typeof cache[ScheduleSelectionUUID] === 'undefined'){
				cache[ScheduleSelectionUUID] = {};
			}

			cache[ScheduleSelectionUUID][dateRangeString] = data;
			// Load Calendar with Slots
			LoadCalendar(data);
			
		});		
	}


	function LoadWeeklyAvailability(refetch){
		refetch = refetch || true;
		var weekStart = new Date(1*$divApptRequest.attr('data-weekstart')).toDate();
		var weekEnd = weekStart.add(6).toDate();
		var flag = false;
		var dateRangeString = weekStart.format('yyyy/mm/dd')+'-'+weekEnd.format('yyyy/mm/dd');
		var cache = $divApptRequest.prop('WeeklyAvailability');
		var slots = {};

		if(typeof cache[ScheduleSelectionUUID] !== 'undefined'){
			if(typeof cache[ScheduleSelectionUUID][dateRangeString] !== 'undefined'){
				slots = cache[ScheduleSelectionUUID][dateRangeString];
				flag = true;
			}
		}


		if(flag){
			LoadCalendar(slots);
			return;
		}
		else if(refetch){
			fetchWeeklyAvailability();
			return;
		}
		else{
			console.log('Availability is not in Cache and refetch is disabled');
			return;
		}
	}


	function LoadCalendar(data){
		var weekStart = new Date(1*$divApptRequest.attr('data-weekstart')).toDate();
		var $scheduleDates = $divApptRequest.find('td.scheduleDate');
		var $indicators = $divApptRequest.find('td.availabilityIndicator');
		var slots = data.CalendarSlots;
		blockLength = data.BlockLength;

		for(var i = 0; i < 7 ; i++){
			var cssname = '[name=weekday'+i+']';
			var $curday = $scheduleDates.filter(cssname);
			var $ind = $indicators.filter(cssname);
			var curday = weekStart.add(i);
			var dtstr = curday.format('yyyy-mm-dd');
			var availStatus = 'closed';
			var daySlots = [];
			var curStatus = $curday.attr('data-availability');
			if(curStatus == 'unavailable'){
				continue;
			}

			if(typeof slots[dtstr] !== 'undefined'){
				daySlots = slots[dtstr];
			}
			if(daySlots.length > 0){
				availStatus = 'open';
				$ind.text('Click to See Available Times');
			}

			$divApptRequest.find(cssname).attr('data-availability', availStatus);
			$curday.prop('dailyAvailabilitySlots', daySlots).prop('calendarDate', curday.getTime());
		}

		$indicators.filter('[data-availability][data-availability!=open]').filter('[data-availability!=unavailable]').text('No Available Appointments');
		$divApptRequest.find('[data-availability][clicked]:first').trigger('click');
		enableNavigationArrows();
	}

	function showWeekDaySelections(){
		if(SchedulerView == 'Mobile'){
			$divApptRequest.find('table[name=tblSelection]').find('tr[name=rowWeekDay],tr[name=rowWeekNav]').show()
		}
	}

	function hideWeekDaySelections(){
		if(SchedulerView == 'Mobile'){
			$divApptRequest.find('table[name=tblSelection]').find('tr[name=rowWeekDay],tr[name=rowWeekNav]').hide()
		}
	}


	function arrayToOptionNodes(arr){
		var res = [];
		for(l in arr){
			var struct = {
				tag:'option',
				value:arr[l],
				text:arr[l]
			};
			res.push(synthesizeElement(struct));
		}

		return res;
	}



	function synthesizeElement(nobj)
	{
	/*
	{
		tag:"input",
		name:"",
		id:""
		value:""
		text:""
		html:""
		type:""
		child:node
		class:""|[],
		style:{}|"",
		attributes:{},
		properties:{}
	}
	*/
		var node = document.createElement(nobj.tag);
		if(typeof nobj.id !== 'undefined'){
			node.id = nobj.id;
		}
		if(typeof nobj.value !== 'undefined'){
			node.value = nobj.value;
		}
		if(typeof nobj.type !== 'undefined'){
			node.type = nobj.type;
		}
		if(typeof nobj.name !== 'undefined'){
			node.setAttribute('name', nobj.name);
			//node.name = nobj.name;
		}

		if(typeof nobj.text !== 'undefined'){
			node.innerText = nobj.text;
		}else if (typeof nobj.child !== 'undefined'){
			if(Array.isArray(nobj.child)){
				for(var i in nobj.child){
					node.appendChild(nobj.child[i]);
				}
			}else{
				node.appendChild(nobj.child);
			}
		}else if (typeof nobj.children !== 'undefined'){
			if(Array.isArray(nobj.children)){
				for(var i in nobj.children){
					node.appendChild(nobj.children[i]);
				}
			}else{
				node.appendChild(nobj.children);
			}							
		}else if(typeof nobj.html !== 'undefined'){
			node.innerHTML = nobj.html;
		}
		
		if(typeof nobj.classes !== 'undefined'){
			if(typeof nobj.classes === 'string'){
				node.className = nobj.classes;
			}else if(typeof nobj.classList !== 'undefined'){
				for(var cl in nobj.classes){
					node.classList.add(nobj.classes[cl]);
				}		
			}else{
				node.className = nobj.classes.join(' ');
			}
		}
		
		if(typeof nobj.style !== 'undefined'){
			if(typeof nobj.style === 'string'){
				node.setAttribute("style", nobj.style);
			}else{
				for(var key in nobj.style)
				{
					node.style[key] = nobj.style[key];
				}
			}	
		}
		
		if(typeof nobj.attributes !== 'undefined'){
			for(key in nobj.attributes){
				node.setAttribute(key, nobj.attributes[key]);
			}	
		}

		if(typeof nobj.properties !== 'undefined'){
			for(key in nobj.properties){
				node[key] = nobj.properties[key];
			}
		}

		return node;
	}




});



// This has to be outside of the document ready function 

function SelectionsToArray(){
	var selRows = $('div#divApptRequest table[name=tblSelection] tr[name=selectRow] td[name=fieldOpts]');
	var opts = [];

	selRows.each(function(){
		var $row = $(this);
		var obj = {
			name:$row.find('span[name=fieldName]').text() ?? '',
			value:$row.find('select[name=fieldSelect] option[name=fieldOption]:checked').text() ?? ''
		};

		opts.push(obj);
	});

	return opts;
}