<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="ASTERIX WEB PAGE" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Bitter|PT+Sans+Caption|Open+Sans' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/js/jquery.autosize.js"></script>
  
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">

  
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function(){
   $('textarea').autosize();

   $("form#queryform").submit(function() {
     $.post("/", $("form#queryform").serialize(), function(data) {
       $('#output-message').html(data);
     });
     return false;
   });
});
</script>

<meta charset=utf-8 />
<title>ASTERIX Demo</title>
<style id="jsbin-css">
body {
    background: none repeat scroll 0 0 white;
    color: #222222;
    font-family: 'Bitter';
    font-size: 14px;
    line-height: 17px;
    width: 100%;
}

.content {
    margin-top: 70px;
}

label.query, label.result {
    font-size: 24px;
    padding-bottom: 10px;
    font-weight: bold;
}

div.host {
    float: left;
    margin: 0 100px 0 10px;
}

div.port {
}

div.left {
    float: left;
    width: 320px;
    padding: 0 20px 0 10px;
}

div.right {
}

button.btn {
    clear: both;
    float: left;
    margin: 20px 0 0 10px;;
}

textarea.query {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
    font-family: bitter, helvetica;
    width: 100%;
    padding: 10px;
    color: #999;
    resize: none;
    border: 10px solid #eee;
}

textarea.query:focus {
    outline: none;
    color: #333;
}

label {
    padding-top: 10px;
}

input[type=text] {
    height: 20px;
}

pre {
    overflow: auto;
    white-space: pre;
}

div.output label.heading {
    font-size: 24px;
    margin-top: 2px;
    padding-bottom: 10px;
    font-weight: bold;
}

div.output .message {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    color: #000;
    resize: none;
}

div.error label.heading {
    color: #ff2020;
    font-size: 24px;
    margin-top: 2px;
    padding-bottom: 10px;
    font-weight: bold;
}

div.error .message {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted 9;

    -webkit-box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.8);
    -moz-box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 1.0);
    box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 1.0);
    color: #000;
    resize: none;
    border: 1px solid #eee;
    margin-top: 7px;
    padding: 20px 20px 20px 20px;
}

.footer {
   margin-top: 40px;
}

.footer .line {
    border-top: 1px solid #EEEEEE;
    bottom: 20px;
    height: 10px;
    left: 0;
    position: fixed;
    width: 100%;
}

.footer .content {
    background: none repeat scroll 0 0 #FFFFFF;
    bottom: 0;
    color: #666666;
    font-size: 12px;
    height: 25px;
    left: 0;
    padding-top: 5px;
    position: fixed;
    width: 100%;
}

.footer .content .left {
    padding-left: 20px;
    float: left;
}

.footer .content .right {
    padding-right: 20px;
    float: right;
}
</style>
</head>

<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">ASTERIX</a>
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li><a href="http://code.google.com/p/asterixdb/source/browse/">Open source</a></li>
            <li><a href="http://code.google.com/p/asterixdb/issues/list">File issues</a></li>
            <li><a href="https://groups.google.com/forum/?fromgroups#!forum/asterixdb-userst">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>

  <div class="content">
    <div class="container">
      <div class="row-fluid">
        <div class="span6">
          <form id="queryform" class="form-horizontal" method="post">
            <div>
              <label class="query">Query</label>
              <textarea rows="20" name="query" class="query" value="%s" placeholder="Type your AQL query ..."></textarea>
            </div>
            <div>
              <div class="left">
                <label class="checkbox"><input type="checkbox" name="print-expr-tree" value="true" /> Print parsed expressions</label>
              </div>
              <div class="right">
                <label class="checkbox"><input type="checkbox" name="print-rewritten-expr-tree" value="true" /> Print rewritten expressions</label>
              </div>
            </div>
            <div>
              <div class="left">
                <label class="checkbox"><input type="checkbox" name="print-logical-plan" value="true" /> Print logical plan</label>
              </div>
              <div class="right">
                <label class="checkbox"><input type="checkbox" name="print-optimized-logical-plan" value="true" /> Print optimized logical plan</label>
              </div>
            </div>
            <div>
              <div class="left">
                <label class="checkbox"><input type="checkbox" name="print-job" value="true" /> Print hyracks job</label>
              </div>
            </div>
            <button type="submit" class="btn btn-danger">Execute</button>
          </form>
        </div>

        <div class="span6">
         <div class="output">
           <label class="heading">Output</label>
           <div id="output-message" class="message">
           </div>
         </div>
       </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <section class="line"><hr></section>
    <section class="content">
      <section class="left">
        Developed by ASTERIX group
      </section>
      <section class="right">
        &copy; Copyright 2013 University of California, Irvine
      </section>
    </section>
  </div>
</body>
</html>