<?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-2000 Netscape Communications Corporation. All
   - Rights Reserved.
   - 
   - Contributor(s): 
   -   Pete Collins
   -   Brian King
  -->

<?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"?> 
<?xul-overlay href="chrome://global/content/globalOverlay.xul"?>
<?xul-overlay href="chrome://communicator/content/utilityOverlay.xul"?> 

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


<!-- dialog containing a control requiring initial setup -->
<window class="dialog" title="&windowTitle.label;"
    xmlns ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:html="http://www.w3.org/TR/REC-html40"
    onload = "Startup()"
    orient="vertical"
    id="imagedialog"
    persist="screenX screenY"
    >
  
  <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"/>
  <script language="JavaScript" src="chrome://global/content/globalOverlay.js"/>

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

  <titledbox orient="vertical">
    <title><text value="&locationBox.label;"/></title>
    <!--/////// Src URL and ALT Text //////-->
    <grid>
      <columns><column/><column/><column/></columns>
      <rows>
        <row>
          <text class = "label" 
            for   = "srcInput"
            value = "&locationEditField.label;"
            tooltip="aTooltip" tooltiptext="&locationEditField.tooltip;"
            align = "right" />
          <textfield 
            id         = "srcInput" 
            class      = "MinWidth20em"
            onkeyup    = "doOverallEnabling()"
            onmouseup  = "doOverallEnabling()"
            onchange   = "doOverallEnabling()" />
          <!-- from EdDialogOverlay.xul -->
          <button id="ChooseFile" tooltip="aTooltip" tooltiptext="&ChooseFile.tooltip;"/>
        </row>
        <row>
          <text class = "label"
            id    = "altTextLabel" 
            for   = "altTextInput"
            tooltip="aTooltip" tooltiptext="&altTextEditField.tooltip;"
            value = "&altTextEditField.label;" />
          <textfield
            id       ="altTextInput"
            class    = "MinWidth20em"
            onchange = "doOverallEnabling()"/>
          <spring/> <!-- placeholder for 3rd column -->
        </row>
      </rows>
    </grid>
  </titledbox>
  <box> 
    <button 
      class   = "dialog" 
      id      = "MoreFewerButton" 
      align   = "left" 
      oncommand = "onMoreFewerImage()" 
      tooltip = "aTooltip" tooltiptext = "&MoreFewerButton.tooltip;"
      persist = "more"/>
    <spring flex="1"/>
    <!-- From EdDialogOverlay.xul -->
    <button id="AdvancedEditButton" tooltip="aTooltip" tooltiptext="&AdvancedEditButton.tooltip;"/>
  </box>

  <!-- Area that shows and hides via MoreFewerButton --> 
  <box id="MoreSection" orient="vertical" flex="1">
    <box flex="1">
      <box orient="vertical">
        <!-- //////// Image Dimensions //////// -->
        <titledbox orient="vertical" flex="1">
          <title><text id="dimensionsLabel" value="&dimensionsBox.label;"/></title>
          <radiogroup id="imgSizeGroup" orient="vertical">
            <radio
              group   = "imgSizeGroup"
              id      = "originalsizeRadio" 
              value   = "&originalSizeRadio.label;"
              tooltip = "aTooltip" tooltiptext="&originalSizeRadio.tooltip;"
              oncommand = "doDimensionEnabling( true );"/>
            <radio
              group   = "imgSizeGroup"
              id      = "customsizeRadio" 
              value   = "&customSizeRadio.label;"
              tooltip = "aTooltip" tooltiptext="&customSizeRadio.tooltip;"
              oncommand = "doDimensionEnabling( true );" />
          </radiogroup>
          <spring class="spacer"/>
          <grid class="big-left-margin">
            <columns><column/><column/><column/></columns>
            <rows>
              <!--//////  IMAGE WIDTH  //////-->
              <row valign="baseline" autostretch="never">
                <text class = "label" 
                  id    = "widthLabel"
                  for   = "widthInput"
                  tooltip="aTooltip" tooltiptext="&widthEditField.tooltip;"
                  value = "&widthEditField.label;" />
                <textfield
                  id       = "widthInput" 
                  class    = "narrow"
                  onfocus  = "oldSourceInt = this.value;"
                  onkeyup  = "constrainProportions(this.id, 'heightInput')" 
                  onchange = "doOverallEnabling()" />
                <menulist id = "widthUnitsMenulist" oncommand = "doOverallEnabling()"/>
                <!-- contents are appended by JS -->
              </row>
              <!--////// IMAGE HEIGHT //////-->
              <row valign="baseline" autostretch="never">
                <text class = "label" 
                  id    = "heightLabel"
                  for   = "heightInput"
                  tooltip="aTooltip" tooltiptext="&heightEditField.tooltip;"
                  value = "&heightEditField.label;" />
                <textfield 
                  id       = "heightInput" 
                  class    = "narrow"
                  onfocus  = "oldSourceInt = this.value;"
                  onkeyup  = "constrainProportions(this.id, 'widthInput')"
                  onchange = "doOverallEnabling()" />
                <menulist id = "heightUnitsMenulist" oncommand = "doOverallEnabling()"/>
                <!-- contents are appended by JS -->
              </row>
            </rows>          
          </grid>
          <!--////// CONSTRAIN DIMENSIONS //////-->
          <checkbox id="constrainCheckbox" value="&constrainCheckbox.label;"
               tooltip="aTooltip" tooltiptext="&constrainCheckbox.tooltip;"/>
        </titledbox>
        <!--////// IMAGE MAP BUTTONS //////-->
        <titledbox flex="1">
          <title><text id="imagemapLabel" value="&imagemapBox.label;"/></title>
          <box>
            <button
              class   = "dialog"
              id      = "editImageMap"
              oncommand = "editImageMap()"
              tooltip = "aTooltip" tooltiptext="&editImageMapButton.tooltip;"
              value   = "&editImageMapButton.label;"/>
            <button
              class   = "dialog"
              id      = "removeImageMap"
              oncommand = "removeImageMap()"
              tooltip = "aTooltip" tooltiptext="&removeImageMapButton.tooltip;"
              value   = "&removeImageMapButton.label;"/>
          </box>
        </titledbox>
      </box> <!-- vert. box on bottom left side -->

      <!-- Bottom Right Region -->
      <box orient="vertical" flex="1">
        <!--//////// Alignment ////////-->
        <titledbox flex="1" orient="vertical">
          <title><text class="label" id="alignLabel" value="&alignment.label;"/></title>
          <menulist id = "alignTypeSelect" onchange ="doOverallEnabling()">
            <menupopup valign="middle">
              <menuitem class="middle"><image id="img-align-top"/>   <text class="label" value = "&topPopup.value;"/></menuitem>
              <menuitem class="middle"><image id="img-align-middle"/><text class="label" value = "&centerPopup.value;"/></menuitem>
              <menuitem class="middle"><image id="img-align-bottom"/><text class="label" value = "&bottomPopup.value;"/></menuitem>
              <menuitem class="middle"><image id="img-align-left"/>  <text class="label" value = "&wrapLeftPopup.value;"/></menuitem>
              <menuitem class="middle"><image id="img-align-right"/> <text class="label" value = "&wrapRightPopup.value;"/></menuitem>
            </menupopup>
          </menulist>
        </titledbox>

        <!--//////// Borders and Spacing ////////-->
        <titledbox flex="1">
          <title><text id="spacingLabel" value="&spacingBox.label;"/></title>
          <grid>
            <columns><column/><column/><column/></columns>
            <rows>
              <row valign="baseline" autostretch="never">
                <text 
                  class = "label align-right" 
                  id    = "leftrightLabel"
                  tooltip="aTooltip" tooltiptext="&leftRightEditField.tooltip;"
                  value = "&leftRightEditField.label;"/>
                <textfield 
                  class     = "narrow"
                  id        = "imageleftrightInput" 
                  onkeyup   = "forceInteger(this.id)" 
                  onchange  = "doOverallEnabling()"/>
                <text 
                  class = "label" 
                  id    = "leftrighttypeLabel"
                  value = "&pixelsPopup.value;" />
              </row>
              <row valign="baseline" autostretch="never">
                <text 
                  class = "label align-right" 
                  id    = "topbottomLabel"
                  tooltip="aTooltip" tooltiptext="&topBottomEditField.tooltip;"
                  value = "&topBottomEditField.label;"/>
                <textfield 
                  class     = "narrow"
                  id        = "imagetopbottomInput" 
                  onkeyup   = "forceInteger(this.id)"
                  onchange  = "doOverallEnabling()"/>
                <text
                  class = "label" 
                  id    = "topbottomtypeLabel"
                  value = "&pixelsPopup.value;" />
              </row>
              <row valign="baseline" autostretch="never">
                <text class = "label align-right" 
                  id    = "borderLabel"
                  tooltip="aTooltip" tooltiptext="&borderEditField.tooltip;"
                  value = "&borderEditField.label;"/>
                <textfield
                  class     = "narrow"
                  id        = "border" 
                  onkeyup   = "forceInteger(this.id)"
                  onchange  = "doOverallEnabling()" />
                <text 
                  class = "label" 
                  id    = "bordertypeLabel"
                  value = "&pixelsPopup.value;" />
              </row>
            </rows>
          </grid>
        </titledbox>
      </box> <!-- Bottom Right region -->
    </box> <!-- The horizontal box -->
  
    <!-- buttons along bottom -->
    <box>
      <spring flex="1"/>
      <!-- From EdDialogOverlay -->
      <button id="AdvancedEditButton2" tooltip="aTooltip" tooltiptext="&AdvancedEditButton2.tooltip;"/>
    </box>
  </box> <!-- END OF MORE/FEWER SECTION -->
  <separator class="groove"/>
  <!-- from global dialogOverlay -->
  <box id="okCancelButtons"/> 

</window>
