var numAND = 0;
var numOR = 0;
var andOrBoxTopNum = 5;

/***********************************************
    ___     _   __ ____     ____  ______ _   __
   /   |   / | / // __    / __ )/_  __// | / /
  / /| |  /  |/ // / / /  / __  | / /  /  |/ /
 / ___ | / /|  // /_/ /  / /_/ / / /  / /|  /
/_/  |_|/_/ |_//_____/  /_____/ /_/  /_/ |_/
***********************************************/
$(document).ready(function() {
  $("#ANDbtn").click(function() {
    var html = '<div id="ANDArea_' + numAND + '">
                        <label
                            class="control-label"
                            data-base="AMTdata"
                            data-definedas="text"
                            data-required="True"
                            for="sqlANDbtn' + numAND + '"
                            style="width: 0px; max-width: 0px;display: none;">
                        </label>
                        <div
                            class="input-group"
                            style="display: inline-table; top: ' + andOrBoxTopNum + 'px;">
                            <span
                                style="color:rgb(255, 46, 49); position: absolute; z-index: 8; text-transform: uppercase;
                                        text-shadow: rgba(150, 150, 150, 0.87) 0px 1px 1px; font-family: Arial, Helvetica, sans-serif;
                                        font-size: 10px; left: -25px; top: 13px; letter-spacing: 1px;">AND</span>
                            <span
                                id="lblBG"
                                style="box-shadow: 0px 5px 6px-4px rgba(0, 0, 0, 0.55); border-radius: 4px;
                                        border: 1px solid rgba(204, 204, 204, 1); border-image: none; left: -30px; top: 10px;
                                        width: 35px; height: 16px; position: absolute; z-index: 3; background-color: rgba(238, 238, 238, 1);">
                            </span>
                            <div class="input-group-addon">
                                <img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700048-icon-89-document-file-sql-128.png" style="height: 50px" />And here
                            </div>
                            <div class="col-sm-10">
                                <input
                                    type="hidden"
                                    data-tooltip="example 1"
                                    class="tips form-control"
                                    id="xtraAND_' + numAND + '"
                                    value=""
                                    style="width: 180px; background-color: rgb(254, 231, 231);"
                                    tabindex="-1" />
                            </div>
                        </div>
                    </div><!--column stops here-->';

    console.log('====AND=====');
    if (numOR > numAND) {
      //Place AND box AFTER previous OR box
      console.log('if: ANDArea_' + numOR + ">" + numAND);
      $("#ANDArea_" + (numOR + 1)).after(html);
    } else if (numAND > numOR) {
      //Place AND box AFTER previous AND box
      console.log('else if: ANDArea_' + numAND + ">" + numOR);
      $("#ANDArea_" + (numAND - 1)).after(html);
    } else {
      //There is no AND box so lets add the first one
      console.log('else');
      $("#ANDORAreaTableBody").append(html);
    }

    numAND++;
  });

  /**************************************
     ____   ____     ____  ______ _   __
    / __  / __    / __ )/_  __// | / /
   / / / // /_/ /  / __  | / /  /  |/ /
  / /_/ // _, _/  / /_/ / / /  / /|  /
  ____//_/ |_|  /_____/ /_/  /_/ |_/
  **************************************/
  $("#ORbtn").click(function() {
    var html = '<div id="ORArea_' + numOR + '">
                        <label
                            class="control-label"
                            data-base="AMTdata"
                            data-definedas="text"
                            data-required="True"
                            for="sqlORbtn' + numOR + '"
                            style="width: 0px; max-width: 0px;display: none;">
                        </label>
                        <div
                            class="input-group"
                            style="display: inline-table; top: ' + andOrBoxTopNum + 'px;">
                            <span
                                style="color:rgb(255, 46, 49); position: absolute; z-index: 8; text-transform: uppercase;
                                        text-shadow: rgba(150, 150, 150, 0.87) 0px 1px 1px; font-family: Arial, Helvetica, sans-serif;
                                        font-size: 10px; left: -25px; top: 14px; letter-spacing: 1px;">Or</span>
                            <span
                                id="lblBG"
                                style="box-shadow: 0px 5px 6px-4px rgba(0, 0, 0, 0.55); border-radius: 4px;
                                        border: 1px solid rgba(204, 204, 204, 1); border-image: none; left: -30px; top: 10px;
                                        width: 35px; height: 16px; position: absolute; z-index: 3; background-color: rgba(238, 238, 238, 1);">
                            </span>
                            <div class="input-group-addon">
                                <img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700048-icon-89-document-file-sql-128.png" style="height: 50px" />Or here
                            </div>
                            <div class="col-sm-10">
                                <input
                                    type="hidden"
                                    data-tooltip="example 1"
                                    class="tips form-control"
                                    id="xtraOR_' + numOR + '"
                                    value=""
                                    style="width: 180px; background-color: rgb(254, 231, 231);"
                                    tabindex="-1" />
                            </div>
                        </div>
                    </div><!--column stops here-->';

    console.log('====OR=====');
    if (numAND > numOR) {
      //Place OR box AFTER previous AND box
      console.log('if: ORArea_' + numAND + ">" + numOR);
      $("#ORArea_" + (numAND + 1)).after(html);
    } else if (numOR > numAND) {
      //Place OR box AFTER previous OR box
      console.log('else if: ORArea_' + numOR + ">" + numAND);
      $("#ORArea_" + (numOR - 1)).after(html);
    } else {
      //There is no OR box so lets add the first one
      console.log('else');
      $("#ANDORAreaTableBody").append(html);
    }

    numOR++;
  });
});