<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> 
<?xml-stylesheet href="chrome://editordlgs/skin/EditorDialog.css" type="text/css"?>
<!DOCTYPE window>

<!-- dialog containing a control requiring initial setup -->
<xul:window width="380" height="405" title="Image Properties"
    xmlns:xul ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns="http://www.w3.org/TR/REC-html40"
    onload = "Startup()">

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

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

  <table>
    <tr>
      <td colspan="2">
        <fieldset><legend align="left">Image Information </legend>
          <p class="smallmargin">Enter a remote URL or local file: </p>
          <input type="text" size="20" length="20" id="image.srcInput" onchange="OnChangeSrc()"/>
          <button class="ChooseFile" id="ChooseFile" onclick="chooseFile()">Choose File...</button>
          <br/>
          <p class="smallmargin">Alternative Text</p>
          <input type="text" size="30" id="image.altTextInput" />
        </fieldset>
      </td>
      <td/>
    </tr>
    <tr>
      <td>
        <button class="spaced" id="AdvancedButton" onclick="onAdvanced()" width="50">Advanced</button>  
      </td>
      <td/>
    </tr>
    <tr id="AdvancedRow">
      <td height="60">
        <fieldset><legend align="left">Dimensions </legend>
          <select id="WidthUnits" size="1"  onchange="SelectWidthUnits()">
            <option>pixels</option>
            <option>percent</option>
          </select>
        </fieldset>
      </td>
      <td height="60">
        <fieldset><legend align="left">Spacing </legend>
          Put spacing controls here<br/>
          <button>Button</button>  
          <input type="radio">Radio button</input>
          <input type="Checkbox">Checkbox</input>
        </fieldset>
      </td>
    </tr>
    <tr>
    <td colspan="2" align = "right">
      <button class="spaced" id="OK" onclick="onOK()" width="50">OK</button>  
      <button class="spaced" id="Cancel" onclick="onCancel()" width="50">Cancel</button>
    </td>
    <td/>
  </tr>
</table>
</xul:window>

<!-- The old stuff:
  <table>
    <tr>
      <td>
        <fieldset><legend align="left">Image Location and Name </legend>
          <input type="file" value=" Choose File... " size="50" length="50" maxlength="255" name="image.url" />
          <br/>
            <xul:checkbox value="1"/>
            Leave Image at Original Location

            <xul:checkbox value="1"/>
            Page Background

            <input type="button" value=" Edit Image "/>
          <br/>
            Alternative Text
            <input type="text" size="30" length="30" maxlength="255" name="image.alttext" />
        </fieldset>

        <table cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td width="55%" valign="top">
              <fieldset><legend align="left"> Dimensions </legend>
                  <xul:radio name="image.dimensionType" value="Original Size" checked />
                  Original Size
                  <br/>
                  <xul:radio name="image.dimensionType" value="Custom Size" />
                  Custom Size

                <table>
                  <tr>
                    <td width="8"></td>
                    <td width="40" valign="middle" align="right">
                      <p>Height</p>
                    </td>
                    <td>
                      <input type="text" size="4" length="4" maxlength="4" name="image.height" />
                      <select size="1" name="image.heightType">
                        <optgroup label="pixels">
                          <option label="pixels" value="pixels">pixels</option>
                          <option label="% of window" value="% of window">% of window</option>
                        </optgroup>
                      </select>
                    </td>
                  </tr>
                  <tr>
                  <td/>
                  <td valign="middle" align="right">
                    <p>Width</p>
                  </td>
                  <td>
                    <input type="text" size="4" length="4" maxlength="4" name="image.width" />
                    <select size="1" name="image.widthType">
                      <optgroup label="pixels">
                        <option label="pixels" value="pixels">pixels</option>
                        <option label="% of window" value="% of window">% of window</option>
                      </optgroup>
                    </select>
                  </td>
                  </tr>

                  <tr>
                    <td>
                      <p>
                        <xul:checkbox value="Constrain" disabled />
                        Constrain
                      </p>
                    </td>
                  </tr>
                </table>
              </fieldset>

            </td>

            <td width="45%">
              <select size="1" name="image.alignType">
                <optgroup label="alignment">
                  <option label="top alignment" value="top alignment">top alignment</option>
                  <option label="center alignment" value="center alignment">center alignment</option>
                  <option label="bottom alignment" value="bottom alignment">bottom alignment</option>
                  <option label="text wrap around left-aligned image" value="around left alignment">around left alignment</option>
                  <option label="text wrap around right-aligned image" value="around right alignment">around right alignment</option>
                </optgroup>
              </select>

              <p/>

              <fieldset><legend align="left"> Space Around Image </legend>
                <table cellspacing="0" cellpadding="2" width="100%">
                  <tr valign="middle">
                    <td align="right">
                      <p>Left and Right</p>
                    </td>
                    <td>
                      <input type="text" size="4" length="4" maxlength="4" name="image.leftRightSpacing" />
                    </td>
                    <td>
                      <p>pixels</p>
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <p>Top and Bottom</p>
                    </td>
                    <td>
                      <input type="text" size="4" length="4" maxlength="4" name="image.topBottomSpacing" />
                    </td>
                    <td>
                      <p>pixels</p>
                    </td>
                  </tr>

                  <tr>
                    <td align="right">
                      <p>Solid Border</p>
                    </td>
                    <td>
                      <input type="text" size="4" length="4" maxlength="4" name="image.borderWidth" />
                    </td>
                    <td>
                      <p>pixels</p>
                    </td>
                  </tr>
                </table>
              </fieldset>

            </td>
          </tr>

          <tr>
            <td>
              <input type="button" value=" Remove Image Map " disabled />
            </td>
            <td align="right">
              <input type="button"value=" Extra HTML... " disabled />
            </td>
          </tr>
        </table>

        <input type="button" id="helpbutton" value=" Help " disabled />
        <input type="submit" id="cancelbutton" value=" Cancel " />
        <input type="button" id="applybutton" value=" Apply " disabled />
        <input type="submit" id="okbutton" value=" OK " />
      </td>
    </tr>
  </table>
-->

