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>
	`;
	$('#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("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.removeFromOrder=_=>{
			me.quantity=0;
			me.updateNumbers();
			me.parentElement.removeChild(me);
		}

		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}</span>@<span class="singlePrice">${Math.abs(me.singleCostAmount).toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2})}</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'>
			${optionData.symbol} =&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;
}