<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.chained.orig.js"></script>
  <script type="text/javascript" src="js/eye.js"></script>
  <script type="text/javascript" src="js/utils.js"></script>

  <script type="text/javascript" src="js/jquery.strings.js"></script>
  <script type="text/javascript" src="js/jquery.utils.js"></script>
  <script type="text/javascript" src="js/datepicker.js"></script>
  <script type="text/javascript" src="js/jquery.ui.all.js"></script>

</head>
<body>

<div id="content">
  <h1>Record change</h1>

  <form action="record.php" method="post" id="record_form">
    <input type="hidden" name="record_change_posted" value="1">

    <div class="line" id="line-separator">
      <div class="left"><span>&nbsp;</span></div>
      <div class="right">&nbsp;</div>
    </div>
    <div class="line" id="original">
      <div class="left"><span>Location</span></div>
      <div class="right">

        <select name="location[0]" id="location[0]" style="width:29%">
          <option value="4">1</option>
          <option value="3">2</option>
          <option value="2">3</option>
          <option value="1">4</option>
        </select>
        <select name="datacenter[0]" id="datacenter[0]" style="width:30%">
          <option value="7" class="1" >1</option>
          <option value="6" class="1" >2</option>
          <option value="5" class="1" >3</option>
          <option value="8" class="2" >4</option>
          <option value="3" class="3" >5</option>
          <option value="1" class="3" >6</option>
          <option value="2" class="3" >7</option>
          <option value="4" class="4" >8</option>

        </select>
        <select name="device[0]" id="device[0]" style="width:30%">
          <option value="1" class="1" >z1001</option><option value="2" class="1" >z1002</option><option value="3" class="1" >z1a31</option><option
