<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>WidGuana Test Page</title>
</head>
<body>
<h3>This is the test page for the widget WidGUana</h3>
<p>Widget has been pasted between HTML div tags</p>
    <div class="widget-conatainer"><!-- Widget container -->
    
        <!-- Beginning of the snippet -->
    
        <script>
        window.onload = function(){
            
            var container = document.getElementById("widguana-container");
            var content = '';
            /* Style */
            content += '<style>';
            content += '#widguana-overlay {visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align:center; z-index: 1000; background:rgba(224, 224, 224, 0.8);}';
            content += '#widguana-overlay div {width:400px;margin: 50px auto;background-color: #fff;border:1px solid #000;padding:15px;text-align:center;}';
            content += '#widguana-overlay div label,#widguana-overlay div select{display: block;width: 100%;}';
            content += '#widguana-bttn {display: block; margin-top: 15px; width: 100%}';
            content += '#widguana-response { word-wrap: break-word; }';
            content += '</style>';
            
            /* HTML */
            content += '<form id="widguana-1">';
            content += '<button type="button"  style="padding: 10px; height: 50px;" type="button" onclick="overlay()" autofocus>WIDGUANA</button>';
            content += '</form><div id="widguana-overlay">';
            content += '<div><h3>WidGuana</h3>';
            content += '<p>Sends HTTP Request To Iguna Agent.</p>';
            content += '<label>Select Predefined Agent and Method</label>';
            content += '<select id="widguana-requests">';
            content += '<option value="">SuperNET API</option>';
            content += '<option value="/api/ramchain/getinfo?">Iguana Info</option>';
            content += '<option value="/api/SuperNET/help?">Supernet Help</option>';
            content += '<option value="/api/hash/NXT?passphrase=sometext" selected>Hash NXT, passphrase:sometext</option>'
            content += '</select></form>';
            content += '<h4>Send Request</h4>';
            content += '<button class="widguana-bttn" type="button" onclick="httpGetIguna()">Send XMLHttpRequest to Iguana</button>';
            content += '<h4>Response:</h4>';
            content += '<p id="widguana-response"></p>';
            content += 'Click here to [<a href="#" onclick="overlay()">close</a>]';
            content += '</div></div>';
            
                          
            container.innerHTML = content;
        }
        
        
        /* Modal */
        function overlay() {
        	el = document.getElementById("widguana-overlay");
        	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
        }
        
        
        /* XMLHttpRequest */
        function httpGetIguna() {
          var xhttp;
          var request;
          var el = document.getElementById("widguana-requests");
          var selected = el.options[el.selectedIndex].value;
          var response_cont = document.getElementById("widguana-response");
          
          request = '//127.0.0.1:7778' + selected ;
          
          
          if (window.XMLHttpRequest){
                 xhttp = new XMLHttpRequest();
          }else{
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          
          xhttp.onreadystatechange = function() {    
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                
                //response.innerHTML = '';  
                //response = JSON.parse(xhttp.responseText);
                response = xhttp.responseText;
                console.log(response);
                response_cont.innerHTML = response;
                 
            }    
          };
          
          xhttp.open("GET", request, true);
          
          xhttp.onprogress = function(){
            response.innerHTML = 'Status: ' + xhttp.status;
          }
          
            xhttp.send();
        }
        
        </script>
        <div id="widguana-container"></div>
    
        <!-- End of the snippet -->
    
    </div> <!--End of Widget container -->



</body>

</html>