<style type="text/css">
  input[type="text"] {
    font-size:25px;
    height:33px;
    left:0;
    line-height:33px;
    padding:8px 8px 7px;
    top:0;
    width:600px;
  }
  select {
    font-size:25px;
    height:50px;
    left:0;
    line-height:33px;
    top:0;
    width:600px;
  }

  .buttons_drill_down_name_button {
    margin-right: 70px;
  }

  .buttons_data_to_pass_from_view_button {
    margin-right: 120px;
  }
</style>

<script type="text/javascript">
  var all = '.start,.fields,.rows,.search,.footer,.misc_submit';
  var all_btns = '#start,#fields,#rows,#search,#footer,#misc_submit';
  jQuery(document).ready(function () {
    if (jQuery('#view').val() != '') {
      jQuery(all_btns).removeClass('disabled');
    }
    if (jQuery('#preview').attr('src') == '') {
      jQuery('#preview').hide();
    } else {
      jQuery('#preview').show();
    }

  });

  function VerifyOK(func_name) {
    var ok = true;
    if (jQuery('#view').val() == '') {
      ok = false;
      alert('Please select a Model to use as your base widget_list');
    }
    else if (jQuery('#rowLimit').val() != '10' && jQuery('#rowLimit').val() != '20' && jQuery('#rowLimit').val() != '50' && jQuery('#rowLimit').val() != '100' && jQuery('#rowLimit').val() != '500' && jQuery('#rowLimit').val() != '1000') {
      ok = false;
      alert('Invalid Row Limit, please see help button.');
    }
    return ok;
  }

  function ClickTab(which_class,func_name) {
    if (VerifyOK(func_name)) {
      jQuery('.search_dependent').hide(0,function() {
        jQuery(all).hide(0,function() {
          jQuery(which_class).fadeIn(0,function() {
            if (func_name == 'ShowSearch') {
              ShowSearchOptions(function() {
                ShowGroupingOptions();
                ShowExportOptions();

              });
            }
            if (func_name == 'ShowFields') {
              ShowHiddenOptions();
              ShowFunctionOptions();
            }
            if (func_name == 'ShowSubmit') {
              ShowCheckboxOptions();
            }
            if (func_name == 'ShowRows') {
              ShowButtonOptions();
              ShowDrillDownOptions();
            }
            if (func_name == 'ShowFooter') {
              ShowFooterOptions();
            }
          });
        });
      });
      SaveChanges();
    }
  }

  function ShowStart() {
    ClickTab('.start',arguments.callee.name);
  }

  function ShowFields() {
    ClickTab('.fields',arguments.callee.name);
  }

  function ShowRows() {
    ClickTab('.rows',arguments.callee.name);
  }

  function ShowSearch() {
    ClickTab('.search',arguments.callee.name);
  }

  function ShowFooter() {
    ClickTab('.footer',arguments.callee.name);
  }

  function ShowSubmit() {
    ClickTab('.misc_submit',arguments.callee.name);
  }

  function ReplaceColumnsToLinked(obj) {
    found = false;
    var className = obj.className;
    jQuery(obj).css('background-color','white');
    jQuery('.fields_keys, .fields_hidden_keys, .fields_function_keys').each(
      function(key, value) {
        if(jQuery(value).val() == jQuery(obj).val().trim() && jQuery(obj).val().search(/_linked/i) == -1) {
          found = true;
          var id_original = jQuery(obj).val().trim();
          jQuery(value).val(jQuery(obj).val().trim() + '_linked');
          jQuery(obj).val(jQuery(obj).val().trim() + '_linked');
          jQuery(obj).attr('value',jQuery(this).val().trim());
          if (className == 'drill_downs_data_to_pass_from_view') {
            jQuery('.drill_downs_column_to_show[value="col_name"]').each(
              function(key1, value1) {
                jQuery(value1).val(jQuery(obj).val().trim());
                jQuery(value1).attr('value',jQuery(value1).val().trim());
                return false;
              }
            )
          } else {
            jQuery('.drill_downs_data_to_pass_from_view[value="col_name"]').each(
              function(key1, value1) {
                jQuery(value1).val(jQuery(obj).val().trim());
                jQuery(value1).attr('value',jQuery(value1).val().trim());
                return false;
              }
            )
          }

          jQuery('.drill_downs_drill_down_name[value="filter_col_name"]').each(
              function(key1, value1) {
                jQuery(value1).val('filter_by_' + id_original);
                jQuery(value1).attr('value','filter_by_' + id_original);
                return false;
              }
          )


          jQuery('#showHidden').attr('checked',true);
          AddHiddenField();
          jQuery('.fields_hidden_keys[value=""]').each(
              function(key1, value1) {
                jQuery(value1).val(id_original);
                jQuery(value1).attr('value',id_original);
                return false;
              }
          );
        }
      }
    );

    if (!found && jQuery(obj).val().search(/_linked/i) == -1) {
      alert('Invalid Field Name defined.  Please change the value');
      jQuery(obj).css('background-color','red');
    }
  }

  function InvalidField(obj) {
    found = false;
    jQuery(obj).css('background-color','white');
    jQuery('.fields_keys, .fields_hidden_keys, .fields_function_keys').each(
      function(key, value) {
        if(jQuery(value).val() == jQuery(obj).val().trim()) {
          found = true;
        }
      }
    );

    if (!found) {
      alert('Invalid Field Name defined.  Please change the value');
      jQuery(obj).css('background-color','red');
    }
  }

  function GoodClass(obj) {
    found = false;
    jQuery(obj).css('background-color','white');
    if (jQuery(obj).val() == 'primary' || jQuery(obj).val() == 'info' || jQuery(obj).val() == 'success' || jQuery(obj).val() == 'danger' || jQuery(obj).val() == 'disabled' || jQuery(obj).val() == 'default') {
      found = true;
    }
    if (!found) {
      alert('Invalid Class Name.  Click Help icon for more information.');
      jQuery(obj).css('background-color','red');
    }
  }


  function ShowSearchOptions(callback) {
    if (jQuery('#showSearch').is(':checked')) {
      jQuery('.search_dependent').show();
    } else {
      jQuery('.search_dependent').hide();
    }
    if (typeof(callback) == 'function') {
      (callback)();
    }
  }

  function ShowGroupingOptions() {
    if (jQuery('#useGrouping').is(':checked') && jQuery('#showSearch').is(':checked')) {
      jQuery('.grouping_dependent').show();
    } else {
      jQuery('.grouping_dependent').hide();
    }
  }

  function ShowRansackOptions() {
    if (jQuery('#useRansack').is(':checked') && jQuery('#showSearch').is(':checked')) {
      jQuery('.ransack_dependent').show();
    } else {
      jQuery('.ransack_dependent').hide();
    }
  }

  function ShowFooterOptions() {
    if (jQuery('#footerOn').is(':checked')) {
      jQuery('.footer_dependent').show();
    } else {
      jQuery('.footer_dependent').hide();
    }
  }

  function ShowExportOptions() {
    if (jQuery('#showExport').is(':checked') && jQuery('#showSearch').is(':checked')) {
      jQuery('.export_dependent').show();
    } else {
      jQuery('.export_dependent').hide();
    }
  }

  function ShowHiddenOptions() {
    if (jQuery('#showHidden').is(':checked')) {
      if (jQuery('.fields_hidden_keys').length == 0) {
        AddHiddenField();
      }
      jQuery('.hidden_fields_dependent').show();
    } else {
      jQuery('.hidden_fields_dependent').hide();
    }
  }

  function ShowButtonOptions() {
    if (jQuery('#rowButtonsOn').is(':checked')) {
      jQuery('.button_dependent').show();
    } else {
      jQuery('.button_dependent').hide();
    }
  }
  function ShowDrillDownOptions() {
    if (jQuery('#drillDownsOn').is(':checked')) {
      if (jQuery('.drill_downs_data_to_pass_from_view').length == 0) {
        AddDrillDown();
      }
      jQuery('.drill_down_dependent').show();
    } else {
      jQuery('.drill_down_dependent').hide();
    }
  }

  function ShowFunctionOptions() {
    if (jQuery('#fieldFunctionOn').is(':checked')) {
      if (jQuery('.fields_function_keys').length == 0) {
        AddFieldFunction();
      }
      jQuery('.function_dependent').show();
    } else {
      jQuery('.function_dependent').hide();
    }
  }

  function ShowCheckboxOptions() {
    if (jQuery('#checkboxEnabled').is(':checked')) {
      jQuery('.checkbox_dependent').show();
    } else {
      jQuery('.checkbox_dependent').hide();
    }
  }

  function AddGroupingItem() {
    jQuery('#grouping_items').html(jQuery('#grouping_items').html() + jQuery('#grouping_items_default').html());
  }

  function AddField() {
    jQuery('#field_table').html(jQuery('#field_table').html() + jQuery('#default_field_template').html());
  }

  function AddGroupBy() {
    jQuery('#grouping_table').html(jQuery('#grouping_table').html() + jQuery('#default_grouping_template').html());
  }

  function AddButton() {
    jQuery('#button_table').html(jQuery('#button_table').html() + jQuery('#default_button_template').html());
  }

  function AddDrillDown() {
    jQuery('#drill_down_table').html(jQuery('#drill_down_table').html() + jQuery('#default_drill_down_template').html());
  }

  function AddFooterButton() {
    jQuery('#footer_table').html(jQuery('#footer_table').html() + jQuery('#default_footer_template').html());
  }

  function AddHiddenField() {
    jQuery('#hidden_field_table').html(jQuery('#hidden_field_table').html() + jQuery('#default_hidden_field_template').html());
  }

  function AddFieldFunction() {
    jQuery('#field_function_table').html(jQuery('#field_function_table').html() + jQuery('#default_field_function_template').html());
  }

  function RemoveField(obj) {
    jQuery(obj).closest('tr').remove();
  }

  function ChangeViewModel(obj) {
    jQuery(all_btns).addClass('disabled');
    if(jQuery(obj).val() != '') {
      jQuery.post(jQuery('#widget_list_administration').attr('action'), 'ajax=1&model=' + jQuery(obj).val(), function(response)
      {
        jQuery('#field_table').html(response['fields']);
        jQuery('#hidden_field_table').html(response['fields_hidden']);
        jQuery('#checkboxField').html(response['checked_fields']);
        jQuery('#footer_table').html(response['footer_buttons']);
        jQuery('#grouping_table').html(response['group_by']);
        SaveChanges();
        if (jQuery(obj).val() != '') {
          jQuery(all_btns).removeClass('disabled');
        }


        jQuery(all_btns).removeClass('disabled');
        jQuery('#title').val(jQuery(obj).val() + 's');
        jQuery('#listDescription').val('Showing All ' + jQuery(obj).val() + 's');

        if (jQuery(obj).val() != '' && jQuery('#noDataMessage').val() == '') {
          jQuery('#noDataMessage').val('No ' + jQuery(obj).val() + 's Found Within Your Criteria');
        }

        if (jQuery(obj).val() != '' && jQuery('#showExport').is(':checked')) {
          jQuery('#exportButtonTitle').val('Export All ' + jQuery(obj).val() + 's');
        }
      }, "json");
    }
  }

  function SaveChanges() {
    jQuery(all_btns).addClass('disabled');
    jQuery.post(jQuery('#widget_list_administration').attr('action'), 'ajax=1&save=1&' + jQuery('#widget_list_administration').serialize(), function(response)
    {
      jQuery(all_btns).removeClass('disabled');
      jQuery('#preview').show();
      jQuery('#preview').attr('src',jQuery('#widget_list_administration').attr('action') + '?iframe=1');
      jQuery('#preview').css('width','100%');
      jQuery('#preview').css('height','500px');
    }, "json");
  }

  function Submit() {
    if (VerifyOK('')) {
      jQuery('#widget_list_administration').submit();
    }
  }
