<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"
            xmlns:xforms="http://www.w3.org/2002/xforms"
            xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
            xmlns:ev="http://www.w3.org/2001/xml-events"
            xmlns:xs="http://www.w3.org/2001/XMLSchema"
            xmlns:fr="http://orbeon.org/oxf/xml/form-runner">

    <xhtml:head>
        <xforms:model id="main"
                      xxforms:session-heartbeat="true"
                      xxforms:show-error-dialog="false"
                      xxforms:external-events="submit-save submit-preview submit-cancel">

            <xforms:instance id="instance">
                <root>
                    <repeat>
                        <item>
                            <title/>
                        </item>
                    </repeat>
                </root>
            </xforms:instance>

            <xforms:instance id="proto-property">
                <item>
                    <title/>
                </item>
            </xforms:instance>

            <xforms:bind nodeset="instance('instance')">
                <xforms:bind
                        nodeset="repeat/item/title"
                        required="true()"/>
            </xforms:bind>

        </xforms:model>
        <xbl:xbl xmlns:xhtml="http://www.w3.org/1999/xhtml"
                 xmlns:xforms="http://www.w3.org/2002/xforms"
                 xmlns:xs="http://www.w3.org/2001/XMLSchema"
                 xmlns:ev="http://www.w3.org/2001/xml-events"
                 xmlns:xi="http://www.w3.org/2001/XInclude"
                 xmlns:xxi="http://orbeon.org/oxf/xml/xinclude"
                 xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
                 xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
                 xmlns:saxon="http://saxon.sf.net/"
                 xmlns:oxf="http://www.orbeon.com/oxf/processors"
                 xmlns:xbl="http://www.w3.org/ns/xbl"
                 xmlns:xxbl="http://orbeon.org/oxf/xml/xbl"
                 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

            <xbl:binding id="fr-input-counted" element="fr|input-counted">
                <xbl:template xxbl:transform="oxf:unsafe-xslt">
                    <xsl:transform version="2.0">
                        <xsl:import href="oxf:/oxf/xslt/utils/xbl.xsl"/>
                        <xsl:template match="/*">
                            <xforms:group xbl:attr="model context ref bind" xxbl:scope="outer">

                                <xbl:content includes="xforms|label"/>

                                <xsl:copy-of select="xxbl:parameter(., 'max')"/>

                                <xxforms:script ev:event="xforms-enabled" ev:target="#observer">
                                        YAHOO.xbl.fr.InputCounted.instance(this).initialize();
                                </xxforms:script>

                                <xforms:group xxbl:scope="inner">
                                    <xxforms:variable name="binding" as="node()?">
                                        <xxforms:sequence select="." xxbl:scope="outer"/>
                                    </xxforms:variable>
                                    <xforms:input id="input-counted" class="fr-input-counted" ref="$binding"
                                                  incremental="true"/>
                                    <label class="counter-label"></label>
                                </xforms:group>
                            </xforms:group>
                        </xsl:template>
                    </xsl:transform>
                </xbl:template>
            </xbl:binding>

        </xbl:xbl>
        <xhtml:script type="text/javascript">
            <![CDATA[
            var YDOM = YAHOO.util.Dom;
            var ODOC = ORBEON.xforms.Document;

            YAHOO.namespace("xbl.fr");
            YAHOO.xbl.fr.InputCounted = function() {};
            ORBEON.xforms.XBL.declareClass(YAHOO.xbl.fr.InputCounted, "xbl-fr-input-counted");

            YAHOO.xbl.fr.InputCounted.prototype = {

                _instances: {},

                _getInstance: function(target) {
                    var container = YDOM.getElementsByClassName("xbl-fr-input-counted", null, this.container)[0];
                    return this._instances[container.id];
                },

                init: function() {

                    var container = this.container;
                    var htmlElement =  container.getElementsByTagName('input')[0];

                    if(htmlElement.controlInitialized !== true) {
                        // Create instance
                        var instance = {
                                id: "",
                                currentCount: 0,
                                maxCount: 0,
                                disabled: false
                        };

                        // get attribute params from dom
                        var maxCountEl = YDOM.getElementsByClassName("xbl-fr-input-counted-max", null, this.container)[0];
                        // This should not be 100 as I am passing the value
                        var maxCount = (maxCountEl && maxCountEl.innerHTML != "") ? maxCountEl.innerHTML : 100;

                        // populate instance
                        instance.container = container;
                        instance.HTMLElement = htmlElement;
                        instance.id = this.container.id;
                        instance.minCount = 0;
                        instance.maxCount = maxCount;

                        this.initInstance(this.container, instance);

                        htmlElement.controlInitialized = true;
                        this._instances[this.container.id] = instance;
                    }
                },

                initInstance: function(target, instance) {
                    var counterLabel = YDOM.getElementsByClassName("counter-label", null, this.container)[0];

                    var field = YDOM.getElementsByClassName("fr-input-counted", null, this.container)[0];
                    if(field.getElementsByTagName('input')[0] !== null) {
                        field = field.getElementsByTagName('input')[0];
                    }
                    field.maxLength = instance.maxCount;
                    field.ctr = counterLabel;

                    if (field.textLength > 0)
                        counterLabel.innerHTML =  field.textLength + ' / ' + instance.maxCount;
                    else
                        counterLabel.innerHTML =  instance.minCount + ' / ' + instance.maxCount;

                    // add onchange event
                    YAHOO.util.Event.on(field, 'keyup', this.count, field);
                },

                count : function(evt, el) {
                    if (el.textLength > el.maxLength) {
                        YAHOO.util.Event.stopEvent(evt);
                        return;
                    }

                    YDOM.get(el.ctr).innerHTML = el.textLength + ' / ' + el.maxLength;
                }
            };
            ]]>
        </xhtml:script>
    </xhtml:head>

    <xhtml:body class="body">

        <div>
            <xforms:trigger appearance="full">
                <xforms:label>
                    Add Another
                </xforms:label>
                <xforms:insert ev:event="DOMActivate" at="1"
                               nodeset="repeat/item"/>
            </xforms:trigger>
        </div>

        <xforms:repeat nodeset="repeat/item">
            <div>
                <fr:input-counted ref="title" max="10">
                    <xforms:label>Node Selector</xforms:label>
                </fr:input-counted>
            </div>
        </xforms:repeat>
    </xhtml:body>
</xhtml:html>