<?xml version="1.0"?>

<!-- ***** BEGIN LICENSE BLOCK *****
   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
   -
   - The contents of this file are subject to the Mozilla 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/MPL/
   -
   - 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 Composer.
   -
   - The Initial Developer of the Original Code is
   - Disruptive Innovations SARL.
   - Portions created by the Initial Developer are Copyright (C) 2006
   - the Initial Developer. All Rights Reserved.
   -
   - Contributor(s):
   -   Daniel Glazman (daniel.glazman@disruptive-innovations.com), Original Author
   -
   - Alternatively, the contents of this file may be used under the terms of
   - either the GNU General Public License Version 2 or later (the "GPL"), or
   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
   - in which case the provisions of the GPL or the LGPL are applicable instead
   - of those above. If you wish to allow use of your version of this file only
   - under the terms of either the GPL or the LGPL, and not to allow others to
   - use your version of this file under the terms of the MPL, indicate your
   - decision by deleting the provisions above and replace them with the notice
   - and other provisions required by the LGPL or the GPL. If you do not delete
   - the provisions above, a recipient may use your version of this file under
   - the terms of any one of the MPL, the GPL or the LGPL.
   -
   - ***** END LICENSE BLOCK ***** -->

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://cssproperties/skin/cssproperties.css" type="text/css"?>
<?xml-stylesheet href="chrome://bluegriffon/skin/listboxBg.css" type="text/css"?>
<?xml-stylesheet href="chrome://bluegriffon/skin/bluegriffonDialogs.css" type="text/css"?>

<!DOCTYPE page [
  <!ENTITY % csspropertiesDTD SYSTEM "chrome://cssproperties/locale/cssproperties.dtd">
  %csspropertiesDTD;
  <!ENTITY % backgrounditemDTD SYSTEM "chrome://cssproperties/locale/backgrounditem.dtd" >
  %backgrounditemDTD;
]>

