<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta http-equiv="X-UA-Compatible" content="IE=8">
            <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 rel="stylesheet" href="css/codemirror.css">
    <script src="js/codemirror.js"></script>
    <script src="js/simple-hint.js"></script>
    <link rel="stylesheet" href="css/simple-hint.css">
    <script src="js/javascript-hint.js"></script>
    <script src="js/xml.js"></script>
    <script src="js/javascript.js"></script>
    <script src="js/css.js"></script>
    <script src="js/htmlmixed.js"></script>
    <script src="js/htmlembedded.js"></script>
    <script src="js/jaggery-hint-api.js"></script>
    <script src="js/jaggery.js"></script>


                        <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">

                                                    <!-- Main hero unit for a primary marketing message or call to action -->


                                                    <!-- Example row of columns -->



                                                    <div class="row">

                                                        <div class="span8">
                                                            <div class="formsection">
                                                            <input type="submit" value="Try it >>" id="tryitbtn"
                                                            class="btn primary" onclick="Tryit.call('')" style="float:left;">
                                                            <a href="#" class="label success" id="querybtn" title="Insert a query string for samples, that need request parameters">+ Add Query String</a>
                                                            <span style="margin-top:-3px;" class="hidden" id="queryblock"> <label style="float:left;">QueryString :</label>
                                                                <input type="text" class="span6" id="qString">
                                                                <a href="#" id="queryremove" class="label important"> X </a>  </span>
                                                               </div><!-- /formsection -->

    <textarea id="codeinput" name="codeinput">
</textarea>

                                                                <span class="help-block"> Edit the code above to generate
                                                                your output <br> <strong>Press Ctrl + Space for autocompletion</strong></span>
                                                            </div>

                                                            <div class="span8">
                                                                <h4 id="result">Your Result :</h4>
                                                                <iframe class="span-full" id='output' style="background:#FFF;"></iframe>

                                                            </div>

                                                        </div>
                                                        <!-- /row -->

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

                                                    </div>
                                                    <!-- /container -->
                                                    <script src="js/google-code-prettify/prettify.js"></script>
                                                    <script src="js/jquery-1.7.1.min.js"></script>
                                                    <script src="js/tryit.jag"></script>
                                                    <script src="js/util.js"></script>
                                                    
                                                    	<script>
                                                    		$(document).ready(function(){
                                                    			$('#tryit').toggleClass('active')
                                                    		});

                                                            $('#querybtn').click(function(){
                                                                $('#queryblock').toggleClass('hidden');
                                                                $('#querybtn').toggleClass('hidden');
                                                               
                                                            });

                                                            $('#queryremove').click(function(){
                                                                $('#queryblock').toggleClass('hidden');
                                                                $('#querybtn').toggleClass('hidden');
                                                                $('#qString').val('');
                                                            })

                                                    		</script>

                                            <script>

       var editor = CodeMirror.fromTextArea(document.getElementById("codeinput"), {
        lineNumbers: true,
        matchBrackets: true,
        mode: "application/x-ejs",
        indentUnit: 4,
        indentWithTabs: true,
        enterMode: "keep",
        tabMode: "shift",
           extraKeys: {"Ctrl-Space": function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}}
      });


	function populate() {
		var text = editor.getValue();
		alert(text);
		document.getElementById("cont").innerHTML = document.editor.getvalue();
	}

    </script>


                                                </body>
                                            </html>
