<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<link rel="Shortcut Icon" href="https://ajax.dev.java.net/favicon.ico" type="image/x-icon" />

<link rel="stylesheet" href="jmaki-standard-no-sidebars.css" type="text/css"></link>

<html>
    <head>
        <title>jMaki API Key Sample</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
     .logo { background: url(images/jmaki-seal.png) top right;width:100px; height:80px;margin-top:0px;background-repeat: no-repeat }
    </style>
    <!--[if lt IE 7]>
        <style type="text/css">
			.logo { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src=images/jmaki-seal.png);cursor:pointer }
        </style>
    <![endif]-->
      <script src="resources/jmaki.js"></script>
      <script>
        var contextRoot = '${pageContext.request.contextPath}';
        function callback(data) {
          alert("callback got " + data);	
        }
        
        function getJSONContent(_url) {
            jmaki.doAjax({
            	url : _url,
            	callback : function(req) {
            		if (req.readyState == 4) {
            	        var dataDiv = document.getElementById("data");
            	        dataDiv.innerHTML = req.responseText.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/0x0A/g, "<br/>");;

            		}
            	}
            });

         //   return false;
      	}
        
        function testJSONP(_url) {
            jmaki.addLibrary(_url);
      	}
      	   	
        function getKey() {
            var _url = document.getElementById("url").value;
            jmaki.doAjax({
            	url : 'gs?action=genkey&url=' + _url,
            	callback : function(req) {
            		if (req.readyState == 4) {
            	        var apiKeyDiv = document.getElementById("apiKey");
            	       var res = eval("(" + req.responseText + ")");
            	        var key = res.key;
            	        var _service = res.service;
            	        var apiKeyURL = _service + "?apikey="  + key ;
            	        apiKeyDiv.innerHTML = "API Key is : " + key + "<br/><br/>" +
            	        "URL Key for XML Response : <span style='background:lightGray'><a href=\"javascript:getJSONContent(\'" + apiKeyURL + "\');\">" + apiKeyURL + "</a></span><br/><br/>" +
            	        "Add 'format=json' for JSON : <span style='background:lightGray'><a href=\"javascript:getJSONContent(\'" + apiKeyURL + "&format=json\');\">" + apiKeyURL + "&format=json</a></span><br/><br/>" +         	        
            	        "Add 'format=jsonp' for JSONP (callback optional): <span style='background:lightGray'><a href=\"javascript:getJSONContent(\'" + apiKeyURL + "&format=jsonp\');\">" + apiKeyURL + "&format=jsonp</a></span><br/><br/>" +
"Test JSONP Call : <span style='background:lightGray'><a href=\"javascript:testJSONP(\'" + apiKeyURL + "&format=jsonp\');\">" + apiKeyURL + "&format=json</a></span><br/><br/>" +               	        
            	        "To use this service use the following: <br/><br/>" + 
            	        "<span style='background:lightGray'>&lt;script&gt;function callback(data) { /* callback logic here */ };&lt;/script&gt;</span><br/>" +
            	        "<span style='background:lightGray'>&lt;script src=\"" + apiKeyURL + "&format=jsonp\"&gt;&lt;/script&gt;</span>"
            		}
            	}
            });
            return false;
      	}
    	
       </script>
    </head>
    <body>
        <div id="outerBorder">
            
            <div id="header">
                <div id="banner"><div class="logo" style="float:left"></div>
                <div style="margin-top:20px; float:left;color:#000000">jMaki API Key Sample</div>
                </div>
                
                <div id="subheader">
                    <div>              
                    </div>
                </div> <!-- subheader  -->
            </div> <!-- header -->

            <div id="main" style="clear:both">
               <form onSubmit="getKey();return false;">
                  Host that will access service : <input id="url" type="text" style="width:300px" value="<%=request.getScheme()%>://<%=request.getServerName()%>:<%=request.getServerPort()%><%=request.getContextPath()%>/" />
                   <input type="submit" value="Get Key"/>
               </form>
               <p></p>
               <div id="apiKey"></div>
               <pre id="data"></pre>
               <p>Find out more about this sample in <a href="https://ajax.dev.java.net/ajax/api-keys.html">Creating and Using API Keys with Java Based Ajax Services</a>.
            </div> <!-- main -->
        </div> <!-- outerborder -->

    </body>
</html>