<HTML>
    <head>
    <title>Crypto Currency Rates</title>
    <style>
    table, th, td {
        border: 1px solid black;
        padding: 15px;
        text-align: left;
    background-color: #f1f1c1;
    
    }
    </style>
    </head>
    <body>
    <h1>Crypto Currency Rates</h1>
    <p>Data from Poloniex exchange. Wait until data get refreshed...</p>
    
          <table>
    <tr><th>Coin Name</th> <th>BTC value</th></tr>
          <tr><td>QORA </td><td><p id="qora_value">0.00000000 </td></tr>
          <tr><td>BURST </td><td><p id="burst_value">0.00000000 </td></tr>
          <tr><td>GRC </td><td><p id="grc_value">0.00000000 </td></tr>
          <tr><td>XMR </td><td><p id="xmr_value">0.00000000</td></tr>
          <tr><td>BCN </td><td><p id="bcn_value">0.00000000</td></tr>
          
          </table>
          <script>AUTOBAHN_DEBUG = true;</script>
          <script src="http://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.min.jgz"></script>
    
          <script>
             // the URL of the WAMP Router (Crossbar.io)
             //
             var wsuri = "wss://api.poloniex.com";
         
             var connection = new autobahn.Connection({
                url: wsuri,
                realm: "realm1"
             });
    
    
           
             connection.onopen = function (session, details) {
    
                console.log("Connected");
    
          
               function tickerEvent (args,kwargs) {
               	if(args[0]=="BTC_BURST"){
                    	//console.log(args[0] + " : " + args[1]);
                    	document.getElementById("burst_value").innerHTML=args[1];
                    }else if(args[0]=="BTC_GRC"){
                    	//console.log(args[0] + " : " + args[1]);
                    	document.getElementById("grc_value").innerHTML=args[1];
                    }else if(args[0]=="BTC_XMR"){
                    	//console.log(args[0] + " : " + args[1]);
                    	document.getElementById("xmr_value").innerHTML=args[1];
                    }else if(args[0]=="BTC_QORA"){
                    	//console.log(args[0] + " : " + args[1]);
                    	document.getElementById("qora_value").innerHTML=args[1];
                    }else if(args[0]=="BTC_BCN"){
                    	//console.log(args[0] + " : " + args[1]);
                    	document.getElementById("bcn_value").innerHTML=args[1];
                    }
                   
               }
          
               session.subscribe('ticker', tickerEvent);
            
                
             };
    
    
             // fired when connection was lost (or could not be established)
             //
             connection.onclose = function (reason, details) {
                console.log("Connection lost: " + reason);
               
             }
    
    
             // now actually open the connection
             //
             connection.open();
    
          </script>
    </body>
    </HTML>