<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Jaggery - Delicious Javascript</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 60px;
        }
    </style>
    <link href="../css/prettify.css" rel="stylesheet">
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon" href="../images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72"
          href="../images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114"
          href="../images/apple-touch-icon-114x114.png">
</head>

<body>

<%
include('/includes/topnavi.jag');
%>

<div class="container-fluid" style="width: 960px; margin: auto;">
    <div class="row">
        <div class="span16">
            <div class="page-header">
                <h1>
                    Documentation
                    <small>API documentation for Jaggery.js</small>
                </h1>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span4">
            <div class="well">
                <%
                include('/includes/navi.jag');
                %>

            </div>

        </div>
<div class="span12">
<div class="content" id="json" name="json">
<h3>JSON</h3>
    
    <pre class="prettyprint linenums">
    &lt;html&gt;
    &lt;body&gt;
    &lt%
    var json = {"name":"Madhuka","company":"WSO2"};
    print("&lt;p&gt;Name: "+json.name+"&lt;/p&gt;");
    print("&lt;p&gt;Company: "+json.company+"&lt;/p&gt;");
    %&gt
    &lt;/body&gt;
    &lt;/html&gt;
</pre>
<%

var jsonCode = '&lt;html&gt;'
+ '\n&lt;body&gt;'
+ '\n&lt%'
+ '\n var json = {\"name\":\"Madhuka\",\"company\":\"WSO2\"};'
+ '\n print(\"&lt;p&gt;Name: \"+json.name+"&lt;/p&gt;\");'
+ '\n print(\"&lt;p&gt;Company: \"+json.company+"&lt;/p&gt;\");'
+ '\n %&gt'
+ '\n&lt;/body&gt;'
+ '\n&lt;/html&gt;';

var codeSnip = encodeURIComponent(jsonCode);

var urlString = '../tryitframe.jag?code='+codeSnip;


%>

<div id="tryitwindow" class="modal hide fade">
<div class="modal-header">
    <a href="#" class="close">&times;</a>

    <h3>Try it now</h3>
</div>
<div class="modal-body">
    <iframe src="<%=urlString%>" style="border: none;" width="98%"
            height="520px" scrolling="no"></iframe>
</div>

</div>

<p align="right">
<button class="btn primary" data-keyboard="true" data-backdrop="true"
        data-controls-modal="tryitwindow">Try it now
</button>
</p>

     <div id="pageLinks">
<a class="navilink" href="#overview">Overview</a>
<a class="navilink" href="#members">Members</a>
<a class="navilink" href="#operations">Operations</a>
</div>

    <section id="overview">

<h4>Overview</h4>
<p class="description">
        Jagger supports <span class="label notice"> JSON</span> nativity.
        Javascript objects which are created in the server can be directly written to the document.</p>

</section>

<section id="members">
<h4>Members</h4>

<table class="clsStd member-table">
<tbody>
	<tr>
		<th>Member</th>
        <th>Type</th>
		<th>Description</th>
	</tr>

	
</tbody>
</table>

    </section>

    <section id="operations">

        <h4>Operations</h4>
        <table class="clsStd operations-table">
            <tbody>
            <tr>
                <th>Operation</th>
                <th>Returns</th>
                <th>Description</th>
            </tr>
            <tr>
		<td><code>print()</code></td>
        <td>None</td>
		<td>
        <pre class="prettyprint">
var obj = {"name": "Madhuka", "company":"WSO2"};<br>
print(obj);
// return a JSON object
        </pre>
            Passing native Javascript object will be return as JSON object. Usefull in server side for resonding with a JSON object.
            <br><br>
            <pre class="prettyprint">
        var obj = {"name": "Madhuka", "company":"WSO2"};<br>
        print(obj.name);
        // return a JSON object
                </pre>

        By passing key of JSON object element, will return the value of it.

        </td>
	</tr>
	<tr>
		<td><code>Nested JSON</code></td>
        <td>None</td>
		<td>
            <pre class="prettyprint">
var myJSON= {"name":"Madhuka",
		     "company":"WSO2",
		     "address":
		               {"no":"59",
		    	 		"street":"Flower road",
		    	 		"city":"Colombo-07",
		    	 		"country":"Sri Lanka"
		    	 		}
			};
print(myJSON.name);
print(myJSON.address.country);
		 </pre>
            Navigation make it more easy

		</td>
	</tr>
            </tbody>
        </table>

    </section>

</div>
<!-- /JSON div -->
<br>
<br>
</div>

</div>
    <%
    include('/includes/footer.jag');
    %>

</div>
<%
include('/includes/scripts.jag')
%>
<!-- /container -->


$(document).ready(function(){
        $('#json').toggleClass('active')
        $('#docs').addClass('active')
        })
        
</script>
</body>
</html>
