<?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): 
   -   Pete Collins
   -   Brian King
  -->

<?xml-stylesheet href="chrome://editor/skin/" 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/EditorImageProperties.dtd">


<!-- dialog containing a control requiring initial setup -->
<xul:window class="dialog" title="&windowTitle.label;"
    xmlns:xul ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns="http://www.w3.org/TR/REC-html40"
    onload = "Startup()"
    align="vertical">
  
  <script language="JavaScript" src="chrome://editor/content/EdDialogCommon.js"/>
  <script language="JavaScript" src="chrome://editor/content/EdImageProps.js"/>
  <script language="JavaScript" src="chrome://global/content/dialogOverlay.js"/>

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

<fieldset>
  <legend
    class = "dialog"
    align = "left">
    &locationFieldset.label;
  </legend>
  <table>

    <!--/////// Src URL and ALT Text //////-->
    <tr>
      <td align="right">  
        <label 
          class = "dialog"
          for   = "srcInput">
          &locationEditField.label;
        </label>
      </td> 
      <td>  
        <input 
          type       = "text" 
          id         = "srcInput" 
          size       = "30" 
          onkeyup    = "doOverallEnabling()"
          onmouseup  = "doOverallEnabling()"
          onchange   = "doOverallEnabling()" />
      </td>  
      <td>  
        <!-- from EdDialogOverlay.xul -->
        <xul:titledbutton id="ChooseFile"/>
      </td>  
    </tr>  
    <tr>  
      <td>  
        <label
          class = "dialog"
          id    = "altTextLabel" 
          for   = "altTextInput"> 
          &altTextEditField.label;
        </label>
      </td> 
      <td>
        <input 
          type     ="text"
          id       ="altTextInput"
          size     ="30" 
          onchange = "doOverallEnabling()"/>
      </td>
      <td/> 
    </tr>  
  </table>  
</fieldset>

<xul:box align="horizontal">
  <xul:titledbutton 
    class   = "push dialog" 
    id      = "MoreFewerButton" 
    align   = "left" 
    onclick = "onMoreFewer()" 
    persist = "more"/>
  <xul:spring flex="100%"/>
  <!-- From EdDialogOverlay.xul -->
  <xul:titledbutton id="AdvancedEditButton2"/>