<page id         = "cssproperties"
      windowtype = "BlueGriffon:CSSProperties"
      title      = "&window.title;"
      xmlns      = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:html = "http://www.w3.org/1999/xhtml"
      onload     = "Startup()"
      onunload   = "Shutdown()">

  <script type="application/x-javascript"  src="chrome://bluegriffon/content/utils/dgid.js"/>
  <script type="application/x-javascript"  src="chrome://bluegriffon/content/utils/global.js"/>
  <script type="application/x-javascript"  src="chrome://bluegriffon/content/utils/prompter.js"/>
  <script type="application/x-javascript"  src="chrome://bluegriffon/content/txns/diStyleAttrChangeTxn.js"/>
  <script type="application/x-javascript"  src="chrome://bluegriffon/content/txns/diChangeFileStylesheetTxn.js"/>
  <script type="application/x-javascript"  src="chrome://cssproperties/content/cssproperties.js"/>
  <script type="application/x-javascript"  src="chrome://cssproperties/content/bezier.js"/>

  <stringbundle id="csspropertiesBundle"   src="chrome://cssproperties/locale/cssproperties.properties"/>
  <stringbundle id="backgrounditemBundle"  src="chrome://cssproperties/locale/backgrounditem.properties"/>

  <panelset>
    <panel level="top" noautohide="true" id="bezierPanel"
           alwaysontop="true">
      <hbox align="center">
        <stack>
          <svg xmlns:svg="http://www.w3.org/2000/svg"
               xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink"
               version="1.1" width="156" height="156" id="svg2">
            <style type="text/css"> #p1_path {stroke:#fa0000;marker-end:url(#DotL)} #p2_path {stroke:#fa0000;marker-start:url(#DotL)} path {fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1} #grid_path {stroke-width:0.1px} #axis_unit_dec #grid_path {stroke-width:0.5px} #axis_unit path {} text{font-size:9.33333px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Lucida Grande} #curve{fill:none;stroke:#000000;stroke-width:1px} </style>
            <defs>
      
              <path d="M 0,-100 V 0" class="grid_path" id="grid_path" />
              <marker orient="auto" refY="0.0" refX="0.0" id="DotL" style="overflow:visible">
                <circle cx="0" cy="0" r="3" style="stroke:#000;stroke-width:1px;fill:#F00"/>
              </marker>
            </defs>
            <g>
              <g transform="translate(50,10)">
                <g transform="translate(50,50)" id="grid">
                  <use transform="matrix(0,1,-1,0,0,0)" xlink:href="#axis" />
      
                  <g id="axis">
                    <g transform="translate(-50,50)" id="axis_unit_dec">
                      <path d="M 0,0 V 10" />
                      <use xlink:href="#grid_path" />
                    </g>
                    <g transform="translate(-50,50)" id="axis_unit">
                      <use transform="translate(10,0)" xlink:href="#grid_path" />
                      <path d="M 10,0 V 5" />
                    </g>
      
                    <use transform="translate(50,0)" xlink:href="#axis_unit_dec" />
                    <use transform="translate(100,0)" xlink:href="#axis_unit_dec" />
                    <use transform="translate(10,0)" xlink:href="#axis_unit" />
                    <use transform="translate(20,0)" xlink:href="#axis_unit" />
                    <use transform="translate(30,0)" xlink:href="#axis_unit" />
                    <use transform="translate(50,0)" xlink:href="#axis_unit" />
                    <use transform="translate(60,0)" xlink:href="#axis_unit" />
                    <use transform="translate(70,0)" xlink:href="#axis_unit" />
                    <use transform="translate(80,0)" xlink:href="#axis_unit" />
      
                  </g>
                  <text x="-85" y="5">0.5</text>
                  <text x="-75" y="-45">1</text>
                  <text x="-10" y="75">0.5</text>
                  <text x="45" y="75">1</text>
                  <text x="-75" y="75">0</text>
      
                  <text x="-45" y="90">Input Percentage</text>
                  <text x="-50" y="-90" transform="rotate(-90)">Output Percentage</text>
                </g>
                <path d="M 0,100 C 100,100 0,0 100,0" id="curve" />
                <path d="M 0,100 100,100" id="p1_path" />
                <path d="M 0,0 100,0" id="p2_path" />
              </g>
            </g>
      
          </svg>
          <box id="p1_point" style="width: 8px; height: 8px;" top="6" left="46"/> 
          <box id="p2_point" style="width: 8px; height: 8px;" top="106" left="146"/> 
        </stack>
        <vbox>
          <label value="Point 1:"/>
          <hbox align="center" class="indent">
            <label value="X:"/>
            <textbox style="max-width: 6em" id="p1_x"
                     oninput="Bezier.onBezierChanged(this)"/>
          </hbox>
          <hbox align="center" class="indent">
            <label value="Y:"/>
            <textbox style="max-width: 6em" id="p1_y"
                     oninput="Bezier.onBezierChanged(this)"/>
          </hbox>
          <label value="Point 2:"/>
          <hbox align="center" class="indent">
            <label value="X:"/>
            <textbox style="max-width: 6em" id="p2_x"
                     oninput="Bezier.onBezierChanged(this)"/>
          </hbox>
          <hbox align="center" class="indent">
            <label value="Y:"/>
            <textbox style="max-width: 6em" id="p2_y"
                     oninput="Bezier.onBezierChanged(this)"/>
          </hbox>
        </vbox>
      </hbox>
      <hbox align="center" id="bezierMultibuttons">
        <toolbarbutton class="multibutton" label="linear" value="linear"
                       oncommand="Bezier.toggleBezier(this); Bezier.initWithBezier('linear')"
                       type="checkbox" group="bezier"/>
        <toolbarbutton class="multibutton" label="ease" value="ease"
                       oncommand="Bezier.toggleBezier(this); Bezier.initWithBezier('ease')"
                       type="checkbox" group="bezier"/>
        <toolbarbutton class="multibutton" label="ease-in" value="ease-in"
                       oncommand="Bezier.toggleBezier(this); Bezier.initWithBezier('ease-in')"
                       type="checkbox" group="bezier"/>
        <toolbarbutton class="multibutton" label="ease-out" value="ease-out"
                       oncommand="Bezier.toggleBezier(this); Bezier.initWithBezier('ease-out')"
                       type="checkbox" group="bezier"/>
        <toolbarbutton class="multibutton" label="ease-in-out" value="ease-in-out"
                       oncommand="Bezier.toggleBezier(this); Bezier.initWithBezier('ease-in-out')"
                       type="checkbox" group="bezier"/>
      </hbox>
      <hbox align="center">
        <spacer flex="1"/>
        <button label="Cancel" oncommand="this.parentNode.parentNode.hidePopup()"/>
        <button label="OK" default="true" oncommand="Bezier.onAccept()"
                id="bezierPanelOkButton"/>
      </hbox>
    </panel>

    <menupopup id="sectionHeaderContext">
      <menuitem label="&closeOtherSections.label;" oncommand="CloseAllSection(false)"/>
      <menuitem label="&closeAllSections.label;" oncommand="CloseAllSection(true)"/>
    </menupopup>

    <panel level="floating" id="backgroundImagePanel" noautohide="true">
      <groupbox style="width: 400px">
        <caption label="&imageURL.caption;"/>
        <hbox align="center">
          <textbox flex="1" id="imageURLTextbox"
                   oninput="LoadImage()"/>
          <filepickerbutton id="filepickerbutton"
                            control="imageURLTextbox"
                            mode="0"
                            filters="filterImages"
                            oncommand="LoadImage(); MakeRelativeUrlBackgroundImage()"
                            title="&selectImageButton.label;"/>
        </hbox>
        <!-- TODO: make relative URL button -->
        <hbox align="center">
          <checkbox label="&makeRelative.label;"
                    id="relativeBackgroundImageCheckbox"
                    disabled="true"
                    oncommand="ToggleRelativeOrAbsoluteBackgroundImage()"/>
        </hbox>
      </groupbox>
      <groupbox>
        <caption label="&preview.caption;"/>
        <hbox align="center">
          <spacer flex="1"/>
          <vbox id="previewBackgroundImage"/>
          <spacer flex="1"/>
        </hbox>
      </groupbox>
      <hbox align="center">
        <spacer flex="1"/>
        <button label="&okButton.label;" oncommand="BackgroundImageSelected()"/>
      </hbox>
    </panel>

    <panel level="floating" id="linearGradientPanel" noautohide="true">
      <hbox align="top">
        <vbox align="center">
          <groupbox>
            <caption label="&preview.caption;"/>
            <spacer flex="1"/>
            <vbox id="linearGradientPreview"/>
            <spacer flex="1"/>
          </groupbox>
          <checkbox id="repeatingGradientCheckbox"
                    label="&repeating.label;"
                    oncommand="RepaintGradient()"/>
        </vbox>
        <tabbox id="linearGradientPropertiesTabbox">
          <tabs>
            <tab label="&colorStops.tab;"/>
            <tab label="&shapeAndSize.tab;" id="shapeAndSizeTab"/>
            <tab label="&angle.tab;"/>
            <tab label="&startingPoint.tab;"/>
          </tabs>
          <tabpanels>
            <vbox flex="1">
              <richlistbox id="colorStopsRichlistbox"
                           onselect="UpdateColorStopsRichlistbox()" flex="1"/>
              <hbox class="listboxBg">
                <toolbarbutton id="addColorStopButton" class="listboxBgPlusButton"
                               oncommand="AddColorStopToLinearGradient()"/>
                <toolbarbutton id="removeColorStopButton" class="listboxBgMinusButton"
                               disabled="true"
                               oncommand="DeleteColorStopFromLinearGradient()"/>
                <spacer flex="1"/>
                <toolbarbutton id="upColorStopButton" class="listboxBgPlusButton" disabled="true"/>
                <toolbarbutton id="downColorStopButton" class="listboxBgPlusButton" disabled="true"/>
              </hbox>
            </vbox>
            <grid id="shapeAndSizeTabpanel">
              <columns><column/><column/></columns>
              <rows>
                <row align="center">
                  <label value="&shape.label;"/>
                  <radiogroup id="radialGradientShape" orient="horizontal"
                              oncommand="RepaintGradient()">
                    <radio label="&circularShape.label;" value="circle" selected="true"/>
                    <radio label="&ellipticShape.label;" value="ellipse"/>
                  </radiogroup>
                </row>
                <row align="center">
                  <label value="&size.label;"/>
                  <menulist id="radioGradientSize" sizetopopup="none"
                            oncommand="RepaintGradient()">
                    <menupopup>
                      <menuitem label="---" value=""/>
                      <menuseparator/>
                      <menuitem label="closest-side (contain)" value="closest-side"/>
                      <menuitem label="closest-corner" value="closest-corner"/>
                      <menuitem label="farthest-side" value="farthest-side"/>
                      <menuitem label="farthest-corner (cover)" value="farthest-corner"/>
                    </menupopup>
                  </menulist>
                </row>
              </rows>
            </grid>
            <hbox align="center" flex="1">
              <checkbox label="&angle.checkbox;" id="linearGradientAngleCheckbox"
                        oncommand="RepaintGradient()"/>
              <rotator id="linearGradientAngleRotator"
                       onchange="gDialog.linearGradientAngleCheckbox.checked=true;RepaintGradient()"
                       negated="true"/>
            </hbox>
            <grid>
              <columns><column/><column/></columns>
              <rows>
                <row align="center">
                  <checkbox label="&startingPoint.checkbox;" id="linearGradientStartingPointCheckbox"
                            oncommand="RepaintGradient()"/>
                  <hbox>
                    <menulist sizetopopup="none" editable="true" id="linearGradientStartingPointMenulist"
                              oncommand="RepaintGradient()">
                      <menupopup>
                        <grid class="multipane-menu"
                                  oncommand="this.parentNode.parentNode.value = event.originalTarget.value">
                          <columns><column/><column/><column/></columns>
                          <rows>
                            <row align="center">
                              <menuitem label="&backgroundPositionLeftTop.label;" value="left top"/>
                              <menuitem label="&backgroundPositionCenterTop.label;" value="center top"/>
                              <menuitem label="&backgroundPositionRightTop.label;" value="right top"/>
                            </row>
                            <row align="center">
                              <menuitem label="&backgroundPositionLeftCenter.label;" value="left center"/>
                              <menuitem label="&backgroundPositionCenterCenter.label;" value="center"/>
                              <menuitem label="&backgroundPositionRightBottom.label;" value="right center"/>
                            </row>
                            <row align="center">
                              <menuitem label="&backgroundPositionLeftBottom.label;" value="left bottom"/>
                              <menuitem label="&backgroundPositionCenterBottom.label;" value="center bottom"/>
                              <menuitem label="&backgroundPositionRightBottom.label;" value="right bottom"/>
                            </row>
                          </rows>
                        </grid>
                      </menupopup>
                    </menulist>
                  </hbox>
                </row>
                <row align="center">
                  <checkbox label="&horizOffset.checkbox;" id="linearGradientHorizOffsetCheckbox"
                            oncommand="RepaintGradient()"/>
                  <hbox>
                    <menulist editable="true" id="linearGradientHorizOffset" sizetopopup="none"
                              oncommand="onLengthMenulistCommand(this, '% px pt cm in mm pc em ex rem ch', '', true); RepaintGradient()"
                              oninput="onLengthMenulistCommand(this, '% px pt cm in mm pc em ex rem ch', '', true); RepaintGradient()">
                      <menupopup id="linearGradientHorizOffsetMenupopup"
                                 onpopupshowing="PopulateLengths(this, '% px pt cm in mm pc em ex rem ch')">
                      </menupopup>
                    </menulist>
                    <spinbuttons onup="IncreaseLength(this, '% px pt cm in mm pc em ex rem ch'); RepaintGradient()"
                                 ondown="DecreaseLength(this, '% px pt cm in mm pc em ex rem ch', true); RepaintGradient()"/>
                    <checkbox label="&vertOffset.checkbox;" id="linearGradientVertOffsetCheckbox"
                              oncommand="RepaintGradient()"/>
                    <menulist editable="true" id="linearGradientVertOffset" sizetopopup="none"
                              oncommand="onLengthMenulistCommand(this, '% px pt cm in mm pc em ex rem ch', '', true); RepaintGradient()"
                              oninput="onLengthMenulistCommand(this, '% px pt cm in mm pc em ex rem ch', '', true); RepaintGradient()">
                      <menupopup id="linearGradientVertOffsetMenupopup"
                                 onpopupshowing="PopulateLengths(this, '% px pt cm in mm pc em ex rem ch')">
                      </menupopup>
                    </menulist>
                    <spinbuttons onup="IncreaseLength(this, '% px pt cm in mm pc em ex rem ch'); RepaintGradient()"
                                 ondown="DecreaseLength(this, '% px pt cm in mm pc em ex rem ch', true); RepaintGradient()"/>
                  </hbox>
                 </row>
              </rows>
            </grid>
          </tabpanels>
        </tabbox>
      </hbox>
      <hbox align="center">
        <spacer flex="1"/>
        <button label="&cancelButton.label;" oncommand="this.parentNode.parentNode.hidePopup();"/>
        <button label="&okButton.label;" id="linearGradientOkButton" oncommand="SetLinearGradient();"/>
      </hbox>
    </panel>
  </panelset>

  <vbox id="mainBox" flex="1" style="visibility: hidden">
    <vbox id="mainBoxHeader">
      <label id="currentElementBox"
             crop="end"/>
      <label value="&applyStyles.label;"/>
      <hbox id="cssPolicyBox" align="center">
        <menulist id="cssPolicyMenulist" oncommand="onCssPolicyChange(this)">
          <menupopup>
            <menuitem label="&modifyID.label;"        value="id"/>
            <menuitem label="&modifyClass.label;"     value="class"/>
            <menuitem label="&allOfType.label;"       value="type"/>
            <menuseparator/>
            <menuitem label="&useInlineStyles.label;" value="inline"/>
          </menupopup>
        </menulist>
        <menulist id="classPicker" editable="true" hidden="true">
          <menupopup id="classPickerPopup"/>
        </menulist>
        <textbox id="IDPicker" hidden="true"/>
        <textbox id="typePicker" disabled="true" hidden="true"/>
      </hbox>
      <hbox class="indent">
        <checkbox label="&hoverState.label;"
                  id="hoverStateCheckbox"
                  oncommand="ToggleHover(this)"/>
      </hbox>
    </vbox>

    <vbox flex="1" id="propertiesBox">
#include general.xul.inc
#include colors.xul.inc
#include geometry.xul.inc
#include position.xul.inc
#include borders.xul.inc
#include shadows.xul.inc
#include lists.xul.inc
#include transforms.xul.inc
#include transitions.xul.inc
#include flexbox.xul.inc
#include columns.xul.inc
#include tables.xul.inc
#include misc.xul.inc
    </vbox>
  </vbox>

</page>
