<?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/1999/xhtml"
    onload = "Startup()"
    orient="vertical"
    id="imagedialog"
    >
  
  <script type="application/x-javascript" src="chrome://editor/content/EdDialogCommon.js"/>
  <script type="application/x-javascript" src="chrome://editor/content/EdImageProps.js"/>
  <script type="application/x-javascript" src="chrome://global/content/dialogOverlay.js"/>
  <script type="application/x-javascript" src="chrome://global/content/globalOverlay.js"/>
  <script type="application/x-javascript" src="chrome://help/content/help.js"/>

  <spring id="location" offsetY="50" persist="offsetX offsetY"/>
  <broadcaster id="args" value=""/>
  <keyset id="dialogKeys"/>
  <popupset id="aTooltipSet" />

  <groupbox orient="vertical">
    <label value="&locationBox.label;"/>
    <!--/////// Src URL and ALT Text //////-->
    <grid>
      <columns><column/><column/><column flex="1"/></columns>
      <rows>
        <row align="center">
          <text class = "label" 
            for   = "srcInput"
            value = "&locationEditField.label;"
            tooltip="aTooltip" tooltiptext="&locationEditField.tooltip;"
            />
          <textbox
            id         = "srcInput" 
            oninput    = "ChangeImageSrc()"
            style      = "min-width : 20em"/>
          <!-- from EdDialogOverlay.xul -->
          <button id="ChooseFile"/>
        </row>
        <row align="center">
          <text class = "label"
            id      = "altTextLabel" 
            for     = "altTextInput"
            tooltip = "aTooltip" tooltiptext="&altTextEditField.tooltip;"
            value   = "&altTextEditField.label;" />
          <textbox
            id     ="altTextInput"
            style  = "min-width : 20em"/>
          <spring/> <!-- placeholder for 3rd column -->
        </row>
      </rows>
    </grid>
    <spring class="spacer"/>
  </groupbox>
  <spring class="spacer"/>
  <hbox align="center"> 
    <button 
      class   = "dialog" 
      id      = "MoreFewerButton" 
      oncommand = "onMoreFewer()" 
      tooltip = "aTooltip" tooltiptext = "&MoreFewerButton.tooltip;"
      persist = "more"/>
    <spring class="spacer"/>
    <groupbox style="padding: 4px">
      <hbox id="preview-image-box" align="center">
        <spring flex="1"/>
        <html id="preview-image-holder"/>
        <spring flex="1"/>
      </hbox>
      <vbox id="PreviewSize" collapsed="true">
        <spring flex="1"/>
        <text class="label" value="&actualSize.label;"/>
        <hbox>
          <text class="label" value="&widthEditField.label;"/>
          <spring flex="1"/>
          <text id="PreviewWidth" class="label"/>
        </hbox>
        <hbox>
          <text class="label" value="&heightEditField.label;"/>
          <spring flex="1"/>
          <text id="PreviewHeight" class="label"/>
        </hbox>
        <spring flex="1"/>
      </vbox>
    </groupbox>
    <spring flex="1"/>
    <!-- From EdDialogOverlay.xul -->
    <button id="AdvancedEditButton"/>
  </hbox>
  <spring class="spacer"/>
  <!-- Area that shows and hides via MoreFewerButton --> 
  <vbox id="MoreSection" flex="1">
    <hbox>
      <vbox>
        <!-- //////// Image Dimensions //////// -->
        <groupbox orient="vertical" flex="1">
          <label id="dimensionsLabel" value="&dimensionsBox.label;"/>
          <hbox>
            <radiogroup id="imgSizeGroup" orient="vertical">
              <radio
                group   = "imgSizeGroup"
                id      = "actualSizeRadio" 
                label   = "&actualSizeRadio.label;"
                tooltip = "aTooltip" tooltiptext="&actualSizeRadio.tooltip;"
                oncommand = "SetActualSize()"/>
              <radio
                group   = "imgSizeGroup"
                id      = "customSizeRadio" 
                label   = "&customSizeRadio.label;"
                tooltip = "aTooltip" tooltiptext="&customSizeRadio.tooltip;"
                oncommand = "doDimensionEnabling();" />
            </radiogroup>
            <spring flex="1"/>
            <vbox>
              <spring flex="1"/>
              <!--////// CONSTRAIN DIMENSIONS //////-->
              <checkbox id="constrainCheckbox" label="&constrainCheckbox.label;"
                   oncommand="ToggleConstrain()"
                   tooltip="aTooltip" tooltiptext="&constrainCheckbox.tooltip;"/>
            </vbox>
            <spring flex="1"/>
          </hbox>
          <spring class="spacer"/>
          <grid class="big-left-margin">
            <columns><column/><column/><column flex="1"/></columns>
            <rows>
              <!--//////  IMAGE WIDTH  //////-->
              <row align="center">
                <text class = "label" 
                  id    = "widthLabel"
                  for   = "widthInput"
                  value = "&widthEditField.label;" />
                <textbox
                  id       = "widthInput" 
                  class    = "narrow"
                  oninput  = "constrainProportions(this.id, 'heightInput')"/>
                <menulist id = "widthUnitsMenulist"
                  oncommand = "doDimensionEnabling();" />
                <!-- contents are appended by JS -->
              </row>
              <!--////// IMAGE HEIGHT //////-->
              <row align="center">
                <text class = "label" 
                  id    = "heightLabel"
                  for   = "heightInput"
                  value = "&heightEditField.label;" />
                <textbox
                  id       = "heightInput" 
                  class    = "narrow"
                  oninput  = "constrainProportions(this.id, 'widthInput')"/>
                <menulist id = "heightUnitsMenulist"
                  oncommand = "doDimensionEnabling();" />
                <!-- contents are appended by JS -->
              </row>
            </rows>          
          </grid>
          <spring flex="1"/>
        </groupbox>
        <!--////// IMAGE MAP BUTTONS //////-->
        <groupbox orient="vertical" flex="1">
           <label id="imagemapLabel" value="&imagemapBox.label;"/>
           <hbox flex="1" equalsize="always">

