<!--
 ! Licensed to the Apache Software Foundation (ASF) under one
 ! or more contributor license agreements.  See the NOTICE file
 ! distributed with this work for additional information
 ! regarding copyright ownership.  The ASF licenses this file
 ! to you under the Apache License, Version 2.0 (the
 ! "License"); you may not use this file except in compliance
 ! with the License.  You may obtain a copy of the License at
 !
 !   http://www.apache.org/licenses/LICENSE-2.0
 !
 ! Unless required by applicable law or agreed to in writing,
 ! software distributed under the License is distributed on an
 ! "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 ! KIND, either express or implied.  See the License for the
 ! specific language governing permissions and limitations
 ! under the License.
 !-->
<!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="/webui/static/js/jquery.min.js"></script>

<link href="/webui/static/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
<link href="/webui/static/css/bootstrap-responsive.min.css"
	rel="stylesheet" type="text/css" />

<script src="/webui/static/js/bootstrap.min.js"></script>

<link href="/webui/static/css/style.css" rel="stylesheet"
	type="text/css" />

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

    var optionButtonSize = $('#checkboxes-on').width();
    $('#clear-query-button, #run-btn').width(optionButtonSize);

    $('#checkboxes-on').click(function() {
        /* Displays a checkmark to indicate selection/clearing */
        if ($('#opts').is(":visible")) {
            $('#opts').hide();
            $('#queryform :input').prop('checked', false);
        } else {
            $('#opts').show();
            $('#queryform :input').prop('checked', true);
        }
        return false;
    });

    $('#clear-query-button').click(function() {
        $("#qry").val('');
        return false;
    });

    $('form#queryform :input').click(function() {
        /* Hides selection check on uncheck, shows when all 5 selected */
        if ($(this).val()) {
            if ($(this).is(':checked') && $('input[type=checkbox]').filter(':checked').length == 5) {
                $('#opts').show();
            } else {
                $('#opts').hide();
            }
        }
    });

    $("form#queryform").submit(function() {
        $('#output-message').html("");
        $.post("/", $("form#queryform").serialize(), function(data) {
            var durPattern = '<PRE>Duration';
            var errorPattern = /<div class="accordion" id="errorblock">/g;
            var sectionsSeparator = '<h4>';
            var resultPat = 'Results:</h4>';
            
            if (errorPattern.test(data)) {
                $('#output-heading').html('Error');
                $('#output-heading').addClass('error');
            } else {
                $('#output-heading').html('Output');
                $('#output-heading').removeClass('error');
            }
            var executedStatements = data.split('<!-- BEGIN -->');
            var executedStatementsWithResultsCount = 0;
            for (var i = 0; i < executedStatements.length; i++) {
                if (executedStatements[i].toString().trim().length > 0) {
                    /* check how many statements have returned data*/
                    executedStatementsWithResultsCount++;
                }
            }

            /* only a single statement returned results and/or duration message*/
            if (executedStatementsWithResultsCount <= 2) {
                /* print statement results and duration*/
                $('#output-message').html(data);
            } else {
                var resultsCount = 1;
                /* need to create collapse button and div per statement*/
                for (var i = 0; i < executedStatements.length; i++) {
                    /* last statement is always the duration message*/
                    if (i == (executedStatements.length - 1)) {
                        /* print duration message*/
                        $('#output-message').append(executedStatements[i]);
                        break;
                    }

                    if (executedStatements[i].toString().trim().length > 0) {
                        var sections = executedStatements[i].toString().split(sectionsSeparator);
                        /* remove the first section since it is always empty due to splitng on sectionsSeparator */
                        sections.splice(0, 1);

                        /* if there is a results section, we need to put it before the collapsible section*/
                        for (var j = 0; j < sections.length; j++) {
                            /* print results section and remove it*/
                            if (sections[j].indexOf(resultPat) >= 0) {
                                var resultsSection = sections.splice(j, 1);
                                $('#output-message').append(sectionsSeparator + resultsSection.toString());
                            }
                        }

                        if (sections.length > 0) {
                            /* generate the collapsible section for this statement*/
                            $('<button/>')
                                .attr("class", "btn")
                                .attr("data-toggle", "collapse")
                                .attr("data-target", "#collapse" + i)
                                .css("margin-bottom", "1em")
                                .html('Result Plan #' + resultsCount + '<i id="ibtn' + resultsCount + '" class="icon-plus extarget"></i>')
                                .appendTo('#output-message');

                            $('<div/>')
                                .attr("id", "collapse" + i)
                                .attr("class", "collapse in")
                                .appendTo('#output-message');

                            /* put the rest of the sections in the collapsible section*/
                            for (var k = 0; k < sections.length; k++) {
                                $('#collapse' + i).append(sectionsSeparator + sections[k].toString());
                            }
                        }
                        $('#output-message').append("<hr/>");
                        resultsCount++;

                        /* Placeholder for future on show/hide result plan behavior
                        $('#collapse' + resSet).on('show', function() {
                        }).on('hide', function() {
                        });
                        */
                    }
                }
            }

            var contentString = data.toString();
            if (contentString.indexOf(durPattern) != -1) {
                $('<div/>')
                    .addClass("alert alert-success")
                    .html("Success: Query Complete")
                    .appendTo('#output-message');
            }
        });
        return false;
    });
});
</script>

