<?xml version="1.0" encoding="UTF-8"?>

<d:tdl xmlns="http://www.w3.org/1999/xhtml"

xmlns:d="http://www.backbase.com/2006/tdl">

<d:namespace name="http://www.newtonicaonline.com">

<d:uses element="listGrid" src="./backbase/4_4_0/bindings/www.backbase.com.2006.btl/listGrid/chameleon/listGrid.xml"/>

<d:element name="cpListGrid">

<d:attribute name="width"/>

<d:attribute name="height"/>

<d:attribute name="dataSource"/>

<d:attribute name="readonly"/>

<d:attribute name="rows"/>

<d:property name="grid">

<d:getter><![CDATA[

          return this._._grid;      

          ]]>

</d:getter>

<d:setter><![CDATA[

          if(this._._grid != null)

            this.removeChild(this._._grid);

          this.appendChild(value);

          this._._grid = value;

          ]]>

</d:setter>

</d:property>

<d:property name="filtersArea">

<d:getter><![CDATA[

          return this._._filtersArea;

          ]]>

</d:getter>

<d:setter><![CDATA[

          if(this._._filtersArea != null)

            this.removeChild(this._._filtersArea);

          this.appendChild(value);

          this._._filtersArea = value;

          ]]>

</d:setter>

</d:property>

<d:constructor type="text/javascript"><![CDATA[

        var id = this.getAttribute('id');

        if(id == null || id == "")

          throw('id must be assigned to cpListGrid.');

        var oBox = bb.document.createElementNS('http://www.backbase.com/2006/btl', 'box');

        oBox.setAttribute('id', id + '_filtersArea');

        this.setProperty('filtersArea', oBox);

        var oGrid = bb.document.createElementNS('http://www.backbase.com/2006/btl', 'listGrid');

        var idGrid = id + '_grid';

        oGrid.setAttribute('id', idGrid);;

        oGrid.setAttribute('width', this.getAttribute('width'));

        oGrid.setAttribute('height', this.getAttribute('height'));

        oGrid.setAttribute('dataSource', this.getAttribute('dataSource'));

        oGrid.setAttribute('readonly', this.getAttribute('readonly'));

        oGrid.setAttribute('rows', this.getAttribute('rows'));

        this.setProperty('grid', oGrid);

        var oPagerBar = bb.document.createElementNS('http://www.backbase.com/2006/btl', 'pagerBar');

        oPagerBar.setAttribute('width', 'auto');

        var oPager = bb.document.createElementNS('http://www.backbase.com/2006/btl', 'pager');

        oPager.setAttribute('for', 'id("' + idGrid + '")');

        oPager.setAttribute('width', 'auto');

        var oPagerButton = bb.document.createElementNS('http://www.backbase.com/2006/btl', 'pagerButton');

        oPagerButton.setAttribute('type', 'First');

        oPager.appendChild(oPagerButton);

        oPagerButton = bb.document.createElementNS('http://www.backbase.com/2006/btl', 'pagerButton');

        oPagerButton.setAttribute('type', 'Previous');

        oPager.appendChild(oPagerButton);

        var oPagerSeparator = bb.document.createElementNS('http://www.backbase.com/2006/btl', 'pagerSeparator');

        oPager.appendChild(oPagerSeparator);

        var oPagerJumper = bb.document.createElementNS('http://www.backbase.com/2006/btl', 'pagerJumper');

        oPager.appendChild(oPagerJumper);

        oPagerSeparator = bb.document.createElementNS('http://www.backbase.com/2006/btl', 'pagerSeparator');

        oPager.appendChild(oPagerSeparator);

        oPagerButton = bb.document.createElementNS('http://www.backbase.com/2006/btl', 'pagerButton');

        oPagerButton.setAttribute('type', 'Next');

        oPager.appendChild(oPagerButton);

        oPagerButton = bb.document.createElementNS('http://www.backbase.com/2006/btl', 'pagerButton');

        oPagerButton.setAttribute('type', 'Last');

        oPager.appendChild(oPagerButton);

        oPagerBar.appendChild(oPager);

        this.appendChild(oPagerBar);

        ]]>

</d:constructor>

<d:method name="addColumn">

<d:argument name="select" type="string" required="true" />

<d:argument name="label" type="string" required="true" />

<d:argument name="width" type="string" required="true" />

<d:argument name="isFiltered" type="boolean" required="true" />

<d:argument name="type" type="string" required="true" />

<d:body type="text/javascript"><![CDATA[

          var oCol = bb.document.createElementNS('http://www.backbase.com/2006/btl', 'listGridCol');

          oCol.setAttribute('select',select);

          oCol.setAttribute('label',label);

          var oGrid = this.getProperty('grid');

          oGrid.appendChild(oCol);

          oCol.setAttribute('width' , width);

          var oInput = bb.document.createElementNS('http://www.w3.org/1999/xhtml', 'input');

          oInput.setAttribute('type',type);

          oInput.setAttribute('style' , 'width:' + width);

          var id = this.getAttribute('id');

          oInput.setAttribute('id', id + "_" + select);

          oInput.setAttribute('select', select);

          oInput.setAttribute('isFiltered', isFiltered);

          if(!isFiltered)

            oInput.setAttribute("disabled", "disabled");

          oInput.addEventListener('keyup',

                function(event)

                {

                  if(event.keyIdentifier == 'Enter')

                  {

                    var inputs = event.viewTarget.parentNode.childNodes;

                    var stateObject = {};

                    for(var i = 0; i < inputs.length; i++)

                    {

                      var input = bb.getControllerFromView(inputs[i]);

                      var name = input.getAttribute('select');

                      var value;

                      if(input.getAttribute('type') == 'checkbox')

                        value = input.getProperty('checked');

                      else

                        value = input.getProperty('value');

                      if(value != "")

                        stateObject[name] = value;

                    }

                    oGrid.setProperty('state', {filter:stateObject});

                    oGrid.refresh();

                    return true;

                  }

                  return false;

                },

                false);

          var oFiltersArea = this.getProperty('filtersArea');

          oFiltersArea.appendChild(oInput);

          var oMyGrid = this;

          oCol.addEventListener('resizeEnd',

                function(event)

                {

                  setTimeout(function()

                    {

                      oMyGrid.synchFilterWidth();

                    }, 500);

                  return true;

                },

                false);

          ]]>

</d:body>

</d:method>

<d:method name="synchFilterWidth">

<d:body type="text/javascript"><![CDATA[

          oGrid = this.getProperty('grid');

          var aColumns = oGrid.getProperty('columns');

          var oContent = this.getProperty('filtersArea');

          var aInputs = oContent.viewNode.childNodes;

          for(var i=0; i < aColumns.length; i++)

          {

            var oCol = aColumns[i];

            var oInput = aInputs[i];

            var width = oCol.getAttribute('width');

            oInput.setAttribute('style' , 'width:' + width);

          }

          ]]>

</d:body>

</d:method>

<d:template type="application/xhtml+xml">

<div>

<d:content ></d:content>

</div>

</d:template>

</d:element>

</d:namespace>

</d:tdl>