<!-- Hide Image Map Editor. Not ready for prime time yet
            <button
              class   = "dialog"
              id      = "editImageMap"
              oncommand = "editImageMap()"
              tooltip = "aTooltip" tooltiptext="&editImageMapButton.tooltip;"
              label   = "&editImageMapButton.label;"
              flex    = "1"/>
-->
            <button
              class   = "dialog"
              id      = "removeImageMap"
              oncommand = "removeImageMap()"
              label   = "&removeImageMapButton.label;"
              flex    = "1"/>
            <spring flex="1"/><!-- remove when we restore Image Map Editor -->
            </hbox>
          <spring class="spacer"/>
        </groupbox>
      </vbox> <!-- vert. box on bottom left side -->

      <!-- Bottom Right Region -->
      <vbox flex="1">
        <!--//////// Alignment ////////-->
        <groupbox flex="1" orient="vertical">
          <label id="alignLabel" value="&alignment.label;"/>
          <spring class="spacer"/>
          <menulist id="alignTypeSelect" class="align-menu">
            <menupopup>
              <menuitem class="align-menu" value="top" label="&topPopup.value;"/>
              <menuitem class="align-menu" value="center" label="&centerPopup.value;"/>
              <menuitem class="align-menu" value="bottom" label="&bottomPopup.value;"/>
              <!-- HTML attribute value is opposite of the button label on purpose -->
              <menuitem class="align-menu" value="right" label="&wrapLeftPopup.value;"/>
              <menuitem class="align-menu" value="left"  label="&wrapRightPopup.value;"/>
            </menupopup>
          </menulist>
        </groupbox>

        <!--//////// Borders and Spacing ////////-->
        <groupbox flex="1">
          <label id="spacingLabel" value="&spacingBox.label;"/>
          <grid>
            <columns><column/><column/><column/></columns>
            <rows>
              <row align="center">
                <text 
                  class = "label align-right" 
                  id    = "leftrightLabel"
                  value = "&leftRightEditField.label;"/>
                <textbox
                  class     = "narrow"
                  id        = "imageleftrightInput" 
                  oninput   = "forceInteger(this.id)"/>
                <text 
                  class = "label" 
                  id    = "leftrighttypeLabel"
                  value = "&pixelsPopup.value;" />
              </row>
              <row align="center">
                <text 
                  class = "label align-right" 
                  id    = "topbottomLabel"
                  value = "&topBottomEditField.label;"/>
                <textbox
                  class     = "narrow"
                  id        = "imagetopbottomInput" 
                  oninput   = "forceInteger(this.id)"/>
                <text
                  class = "label" 
                  id    = "topbottomtypeLabel"
                  value = "&pixelsPopup.value;" />
              </row>
              <row align="center">
                <text class = "label align-right" 
                  id    = "borderLabel"
                  value = "&borderEditField.label;"/>
                <textbox
                  class     = "narrow"
                  id        = "border" 
                  oninput   = "forceInteger(this.id)"/>
                <text 
                  class = "label" 
                  id    = "bordertypeLabel"
                  value = "&pixelsPopup.value;" />
              </row>
            </rows>
          </grid>
        </groupbox>
      </vbox> <!-- Bottom Right region -->
    </hbox> <!-- The horizontal box -->
  
    <!-- buttons along bottom -->
    <spring class="spacer"/>
    <hbox>
      <spring flex="1"/>
      <!-- From EdDialogOverlay -->
      <button id="AdvancedEditButton2"/>
    </hbox>
  </vbox> <!-- END OF MORE/FEWER SECTION -->
  <separator class="groove"/>
  <!-- from global dialogOverlay -->
  <hbox id="okCancelHelpButtonsRight"/> 
</window>
