<?xml version="1.0"?>

<!--
   - The contents of this file are subject to the Netscape Public
   - License Version 1.1 (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.mozilla.org/NPL/
   -  
   - Software distributed under the License is distributed on an "AS
   - IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
   - implied. See the License for the specific language governing
   - rights and limitations under the License.
   -  
   - The Original Code is Mozilla Communicator client code, released
   - March 31, 1998.
   - 
   - The Initial Developer of the Original Code is Netscape
   - Communications Corporation. Portions created by Netscape are
   - Copyright (C) 1998-1999 Netscape Communications Corporation. All
   - Rights Reserved.
   - 
   - Contributor(s): 
   -    Ben Goodger
  -->

<?xml-stylesheet href="chrome://editor/skin/editor.css" type="text/css"?>
<?xml-stylesheet href="chrome://editor/skin/EditorDialog.css" type="text/css"?>

<?xul-overlay href="chrome://global/content/dialogOverlay.xul"?> 
<?xul-overlay href="chrome://editor/content/EdDialogOverlay.xul"?> 

<!DOCTYPE window SYSTEM "chrome://editor/locale/EditorTableProperties.dtd">

<window class="dialog" title="&tableWindow.title;"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    onload="Startup()"
    persist="screenX screenY"
    orient="vertical">

  <!-- Methods common to all editor dialogs -->
  <script language="JavaScript" src="chrome://editor/content/EdDialogCommon.js"/>
  <script language="JavaScript" src="chrome://editor/content/EdTableProps.js"/>
  <script language="JavaScript" src="chrome://global/content/dialogOverlay.js" />

  <broadcaster id="args" value=""/>
  <keyset id="keyset"/>

  <tabcontrol align="vertical" orient="vertical">
	  <tabbox flex="1" align="horizontal">
		  <tab id="TableTab" selected="true" onclick="SelectTableTab()" value="&tableTab.label;"/>
		  <tab id="CellTab" onclick="SelectCellTab()" value="&cellTab.label;"/>
	  	<spring flex="1"/>
	  </tabbox>
    <tabpanel orient="vertical" id="TabPanel">

      <!-- TABLE PANEL -->
      <box id="TablePanel" orient="vertical">
        <titledbox><title><text value="&size.label;"/></title>
          <grid>
            <columns><column/><column/></columns>
            <rows>
              <row valign="middle">
                <checkbox id="RowsCheckbox" value="&tableRows.label;"/>
                <textfield class="narrow" id="TableRowsInput" onkeyup="ChangeIntTextfield(this.id,'RowsCheckbox');"/>
              </row>
              <row valign="middle">
                <checkbox id="ColumnsCheckbox" value="&tableColumns.label;"/>
                <textfield class="narrow" id="TableColumnsInput" onkeyup="ChangeIntTextfield(this.id,'ColumnsCheckbox');"/>
              </row>
            </rows>
          </grid>
          <spring class="bigspacer"/>
          <grid>
            <columns><column/><column/><column/></columns>
            <rows>
              <row valign="middle">
                <checkbox id="TableHeightCheckbox" value="&tableHeight.label;"/>
                <textfield class="narrow" id="TableHeightInput" onkeyup="ChangeIntTextfield(this.id,'TableHeightCheckbox');"/>
                <menulist id="TableHeightUnits" oncommand="SetCheckbox('TableHeightCheckbox');"/>
              </row>
              <row valign="middle">
                <checkbox id="TableWidthCheckbox" value="&tableWidth.label;"/>
                <textfield class="narrow" id="TableWidthInput" onkeyup="ChangeIntTextfield(this.id,'TableWidthCheckbox');"/>
                <menulist id="TableWidthUnits" oncommand="SetCheckbox('TableWidthCheckbox');"/>
              </row>
            </rows>
          </grid>
        </titledbox>
        <box><!-- Border and Alignment -->
          <titledbox orient="vertical"><title><text align="left" value="&tableBorderSpacing.label;"/></title>
          <grid>
            <columns><column/><column/><column/></columns>
            <rows>
              <row valign="middle">
                <checkbox id="TableBorderCheckbox" value="&tableBorderWidth.label;"/>
                <textfield class="narrow" id="BorderWidthInput" onkeyup="ChangeIntTextfield(this.id,'TableBorderCheckbox');"/>
                <text class="label" align="left" value="&pixels.label;"/>
              </row>
              <row valign="middle">
                <checkbox id="CellSpacingCheckbox" value="&tableSpacing.label;"/>
                <textfield class="narrow" id="SpacingInput" onkeyup="ChangeIntTextfield(this.id,'CellSpacingCheckbox');"/>
                <text class="label" value="&tablePxBetwCells.label;"/>
              </row>
              <row valign="middle" autostretch="never">
                <checkbox id="CellPaddingCheckbox" value="&tablePadding.label;"/>
                <textfield class="narrow" id="PaddingInput" onkeyup="ChangeIntTextfield(this.id,'CellPaddingCheckbox');"/>
                <!-- Use HTML instead of TEXT to let it wrap -->
                <html flex="1">&tablePxBetwBrdrCellContent.label;</html>
              </row>
            </rows>
          </grid>
          </titledbox>
          <spring class="spacer"/>
          <box orient="vertical" flex="1">
            <spring class="bigspacer"/>
            <box orient="vertical" flex="1">
              <checkbox id="TableHAlignCheckbox" value="&tableAlignment.label;"/>
              <spring class="smallspacer"/>
              <menulist id="TableAlignList" oncommand="SetCheckbox('TableHAlignCheckbox');">
                <menupopup>
                  <menuitem value="&AlignLeft.label;"   data="left"/>
                  <menuitem value="&AlignCenter.label;" data="center"/>
                  <menuitem value="&AlignRight.label;"  data="right"/>
                </menupopup>
              </menulist>
              <spring class="bigspacer"/>
              <checkbox id="TableCaptionCheckbox" value="&tableCaption.label;"/>
              <spring class="smallspacer"/>
              <menulist id="TableCaptionList" oncommand="SetCheckbox('TableCaptionCheckbox');">
                <menupopup>
                  <menuitem value="&tableCaptionNone.label;"  data=""/>
                  <menuitem value="&tableCaptionAbove.label;" data="top"/>
                  <menuitem value="&tableCaptionBelow.label;" data="bottom"/>
                </menupopup>
              </menulist>
              <spring flex="1"/>
            </box>
          </box>
          <spring class="bigspacer"/>
        </box> <!-- Border and alignment -->

        <titledbox orient="vertical"><title><text align="left" value="&background.label;"/></title>
        <grid>
          <columns><column/><column/></columns>
          <rows>
            <row valign="middle" autostretch="never">
              <checkbox id="TableColorCheckbox" value="&color.label;"/>
              <box valign="middle">
                <menu class="colorpicker">
    	            <box>
                    <spring id="tableBackgroundCW" class="color-well"/>
                    <image class="popup-trigger"/>
                  </box>
    	            <menupopup>
                    <colorpicker id="tableBackgroundCP" palettename="standard" 
                      onclick="GetColorAndUpdate('tableBackgroundCP','tableBackgroundCW','TableColorCheckbox', this.parentNode);"/>
                    <button class="dialog" value="&defaultColor.label;" 
                      oncommand="GetColorAndUpdate('tableBackgroundCP','tableBackgroundCW','TableColorCheckbox', this.parentNode)"/>
    	            </menupopup>
                </menu>
                <spring class="spacer"/>
                <text class="label" id="TableInheritColor" value="&tableInheritColor.label;" collapsed="true"/>
              </box>
            </row>
            <row valign="middle">
              <checkbox id="TableImageCheckbox" value="&image.label;"/>
              <textfield id="TableImageInput" flex="1"/>
              <button class="dialog" value="&ChooseImage.label;" id="TableImageButton" oncommand="ChooseTableImage()"/>
            </row>
          </rows>
        </grid>
        </titledbox><!-- Table Background -->
        <spring class="spacer"/>
        <box flex="1" autostretch="never">
          <html  class="wrap" flex="1" style="width: 1em">&tableUseCheckboxHelp.label;</html>
          <!-- From EdDialogOvlerlay.xul -->
          <button class="dialog" id="AdvancedEditButton"/>
        </box>
        <spring flex="1"/>
      </box><!-- Table Panel -->

      <!-- CELL PANEL -->
    	<box id="CellPanel" orient="vertical">
        <titledbox autostretch="never" valign="middle">
          <title><text align="left" value="&cellSelection.label;"/></title>
          <box orient="vertical">
            <menulist id="SelectionList" oncommand="ChangeSelection(event.target.data)" flex="1">
              <menupopup>
                <!-- JS code assumes order is Cell, Row, Column -->
                <menuitem value="&cellSelectCell.label;"   data="1"/>
                <menuitem value="&cellSelectRow.label;"    data="2"/>
                <menuitem value="&cellSelectColumn.label;" data="3"/>
              </menupopup>
            </menulist>
            <box flex="1">
              <button id="PreviousButton" class="dialog"       value="&cellSelectPrevious.label;" oncommand="MoveSelection(0)" flex="1"/>
              <button id="NextButton"     class="dialog right" value="&cellSelectNext.label;"     oncommand="MoveSelection(1)" flex="1"/>
            </box>
          </box>
          <spring class="bigspacer"/>
          <box orient="vertical" flex="1">
            <text value="&cellChangeSelectionMsg.label;"/>
            <checkbox value="&cellApplyBeforeMove.label;" id="ApplyBeforeMove" checked="true" persist="checked"/>
            <checkbox value="&cellKeepCurrentData.label;" id="KeepCurrentData" persist="checked"/>
          </box>
        </titledbox>
        <!-- cell size titledbox -->
        <titledbox><title><text align="left" value="&size.label;"/></title>
          <grid>
            <columns><column/><column/><column/></columns>
            <rows>
              <row valign="middle" autostretch="never">
                <checkbox id="CellHeightCheckbox" value="&tableHeight.label;"/>
                <textfield class="narrow" id="CellHeightInput" onkeyup="ChangeIntTextfield(this.id,'CellHeightCheckbox');"/>
                <menulist id="CellHeightUnits" oncommand="SetCheckbox('CellHeightCheckbox');"/>
              </row>
              <row valign="middle" autostretch="never">
                <checkbox id="CellWidthCheckbox" value="&tableWidth.label;"/>
                <textfield class="narrow" id="CellWidthInput" onkeyup="ChangeIntTextfield(this.id,'CellWidthCheckbox');"/>
                <menulist id="CellWidthUnits" oncommand="SetCheckbox('CellWidthCheckbox');"/>
              </row>
            </rows>
          </grid>
          <spring class="bigspacer"/>
          <grid>
            <columns><column/><column/><column/></columns>
            <rows>
              <row valign="middle" autostretch="never">
                <checkbox id="RowSpanCheckbox" value="&cellSpan.label;"/>
                <textfield class="narrow" id="RowSpanInput" onkeyup="ChangeIntTextfield(this.id,'RowSpanCheckbox');"/>
                <text align="left" value="&cellSpanRows.label;"/>
              </row>
              <row valign="middle" autostretch="never">
                <checkbox id="ColSpanCheckbox" value="&cellSpan.label;"/>
                <textfield class="narrow" id="ColSpanInput" onkeyup="ChangeIntTextfield(this.id,'ColSpanCheckbox');"/>
                <text align="left" value="&cellSpanCols.label;"/>
              </row>
            </rows>
          </grid>
        </titledbox>
        <box><!-- Alignment and style -->
          <titledbox orient="vertical" flex="1">
            <title><text align="left" value="&cellContentAlignment.label;"/></title>
            <grid>
              <columns><column/><column/><column/></columns>
              <rows>
                <row valign="middle" autostretch="never">
                  <checkbox id="CellHAlignCheckbox" value="&cellHorizontal.label;"/>
                  <menulist id="CellHAlignList"  oncommand="SelectCellHAlign()">
                    <menupopup>
                      <menuitem value="&AlignLeft.label;"        data="left"/>
                      <menuitem value="&AlignCenter.label;"      data="center"/>
                      <menuitem value="&AlignRight.label;"       data="right"/>
                      <menuitem value="&cellAlignJustify.label;" data="justify"/>
                      <menuitem value="&cellAlignAtChar.label;"  data="char"/>
                    </menupopup>
                  </menulist>
                  <textfield id="CellAlignCharInput" style="width: 2em"/>
                </row>
                <spring class="bigspacer"/>
                <row valign="middle" autostretch="never">
                  <checkbox id="CellVAlignCheckbox" value="&cellVertical.label;"/>
                  <menulist id="CellVAlignList" oncommand="SetCheckbox('CellVAlignCheckbox');">
                    <menupopup>
                      <menuitem value="&cellAlignTop.label;"    data="top"/>
                      <menuitem value="&cellAlignMiddle.label;" data="middle"/>
                      <menuitem value="&cellAlignBottom.label;" data="bottom"/>
                    </menupopup>
                  </menulist>
                  <spring/>
                </row>
              </rows>
            </grid>
          </titledbox>
          <spring class="spacer"/>
          <box orient="vertical">
            <checkbox id="CellStyleCheckbox" value="&cellStyle.label;"/>
            <menulist id="CellStyleList" oncommand="SetCheckbox('CellStyleCheckbox');">
              <menupopup>
                <menuitem value="&cellNormal.label;" data="td"/>
                <menuitem value="&cellHeader.label;" data="th"/>
              </menupopup>
            </menulist>
            <spring class="spacer"/>
            <checkbox id="TextWrapCheckbox" value="&cellTextWrap.label;"/>
            <menulist id="TextWrapList" oncommand="SetCheckbox('TextWrapCheckbox');">
              <menupopup>
                <menuitem value="&cellWrap.label;" data="wrap"/>
                <menuitem value="&cellNoWrap.label;" data="nowrap"/>
              </menupopup>
            </menulist>
          </box>
        </box><!-- Alignment and Style -->
        <titledbox orient="vertical"><title><text align="left" value="&background.label;"/></title>
        <grid>
          <columns><column/><column/></columns>
          <rows>
            <row valign="middle" autostretch="never">
              <checkbox id="CellColorCheckbox" value="&color.label;"/>
              <box valign="middle">
                <menu class="colorpicker">
    	            <box>
                    <spring id="cellBackgroundCW" class="color-well"/>
                    <image class="popup-trigger"/>
                  </box>
    	            <menupopup>
                    <colorpicker id="cellBackgroundCP" palettename="standard"
                        onclick="GetColorAndUpdate('cellBackgroundCP','cellBackgroundCW', 'CellColorCheckbox', this.parentNode)"/>
                    <button class="dialog" value="&defaultColor.label;"
                        oncommand="GetColorAndUpdate('cellBackgroundCP','cellBackgroundCW', 'CellColorCheckbox', this.parentNode)"/>
    	            </menupopup>
                </menu>
                <spring class="spacer"/>
                <text class="label" id="CellInheritColor" value="&cellInheritColor.label;" collapsed="true"/>
              </box>
            </row>
            <row valign="middle" autostretch="never">
              <checkbox id="CellImageCheckbox" value="&image.label;" />
              <textfield id="CellImageInput" flex="1"/>
              <button class="dialog" value="&ChooseImage.label;" id="CellImageButton" oncommand="ChooseCellImage()"/>
            </row>
          </rows>
        </grid>
        </titledbox><!-- Table Background -->
        <spring class="spacer"/>
        <box autostretch="never">
          <html  class="wrap" flex="1" style="width: 1em">&cellUseCheckboxHelp.label;</html>
          <!-- From EdDialogOvlerlay.xul -->
          <button class="dialog" id="AdvancedEditButton2"/>
        </box>
      </box><!-- Cell Panel -->

    </tabpanel> 
    <spring class="spacer"/>
    <!-- from EdDialogOverlay -->
    <box>
      <spring flex="1"/>
	    <button class="dialog" value="Apply" oncommand="Apply();"/>
      <box id="okCancelButtons"/> 
    </box>
  </tabcontrol>
</window>
