<!-- ***** 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 Mozilla XForms support.
   -
   - The Initial Developer of the Original Code is
   - IBM Corporation.
   - Portions created by the Initial Developer are Copyright (C) 2006
   - the Initial Developer. All Rights Reserved.
   -
   - Contributor(s):
   -  Doron Rosenberg <doronr@us.ibm.com>
   -  Alexander Surkov <surkov@dc.baikal.ru>
   -  Allan Beaufour <allan@beaufour.dk>
   -
   - 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 GPL or the LGPL. 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 ***** -->

<!DOCTYPE bindings [
<!ENTITY % xformsDTD SYSTEM "chrome://xforms/locale/xforms.dtd">
  %xformsDTD;
]>

<!--
  The file contains auxiliary controls implementations for XHTML context. The
  controls are inherited from bindings defined in 'widgets.xml' file.
-->

<bindings id="widgetsBindingsForXHTML"
          xmlns="http://www.mozilla.org/xbl"
          xmlns:html="http://www.w3.org/1999/xhtml"
          xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:mozType="http://www.mozilla.org/projects/xforms/2005/type">


<!-- CALENDAR WIDGETS -->

  <!-- COMPACT CALENDAR -->
  <binding id="calendar-compact"
           extends="chrome://xforms/content/widgets.xml#calendar-compact-base">

    <resources>
      <stylesheet src="chrome://xforms/skin/widgets-xhtml.css"/>
    </resources>

    <content>
      <html:table role="grid">
        <html:tbody anonid="dayContainer"/>
      </html:table>
    </content>

    <implementation>
    <!-- interface -->

      <!-- Set type and label for the day control element -->
      <method name="setDayControl">
        <parameter name="aControl"/>
        <parameter name="aType"/>
        <parameter name="aLabel"/>
        <body>
          aControl.textContent = aLabel;
          aControl.setAttribute("class", aType);
        </body>
      </method>

      <!-- Select day control element -->
      <method name="selectDayControl">
        <parameter name="aControl"/>
        <body>
          if (aControl)
            aControl.setAttribute("selected", "selected");
        </body>
      </method>

      <!-- Unselect day control element -->
      <method name="unselectDayControl">
        <parameter name="aControl"/>
        <body>
          if (aControl)
            aControl.removeAttribute("selected");
        </body>
      </method>

      <!-- Return true if node is control element for a day -->
      <method name="isDayControl">
        <parameter name="aNode"/>
        <body>
          if (aNode.localName != "td" || aNode.namespaceURI != this.XHTML_NS)
            return false;
          return true;
        </body>
      </method>

      <method name="buildUI">
        <body>
        <![CDATA[
          var dayOfWeekNames = this.getDaysOfWeekNames();
          var row = this.ownerDocument.createElementNS(this.XHTML_NS, "tr");

          // create days of a week names
          var header;
          for (var i = 0; i < 7; i++) {
            header = this.ownerDocument.createElementNS(this.XHTML_NS, "th");
            header.setAttribute("role", "columnheader");
            header.textContent = dayOfWeekNames[i];
            row.appendChild(header);
          }
          this.dayContainer.appendChild(row);

          // create days
          var cell;
          for (var i = 0; i < 6; i++) {
            row = document.createElementNS(this.XHTML_NS, "tr");

            for (var y = 0; y < 7; y++) {
              cell = this.ownerDocument.createElementNS(this.XHTML_NS, "td");
              cell.setAttribute("role", "gridcell");
              cell.setAttribute("tabindex", "-1");
              this._dayElements.push(cell);
              row.appendChild(cell);
            }
            this.dayContainer.appendChild(row);
          }
        ]]>
        </body>
      </method>

      <property name="XHTML_NS" readonly="true"
                onget="return 'http://www.w3.org/1999/xhtml';"/>

      <!-- Return container of controls for days -->
      <property name="dayContainer" readonly="true">
        <getter>
          if (!this._dayContainer)
            this._dayContainer = this.ownerDocument.
              getAnonymousElementByAttribute(this, "anonid", "dayContainer");
          return this._dayContainer;
        </getter>
      </property>
      <field name="_dayContainer">null</field>
    </implementation>

    <handlers>
      <handler event="keydown" keycode="VK_SPACE">
        var target = event.originalTarget;
        if (this.isDayControl(target))
          this.processAction(target.getAttribute("class"), target.textContent);
      </handler>
      <handler event="mousedown" button="0">
        var target = event.originalTarget;
        if (this.isDayControl(target))
          this.processAction(target.getAttribute("class"), target.textContent);
      </handler>
    </handlers>
  </binding>


  <!-- FULL CALENDAR -->
  <binding id="calendar-full" extends="#calendar-compact">
    <content>
      <html:table role="grid">
        <html:tbody anonid="dayContainer">
        <html:tr>
          <html:td colspan="1">
            <html:input type="button" anonid="back-button"
                        class="-moz-date-back-button"
                        title="&xforms.datepicker.prevMonth.title;"/>
          </html:td>
          <html:td colspan="5" align="center">
            <html:span anonid="date-label"/>
          </html:td>
          <html:td colspan="1">
            <html:input type="button" anonid="fwd-button"
                        class="-moz-date-fwd-button"
                        title="&xforms.datepicker.nextMonth.title;"/>
          </html:td>
        </html:tr>
        </html:tbody>
      </html:table>
    </content>

    <implementation>
    <!-- interface -->
      <!-- Update UI -->
      <method name="refresh">
        <parameter name="aCurrentDay"/>
        <parameter name="aDaysRefreshOnly"/>
        <body>
          this.refreshInternal(aCurrentDay, aDaysRefreshOnly);
          var dateLabel =
            new Date(this.year, this.month - 1).toLocaleFormat("%B %Y");
          this.dateLabel.textContent = dateLabel;
        </body>
      </method>

    <!-- private -->
      <method name="getFocusedElement">
        <body>
          var selection = this.ownerDocument.defaultView.getSelection();
          if (!selection)
            return null;

          var focused = selection.focusNode;
          if (!focused)
            return null;

          // focusNode returns html:td if focused element is inside table cell
          // (see bug 365900).
          if (focused.localName != "input") {
            input = focused.getElementsByTagNameNS(this.XHTML_NS, "input")[0];
            if (input)
              return input;
          }

          return focused;
        </body>
      </method>

      <property name="dateLabel" readonly="true">
        <getter>
          if (!this._dateLabel) {
            this._dateLabel = this.ownerDocument.
              getAnonymousElementByAttribute(this, "anonid", "date-label");
          }
          return this._dateLabel;
        </getter>
      </property>
      <field name="_dateLabel">null</field>

      <property name="backButton" readonly="true">
        <getter>
          if (!this._backButton) {
            this._backButton = this.ownerDocument.
              getAnonymousElementByAttribute(this, "anonid", "back-button");
          }
          return this._backButton;
        </getter>
      </property>
      <field name="_backButton">null</field>

      <property name="fwdButton" readonly="true">
        <getter>
          if (!this._fwdButton) {
            this._fwdButton = this.ownerDocument.
              getAnonymousElementByAttribute(this, "anonid", "fwd-button");
          }
          return this._fwdButton;
        </getter>
      </property>
      <field name="_fwdButton">null</field>
    </implementation>

    <handlers>
      <handler event="keypress" phase="capturing">
      <![CDATA[
        var target = event.originalTarget;

        switch (event.keyCode) {
          case event.DOM_VK_DOWN:
            if (target == this.backButton || target == this.fwdButton)
              this.focus();
            break;

          case event.DOM_VK_UP:
            if (this.isDayControl(target)) {
              if (this.currentDayIndex - 3 <= 0) {
                this.backButton.focus();
              } else if (this.currentDayIndex - 7 <= 0) {
                this.fwdButton.focus();
              }
            }
            break;

          case event.DOM_VK_LEFT: case event.DOM_VK_RIGHT:
            if (target == this.backButton)
              this.fwdButton.focus();
            else if (target == this.fwdButton)
              this.backButton.focus();
            break;
        }
      ]]>
      </handler>

      <handler event="click" button="0">
        switch (event.originalTarget) {
          case this.backButton:
            this.processAction("prevMonth", null, true);
            break;
          case this.fwdButton:
            this.processAction("nextMonth", null, true);
            break;
        }
      </handler>

      <handler event="keypress" keycode="VK_TAB">
        if (!this.hasAttribute("internaltabhandling"))
          return;

        event.preventDefault();

        var focused = getFocusedElement();
        if (!focused)
          return;

        if (focused == this.backButton) {
          this.fwdButton.focus();
        } else if (focused == this.fwdButton) {
          this.focus();
        } else {
          this.backButton.focus();
        }
      </handler>

      <handler event="keypress" keycode="VK_TAB" modifiers="shift">
        if (!this.hasAttribute("internaltabhandling"))
          return;

        event.preventDefault();

        var focused = getFocusedElement();
        if (!focused)
          return;

        if (focused == this.backButton) {
          this.focus();
        } else if (focused == this.fwdButton) {
          this.backButton.focus();
        } else {
          this.fwdButton.focus();
        }
      </handler>
    </handlers>
  </binding>


  <binding id="slider">
    <resources>
      <stylesheet src="chrome://xforms/skin/widgets-xhtml.css"/>
    </resources>

    <content>
      <html:span anonid="minlabel"/>
      <!-- XXX: width and height set by CSS, see bug 350870. -->
      <html:canvas tabindex="0" anonid="canvas" width="260" height="40"
                   xbl:inherits="tabindex=mozType:tabindex"/>
      <html:span anonid="maxlabel"/>
    </content>

    <implementation>
    <!-- interface -->

      <!-- Get/set lower bound of values. -->
      <property name="min"
                onget="return parseFloat(this.getAttribute('min'));"
                onset="this.setMin(val, true);"/>

      <!-- Get/set upper bound of values. -->
      <property name="max"
                onget="return parseFloat(this.getAttribute('max'));"
                onset="this.setMax(val, true);"/>

      <!-- Get/set step of values. -->
      <property name="step"
                onget="return parseFloat(this.getAttribute('step'));"
                onset="this.setStep(val, true);"/>

      <!-- Get/set value. -->
      <property name="value">
        <getter>
          return parseFloat(this.getAttribute("value"));
        </getter>
        <setter>
        <![CDATA[
          var value = parseFloat(val);
          if (isNaN(value) || value < this.min)
            value = this.min;
          else if (value > this.max)
            value = this.max;

          var boxobj = this.sliderController;
          if (this.value != value)
            this.eraseSlider(boxobj.getXCoordFromValue(this.value));
          this.drawSlider(boxobj.getXCoordFromValue(value));
          this.setAttribute("value", value);
        ]]>
        </setter>
      </property>

      <!-- Set min/max/step/value -->
      <method name="set">
        <parameter name="aMin"/>
        <parameter name="aMax"/>
        <parameter name="aStep"/>
        <parameter name="aValue"/>
        <body>
          if (!isNaN(parseFloat(aMin)) ||
              !isNaN(parseFloat(aMax)) ||
              !isNaN(parseFloat(aStep))) {
            this.setMin(aMin, false);
            this.setMax(aMax, false);
            this.setStep(aStep, false);
            this.drawScale();
          }
          if (!isNaN(aValue))
            this.value = aValue;
        </body>
      </method>

      <method name="focus">
        <body>
          this.canvas.focus();
          return true;
        </body>
      </method>

    <!-- private -->
      <method name="setMin">
        <parameter name="aValue"/>
        <parameter name="aRefresh"/>
        <body>
          if (!isNaN(parseFloat(aValue))) {
            this.setAttribute("min", aValue);
            this.minLabel.textContent = aValue;
            if (aRefresh) {
              this.drawScale();
              this.value = this.value;
            }
          }
        </body>
      </method>

      <method name="setMax">
        <parameter name="aValue"/>
        <parameter name="aRefresh"/>
        <body>
          if (!isNaN(parseFloat(aValue))) {
            this.setAttribute("max", aValue);
            this.maxLabel.textContent = aValue;
            if (aRefresh) {
              this.drawScale();
              this.value = this.value;
            }
          }
        </body>
      </method>

      <method name="setStep">
        <parameter name="aValue"/>
        <parameter name="aRefresh"/>
        <body>
          if (!isNaN(parseFloat(aValue))) {
            this.setAttribute("step", aValue);
            if (aRefresh) {
              this.drawScale();
              this.value = this.value;
            }
          }
        </body>
      </method>

      <property name="sliderController" readonly="true">
        <getter>
        <![CDATA[
          return {
            slider: this,

            get min() { return this.slider.min; },
            get max() { return this.slider.max; },
            get step() { return this.slider.step; },

            // Return width of slider.
            get sliderWidth() { return 5; },

            // Return margin of slider bar.
            get barMargin() { return this.sliderWidth + 1; },

            // Return width/height of scale bar.
            get barWidth() { return this.boxObject.width - this.barMargin * 2; },
            get barHeight() { return this.boxObject.height; },

            // Return count of steps.
            get stepCount() {
              var adjMax = this.max - ((this.max - this.min) % this.step);
              return (adjMax - this.min) / this.step;
            },

            // Return distance between neighbor values.
            get stepIndent() {
              var k = this.barWidth / (this.max - this.min);
              return this.step * k;
            },

            // Return count of scale points.
            get scalePointCount() { return this.stepCount; },

            // Return distance between neighbour scale points.
            get scalePointIndent() {
              var k = this.barWidth / (this.max - this.min);
              return this.step * k;
            },

            // Takes a value and calculates the x position.
            getXCoordFromValue: function(aValue) {
              if (isNaN(aValue) || isNaN(this.max) || isNaN(this.min)) {
                // During initialization, it is possible that aValue will be
                // NaN.  Math type stuff has issues with NaN, so we'll bow out
                // early if we find that is the case.
                return NaN;
              }
              var k = this.barWidth / (this.max - this.min);
              var pos = aValue - this.min;
              return Math.round(pos * k) + this.barMargin;
            },

            // Takes a event and calculates the x position.
            getXCoordFromEvent: function(aEvent) {
              var boxobj = this.boxObject;
              var x = aEvent.clientX - boxobj.x;
              if (x < this.barMargin) {
                x = this.barMargin;
              } else if (x > this.barWidth + this.barMargin) {
                x = this.barWidth + this.barMargin;
              }
              return x;
            },

            // Takes a x position and calculates value.
            getValueFromXCoord: function(aX) {
              return Math.round(aX / this.stepIndent) * this.step + this.min;
            },

            // Return nearest x position of steps grid.
            getFittedXCoord: function(aX) {
              return this.getXCoordFromValue(this.getValueFromXCoord(aX));
            },

            get boxObject() {
              return this.slider.ownerDocument.
                getBoxObjectFor(this.slider.canvas);
            }
          };
        ]]>
        </getter>
      </property>

      <!-- Draw slider. -->
      <method name="drawSlider">
        <parameter name="aPos"/>
        <body>
        <![CDATA[
          if (isNaN(aPos)) {
            // aPos could be NaN if getXCoordFromValue returns NaN, for example
            return;
          }
          var boxobj = this.sliderController;
          if (boxobj.barHeight <= 0 || boxobj.barWidth <=0)
            return;

          this.context.save();
          this.context.lineWidth = 1;

          this.context.beginPath();
          var h1 = boxobj.barHeight - Math.round(boxobj.barHeight / 5);
          var h2 = h1 - Math.round(boxobj.barHeight / 10);
          var h3 = Math.round(boxobj.barHeight / 5);

          this.context.moveTo(aPos, h1);
          this.context.lineTo(aPos - boxobj.sliderWidth, h2);
          this.context.lineTo(aPos - boxobj.sliderWidth, h3);
          this.context.lineTo(aPos + boxobj.sliderWidth, h3);
          this.context.lineTo(aPos + boxobj.sliderWidth, h2);
          this.context.closePath();

          this.context.strokeStyle =this.currStrokeStyle;
          this.context.stroke();

          this.context.fillStyle = this.fillStyle;
          this.context.fill();

          this.context.restore();
        ]]>
        </body>
      </method>

      <!-- Erase slider. -->
      <method name="eraseSlider">
        <parameter name="aPos"/>
        <body>
        <![CDATA[
          if (isNaN(aPos)) {
            // aPos could be NaN if getXCoordFromValue returns NaN, for example
            return;
          }
          var boxobj = this.sliderController;
          if (boxobj.barHeight <= 0 || boxobj.barWidth <= 0)
            return;

          // clear old slider
          this.context.
            clearRect(aPos - boxobj.sliderWidth -1, 0,
                      boxobj.sliderWidth * 2 + 2,
                      boxobj.barHeight - Math.round(boxobj.barHeight / 5) + 1);

          // (re)draw horisontal bar
          this.context.lineWidth = 1;
          this.context.fillStyle = this.fillStyle;
          this.context.strokeStyle = this.strokeStyle;

          // XXX: only needs to be redrawn for old slider pos
          mid = Math.round(boxobj.barHeight / 2);
          this.context.fillRect(boxobj.barMargin, mid - 1, boxobj.barWidth, 3);
          this.context.strokeRect(boxobj.barMargin, mid - 1, boxobj.barWidth, 3);
        ]]>
        </body>
      </method>

      <!-- Draw scale. -->
      <method name="drawScale">
        <body>
        <![CDATA[
          this.context.lineWidth = 1;
          this.context.fillStyle = this.fillStyle;
          this.context.strokeStyle = this.strokeStyle;

          var boxobj = this.sliderController;
          if (boxobj.barHeight <= 0 || boxobj.barWidth <=0)
            return;

          var mid = Math.round(boxobj.barHeight / 2);
          this.context.fillRect(boxobj.barMargin, mid - 1, boxobj.barWidth, 3);
          this.context.strokeRect(boxobj.barMargin, mid - 1, boxobj.barWidth, 3);

          var h = boxobj.barHeight - Math.round(boxobj.barHeight / 5) + 1;
          for (var i = 0; i <= boxobj.scalePointCount; ++i) {
            var pos = Math.round(i * boxobj.scalePointIndent) +
              boxobj.barMargin;
            this.context.moveTo(pos, h);
            this.context.lineTo(pos, boxobj.barHeight);
            this.context.closePath();
            this.context.stroke();
          }
        ]]>
        </body>
      </method>

      <!-- Return canvas drawing context. -->
      <property name="context" readonly="true">
        <getter>
          if (!this._context) {
            this._context = this.canvas.getContext("2d");
            this._context.globalAlpha = 1.0;
          }
          return this._context;
        </getter>
      </property>
      <field name="_context">null</field>

      <!-- These styles are used to draw the slider.
        XXX: The "skin", should be set via CSS, see bug 350870.
      -->
      <field name="strokeStyle" readonly="true">"#8f9ca4"</field>
      <field name="strokeStyleMove" readonly="true">"red"</field>
      <field name="currStrokeStyle" readonly="true">this.strokeStyle</field>
      <field name="fillStyle" readonly="true">"#eff3f1"</field>

      <method name="dispatchChangeEvent">
        <body>
          // We fire 'ValueChange' event because this event is handled by
          // accessibility to know when value of widget is changed.
          var event = this.ownerDocument.createEvent("Events");
          event.initEvent("ValueChange", false, false);
          this.dispatchEvent(event);
        </body>
      </method>

      <property name="minLabel" readonly="true">
        <getter>
          if  (!this._minlabel) {
            this._minlabel = this.ownerDocument.
              getAnonymousElementByAttribute(this, "anonid", "minlabel");
          }
          return this._minlabel;
        </getter>
      </property>
      <field name="_minlabel">null</field>

      <property name="maxLabel" readonly="true">
        <getter>
          if  (!this._maxlabel) {
            this._maxlabel = this.ownerDocument.
              getAnonymousElementByAttribute(this, "anonid", "maxlabel");
          }
          return this._maxlabel;
        </getter>
      </property>
      <field name="_maxlabel">null</field>

      <property name="canvas" readonly="true">
        <getter>
          if  (!this._canvas) {
            this._canvas = this.ownerDocument.
              getAnonymousElementByAttribute(this, "anonid", "canvas");
          }
          return this._canvas;
        </getter>
      </property>
      <field name="_canvas">null</field>
    </implementation>

    <handlers>
      <!-- Capture events. -->
      <handler event="mousedown">
      <![CDATA[
        var handler = {
          slider: this,
          boxobj: this.sliderController,
          ownerDoc: this.ownerDocument,

          prevX: null,
          handleEvent: function(aEvent) {
            if (!this.prevX) {
              this.prevX = this.boxobj.getXCoordFromValue(this.slider.value);
            }
            var x = this.boxobj.getXCoordFromEvent(aEvent);
            this.slider.eraseSlider(this.prevX);

            switch (aEvent.type) {
              case "mousemove":
                this.slider.currStrokeStyle = this.slider.strokeStyleMove;
                this.slider.drawSlider(x);
                this.prevX = x;
                break;

              case "mouseup":
                // release events
                this.ownerDoc.removeEventListener("mousemove", this, true);
                this.ownerDoc.removeEventListener("mouseup", this, true);

                this.slider.currStrokeStyle = this.slider.strokeStyle;

                this.slider.eraseSlider(x);
                this.slider.drawSlider(this.boxobj.getFittedXCoord(x));

                this.slider.setAttribute("value",
                                         this.boxobj.getValueFromXCoord(x));
                this.slider.dispatchChangeEvent();
                break;
            }
          }
        };

        this.ownerDocument.addEventListener("mousemove", handler, true);
        this.ownerDocument.addEventListener("mouseup", handler, true);
      ]]>
      </handler>

      <handler event="keypress">
        nsIEvent = Components.interfaces.nsIDOMKeyEvent;
        switch (event.keyCode) {
          case nsIEvent.DOM_VK_RIGHT:
          case nsIEvent.DOM_VK_DOWN:
            this.value += this.step;
            break;
          case nsIEvent.DOM_VK_LEFT:
          case nsIEvent.DOM_VK_UP:
            this.value -= this.step;
            break;

          // delta is at least as large as step and no more than 20% of the
          // scale.
          case nsIEvent.DOM_VK_PAGE_DOWN:
            var delta =
              parseInt((this.max - this.min) / 5 / this.step) * this.step;
            this.value += delta ? delta : this.step;
            break;
          case nsIEvent.DOM_VK_PAGE_UP:
            var delta =
              parseInt((this.max - this.min) / 5 / this.step) * this.step;
            this.value -= delta ? delta : this.step;
            break;

          case nsIEvent.DOM_VK_END:
            this.value = this.max;
            break;
          case nsIEvent.DOM_VK_HOME:
            this.value = this.min;
            break;
          default:
            return;
        }

        this.dispatchChangeEvent();
      </handler>
    </handlers>
  </binding>


  <!-- DROPMARKER -->
  <binding id="dropmarker">
    <content tabindex="-1"/>

    <resources>
      <stylesheet src="chrome://xforms/skin/widgets-xhtml.css"/>
    </resources>

    <implementation implements="nsIAccessibleProvider">
      <property name="accessibleType" readonly="true">
        <getter>
          return Components.interfaces.nsIAccessibleProvider.XFormsDropmarkerWidget;
        </getter>
      </property>
    </implementation>
  </binding>


  <!-- POPUP for MINIMAL SELECT1 -->
  <binding id="comboboxpopup">
    <resources>
      <stylesheet src="chrome://xforms/skin/widgets-xhtml.css"/>
    </resources>

    <implementation implements="nsIAccessibleProvider">
      <property name="accessibleType" readonly="true">
        <getter>
          return Components.interfaces.nsIAccessibleProvider.XFormsComboboxPopupWidget;
        </getter>
      </property>
    </implementation>
  </binding>

</bindings>

