<style>
	table.bids {background-color: #FAEBD7;}
	table.asks {background-color: #F5F5DC;}
	tr.fw{font-weight: bold;}
	tr.cu{cursor: pointer;}
	td{vertical-align: top; text-align: end; font-family: Courier; font-size: 12px;}
</style>
<div id=titl>Public OrderBook xBTCe</div>
<table>
	<tr>
		<td><table id="_symbol" class=""></table></td>
		<td><table id="_buy" class="bids"></table></td>
		<td><table id="_sell" class="asks"></table></td>
		<td><table id="_err" class=""></table></td>
	</tr>
</table>

<script>
	function status(response){if (response.ok){return response;}else throw new Error(response.statusText);}  
	function json(response){return response.json()}

	function xBTCeTicket(){
		
		var t = "<tr class=fw>"+
					"<td>#</td>"+
					"<td>Pair</td>"+
					"<td>Daily Volume</td>"+
				"</tr>";
		var url = 'https://cryptottlivewebapi.xbtce.net:8443/api/v1/public/ticker';

		fetch(url).then(status).then(json).then(function(data)
		{
			var dt=""; k=1;
			for (var i in data)
			{
				var x1 = data[i].Symbol.substr(0,3); x2 = data[i].Symbol.substr(3,3);
				
				dt=dt + "<tr class=cu id="+(x1+x2)+" onclick=xBTCeOrders(this.id);scroll(0,0);>"+
							"<td>"+(k++)+"</td>"+
							"<td>"+x1+"_"+x2+"</td>"+
							"<td>"+data[i].DailyTradedTotalVolume.toFixed(2)+" "+x1+"</td>"+
						"</tr>";
				
			}
			_symbol.innerHTML = t + dt;
		})
		.catch(function(error){_err.innerHTML=('Request failed '+ error);});
	}

	function xBTCeOrders(p){
		var x1 = p.substr(0,3); x2 = p.substr(3,3);
		
		var t = "<tr class=fw>"+
					"<td>Price</td>"+
					"<td>"		+x1+"</td>"+
					"<td>"		+x2+"</td>"+
					"<td>&sum;"	+x1+"</td>"+
					"<td>&sum;"	+x2+"</td>"+
				"</tr>";

		var url = 'https://cryptottlivewebapi.xbtce.net:8443/api/v1/public/level2/'+p;

		fetch(url).then(status).then(json).then(function(data)
		{
			var bids = data[0].Bids;
			var m = 0; n = 0; db = ""; k=1;
			for (var i in bids)
			{
				a = +bids[i].Price;
				b = +bids[i].Volume;
				c = a * b;
				m = m + b;
				n = n + c;
				
				var bt="";
				if (x2==="BTC"  && c>=1)	{bt=' class="fw"';}
				if (x2==="USD" && c>=1000)	{bt=' class="fw"';}
				if (x2==="EUR" && c>=1000)	{bt=' class="fw"';}
				if (x2==="RUB" && c>=50000)	{bt=' class="fw"';}
				
				db=db + "<tr"+bt+">"+
							"<td title=#"+(k++)+">"+a.toFixed(8)+"</td>"+
							"<td>"+b.toFixed(8)+"</td>"+
							"<td>"+c.toFixed(8)+"</td>"+
							"<td>"+m.toFixed(2)+"</td>"+
							"<td>"+n.toFixed(2)+"</td>"+
						"</tr>";
			}
			_buy.innerHTML = t + db;
			
			var asks = data[0].Asks;
			var m = 0; n = 0; ds = ""; k=1;
			for (var i in asks)
			{
				a = +asks[i].Price;
				b = +asks[i].Volume;
				c = a * b;
				m = m + b;
				n = n + c;
					
				var bt="";
				if (x2==="BTC"  && c>=1)	{bt=' class="fw"';}
				if (x2==="USD" && c>=1000)	{bt=' class="fw"';}
				if (x2==="EUR" && c>=1000)	{bt=' class="fw"';}
				if (x2==="RUB" && c>=50000)	{bt=' class="fw"';}
				
				ds=ds + "<tr"+bt+">"+
							"<td title=#"+(k++)+">"+a.toFixed(8)+"</td>"+
							"<td>"+b.toFixed(8)+"</td>"+
							"<td>"+c.toFixed(8)+"</td>"+
							"<td>"+m.toFixed(2)+"</td>"+
							"<td>"+n.toFixed(2)+"</td>"+
						"</tr>";
			}
			_sell.innerHTML = t + ds;
			
			titl.innerHTML = "Public OrderBook <a href=https://www.xbtce.com/ target=_blank>xBTCe</a> "+ x1 +"/"+ x2;
		})
		.catch(function(error){_err.innerHTML=('Request failed '+ error);});
	}
	xBTCeTicket();
</script>