<meta charset=utf-8 />
<title>AsterixDB Web Interface</title>
</head>

<body>
  <div class="navbar 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>

        <!-- Temporary logo placeholder -->
        <a class="brand" href="#"><img src="/webui/static/img/finalasterixlogo.png"></a>

        <div class="nav-collapse collapse">
          <ul class="nav">
            <li><a href="http://code.google.com/p/asterixdb/" target="_blank">
                    Open source<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
            <li><a href="http://code.google.com/p/asterixdb/issues/list" target="_blank">
                    File issues<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
            <li><a href="https://groups.google.com/forum/?fromgroups#!forum/asterixdb-users" target="_blank">
                    Contact<img class="extarget" src="/webui/static/img/targetlink.png"/></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 style="margin-bottom: 1em;">
              <label class="query">Query</label>
              <textarea rows="10" id="qry" name="query" class="query" value="%s" placeholder="Type your AQL query ..."></textarea>
            </div>
            
            <div class="btn-group">
              <button id="checkboxes-on" class="btn">
                  <i id="opts" class="icon-ok" style="display:none;"></i>Select Options</button>
              <button id="clear-query-button" class="btn">Clear Query</button>
              <!-- <button id="checkboxes-off" class="btn">Clear All Options</button> -->
              <button type="submit" id="run-btn" class="btn btn-custom-darken">Run</button>
            </div>

            <div>
              <label class="checkbox optlabel"> Output Format:<br/>
                <select name="output-format" class="btn">
                  <option selected value="ADM">ADM</option>
                  <option value="CSV">CSV (no header)</option>
                  <option value="CSV-Header">CSV (with header)</option>
                  <option value="JSON">JSON</option>
                </select>
              </label>
              <label class="checkbox optlabel"><input type="checkbox" name="print-expr-tree" value="true" /> Print parsed expressions</label>
              <label class="checkbox optlabel"><input type="checkbox" name="print-rewritten-expr-tree" value="true" /> Print rewritten expressions</label>
              <label class="checkbox optlabel"><input type="checkbox" name="print-logical-plan" value="true" /> Print logical plan</label>
              <label class="checkbox optlabel"><input type="checkbox" name="print-optimized-logical-plan" value="true" /> Print optimized logical plan</label>
              <label class="checkbox optlabel"><input type="checkbox" name="print-job" value="true" /> Print Hyracks job</label>
              <label class="checkbox optlabel"><input type="checkbox" name="execute-query" value="true" checked/> Execute query</label>
            </div>
          </form>
       </div>

       <div class="span6">
         <div class="output">
           <label id="output-heading" 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">
      </section>
      <section class="right">
      </section>
    </section>
  </div>
</body>
</html>