</script>
<form action="<!--POST_URL-->" method="post" id="widget_list_administration">
  <h1 style="font-size:24;"><!--TITLE--></h1><div class="horizontal_rule"></div>
  <h3>Get started quickly by selecting the features you need for this list</h3>
  <table>
    <!--BUTTON SECTION-->
      <tr id="sections">
        <td colspan="3">
          <h3><!--BUTTONS--></h3>
        </td>
      </tr>

    <!--START SECTION-->
      <tr class="start">
        <td>
          <h3>Internal Name:</h3>
        </td>
        <td>
          <input type="text" name="name" value="<!--NAME_VALUE-->"/>
        </td>
        <td>
          &#160;
        </td>
      </tr>
      <tr class="start">
        <td>
          <h3>Model:</h3>
        </td>
        <td>
          <select name="view" id="view" onchange="ChangeViewModel(this)">
            <!--VIEW_OPTIONS-->
          </select>
        </td>
        <td>
          &#160;
        </td>
      </tr>
      <tr class="start">
        <td>
          <h3>Title:</h3>
        </td>
        <td>
          <input type="text" name="title" id="title" value="<!--TITLE_VALUE-->"/>
        </td>
        <td>
          <!--TITLE_HELP_BUTTON-->
        </td>
      </tr>

      <tr class="start">
        <td>
          <h3>Initial Description:</h3>
        </td>
        <td>
          <input type="text" name="listDescription" id="listDescription" value="<!--DESC_VALUE-->"/>
        </td>
        <td>
          <!--DESC_HELP_BUTTON-->
        </td>
      </tr>

    <!--FIELDS SECTION-->
      <tr class="fields" style="display:none;">
        <td>
          <h3>Allow Sorting?:</h3>
        </td>
        <td>
          <input type="checkbox" name="useSort" id="useSort" value="1" <!--SORTING_CHECKED-->/>
        </td>
        <td>
          &#160;
        </td>
      </tr>

      <tr class="fields" style="display:none;">
        <td>
          <h3>No Data Message:</h3>
        </td>
        <td>
          <input type="text" name="noDataMessage" id="noDataMessage" value="<!--NO_DATA_VALUE-->"/>
        </td>
        <td>
          &#160;
        </td>
      </tr>

      <tr class="fields" style="display:none;">
        <td colspan="3">
          <h1>Field Selection:</h1>
          <script type="text/plain" id="default_field_template">
            <!--FIELD_TEMPLATE-->
          </script>
          <table style="margin-left:150px;" id="field_table">
            <!--ALL_FIELDS-->
          </table>
          <table style="margin-left:150px;">
            <tr>
              <td colspan="3">
                 <!--ADD_FIELD_BUTTON-->
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr class="fields" style="display:none;">
        <td style="width:300px;">
          <h3>Hidden Fields?:</h3>
        </td>
        <td>
          <input type="checkbox" name="showHidden" onchange="ShowHiddenOptions();" id="showHidden" value="1" <!--SHOW_HIDDEN_CHECKED-->/>
        </td>
        <td>
          <!--HIDDEN_HELP_BUTTON-->
        </td>
      </tr>

      <tr class="fields hidden_fields_dependent" style="display:none;">

        <td colspan="3">
          <h1 style="margin-left: 75px;">Hidden Field Selection:</h1>
          <script type="text/plain" id="default_hidden_field_template">
            <!--HIDDEN_FIELD_TEMPLATE-->
          </script>
          <table style="margin-left:150px;" id="hidden_field_table">
            <!--ALL_HIDDEN_FIELDS-->
          </table>
          <table style="margin-left:150px;">
            <tr>
              <td colspan="3">
                <!--ADD_HIDDEN_FIELD_BUTTON-->
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr class="fields" style="display:none;">
        <td style="width:300px;">
          <h3>Field Function?:</h3>
        </td>
        <td>
          <input type="checkbox" name="fieldFunctionOn" onchange="ShowFunctionOptions();" id="fieldFunctionOn" value="1" <!--SHOW_FUNCTION_CHECKED-->/>
        </td>
        <td>
          <!--FUNC_HELP_BUTTON-->
        </td>
      </tr>

      <tr class="fields function_dependent" style="display:none;">
        <td colspan="3">
          <h1 style="margin-left: 75px;">Field Functions To Wrap Around Fields:</h1>
          <script type="text/plain" id="default_field_function_template">
            <!--FIELD_FUNCTION_TEMPLATE-->
          </script>
          <table style="margin-left:150px;" id="field_function_table">
            <!--ALL_FIELD_FUNCTIONS-->
          </table>
          <table style="margin-left:150px;">
            <tr>
              <td colspan="3">
                <!--ADD_FIELD_FUNCTION_BUTTON-->
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!--ROWS SECTION-->
      <tr class="rows" style="display:none;">
        <td>
          <h3>Row Limit</h3>
        </td>
        <td>
          <input type="text" name="rowLimit" id="rowLimit" value="<!--ROW_LIMIT_VALUE-->"/>
        </td>
        <td>
          <!--ROW_HELP_BUTTON-->
        </td>
      </tr>



      <tr class="rows" style="display:none;">
        <td style="width:300px;">
          <h3>Row Buttons?:</h3>
        </td>
        <td>
          <input type="checkbox" name="rowButtonsOn" onchange="ShowButtonOptions();" id="rowButtonsOn" value="1" <!--BUTTONS_ON_CHECKED-->/>
        </td>
        <td>
          <!--BUTTON_HELP_BUTTON-->
        </td>
      </tr>

      <tr class="rows button_dependent" style="display:none;">
        <td colspan="3">
          <table style="margin-left:75px;">
            <tr>
              <td>
                <h3>Row Button Column Name</h3>
              </td>
              <td>
                <input type="text" name="rowButtonsName" id="rowButtonsName" value="<!--BUTTON_NAME_VALUE-->"/>
              </td>
              <td>
                &#160;
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr class="rows button_dependent" style="display:none;">
        <td colspan="3">
          <h1  style="margin-left:75px;">Buttons:</h1>
          <script type="text/plain" id="default_button_template">
            <!--THE_BUTTON_TEMPLATE-->
          </script>
          <table style="margin-left:150px;" id="button_table">
            <!--ALL_BUTTONS-->
          </table>
          <table style="margin-left:150px;">
            <tr>
              <td colspan="3">
                <!--ADD_THE_BUTTON_BUTTON-->
              </td>
            </tr>
          </table>
        </td>
      </tr>




    <tr class="rows" style="display:none;">
      <td style="width:300px;">
        <h3>Drill Down Columns?:</h3>
      </td>
      <td>
        <input type="checkbox" name="drillDownsOn" onchange="ShowDrillDownOptions();" id="drillDownsOn" value="1" <!--DRILL_DOWN_CHECKED-->/>
      </td>
      <td>
        <!--DRILL_DOWN_HELP_BUTTON-->
      </td>
    </tr>

    <tr class="rows drill_down_dependent" style="display:none;">
      <td colspan="3">
        <script type="text/plain" id="default_drill_down_template">
          <!--THE_DRILL_DOWN_TEMPLATE-->
        </script>
        <table style="margin-left:150px;" id="drill_down_table">
          <!--ALL_DRILL_DOWNS-->
        </table>
        <table style="margin-left:150px;">
          <tr>
            <td colspan="3">
              <!--ADD_DRILL_DOWN_BUTTON-->
            </td>
          </tr>
        </table>
      </td>
    </tr>


    <!--SEARCH SECTION-->
      <tr class="search" style="display:none;">
        <td style="width:300px;">
          <h3>Show Search?:</h3>
        </td>
        <td>
          <input type="checkbox" name="showSearch" onchange="ShowSearchOptions(function() {ShowGroupingOptions();})" id="showSearch" value="1" <!--SHOW_SEARCH_CHECKED-->/>
        </td>
        <td>
          &#160;
        </td>
      </tr>

      <tr class="search search_dependent" style="display:none;">
        <td style="width:300px;">
          <h3>Show Export Button?:</h3>
        </td>
        <td>
          <input type="checkbox" name="showExport" onchange="ShowExportOptions();" id="showExport" value="1" <!--SHOW_EXPORT_CHECKED-->/>
        </td>
        <td>
          &#160;
        </td>
      </tr>

      <tr class="search search_dependent export_dependent" style="display:none;">
        <td colspan="3">
          <table style="margin-left:75px;">
            <tr>
              <td>
                <h3>Export Button Title:</h3>
              </td>
              <td>
                <input type="text" name="exportButtonTitle" id="exportButtonTitle" value="<!--EXPORT_VALUE-->"/>
              </td>
              <td>
                &#160;
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr class="search search_dependent" style="display:none;">
        <td>
          <h3>Search Description/Title:</h3>
        </td>
        <td>
          <input type="text" name="searchTitle" id="searchTitle" value="<!--SEARCH_TITLE-->"/>
        </td>
        <td>
          <!--SEARCH_TITLE_BUTTON-->
        </td>
      </tr>

      <tr class="search search_dependent" style="display:none;">
        <td>
          <h3>Use Ransack Advanced Search?:</h3>
        </td>
        <td>
          <input type="checkbox" name="useRansack" onchange="ShowRansackOptions()" id="useRansack" value="1" <!--USE_RANSACK-->/>
        </td>
        <td>
          <!--RANSACK_HELP_BUTTON-->
        </td>
      </tr>

      <tr class="search search_dependent ransack_dependent" style="display:none;">
        <td colspan="3">
          <table style="margin-left:75px;">
            <tr>
              <td>
                <h3>Customized Ransack Form?:</h3>
              </td>
              <td>
                <input type="checkbox" name="ransackAdvancedForm" id="ransackAdvancedForm" value="1" <!--USE_RANSACK_ADV-->/>
              </td>
              <td>
                <!--ADV_RANSACK_HELP_BUTTON-->
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr class="search search_dependent" style="display:none;">
        <td>
          <h3>Use Grouping?:</h3>
        </td>
        <td>
          <input type="checkbox" name="useGrouping" onchange="ShowGroupingOptions()" id="useGrouping" value="1" <!--USE_GROUPING-->/>
        </td>
        <td>
          <!--GROUP_BY_HELP_BUTTON-->
        </td>
      </tr>

      <tr class="search search_dependent grouping_dependent" style="display:none;">
        <td colspan="3">
          <h1  style="margin-left: 75px;">Custom Items To Group By:</h1>
          <table>
            <tr>
              <td>
                <script type="text/plain" id="default_grouping_template">
                   <!--DEFAULT_GROUPING-->
                </script>
                <table  style="margin-left:150px;" id="grouping_table">
                  <!--GROUPING_ITEMS-->
                </table>
                <table style="margin-left:150px;">
                  <tr>
                    <td colspan="3">
                      <!--ADD_GROUP_BY_BUTTON-->
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>

          <table style="margin-left:150px;">
            <tr>
              <td colspan="3">
                <!--ADD_GROUPING_BUTTON-->
              </td>
            </tr>
          </table>
        </td>
      </tr>

    <!--FOOTER SECTION-->
    <tr class="footer" style="display:none;">
      <td style="width:300px;">
        <h3>Build Customized Footer?:</h3>
      </td>
      <td>
        <input type="checkbox" name="footerOn" onchange="ShowFooterOptions();" id="footerOn" value="1" <!--FOOTER_CHECKED-->/>
      </td>
      <td>

      </td>
    </tr>
    <tr class="footer footer_dependent" style="display:none;">
      <td colspan="3">
        <h1  style="margin-left:75px;">Footer Buttons:</h1>
        <script type="text/plain" id="default_footer_template">
          <!--FOOTER_BUTTON_TEMPLATE-->
        </script>
        <table style="margin-left:150px;" id="footer_table">
          <!--ALL_FOOTER_BUTTONS-->
        </table>
        <table style="margin-left:150px;">
          <tr>
            <td colspan="3">
              <!--ADD_THE_FOOTER_BUTTON-->
            </td>
          </tr>
        </table>
      </td>
    </tr>

    <!--MISC & SUBMIT SECTION-->

      <tr class="misc_submit" style="display:none;">
        <td style="width:300px;">
          <h3>Add Row Checkbox?:</h3>
        </td>
        <td>
          <input type="checkbox" name="checkboxEnabled" onchange="ShowCheckboxOptions();" id="checkboxEnabled" value="1" <!--SHOW_CHECKBOX_CHECKED-->/>
        </td>
        <td>
          &#160;
        </td>
      </tr>

      <tr class="misc_submit checkbox_dependent" style="display:none;">
        <td colspan="3">
          <table style="margin-left:75px;">
            <tr>
              <td>
                <h3>Checkbox Value:</h3>
              </td>
              <td>
                <select name="checkboxField" id="checkboxField">
                  <!--CHECKBOX_SELECTED_FIELDS-->
                </select>
              </td>
              <td>
                <!--CHECK_HELP_BUTTON-->
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr class="misc_submit"  style="display:none;" >
        <td>
          <h3>Submit:</h3>
        </td>
        <td>
          <!--SUBMIT_WIDGET_LIST-->
        </td>
        <td>
          &#160;
        </td>
      </tr>

      <tr>
        <td colspan="3">
          <iframe src="" id="preview"></iframe>
        </td>
      </tr>

  </table>
</form>