</xul:box>
<!-- Area that shows and hides via MoreFewerButton --> 
<!-- xul:box id="MoreSection" align="horizontal" -->
<xul:box id="MoreSection" align="vertical" flex="100%">
  <xul:box align="horizontal" flex="100%">
    <!-- //////// Image Dimensions //////// -->
    <fieldset flex="100%">
      <legend 
        class="dialog"
        id="dimensionsLabel">
        &dimensionsFieldset.label; 
      </legend>
      <!-- THIS NEEDS TO BE onchange RATHER THAN onclick -->
      <input 
        type    = "radio" 
        name    = "dimensionType" 
        id      = "originalsizeRadio" 
        onclick = "doDimensionEnabling( false );"/>
                  <!-- onclick was: "doOverallEnabling();" -->
      <label 
        class   = "dialog" 
        id      = "originalsizeLabel"
        for     = "originalsizeRadio"> 
        &originalSizeRadio.label;
      </label>
      <br/>
      <!-- THIS NEEDS TO BE onchange RATHER THAN onclick -->
      <input 
        type    ="radio" 
        name    = "dimensionType" 
        id      = "customsizeRadio" 
        onclick = "doDimensionEnabling( true );" />
      <label 
        class   = "dialog" 
        id      = "customsizeLabel"
        for     = "customsizeRadio"> 
        &customSizeRadio.label;
      </label>

      <table>
        <!--//////  IMAGE WIDTH  //////-->
        <tr>
          <td>
            <label 
              class = "dialog"
              id    = "widthLabel"
              for   = "widthInput">
              &widthEditField.label;
            </label>
          </td>
          <td>
            <input 
              type     = "text" 
              id       = "widthInput" 
              size     = "4" 
              length   = "4"
              onfocus  = "oldSourceInt = this.value;"
              onkeyup  = "constrainProportions(this.id, 'heightInput')" 
              onchange = "doOverallEnabling()" />
          </td>
          <td>
            <select 
              id      = "widthUnitsSelect" 
              size    = "1"
              onclick = "doOverallEnabling()"/>
            <!-- option elements are appended by JS -->
          </td>
        </tr>

        <!--////// IMAGE HEIGHT //////-->
        <tr>
          <td>
            <label 
              class  = "dialog"
              id     = "heightLabel"
              for    = "heightInput">
              &heightEditField.label;
            </label>
          </td>
          <td>
            <input 
              type     = "text" 
              size     = "4" 
              length   = "4" 
              id       = "heightInput" 
              onfocus  = "oldSourceInt = this.value;"
              onkeyup  = "constrainProportions(this.id, 'widthInput')"
              onchange = "doOverallEnabling()" />
          </td>
          <td>
            <select 
              id      = "heightUnitsSelect" 
              size    = "1" 
              onclick = "doOverallEnabling()"/>
              <!-- option elements are appended by JS -->
          </td>
        </tr>
      </table>

      <!--////// CONSTRAIN DIMENSIONS //////-->
      <input type="checkbox" id="constrainCheckbox"/>
      <label 
        class = "dialog" 
        id    = "constrainLabel" 
        for   = "constrainCheckbox">
        &constrainCheckbox.label;
      </label>
    </fieldset>
    <!-- End of Bottom Left Region -->
    <xul:box align="vertical" flex="100%">
      <!-- Bottom Right Region -->
      <!--//////// Alignment ////////-->
      <fieldset flex="100%">
        <legend
          class = "dialog" 
          id    = "alignLabel"
          for   = "alignTypeSelect">
          &alignment.label;
        </legend>
        <!-- BUG: Select contents can be nothing but text! -->
        <select
          id   = "alignTypeSelect" 
          size = "1">
          <option>
            &topPopup.value;
          </option>
          <option>
            &centerPopup.value;
          </option>
          <option>
            &bottomPopup.value;
          </option>
          <option>
            &wrapLeftPopup.value;
          </option>
          <option>
            &wrapRightPopup.value;
          </option>
  <!--
  Use this when option content bug is fixed:
          <option>
            <titledbutton id="img-align-top" value="&topPopup.value;" align="left"/>
          </option>
          <option>
            <titledbutton id="img-align-center" value="&centerPopup.value;" align="left"/>
          </option>
          <option>
            <titledbutton id="img-align-bottom" value="&bottomPopup.value;" align="left"/>
          </option>
          <option>
            <titledbutton id="img-align-left" value="&wrapLeftPopup.value;" align="left"/>
          </option>
          <option>
            <titledbutton id="img-align-right" value="&wrapRightPopup.value;" align="left"/>
          </option>
  -->
        </select>
      </fieldset>
  <!--
        <xul:titledbutton 
          id          = "alignTypeSelect" 
          src         = "resource:/chrome/editor/skin/default/images/img-align-bottom.gif" 
          class       = "push dialog popup" 
          popup       = "ImageTextAlignment" 
          popupanchor = "bottomleft" 
          align       = "left"
          onchange    = "doOverallEnabling()" />
  -->
      <!--//////// Borders and Spacing ////////-->
      <fieldset flex="100%">
        <legend
          class = "dialog"
          id    = "spacingLabel"
          align = "left"> 
          &spacingFieldset.label; 
        </legend>
        <table>
          <tr>
            <td align="right">
              <label 
                class = "dialog" 
                id    = "leftrightLabel"
                for   = "imageleftrightInput">
                &leftRightEditField.label;
              </label>
            </td>
            <td>
              <input 
                type      = "text" 
                id        = "imageleftrightInput" 
                size      = "4" 
                length    = "4" 
                maxlength = "4" 
                onkeyup   = "forceInteger(this.id)" 
                onchange  = "doOverallEnabling()"/>
            </td>
            <td>
              <label 
                class = "dialog" 
                id    = "leftrighttypeLabel"
                for   = "imageleftrightInput">
                &pixelsPopup.value;
              </label>
            </td>
          </tr>
          <tr>
            <td align="right">
              <label 
                class = "dialog" 
                id    = "topbottomLabel"
                for   = "imagetopbottomInput">
                &topBottomEditField.label;
              </label>
            </td>
            <td>
              <input 
                type      = "text" 
                id        = "imagetopbottomInput" 
                size      = "4" 
                length    = "4" 
                maxlength = "4" 
                onkeyup   = "forceInteger(this.id)"
                onchange  = "doOverallEnabling()"/>
            </td>
            <td>
              <label 
                class = "dialog" 
                id    = "topbottomtypeLabel"
                for   = "imagetopbottomInput">
                &pixelsPopup.value;
              </label>
            </td>
          </tr>
          <tr>
            <td align="right">
              <label 
                class = "dialog" 
                id    = "borderLabel"
                for   = "border">
                &borderEditField.label;
              </label>
            </td>
            <td>
              <input 
                type      ="text" 
                id        = "border" 
                size      = "4" 
                length    = "4" 
                maxlength = "4"
                onkeyup   = "forceInteger(this.id)"
                onchange  = "doOverallEnabling()" />
            </td>
            <td valign="middle">
              <label 
                class = "dialog"
                id    = "bordertypeLabel"
                for   = "border">
                &pixelsPopup.value;
              </label>
            </td>
          </tr>
        </table>
      </fieldset>
    </xul:box> <!-- Bottom Right region -->
  </xul:box> <!-- The horizontal box -->
  
  <!-- buttons along bottom -->
  <xul:box align="horizontal">
<!-- USE THIS FOR IMAGE MAP BUTTONS
    <xul:titledbutton
      class   = "push dialog"
      id      = "editImageMap"
      onclick = "editImageMap()"
      value   = "&editImageMapButton.label;"/>
    <xul:titledbutton
      class   = "push dialog"
      id      = "removeImageMap"
      onclick = "removeImageMap()"
      value   = "&removeImageMapButton.label;"/>
-->
    <xul:spring flex="100%"/>
    <!-- From EdDialogOverlay -->
    <xul:titledbutton id="AdvancedEditButton3"/>
  </xul:box>
</xul:box> <!-- END OF MORE/FEWER SECTION -->
<div class="separator" align="horizontal"/>

<!-- from global dialogOverlay -->
<xul:box id="okCancelButtons"/> 

</xul:window>
