let createMasterFilterFrame=()=>{
	let me=window.myMasterFilter = document.createElement("div");
	me.setAttribute("id","frmMasterFilter");
	me.className="container-fluid " 
	window.document.getElementById('app').append(me);
	
    me.innerHTML=`
        <div id='datePicker'></div>

		<div class="dropdown" id="grpSymbol">
		  <button class="btn btn-primary dropdown-toggle ddMnuBtn" type="button" id="ddMnuBtnSymbol" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			Symbol
		  </button>
		  <div class="dropdown-menu" aria-labelledby="ddMnuBtnSymbol" id='lbSymbol'>
			<a class="dropdown-item" href="#">Not Yet Loaded...</a>
		  </div>
		</div>

		<div class="dropdown" id="grpTime">
		  <button class="btn btn-primary dropdown-toggle ddMnuBtn" type="button" id="ddMnuBtnTime" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			Time
		  </button>
		  <div class="dropdown-menu" aria-labelledby="ddMnuBtnTime" id='lbTime'>
			<a class="dropdown-item" href="#">Select Date first.</a>
		  </div>
		</div>


        <h1 id='tbSymbol'>SELECT SYMBOL!</h1>
		<h2 id='tbUnderlyingPrice'></h2>
		
		<h2 id='tbSelectedTime'></h2>
		
		<!--button onclick='rq()'>LOAD</button-->
    `;
	
	let _filterContext={}; // TODO: This is bad, grown design - should be replaced with a proper object oriented structure and observer pattern.
	Object.defineProperty(me,"selectedDate",{
		get:_=>{ return (_filterContext.theDate);}
	})
	Object.defineProperty(me,"selectedTime",{
		get:_=>{ return (_filterContext.selectedTime);}
	})

	me.beforeShowDay=(theDate)=>{
		let isoDate=theDate.toISOString().substr(0,10);
		//console.log("BeforeShow",isoDate,theDate);
	
		let isDateFound=false;
		for (let i=0;i<_filterContext.availableDates.length;i++){
			if (_filterContext.availableDates[i].Date===theDate.toISOString().substr(0,10)){
				isDateFound=true;
				break;
			};
		}
	
		if (!isDateFound) {
			return {enabled:false, tooltip:"No data"};
		}
	}
	
	me.fetchSymbols=()=>{
		$.get({
			url:"/getSymbols"
		}).done(response=>{
			let allSymbols=response;
			console.log(allSymbols);
			me.refreshSymbolList(allSymbols);
		});
	}
	
	me.getCurrentSymbol=()=>{
		return(_filterContext.theSymbol);
	}
	me.symbolChanged=(newSymbol)=>{
		console.log("symbolChanged",newSymbol);
		_filterContext.theSymbol=newSymbol
		document.title=me.getCurrentSymbol();
		$("#tbSymbol").text(me.getCurrentSymbol());
		
		me.getAvailDatesForSymbol(me.getCurrentSymbol()).done(_=>{
			$("#datePicker").datepicker('destroy');
			$("#datePicker").datepicker({beforeShowDay:me.beforeShowDay});
			if (document.getElementById("datePicker").hasHandler !== true) { // work around multiple binding of the eventhandler - it seems that destroy doesn't remove the old handler....
				$("#datePicker").datepicker().on('changeDate', (e)=>{
					if (e.date !== undefined) {
						console.log("DatePicker changed date",e.date);
						_filterContext.theDate=e.date.toISOString().substr(0,10);
						me.showTimesForDay(_filterContext.theDate);
					}
				});
				document.getElementById("datePicker").hasHandler= true;
			}
			
			if (_filterContext.theDate === undefined) {
				console.log("no date in contest, setting date to the last in chain.");
				_filterContext.theDate=_filterContext.availableDates[_filterContext.availableDates.length-1].Date;
			}
			
			currentTZDate = new Date(Date.parse(_filterContext.theDate) + new Date().getTimezoneOffset()*60000);
			console.log("setting datepicker date to ", _filterContext.theDate, currentTZDate);
			
			$("#datePicker").datepicker('setDate',currentTZDate);
		});
	}
	
	me.timeChanged=(newTime)=>{
		if (_filterContext.selectedTime!==newTime){
			_filterContext.selectedTime=newTime;
			$("#tbSelectedTime").text(newTime);
			console.log("Time changed", newTime);
		}
		
		me.requestOptionChain();
	}
	
	me.requestOptionChain=()=>{
		$.ajax({
			url:"/getOptionChain?Date=" + _filterContext.theDate + "&Symbol=" + _filterContext.theSymbol + "&Time="+ _filterContext.selectedTime
		}).done(response=>{
			dta=JSON.parse(response[0].Data);
			//console.log("received",dta);
			displayOptionChain();
			$("#tbUnderlyingPrice").text(dta.underlyingPrice.toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2}));
		});
	}
	
	me.showTimesForDay=()=>{
		return $.ajax({
			url:"/getTimes?Date=" + _filterContext.theDate + "&Symbol=" + _filterContext.theSymbol
		}).done(response=>{
			let availableTimes=response;
			//console.log(availableTimes);
			let lbTime=$("#lbTime");
			lbTime.empty();
			allTimes = availableTimes;
			for (let i=0;i<allTimes.length;i++){
				theTime=allTimes[i].Time;
				if (_filterContext.selectedTime !== undefined) {
					if (_filterContext.selectedTime.substring(0,4) === theTime.substring(0,4)){
						me.timeChanged(theTime);
					}
				} else {
					if (i==4) {
						// select the 4th time in the day... that's usually around 9:30
						me.timeChanged(theTime);
					}
				}
				//lbTime.append($(`<option ${selectedFlag}>${theTime}</option>`))
				lbTime.append($(`<button onclick="myMasterFilter.timeChanged('${theTime}');" class="dropdown-item" type="button">${theTime.substring(0,5)}</button>`))
	
			}
			$("#lbTime").change();
		});
		
	}
	
	me.getAvailDatesForSymbol=(theSymbol)=>{
		return $.ajax({
			url:"/getDates?Symbol=" + theSymbol
		}).done(response=>{
			let availableDates=response;
			//console.log(availableDates);
			_filterContext.availableDates=availableDates;
		});
	}
	
	me.refreshSymbolList=(allSymbols)=>{
		let lbSymbol=$("#lbSymbol");
		lbSymbol.empty();
		for (let i=0;i<allSymbols.length;i++){
			theSymbol=allSymbols[i].Symbol;
			console.log(theSymbol);
			lbSymbol.append($(`<button onclick="myMasterFilter.symbolChanged('${theSymbol}');" class="dropdown-item" type="button">${theSymbol}</button>`))
		}
	}

    me.fetchSymbols();
	
	return true;
}