<!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="xhr" name="xhr">
                <h3>XSLT</h3>

                <pre class="prettyprint linenums">
&lt%
    var xmlSource =
&lt;persons&gt;
  &lt;person username="JS1"&gt;
    &lt;name&gt;John&lt;/name&gt;
    &lt;family-name&gt;Smith&lt;/family-name&gt;
  &lt;/person&gt;
  &lt;person username="MI1"&gt;
    &lt;name&gt;Morka&lt;/name&gt;
    &lt;family-name&gt;Ismincius&lt;/family-name&gt;
  &lt;/person&gt;
&lt;/persons&gt;;

    var xsltSource =
&lt;xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"&gt;
  &lt;xsl:output method="xml" indent="yes"/&gt;
  &lt;xsl:template match="/persons"&gt;
    &lt;root&gt;
      &lt;xsl:apply-templates select="person"/&gt;
    &lt;/root&gt;
  &lt;/xsl:template&gt;
  &lt;xsl:template match="person"&gt;
    &lt;name username="{@username}"&gt;
      &lt;xsl:value-of select="name" /&gt;
    &lt;/name&gt;
  &lt;/xsl:template&gt;
&lt;/xsl:stylesheet&gt;;

    var xslt = new XSLT(xsltSource);
    var result = xslt.transform(xmlSource);
    print(result);
%&gt
</pre>
                <%

                var xhrCode = '&lt%'
+'\n var xmlSource ='
+'\n &lt;persons&gt; '
+'\n &lt;person username="JS1"&gt;'
+'\n &lt;name&gt;John&lt;/name&gt;'
+'\n &lt;family-name&gt;Smith&lt;/family-name&gt;'
+'\n &lt;/person&gt;'
+'\n &lt;person username="MI1"&gt;'
+'\n &lt;name&gt;Morka&lt;/name&gt;'
+'\n &lt;family-name&gt;Ismincius&lt;/family-name&gt;'
+'\n &lt;/person&gt;'
+'\n &lt;/persons&gt;;'
+'\n '
+'\n var xsltSource ='
+'\n &lt;xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"&gt;'
+'\n &lt;xsl:output method="xml" indent="yes"/&gt;'
+'\n &lt;xsl:template match="/persons"&gt;'
+'\n &lt;root&gt;'
+'\n &lt;xsl:apply-templates select="person"/&gt; '
+'\n &lt;/root&gt;'
+'\n &lt;/xsl:template&gt; '
+'\n &lt;xsl:template match="person"&gt;'
+'\n &lt;name username="{@username}"&gt; '
+'\n &lt;xsl:value-of select="name" /&gt;'
+'\n &lt;/name&gt;'
+'\n &lt;/xsl:template&gt;'
+'\n &lt;/xsl:stylesheet&gt;;'
+'\n'
+'\n var xslt = new XSLT(xsltSource);'
+'\n var result = xslt.transform(xmlSource); '
+'\n print(result); '
                + '\n %&gt';

                var codeSnip = encodeURIComponent(xhrCode);

                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"> <code>XSLT</code> can be used to do XSLT transformation.</p>
                </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>XSLT(xslt [, uriCallback(base, href)])</code></td>
                            <td>Object</td>
                            <td>
                            <pre class="prettyprint">var xslt = new XSLT(&lt;myXSLT/&gt;, function(base, href) {
                                        return urlContent;
                                    });</pre>
                                <ul>
                                    <li><code>xslt</code> : XSLT source as a String or an E4X xml.</li>
                                    <li><code>uriCallback(base, href)</code> : A callback function to resolve any
                                        imported/included resources of the XML being transformed. Content can be provided as a String or an E4X XML.</li>
                                </ul>
                                Returns an instance of the XSLT hostobject. XSLT source can be provided either as an
                                E4X XML or a String. Optionally a uri resolver callback
                            </td>
                        </tr>
                        <tr>
                            <td><code>transform(xml [, properties][, callback])</code></td>
                            <td>String</td>
                            <td>
                                <pre class="prettyprint">xslt.transform(&lt;myXML/&gt;, {
                                    "myProp1" : "myValue1",
                                    "myProp2" : "myValue2"
                                    }, function(result) {
                                        log(result);
                                    });</pre>
                                <p>Transforms an XML using the constructed XSLT object. A key/value object can also be passed to
                                the transformer with the values for any property defined in the XSLT.</p>
                                <p>When a callback function is passed, result can be processed asynchronously.</p>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                </section>
            </div>
            <!-- /xhr div -->
            <br>
            <br>
        </div>

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

</div>

<!-- /container -->
<%
include('/includes/scripts.jag')
%>
<script src="../js/google-code-prettify/prettify.js"></script>
<script>
$(document).ready(function(){
        $('#xslt').toggleClass('active')
        $('#docs').addClass('active')
        })

</script>
</body>
</html>
