<html>
	<head>
		<title>Speed Dial</title>
		<link rel="icon" href="https://pube.tk/favicon.ico" type="image/x-icon" />
		<script>
			/* Configuration */
			var sortSubcategories = true;	// Sort URLs alphabetically
			var singleExpand = true;		// Allow expanding one category at a time
			
			
			var rounding = 8; // Cryptocurrency rounding to n-th digit
			var cryptos = // List of cryptos (their IDs on CoinMarketCap) and respective values
			{
				'bitcoin' : 0.12345678,
				'ethereum' : 0.12345678,
				'monero' : 0.12345678,				
			};
			var sites = // JSON tree structure of 'Group' : { 'Name' : 'URL' }
			{
				'Shopping' :
				{
					'eBay' : 'https://www.ebay.com/',
					'Amazon' : 'https://www.amazon.com/',
				},
				'Search' :
				{
					'DuckDuckGo' : 'https://duckduckgo.com/',
                    'Qwant' : 'https://www.qwant.com/',
				},
				'Entertainment':
				{
                    'asdf' : 'http://asdf.com/',
				},
				'Videos':
				{
                    'HookTube' : 'http://hooktube.com',
				}
			};
		</script>
		<style>
			body {
				background-color: #151515;
				color: #bbb;
				font-family: Arial;
			   -moz-user-select: -moz-none;
			   -khtml-user-select: none;
			   -webkit-user-select: none;
			}
			a {
				color: #BB7D38;
				text-decoration: none;
				display:block;
				
			}
			a:hover {
				color: #FF8500;				
			}
			.hidden {
				display: none;
			}
			.navBlock {
				display: inline-block;
				vertical-align: middle;	
			}
			.expandLink {
				font-weight: bold;
			}
			.hidden > a {
				color: #bbb;
			}
			#mainNav {
				margin: auto;
				text-align: center;
			  	position: relative;
  				top: 50%;
  				transform: translateY(-50%);
				display: none;
			}
			#cryptoTicker {
				position: fixed;
				bottom: 0;
				right: 0;
				display: none;
			}
			#cryptoTable td {
				padding: 0px 15px;
				text-align: center;
				font-family: "Lucida Console", Monaco, monospace;
				font-size: 0.6em;
			}
		</style>
		<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- Gets cached, can be replaced with Google hosted library -->
		<script> 
			$(document).ready(function(){
				// Subcategory sort
				if(sortSubcategories)
				{
					jQuery.each(sites, function(group, values) {
						unordered = this;
						const ordered = {};
						Object.keys(unordered).sort().forEach(function(key) {
							ordered[key] = unordered[key];
						});
						sites[group] = ordered;		
					});
				}
				// Navigation menu
				jQuery.each(sites, function(group, values) {
					urlStr = "";
					jQuery.each(values, function(name, url) {
						urlStr += '<a href="'+url+'">'+name+'</a>';
					});
					if($('#mainNav').children().length) {
						$('#mainNav').append(' :: ');
					}
					$('#mainNav').append('<div class="navBlock"><a href="#" class="expandLink">'+group+'</a><div class="hidden">'+urlStr+'</div></div>');
				});
				$("#mainNav").fadeIn();
				// Subcategory URL expansion
				$('.expandLink').bind('click', function () {
					if(singleExpand && $(this).siblings().is(":hidden"))
						$('.expandLink').siblings().slideUp(); // "Closes" all categories
        			$(this).siblings().slideToggle(200);
    			});
				
				// Ticker table (Async)
				var usdtotal = 0.0;
				jQuery.each(cryptos, function(key, value) {
					$.ajax({
						url: "https://api.coinmarketcap.com/v1/ticker/"+key+"/",
						async: false,
						cache: true,
						success: function(data) {
							usdtotal += usdval = (value*parseFloat(data[0].price_usd));
							$('#cryptoTable tr:last').after(
								'<tr><td>'+
								data[0].rank+
								'</td><td><a href="https://coinmarketcap.com/currencies/'+key+'/">'+
								data[0].symbol+
								'</a></td><td>'+
								value.toFixed(rounding)+
								'</td><td>'+
								parseFloat(data[0].price_usd).toFixed(2)+
								'</td><td>'+
								usdval.toFixed(2)+
								'</tr></tr>');
						}
					});
				});
				$('#cryptoTable tr:last').after('<tr><td></td><td></td><td></td><td></td><td>'+usdtotal.toFixed(2)+'</td></tr>')
				$("#cryptoTicker").fadeIn();
			});	
		</script>
		<meta name="Abhorrent_Anger" content="Speed Dail">
		<meta http-equiv="Cache-control" content="public">
	</head>
	<body bgcolor="#151515">
		<div id="cryptoTicker">
			<table id="cryptoTable">
				<tr><td>Rank</td><td>Ticker</td><td>Hold</td><td>USD</td><td>Hold USD</td></tr>
			</table>
		</div>
		<div id="mainNav">
		</div>
	</body>
</html>