<?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 class="dialog" 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()"
    align="vertical">

  <!-- 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 id="imageInfo.fieldset" ><legend align="left"> Image Information </legend>
          <table>
            <tr>
              <td align="right" valign="middle">
                <label class="enabled"> Image URL </label>
              </td>
              <td valign="middle">
                <input type="text" size="30" length="30" id="image.srcInput" onkeypress="OnChangeSrc()" onchange="OnChangeSrc()"/>
                <button class="ChooseFile" id="ChooseFile" onclick="chooseFile()"> Choose File... </button>
              </td>
            </tr>
            
            <tr>
              <td align="right" valign="middle">
                <label class="enabled"> Alternative Text </label>
              </td>
              <td>
                <input type="text" size="30" id="image.altTextInput" onchange="doValueChanged()"/>
              </td>
            </tr>
          </table>
        </fieldset>
      </td>
      <td/>
    </tr>
    <tr>
      <td>
        <button class="spaced" id="AdvancedButton" onclick="onAdvanced()" width="50">Advanced</button>  
      </td>
      <td/>
    </tr>
    <tr id="AdvancedRow">
      <td>
        <fieldset id="imagedimensionsFieldset" ><legend align="left">Dimensions </legend>
          <table cellspacing="0" cellpadding="0">
            <tr>
              <td>
                    <!-- THIS NEEDS TO BE onchange RATHER THAN onclick -->
                <input type="radio" name="image.dimensionType" id="originalsizeRadio" onclick="doValueChanged()" checked="true" />
              </td>
              <td colspan="3">
                <label class="disabled" for="originalsizeRadio" id="originalsizeLabel" > Original Size </label>
              </td>
            </tr>
            <tr>
              <td>
                    <!-- THIS NEEDS TO BE onchange RATHER THAN onclick -->
                <input type="radio" name="image.dimensionType" id="customsizeRadio" onclick="doValueChanged()" />
              </td>
              <td colspan="3">
                <label class="disabled" for="customsizeRadio" id="customsizeLabel" > Custom Size </label>
              </td>
            </tr>
          
							<!-- IMAGE WIDTH -->
						<tr valign="middle">
						  <td/>
						  <td>
	              <label class="disabled" for="imagewidthInput" id="imagewidthLabel"> Width </label>
	            </td>
	            <td>
			          <input type="text" size="4" length="4" id="imagewidthInput" onchange="doValueChanged()" />
			        </td>
			        <td>
                <xul:titledbutton class="popup PixelOrPercent" id="widthunitSelect" value="pixels" 
                     align="left" popup="PixelOrPercentMenu1" onchange="doValueChanged()" />
	            </td>
	          </tr>
                    
							<!-- IMAGE HEIGHT -->
						<tr valign="middle">
						  <td/>
						  <td>
	              <label class="disabled" for="imageheightInput" id="imageheightLabel"> Height </label>
	            </td>
	            <td>
	              <input type="text" size="4" length="4" id="imageheightInput" onchange="doValueChanged()" />
			        </td>
			        <td>
                <xul:titledbutton class="popup PixelOrPercent" id="heightunitSelect" value="pixels" 
                     align="left" popup="PixelOrPercentMenu2" onchange="doValueChanged()" />
	            </td>
	          </tr>

							<!-- CONSTRAIN DIMENSIONS -->
						<tr valign="middle">
						  <td/>
						  <td colspan="3">
			          <input type="checkbox" id="constrainCheckbox"></input>
			          <label class="disabled" id="constrainLabel" for="constrainCheckbox"> Constrain </label>
	            </td>
	          </tr>
	        </table>

        </fieldset>
     </td>
      <td>
							<!-- IMAGE ALIGNMENT -->
        <label class="disabled" for="image.alignType" id="imagealignmentLabel"> Align Text to Image </label>
        <xul:titledbutton class="popup PixelOrPercent" id="image.alignType" value="at the bottom" align="left" 
             popup="ImageTextAlignment" onchange="doValueChanged()"/>

        <br/>
        <p/>
        <fieldset id="spacing.fieldset"><legend align="left">Spacing </legend>
          <table cellspacing="0" cellpadding="0">
            <tr valign="middle">
              <td align="right">
                <label class="disabled" for="imageleftrightInput" id="leftrightLabel"> Left and Right </label>
              </td>
              <td>
                <input type="text" size="4" length="4" maxlength="4" id="imageleftrightInput" onchange="doValueChanged()"/>
              </td>
              <td valign="middle">
                <label class="disabled" for="imageleftrightInput" id="leftrighttypeLabel"> pixels </label>
              </td>
            </tr>

            <tr valign="middle">
              <td align="right">
                <label class="disabled" for="imagetopbottomInput" id="topbottomLabel"> Top and Bottom </label>
              </td>
              <td>
                <input type="text" size="4" length="4" maxlength="4" id="imagetopbottomInput" onchange="doValueChanged()"/>
              </td>
              <td valign="middle">
                <label class="disabled" for="imagetopbottomInput" id="topbottomtypeLabel"> pixels </label>
              </td>
            </tr>

            <tr valign="middle">
              <td align="right">
                <label class="disabled" for="imageborderInput" id="borderLabel"> Solid Border </label>
              </td>
              <td>
                <input type="text" size="4" length="4" maxlength="4" id="imageborderInput" onchange="doValueChanged()" />
              </td>
              <td valign="middle">
                <label class="disabled" for="imageborderInput" id="bordertypeLabel"> pixels </label>
              </td>
            </tr>
          </table>
        </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:popup id="PixelOrPercentMenu1">
  <xul:menu>
    <xul:menuitem name="pixels" onclick="SetPixelOrPercentByID('widthunitSelect', '')"/>
    <xul:menuitem name="percent" onclick="SetPixelOrPercentByID('widthunitSelect', '%')"/>
  </xul:menu>
</xul:popup>

<xul:popup id="PixelOrPercentMenu2">
  <xul:menu>
    <xul:menuitem name="pixels" onclick="SetPixelOrPercentByID('heightunitSelect', '')"/>
    <xul:menuitem name="percent" onclick="SetPixelOrPercentByID('heightunitSelect', '%')"/>
  </xul:menu>
</xul:popup>

<xul:popup id="ImageTextAlignment">
  <xul:menu>
    <xul:menuitem name="at the top" onclick="SetImageAlignment('^')"/>
    <xul:menuitem name="in the center" onclick="SetImageAlignment('.')"/>
    <xul:menuitem name="at the bottom" onclick="SetImageAlignment('v')"/>
    <xul:menuitem name="wrap around right side" onclick="SetImageAlignment(']')"/>
    <xul:menuitem name="wrap around left side" onclick="SetImageAlignment('[')"/>
  </xul:menu>
</xul:popup>

</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>
              <input type="button" value=" Remove Image Map " disabled />
            </td>
            <td align="right">
              <input type="button"value=" Extra HTML... " disabled />
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>
-->