value="4" class="1" >z1a44</option><option value="5" class="1" >z1c31</option><option value="6" class="1" >z1c44</option><option value="7"
class="1" >z1s31</option><option value="8" class="1" >z1s44</option><option value="9" class="1" >z1003</option><option value="10" class="1" >
z1001</option><option value="11" class="1" >z1002</option><option value="12" class="1" >z1003</option><option value="13" class="1" >
z1tn1</option><option value="14" class="1" >z1tn2</option><option value="15" class="1" >z2a01</option><option value="16" class="1" >
z2a04</option><option value="17" class="1" >z2a14</option><option value="18" class="1" >z2a24</option><option value="19" class="1" >
z2a34 </option><option value="20" class="1" >z2bb04</option><option value="21" class="1" >z2c04</option><option value="22" class="1" >
z2c14</option><option value="23" class="1" >z2c24</option><option value="24" class="1" >z2c34</option><option value="25" class="1" >
z2s04</option><option value="26" class="1" >z2s14</option><option value="27" class="1" >z2s24</option><option value="28" class="1" >
z2s34</option><option value="29" class="1" >z2001</option><option value="30" class="1" >z2004</option><option value="31" class="1" >
z2001</option><option value="32" class="1" >z2006</option><option value="33" class="1" >z3a01</option><option value="34" class="1" >
z3a01</option><option value="35" class="1" >z3a03</option><option value="36" class="1" >z3a11</option><option value="37" class="1" >
z3a13</option><option value="38" class="1" >z3a21</option><option value="39" class="1" >z3a23</option><option value="40" class="1" >
z3a33</option><option value="41" class="1" >z3a43</option><option value="42" class="1" >z3bb01</option><option value="43" class="1" >
z3bb03</option><option value="44" class="1" >z3c01</option><option value="45" class="1" >z3c03</option><option value="46" class="1" >
z3c11</option><option value="47" class="1" >z3c13</option><option value="48" class="1" >z3c21</option><option value="49" class="1" >
z3c23</option><option value="50" class="1" >z3c33 </option><option value="51" class="1" >z3c43</option><option value="52" class="1" >
z3lb01</option><option value="53" class="1" >z3s01</option><option value="54" class="1" >z3s03</option><option value="55" class="1" >
z3s11</option><option value="56" class="1" >z3s13</option><option value="57" class="1" >z3s21</option><option value="58" class="1" >
z3s23</option><option value="59" class="1" >z3s33</option><option value="60" class="1" >z3s43</option><option value="61" class="1" >
z3001</option><option value="62" class="1" >z3002</option><option value="63" class="1" >z3003</option><option value="64" class="1" >
z3004</option><option value="65" class="1" >z3c01</option><option value="66" class="1" >z3001</option><option value="67" class="1" >
z3002</option><option value="68" class="1" >z3003</option><option value="69" class="1" >z3004</option><option value="70" class="1" >
z3005</option><option value="71" class="1" >z3c01</option><option value="72" class="2" >z1001</option><option value="73" class="2" >
z1002</option><option value="74" class="2" >z1001</option><option value="75" class="2" >z1002</option><option value="76" class="2" >
z1tn1</option><option value="77" class="2" >z1tn2</option><option value="78" class="3" >z1a01</option><option value="79" class="3" >
z1a02</option><option value="80" class="3" >z1c02</option><option value="81" class="3" >z1lb02</option><option value="82" class="3" >
z1s02</option><option value="83" class="3" >z1002</option><option value="84" class="3" >z1004</option><option value="85" class="3" >
z1tn1</option><option value="86" class="3" >z201</option><option value="87" class="3" >z2a12</option><option value="88" class="3" >
z2a22</option><option value="89" class="3" >z2a32</option><option value="90" class="3" >z2a42</option><option value="91" class="3" >
z2bb02</option><option value="92" class="3" >z2c02</option><option value="93" class="3" >z2c02a</option><option value="94" class="3" >
z2c12</option><option value="95" class="3" >z2c22</option><option value="96" class="3" >z2c32</option><option value="97" class="3" >
z2c42</option><option value="98" class="3" >z2s02a</option><option value="99" class="3" >z2s12</option><option value="100" class="3" >
z2s22</option><option value="101" class="3" >z2s32</option><option value="102" class="3" >z2s42</option><option value="103" class="3" >
z2001</option><option value="104" class="3" >z2002</option><option value="105" class="3" >z2c01</option><option value="106" class="3" >
z2001</option><option value="107" class="3" >z2003</option><option value="108" class="3" >z2c01</option><option value="109" class="3" >
z2tn2</option><option value="110" class="1" >z403</option><option value="111" class="1" >z4a01</option><option value="112" class="1" >
z4a03</option><option value="113" class="1" >z4ac03</option><option value="114" class="1" >z4bb01</option><option value="115" class="1" >
z4c01</option><option value="116" class="1" >z4c03</option><option value="117" class="1" >z4001</option><option value="118" class="1" >
z4001</option><option value="119" class="1" >z501</option><option value="120" class="1" >z504</option><option value="121" class="1" >
z5a04</option><option value="122" class="1" >z5ac01</option><option value="123" class="1" >z5ac04</option><option value="124" class="1" >
z5c04</option><option value="125" class="1" >z5001</option><option value="126" class="1" >z5001</option><option value="127" class="1" >
z5c01</option><option value="128" class="3" >z302</option><option value="129" class="3" >z3a02</option><option value="130" class="3" >
z3ac02</option><option value="131" class="3" >z3bb01</option><option value="132" class="3" >z3c02</option><option value="133" class="3" >
z3001</option><option value="134" class="3" >z3c01</option><option value="135" class="4" >z1001</option><option value="136" class="4" >
z1002</option><option value="137" class="4" >z1a01</option><option value="138" class="4" >z1a02</option><option value="139" class="4" >
z1bb01</option><option value="140" class="4" >z1c01</option><option value="141" class="4" >z1c02</option><option value="142" class="4" >
z1d01</option><option value="143" class="4" >z1d02</option><option value="144" class="4" >z1s01</option><option value="145" class="4" >
z1s02</option><option value="146" class="4" >z1001</option><option value="147" class="4" >z1002</option><option value="148" class="4" >
z1001</option><option value="149" class="4" >z1002</option><option value="150" class="4" >z1001</option><option value="151" class="4" >
z1002</option><option value="152" class="4" >z1tn1</option><option value="153" class="4" >z1tn2</option><option value="154" class="5" >
1001</option><option value="155" class="5" >1002</option><option value="156" class="6" >1a01</option><option value="157" class="6" >
1a03</option><option value="158" class="6" >1a14</option><option value="159" class="6" >1bb03</option><option value="160" class="6" >
1c01</option><option value="161" class="6" >1c03</option><option value="162" class="6" >1c14</option><option value="163" class="6" >
1d01</option><option value="164" class="6" >1d03</option><option value="165" class="6" >1d04</option><option value="166" class="6" >
1d14</option><option value="167" class="6" >1s01</option><option value="168" class="6" >1s03</option><option value="169" class="6" >
1s14</option><option value="170" class="6" >1001</option><option value="171" class="6" >1002</option><option value="172" class="6" >
1003</option><option value="173" class="6" >1c01</option><option value="174" class="5" >1001</option><option value="175" class="5" >
1002</option><option value="176" class="5" >1001</option><option value="177" class="5" >1003</option><option value="178" class="5" >
1005</option><option value="179" class="5" >1007</option><option value="180" class="5" >1008</option><option value="181" class="5" >
1014</option><option value="182" class="5" >1tn1</option><option value="183" class="5" >1tn2</option><option value="184" class="6" >
2a04</option><option value="185" class="6" >2c04</option><option value="186" class="6" >2d04</option><option value="187" class="6" >
2s04</option><option value="188" class="6" >2004</option><option value="189" class="5" >2004</option><option value="190" class="5" >
2008</option><option value="191" class="6" >3a11</option><option value="192" class="6" >3a13</option><option value="193" class="6" >
3c11</option><option value="194" class="6" >3c13</option><option value="195" class="6" >3d11</option><option value="196" class="6" >
3d13</option><option value="197" class="6" >3s11</option><option value="198" class="6" >3s13</option><option value="199" class="6" >
3003</option><option value="200" class="6" >3004</option><option value="201" class="5" >3011</option><option value="202" class="5" >
3013</option><option value="203" class="6" >1001</option><option value="204" class="6" >1002</option><option value="205" class="5" >
1a02</option><option value="206" class="5" >1a12</option><option value="207" class="5" >1bb02</option><option value="208" class="5" >
1c02</option><option value="209" class="5" >1c12</option><option value="210" class="5" >1d02</option><option value="211" class="5" >
1d12</option><option value="212" class="5" >1s02</option><option value="213" class="5" >1s12</option><option value="214" class="5" >
1001</option><option value="215" class="5" >1002</option><option value="216" class="5" >1c01</option><option value="217" class="6" >
1001</option><option value="218" class="6" >1002</option><option value="219" class="5" >1002</option><option value="220" class="5" >
1006</option><option value="221" class="5" >1012</option><option value="222" class="5" >1tn1</option><option value="223" class="5" >
1tn2</option><option value="224" class="5" >1a01</option><option value="225" class="5" >1a03</option><option value="226" class="5" >
1bb01</option><option value="227" class="5" >1c01</option><option value="228" class="5" >1c03</option><option value="229" class="5" >
1d01</option><option value="230" class="5" >1d03</option><option value="231" class="5" >1s01</option><option value="232" class="5" >
1s03</option><option value="233" class="7" >1001</option><option value="234" class="7" >1003</option><option value="235" class="7" >
1c01</option><option value="236" class="5" >101</option><option value="237" class="5" >2a04</option><option value="238" class="5" >
2c04</option><option value="239" class="5" >2d04</option><option value="240" class="5" >2s04</option><option value="241" class="7" >
2004</option><option value="242" class="5" >1a02</option><option value="243" class="5" >1bb01</option><option value="244" class="5" >
1c02</option><option value="245" class="5" >1d02</option><option value="246" class="5" >1s02</option><option value="247" class="5" >
1001</option><option value="248" class="5" >1c01</option><option value="249" class="5" >101</option><option value="250" class="8" >
1a01</option><option value="251" class="8" >1a03</option><option value="252" class="8" >1bb01</option><option value="253" class="8" >
1c01</option><option value="254" class="8" >1c03</option><option value="255" class="8" >1d01</option><option value="256" class="8" >
1d03</option><option value="257" class="8" >1s01</option><option value="258" class="8" >1s03</option><option value="259" class="8" >
1s13</option><option value="260" class="8" >1o01</option><option value="261" class="8" >1a03</option><option value="262" class="8" >
1c03</option><option value="263" class="8" >1d03</option><option value="264" class="8" >1s03</option><option value="265" class="8" >
1001</option><option value="266" class="8" >1c01</option><option value="267" class="8" >101</option><option value="268" class="8" >
2a04</option><option value="269" class="8" >2c04</option><option value="270" class="8" >2d04</option><option value="271" class="8" >
2s04</option><option value="272" class="8" >2s14</option><option value="273" class="8" >2a04</option><option value="274" class="8" >
2c04</option><option value="275" class="8" >2d04</option><option value="276" class="8" >2s04</option><option value="277" class="8" >
2001</option><option value="278" class="8" >201</option><option value="279" class="8" >1a02</option><option value="280" class="8" >
1bb01</option><option value="281" class="8" >1c02</option><option value="282" class="8" >1d02</option><option value="283" class="8" >
1s02</option><option value="284" class="8" >1001</option><option value="285" class="8" >1c01</option><option value="286" class="8" >
101</option>


        </select>
      </div>
    </div>
    <script type="text/javascript">
    //
    // backup original selects and hide them on the page
    //
    backup = $("#original").clone(1);
    backup.each(function(){ $(this).unbind().removeAttr("id"); });
    backup.children(":last").children(":first").attr("id", "location[100]");
    backup.children(":last").children(":first").next().attr("id", "datacenter[100]");
    backup.children(":last").children(":last").attr("id", "device[100]");
    backup.attr("id", "backup");
    backup.hide().appendTo("body");

    //
    // Create chaining for (original) selects
    //
    // link to where are chaining explained:
    // thx to: http://www.appelsiini.net/2010/jquery-chained-selects :)
    $( document.getElementById("datacenter[0]") ).chained( document.getElementById("location[0]"));
    $( document.getElementById("device[0]") ).chained( document.getElementById("datacenter[0]"));
    </script>
    <div class="line">
      <div class="left"><span>TEXT1</span></div>
      <div class="right"><textarea name="config[0]" id="config" style="height: 150px;" maxlength=""></textarea></div>

    </div>
    <div class="line">
      <div class="left"><span style="font-weight: normal;">TEXT2</span></div>
      <div class="right"><textarea name="initial_config[0]" id="initial_config" style="height: 50px;" maxlength=""></textarea></div>
    </div>
    <script type="text/javascript">
    // Number of ELEments
    var nele = 0;
    var toggle_time = 400;

    // Add elements
    function add_config()
    {
      nele++;
      // line separator (blank line)
      var cloned = $("#line-separator").first().clone();
      cloned.insertBefore( $("#insert").parent().parent().parent() );

      //
      // Clone selects from original #backup element
      //
      cloned = $("#backup").clone(1);
      cloned.unbind();
      
      
      //
      // set new ID, name, class for cloned elements
      //
      cloned.children(":last").children(":first").attr("id", "location["+nele+"]").attr("name", "location["+nele+"]").attr("class", "location"+nele);
      cloned.children(":last").children(":first").next().attr("id", "datacenter["+nele+"]").attr("name", "datacenter["+nele+"]").attr("class", "datacenter"+nele);
      cloned.children(":last").children(":last").attr("id", "device["+nele+"]").attr("name", "device["+nele+"]").attr("class", "device"+nele);
      // insert cloned elements at the page
      cloned.insertBefore( $("#insert").parent().parent().parent() ).hide().toggle(toggle_time);

      //
      // create chaining for selects
      //
      $(".datacenter"+nele).chained(".location"+nele);
      $(".device"+nele).chained(".datacenter"+nele);


      // clone textarea1
      cloned = $("#config").first().parent().parent().clone(1);
      cloned.find("#config").attr("id", "config["+nele+"]").attr("name", "config["+nele+"]");
      cloned.insertBefore( $("#insert").parent().parent().parent() ).hide().toggle(toggle_time);

      // clone textarea 2
      cloned = $("#initial_config").first().parent().parent().clone(1);
      cloned.find("#initial_config").attr("id", "initial_config["+nele+"]").attr("name", "initial_config["+nele+"]");
      cloned.insertBefore( $("#insert").parent().parent().parent() ).hide().toggle(toggle_time);

      // scroll down to make sure that new elements are in viewport
      $("html").animate({ scrollTop: $(document).height() }, 1000);
    }
    </script>
    <div class="line">

      <div class="left"><span>&nbsp;</span></div>
      <div class="right">
        <div style="width: 90%">
          <input type="button" name="create_change" value="Add elements" onclick="add_config()" id="insert" style="float:right; width:20%">
        </div>
      </div>
    </div>

    <div class="line">
      <div class="left"><span>&nbsp;</span></div>

      <div class="right"><input type="button" name="create_change" value="Submit" onclick="check()"></div>
    </div>
  </form>

</div>

</body>
</html>