let createOrderFrame=()=>{
	let me = window.myOrderFrame = document.createElement("div");
	
	me.setAttribute("id","frmOrder");
	me.className="container-fluid "; 
	me.innerHTML=`
		<button onclick='myOrderFrame.clearOrder()' type="button" class="btn btn-danger">Clear All</button>
		<br>
		<div id='lbCostAmount'>0</div>
		<ul id='listOrderItems'>
		</ul>
		<div class="wrapper" id="frmChangePrice" style="display:none">		
			<div class="input-group">
			<span class="input-group-addon">$</span>
			<input type="text" class="form-control" id='changePriceValue' aria-label="Amount (to the nearest dollar)">
			<span class="input-group-addon">.00</span>
			</div>
			<div style="text-align:right">
			<button class="btn btn-success" type="button" onclick='$("#frmChangePrice").data("targetLine").changePrice($("#changePriceValue").val()/100);$(frmChangePrice).hide();'>OK</button>
			<button class="btn btn-primary" type="button" onclick='$(frmChangePrice).hide();'>CANCEL</button>
			</div>
		</div>
	`;
	$('#app').append(me);

	me.addToOrder=(openType,optionData)=>{
		optionData=JSON.parse(optionData.replace(/'/g,'"'));
		console.log("AddToOrder",openType,optionData);
		
		let me=document.createElement("li");
		me.multiplier = 100; // assume always 100 multipier
		me.price = (openType.substr(0,1)==="b")?optionData.ask:optionData.bid; 
		me.priceEffect = ((openType.substr(0,1)==="b")?-1:1);
		me.quantity = 1; // at this point, we add 1 by default.

		me.updateNumbers=()=>{
			let prevTotalCostAmount=me.totalCostAmount;
			me.singleCostAmount = me.priceEffect * me.multiplier * me.price 
			me.totalCostAmount = me.singleCostAmount * me.quantity;
			
			if ((prevTotalCostAmount !== undefined) && (prevTotalCostAmount !== me.totalCostAmount)) {
				myOrderFrame.costAmount += (me.totalCostAmount - prevTotalCostAmount);
			}
			if (me.getElementsByClassName("quantity")[0] !== undefined) {
				me.getElementsByClassName("quantity")[0].innerText = me.quantity;
				me.getElementsByClassName("singlePrice")[0].innerText = me.singleCostAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2}).padStart(6,"\xa0");
				me.getElementsByClassName("totalCost")[0].innerText = me.totalCostAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2});
			}
		};
		me.updateNumbers();

		me.increaseQty=_=>{
			me.quantity += 1;
			me.updateNumbers();
		}

		me.decreaseQty=_=>{
			if (me.quantity>1) { // don't go below 0, if we did, we had to chnage the order type to use the correct (bid/ask) price.
				me.quantity -= 1;
				me.updateNumbers();
			}
		}

		me.displayFrmPriceChange=_=>{
				$("#changePriceValue").val(parseInt(me.price*100,10));
				let clickElePos=$(event.target).position();
				$("#frmChangePrice").css("left",clickElePos.left).css("top",clickElePos.top);
				$("#frmChangePrice").data('targetLine',event.target.parentElement);
				$("#frmChangePrice").show();
		}

		me.changePrice=newPrice=>{
			me.price=newPrice;
			me.updateNumbers();
		}

		me.removeFromOrder=_=>{
			me.quantity=0;
			me.updateNumbers();
			me.parentElement.removeChild(me);
		}

		let splitOptionDetails=(input)=>{
			let symbolRest=input.split(/ +|_/);
			let symbol=symbolRest[0];
			
			let putCall=(symbolRest[1].indexOf("P")>-1)?"P":"C";
			let dateStrike = symbolRest[1].split(putCall);
			let date = dateStrike[0].replace(/(..)(..)(..)/,"20$3-$1-$2");
			let strike = dateStrike[1];

			return({symbol:symbol, putCall:putCall, date:date, strike:strike });
		}

		let optionDetails=splitOptionDetails(optionData.symbol);

		me.innerHTML=`
			<a class='danger' onclick='this.parentElement.removeFromOrder();'>[X]</a><b>${myMasterFilter.selectedDate}|${myMasterFilter.selectedTime.substr(0,5)}</b>|<span class="opentype${openType}">${((openType==="buy")?" ":"") + openType}</span><span class='plusMinus' onclick='this.parentElement.displayFrmPriceChange();'>@</span><span class="singlePrice">${Math.abs(me.singleCostAmount).toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2}).padStart(6,"\xa0")}</span>|<span class='quantity'>${me.quantity}</span>
			<div class='plusMinusContainer'>
				<a class='plusMinus' onclick='this.parentElement.parentElement.increaseQty();'>[+]</a><a class='plusMinus' onclick='this.parentElement.parentElement.decreaseQty();'>[-]</a>
			</div>
			<div class='orderItemLine2'>
				${optionDetails.symbol} ${optionDetails.date} ${optionDetails.putCall} ${optionDetails.strike} =&gt;  
					<span class='totalCost'>${me.totalCostAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2})}</span>
			</div>
		`;

		$("#listOrderItems").append(me);
		
		// adjust the cumulation on the order frame
		myOrderFrame.costAmount+=me.totalCostAmount;

	
	}


	me.clearOrder = ()=>{
		me.costAmount=0;
		$("#listOrderItems").empty();
	}

	me.showCostAmount=_=>{
		$("#lbCostAmount").text(me.costAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2}));
	}

	let _costAmount={};
	Object.defineProperty(me,'costAmount',{
		get:_=>{return(_costAmount);},
		set: (newVal)=>{
			console.log("changed cost", newVal);
			_costAmount=newVal;
			me.showCostAmount();
		} 
	});
	// InitializeCostAmount
	me.costAmount=0;
}