ink_ui_rails 2.1.1.0

data/vendor/assets/javascripts/ink.spy.js

@@ -0,0 +1,123 @@
+/**
+ * @module Ink.UI.Spy_1
+ * @author inkdev AT sapo.pt
+ * @version 1
+ */
+Ink.createModule('Ink.UI.Spy', '1', ['Ink.UI.Aux_1','Ink.Dom.Event_1','Ink.Dom.Css_1','Ink.Dom.Element_1','Ink.Dom.Selector_1','Ink.Util.Array_1'], function(Aux, Event, Css, Element, Selector, InkArray ) {
+    'use strict';
+
+    /**
+     * Spy is a component that 'spies' an element (or a group of elements) and when they leave the viewport (through the top),
+     * highlight an option - related to that element being spied - that resides in a menu, initially identified as target.
+     * 
+     * @class Ink.UI.Spy
+     * @constructor
+     * @version 1
+     * @uses Ink.UI.Aux
+     * @uses Ink.Dom.Event
+     * @uses Ink.Dom.Css
+     * @uses Ink.Dom.Element
+     * @uses Ink.Dom.Selector
+     * @uses Ink.Util.Array
+     * @param {String|DOMElement} selector
+     * @param {Object} [options] Options
+     *     @param {DOMElement|String}     options.target          Target menu on where the spy will highlight the right option.
+     * @example
+     *      <script>
+     *          Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.Spy_1'], function( Selector, Spy ){
+     *              var menuElement = Ink.s('#menu');
+     *              var specialAnchorToSpy = Ink.s('#specialAnchor');
+     *              var spyObj = new Spy( specialAnchorToSpy, {
+     *                  target: menuElement
+     *              });
+     *          });
+     *      </script>
+     */
+    var Spy = function( selector, options ){
+
+        this._rootElement = Aux.elOrSelector(selector,'1st argument');
+
+        /**
+         * Setting default options and - if needed - overriding it with the data attributes
+         */
+        this._options = Ink.extendObj({
+            target: undefined
+        }, Element.data( this._rootElement ) );
+
+        /**
+         * In case options have been defined when creating the instance, they've precedence
+         */
+        this._options = Ink.extendObj(this._options,options || {});
+
+        this._options.target = Aux.elOrSelector( this._options.target, 'Target' );
+
+        this._scrollTimeout = null;
+        this._init();
+    };
+
+    Spy.prototype = {
+
+        /**
+         * Stores the spy elements
+         *
+         * @property _elements
+         * @type {Array}
+         * @readOnly
+         * 
+         */
+        _elements: [],
+
+        /**
+         * Init function called by the constructor
+         * 
+         * @method _init
+         * @private
+         */
+        _init: function(){
+            Event.observe( document, 'scroll', Ink.bindEvent(this._onScroll,this) );
+            this._elements.push(this._rootElement);
+        },
+
+        /**
+         * Scroll handler. Responsible for highlighting the right options of the target menu.
+         * 
+         * @method _onScroll
+         * @private
+         */
+        _onScroll: function(){
+
+            var scrollHeight = Element.scrollHeight(); 
+            if( (scrollHeight < this._rootElement.offsetTop) ){
+                return;
+            } else {
+                for( var i = 0, total = this._elements.length; i < total; i++ ){
+                    if( (this._elements[i].offsetTop <= scrollHeight) && (this._elements[i] !== this._rootElement) && (this._elements[i].offsetTop > this._rootElement.offsetTop) ){
+                        return;
+                    }
+                }
+            }
+
+            InkArray.each(
+                Selector.select(
+                    'a',
+                    this._options.target
+                ), Ink.bind(function(item){
+
+                    var comparisonValue = ( ("name" in this._rootElement) && this._rootElement.name ?
+                        '#' + this._rootElement.name : '#' + this._rootElement.id
+                    );
+
+                    if( item.href.substr(item.href.indexOf('#')) === comparisonValue ){
+                        Css.addClassName(Element.findUpwardsByTag(item,'li'),'active');
+                    } else {
+                        Css.removeClassName(Element.findUpwardsByTag(item,'li'),'active');
+                    }
+                },this)
+            );
+        }
+
+    };
+
+    return Spy;
+
+});

data/vendor/assets/javascripts/ink.sticky.js

@@ -0,0 +1,254 @@
+/**
+ * @module Ink.UI.Sticky_1
+ * @author inkdev AT sapo.pt
+ * @version 1
+ */
+Ink.createModule('Ink.UI.Sticky', '1', ['Ink.UI.Aux_1','Ink.Dom.Event_1','Ink.Dom.Css_1','Ink.Dom.Element_1','Ink.Dom.Selector_1'], function(Aux, Event, Css, Element, Selector ) {
+    'use strict';
+
+    /**
+     * The Sticky component takes an element and transforms it's behavior in order to, when the user scrolls he sets its position
+     * to fixed and maintain it until the user scrolls back to the same place.
+     * 
+     * @class Ink.UI.Sticky
+     * @constructor
+     * @version 1
+     * @uses Ink.UI.Aux
+     * @uses Ink.Dom.Event
+     * @uses Ink.Dom.Css
+     * @uses Ink.Dom.Element
+     * @uses Ink.Dom.Selector
+     * @param {String|DOMElement} selector
+     * @param {Object} [options] Options
+     *     @param {Number}     options.offsetBottom       Number of pixels of distance from the bottomElement.
+     *     @param {Number}     options.offsetTop          Number of pixels of distance from the topElement.
+     *     @param {String}     options.topElement         CSS Selector that specifies a top element with which the component could collide.
+     *     @param {String}     options.bottomElement      CSS Selector that specifies a bottom element with which the component could collide.
+     * @example
+     *      <script>
+     *          Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.Sticky_1'], function( Selector, Sticky ){
+     *              var menuElement = Ink.s('#menu');
+     *              var stickyObj = new Sticky( menuElement );
+     *          });
+     *      </script>
+     */
+    var Sticky = function( selector, options ){
+
+        if( typeof selector !== 'object' && typeof selector !== 'string'){
+            throw '[Sticky] :: Invalid selector defined';
+        }
+
+        if( typeof selector === 'object' ){
+            this._rootElement = selector;
+        } else {
+            this._rootElement = Selector.select( selector );
+            if( this._rootElement.length <= 0) {
+                throw "[Sticky] :: Can't find any element with the specified selector";
+            }
+            this._rootElement = this._rootElement[0];
+        }
+
+        /**
+         * Setting default options and - if needed - overriding it with the data attributes
+         */
+        this._options = Ink.extendObj({
+            offsetBottom: 0,
+            offsetTop: 0,
+            topElement: undefined,
+            bottomElement: undefined
+        }, Element.data( this._rootElement ) );
+
+        /**
+         * In case options have been defined when creating the instance, they've precedence
+         */
+        this._options = Ink.extendObj(this._options,options || {});
+
+        if( typeof( this._options.topElement ) !== 'undefined' ){
+            this._options.topElement = Aux.elOrSelector( this._options.topElement, 'Top Element');
+        } else {
+            this._options.topElement = Aux.elOrSelector( 'body', 'Top Element');
+        }
+
+        if( typeof( this._options.bottomElement ) !== 'undefined' ){
+            this._options.bottomElement = Aux.elOrSelector( this._options.bottomElement, 'Bottom Element');
+        } else {
+            this._options.bottomElement = Aux.elOrSelector( 'body', 'Top Element');
+        }
+
+        this._computedStyle = window.getComputedStyle ? window.getComputedStyle(this._rootElement, null) : this._rootElement.currentStyle;
+        this._dims = {
+            height: this._computedStyle.height,
+            width: this._computedStyle.width
+        };
+        this._init();
+    };
+
+    Sticky.prototype = {
+
+        /**
+         * Init function called by the constructor
+         * 
+         * @method _init
+         * @private
+         */
+        _init: function(){
+            Event.observe( document, 'scroll', Ink.bindEvent(this._onScroll,this) );
+            Event.observe( window, 'resize', Ink.bindEvent(this._onResize,this) );
+
+            this._calculateOriginalSizes();
+
+            this._calculateOffsets();
+
+        },
+
+        /**
+         * Scroll handler.
+         * 
+         * @method _onScroll
+         * @private
+         */
+        _onScroll: function(){
+
+
+            var viewport = (document.compatMode === "CSS1Compat") ?  document.documentElement : document.body;
+
+            if( 
+                ( ( (Element.elementWidth(this._rootElement)*100)/viewport.clientWidth ) > 90 ) ||
+                ( viewport.clientWidth<=649 )
+            ){
+                if( Element.hasAttribute(this._rootElement,'style') ){
+                    this._rootElement.removeAttribute('style');
+                }
+                return;
+            }
+
+
+            if( this._scrollTimeout ){
+                clearTimeout(this._scrollTimeout);
+            }
+
+            this._scrollTimeout = setTimeout(Ink.bind(function(){
+                    
+                var scrollHeight = Element.scrollHeight();
+
+                if( Element.hasAttribute(this._rootElement,'style') ){
+                    if( scrollHeight <= this._options.offsetTop){
+                        this._rootElement.removeAttribute('style');
+                    } else if( ((document.body.scrollHeight-(scrollHeight+parseInt(this._dims.height,10))) < this._options.offsetBottom) ){
+                        this._rootElement.style.position = 'fixed';
+                        this._rootElement.style.top = 'auto';
+                        if( this._options.offsetBottom < parseInt(document.body.scrollHeight - (document.documentElement.clientHeight+scrollHeight),10) ){
+                            this._rootElement.style.bottom = this._options.originalOffsetBottom + 'px';
+                        } else {
+                            this._rootElement.style.bottom = this._options.offsetBottom - parseInt(document.body.scrollHeight - (document.documentElement.clientHeight+scrollHeight),10) + 'px';
+                        }
+                        this._rootElement.style.width = this._options.originalWidth + 'px';
+                    } else if( ((document.body.scrollHeight-(scrollHeight+parseInt(this._dims.height,10))) >= this._options.offsetBottom) ){
+                        this._rootElement.style.position = 'fixed';
+                        this._rootElement.style.bottom = 'auto';
+                        this._rootElement.style.top = this._options.originalOffsetTop + 'px';
+                        this._rootElement.style.width = this._options.originalWidth + 'px';
+                    }
+                } else {
+                    if(scrollHeight <= this._options.offsetTop ){
+                        return;
+                    }
+
+                    this._rootElement.style.position = 'fixed';
+                    this._rootElement.style.bottom = 'auto';
+                    this._rootElement.style.top = this._options.offsetTop + 'px';
+                    this._rootElement.style.width = this._options.originalWidth + 'px';
+                }
+
+                this._scrollTimeout = undefined;
+            },this), 0);
+        },
+
+        /**
+         * Resize handler
+         * 
+         * @method _onResize
+         * @private
+         */
+        _onResize: function(){
+
+            if( this._resizeTimeout ){
+                clearTimeout(this._resizeTimeout);
+            }
+
+            this._resizeTimeout = setTimeout(Ink.bind(function(){
+                this._rootElement.removeAttribute('style');
+                this._calculateOriginalSizes();
+                this._calculateOffsets();
+            }, this),0);
+
+        },
+
+        /**
+         * On each resizing (and in the beginning) the component recalculates the offsets, since
+         * the top and bottom element heights might have changed.
+         * 
+         * @method _calculateOffsets
+         * @private
+         */
+        _calculateOffsets: function(){
+
+            /**
+             * Calculating the offset top
+             */
+            if( typeof this._options.topElement !== 'undefined' ){
+
+
+                if( this._options.topElement.nodeName.toLowerCase() !== 'body' ){
+                    var
+                        topElementHeight = Element.elementHeight( this._options.topElement ),
+                        topElementTop = Element.elementTop( this._options.topElement )
+                    ;
+
+                    this._options.offsetTop = ( parseInt(topElementHeight,10) + parseInt(topElementTop,10) ) + parseInt(this._options.originalOffsetTop,10);
+                } else {
+                    this._options.offsetTop = parseInt(this._options.originalOffsetTop,10);
+                }
+            }
+
+            /**
+             * Calculating the offset bottom
+             */
+            if( typeof this._options.bottomElement !== 'undefined' ){
+
+                if( this._options.bottomElement.nodeName.toLowerCase() !== 'body' ){
+                    var
+                        bottomElementHeight = Element.elementHeight(this._options.bottomElement)
+                    ;
+                    this._options.offsetBottom = parseInt(bottomElementHeight,10) + parseInt(this._options.originalOffsetBottom,10);
+                } else {
+                    this._options.offsetBottom = parseInt(this._options.originalOffsetBottom,10);
+                }
+            }
+
+            this._onScroll();
+
+        },
+
+        /**
+         * Function to calculate the 'original size' of the element.
+         * It's used in the begining (_init method) and when a scroll happens
+         *
+         * @method _calculateOriginalSizes
+         * @private
+         */
+        _calculateOriginalSizes: function(){
+            this._options.originalOffsetTop = parseInt(this._options.offsetTop,10);
+            this._options.originalOffsetBottom = parseInt(this._options.offsetBottom,10);
+            this._options.originalTop = parseInt(this._rootElement.offsetTop,10);
+            if(isNaN(this._options.originalWidth = parseInt(this._dims.width,10))) {
+                this._options.originalWidth = 0;
+            }
+            this._options.originalWidth = parseInt(this._computedStyle.width,10);
+        }
+
+    };
+
+    return Sticky;
+
+});

data/vendor/assets/javascripts/ink.table.js

@@ -0,0 +1,621 @@
+/**
+ * @module Ink.UI.Table_1
+ * @author inkdev AT sapo.pt
+ * @version 1
+ */
+Ink.createModule('Ink.UI.Table', '1', ['Ink.Net.Ajax_1','Ink.UI.Aux_1','Ink.Dom.Event_1','Ink.Dom.Css_1','Ink.Dom.Element_1','Ink.Dom.Selector_1','Ink.Util.Array_1','Ink.Util.String_1'], function(Ajax, Aux, Event, Css, Element, Selector, InkArray, InkString ) {
+    'use strict';
+
+    /**
+     * The Table component transforms the native/DOM table element into a
+     * sortable, paginated component.
+     * 
+     * @class Ink.UI.Table
+     * @constructor
+     * @version 1
+     * @uses Ink.UI.Aux
+     * @uses Ink.Dom.Event
+     * @uses Ink.Dom.Css
+     * @uses Ink.Dom.Element
+     * @uses Ink.Dom.Selector
+     * @uses Ink.Util.Array
+     * @uses Ink.UI.Pagination
+     * @param {String|DOMElement} selector
+     * @param {Object} [options] Options
+     *     @param {Number}     options.pageSize       Number of rows per page.
+     *     @param {String}     options.endpoint       Endpoint to get the records via AJAX
+     * @example
+     *      <table class="ink-table alternating" data-page-size="6">
+     *          <thead>
+     *              <tr>
+     *                  <th data-sortable="true" width="75%">Pepper</th>
+     *                  <th data-sortable="true" width="25%">Scoville Rating</th>
+     *              </tr>
+     *          </thead>
+     *          <tbody>
+     *              <tr>
+     *                  <td>Trinidad Moruga Scorpion</td>
+     *                  <td>1500000</td>
+     *              </tr>
+     *              <tr>
+     *                  <td>Bhut Jolokia</td>
+     *                  <td>1000000</td>
+     *              </tr>
+     *              <tr>
+     *                  <td>Naga Viper</td>
+     *                  <td>1463700</td>
+     *              </tr>
+     *              <tr>
+     *                  <td>Red Savina Habanero</td>
+     *                  <td>580000</td>
+     *              </tr>
+     *              <tr>
+     *                  <td>Habanero</td>
+     *                  <td>350000</td>
+     *              </tr>
+     *              <tr>
+     *                  <td>Scotch Bonnet</td>
+     *                  <td>180000</td>
+     *              </tr>
+     *              <tr>
+     *                  <td>Malagueta</td>
+     *                  <td>50000</td>
+     *              </tr>
+     *              <tr>
+     *                  <td>Tabasco</td>
+     *                  <td>35000</td>
+     *              </tr>
+     *              <tr>
+     *                  <td>Serrano Chili</td>
+     *                  <td>27000</td>
+     *              </tr>
+     *              <tr>
+     *                  <td>Jalapeño</td>
+     *                  <td>8000</td>
+     *              </tr>
+     *              <tr>
+     *                  <td>Poblano</td>
+     *                  <td>1500</td>
+     *              </tr>
+     *              <tr>
+     *                  <td>Peperoncino</td>
+     *                  <td>500</td>
+     *              </tr>
+     *          </tbody>
+     *      </table>
+     *      <nav class="ink-navigation"><ul class="pagination"></ul></nav>
+     *      <script>
+     *          Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.Table_1'], function( Selector, Table ){
+     *              var tableElement = Ink.s('.ink-table');
+     *              var tableObj = new Table( tableElement );
+     *          });
+     *      </script>
+     */
+    var Table = function( selector, options ){
+
+        /**
+         * Get the root element
+         */
+        this._rootElement = Aux.elOrSelector(selector, '1st argument');
+
+        if( this._rootElement.nodeName.toLowerCase() !== 'table' ){
+            throw '[Ink.UI.Table] :: The element is not a table';
+        }
+
+        this._options = Ink.extendObj({
+            pageSize: undefined,
+            endpoint: undefined,
+            loadMode: 'full',
+            allowResetSorting: false,
+            visibleFields: undefined
+        },Element.data(this._rootElement));
+
+        this._options = Ink.extendObj( this._options, options || {});
+
+        /**
+         * Checking if it's in markup mode or endpoint mode
+         */
+        this._markupMode = ( typeof this._options.endpoint === 'undefined' );
+
+        if( !!this._options.visibleFields ){
+            this._options.visibleFields = this._options.visibleFields.split(',');
+        }
+
+        /**
+         * Initializing variables
+         */
+        this._handlers = {
+            click: Ink.bindEvent(this._onClick,this)
+        };
+        this._originalFields = [];
+        this._sortableFields = {};
+        this._originalData = this._data = [];
+        this._headers = [];
+        this._pagination = null;
+        this._totalRows = 0;
+
+        this._init();
+    };
+
+    Table.prototype = {
+
+        /**
+         * Init function called by the constructor
+         * 
+         * @method _init
+         * @private
+         */
+        _init: function(){
+
+            /**
+             * If not is in markup mode, we have to do the initial request
+             * to get the first data and the headers
+             */
+             if( !this._markupMode ){
+                this._getData( this._options.endpoint, true );
+             } else{
+                this._setHeadersHandlers();
+
+                /**
+                 * Getting the table's data
+                 */
+                InkArray.each(Selector.select('tbody tr',this._rootElement),Ink.bind(function(tr){
+                    this._data.push(tr);
+                },this));
+                this._originalData = this._data.slice(0);
+
+                this._totalRows = this._data.length;
+
+                /**
+                 * Set pagination if defined
+                 * 
+                 */
+                if( ("pageSize" in this._options) && (typeof this._options.pageSize !== 'undefined') ){
+                    /**
+                     * Applying the pagination
+                     */
+                    this._pagination = this._rootElement.nextSibling;
+                    while(this._pagination.nodeType !== 1){
+                        this._pagination = this._pagination.nextSibling;
+                    }
+
+                    if( this._pagination.nodeName.toLowerCase() !== 'nav' ){
+                        throw '[Ink.UI.Table] :: Missing the pagination markup or is mis-positioned';
+                    }
+
+                    var Pagination = Ink.getModule('Ink.UI.Pagination',1);
+
+                    this._pagination = new Pagination( this._pagination, {
+                        size: Math.ceil(this._totalRows/this._options.pageSize),
+                        onChange: Ink.bind(function( pagingObj ){
+                            this._paginate( (pagingObj._current+1) );
+                        },this)
+                    });
+
+                    this._paginate(1);
+                }
+             }
+
+        },
+
+        /**
+         * Click handler. This will mainly handle the sorting (when you click in the headers)
+         * 
+         * @method _onClick
+         * @param {Event} event Event obj
+         * @private
+         */
+        _onClick: function( event ){
+            Event.stop(event);
+            var
+                tgtEl = Event.element(event),
+                dataset = Element.data(tgtEl),
+                index,i,
+                paginated = ( ("pageSize" in this._options) && (typeof this._options.pageSize !== 'undefined') )
+            ;
+            if( (tgtEl.nodeName.toLowerCase() !== 'th') || ( !("sortable" in dataset) || (dataset.sortable.toString() !== 'true') ) ){
+                return;
+            }
+
+            index = -1;
+            if( InkArray.inArray( tgtEl,this._headers ) ){
+                for( i=0; i<this._headers.length; i++ ){
+                    if( this._headers[i] === tgtEl ){
+                        index = i;
+                        break;
+                    }
+                }
+            }
+
+            if( !this._markupMode && paginated ){
+
+                for( var prop in this._sortableFields ){
+                    if( prop !== ('col_' + index) ){
+                        this._sortableFields[prop] = 'none';
+                        this._headers[prop.replace('col_','')].innerHTML = InkString.stripTags(this._headers[prop.replace('col_','')].innerHTML);
+                    }
+                }
+
+                if( this._sortableFields['col_'+index] === 'asc' )
+                {
+                    this._sortableFields['col_'+index] = 'desc';
+                    this._headers[index].innerHTML = InkString.stripTags(this._headers[index].innerHTML) + '<i class="icon-caret-down"></i>';
+                } else {
+                    this._sortableFields['col_'+index] = 'asc';
+                    this._headers[index].innerHTML = InkString.stripTags(this._headers[index].innerHTML) + '<i class="icon-caret-up"></i>';
+
+                }
+
+                this._pagination.setCurrent(this._pagination._current);
+
+            } else {
+
+                if( index === -1){
+                    return;
+                }
+
+                if( (this._sortableFields['col_'+index] === 'desc') && (this._options.allowResetSorting && (this._options.allowResetSorting.toString() === 'true')) )
+                {
+                    this._headers[index].innerHTML = InkString.stripTags(this._headers[index].innerHTML);
+                    this._sortableFields['col_'+index] = 'none';
+
+                    // if( !found ){
+                        this._data = this._originalData.slice(0);
+                    // }
+                } else {
+
+                    for( var prop in this._sortableFields ){
+                        if( prop !== ('col_' + index) ){
+                            this._sortableFields[prop] = 'none';
+                            this._headers[prop.replace('col_','')].innerHTML = InkString.stripTags(this._headers[prop.replace('col_','')].innerHTML);
+                        }
+                    }
+
+                    this._sort(index);
+
+                    if( this._sortableFields['col_'+index] === 'asc' )
+                    {
+                        this._data.reverse();
+                        this._sortableFields['col_'+index] = 'desc';
+                        this._headers[index].innerHTML = InkString.stripTags(this._headers[index].innerHTML) + '<i class="icon-caret-down"></i>';
+                    } else {
+                        this._sortableFields['col_'+index] = 'asc';
+                        this._headers[index].innerHTML = InkString.stripTags(this._headers[index].innerHTML) + '<i class="icon-caret-up"></i>';
+
+                    }
+                }
+
+
+                var tbody = Selector.select('tbody',this._rootElement)[0];
+                Aux.cleanChildren(tbody);
+                InkArray.each(this._data,function(item){
+                    tbody.appendChild(item);
+                });
+
+                this._pagination.setCurrent(0);
+                this._paginate(1);
+            }
+        },
+
+        /**
+         * Applies and/or changes the CSS classes in order to show the right columns
+         * 
+         * @method _paginate
+         * @param {Number} page Current page
+         * @private
+         */
+        _paginate: function( page ){
+            InkArray.each(this._data,Ink.bind(function(item, index){
+                if( (index >= ((page-1)*parseInt(this._options.pageSize,10))) && (index < (((page-1)*parseInt(this._options.pageSize,10))+parseInt(this._options.pageSize,10)) ) ){
+                    Css.removeClassName(item,'hide-all');
+                } else {
+                    Css.addClassName(item,'hide-all');
+                }
+            },this));
+        },
+
+        /**
+         * Sorts by a specific column.
+         * 
+         * @method _sort
+         * @param {Number} index Column number (starting at 0)
+         * @private
+         */
+        _sort: function( index ){
+            this._data.sort(Ink.bind(function(a,b){
+                var
+                    aValue = Selector.select('td',a)[index].innerText,
+                    bValue = Selector.select('td',b)[index].innerText
+                ;
+
+                var regex = new RegExp(/\d/g);
+                if( !isNaN(aValue) && regex.test(aValue) ){
+                    aValue = parseInt(aValue,10);
+                } else if( !isNaN(aValue) ){
+                    aValue = parseFloat(aValue);
+                }
+
+                if( !isNaN(bValue) && regex.test(bValue) ){
+                    bValue = parseInt(bValue,10);
+                } else if( !isNaN(bValue) ){
+                    bValue = parseFloat(bValue);
+                }
+
+                if( aValue === bValue ){
+                    return 0;
+                } else {
+                    return ( ( aValue>bValue ) ? 1 : -1 );
+                }
+            },this));
+        },
+
+        /**
+         * Assembles the headers markup
+         *
+         * @method _setHeaders
+         * @param  {Object} headers Key-value object that contains the fields as keys, their configuration (label and sorting ability) as value
+         * @private
+         */
+        _setHeaders: function( headers, rows ){
+            var
+                field, header,
+                thead, tr, th,
+                index = 0
+            ;
+
+            if( (thead = Selector.select('thead',this._rootElement)).length === 0 ){
+                thead = this._rootElement.createTHead();
+                tr = thead.insertRow(0);
+
+                for( field in headers ){
+
+                    if( !!this._options.visibleFields && (this._options.visibleFields.indexOf(field) === -1) ){
+                        continue;
+                    }
+
+                    // th = tr.insertCell(index++);
+                    th = document.createElement('th');
+                    header = headers[field];
+
+                    if( ("sortable" in header) && (header.sortable.toString() === 'true') ){
+                        th.setAttribute('data-sortable','true');
+                    }
+
+                    if( ("label" in header) ){
+                        th.innerText = header.label;
+                    }
+
+                    this._originalFields.push(field);
+                    tr.appendChild(th);
+                }
+            } else {
+                var firstLine = rows[0];
+
+                for( field in firstLine ){
+                    if( !!this._options.visibleFields && (this._options.visibleFields.indexOf(field) === -1) ){
+                        continue;
+                    }
+
+                    this._originalFields.push(field);
+                }
+            }
+        },
+
+        /**
+         * Method that sets the handlers for the headers
+         *
+         * @method _setHeadersHandlers
+         * @private
+         */
+        _setHeadersHandlers: function(){
+
+            /**
+             * Setting the sortable columns and its event listeners
+             */
+            Event.observe(Selector.select('thead',this._rootElement)[0],'click',this._handlers.click);
+            this._headers = Selector.select('thead tr th',this._rootElement);
+            InkArray.each(this._headers,Ink.bind(function(item, index){
+                var dataset = Element.data( item );
+                if( ('sortable' in dataset) && (dataset.sortable.toString() === 'true') ){
+                    this._sortableFields['col_' + index] = 'none';
+                }
+            },this));
+
+        },
+
+        /**
+         * This method gets the rows from AJAX and places them as <tr> and <td>
+         *
+         * @method _setData
+         * @param  {Object} rows Array of objects with the data to be showed
+         * @private
+         */
+        _setData: function( rows ){
+
+            var
+                field,
+                tbody, tr, td,
+                trIndex,
+                tdIndex
+            ;
+
+            tbody = Selector.select('tbody',this._rootElement);
+            if( tbody.length === 0){
+                tbody = document.createElement('tbody');
+                this._rootElement.appendChild( tbody );
+            } else {
+                tbody = tbody[0];
+                tbody.innerHTML = '';
+            }
+
+            this._data = [];
+
+
+            for( trIndex in rows ){
+                tr = document.createElement('tr');
+                tbody.appendChild( tr );
+                tdIndex = 0;
+                for( field in rows[trIndex] ){
+
+                    if( !!this._options.visibleFields && (this._options.visibleFields.indexOf(field) === -1) ){
+                        continue;
+                    }
+
+                    td = tr.insertCell(tdIndex++);
+                    td.innerHTML = rows[trIndex][field];
+                }
+                this._data.push(tr);
+            }
+
+            this._originalData = this._data.slice(0);
+        },
+
+        /**
+         * Sets the endpoint. Useful for changing the endpoint in runtime.
+         *
+         * @method _setEndpoint
+         * @param {String} endpoint New endpoint
+         */
+        setEndpoint: function( endpoint, currentPage ){
+            if( !this._markupMode ){
+                this._options.endpoint = endpoint;
+                this._pagination.setCurrent( (!!currentPage) ? parseInt(currentPage,10) : 0 );
+            }
+        },
+
+        /**
+         * Checks if it needs the pagination and creates the necessary markup to have pagination
+         *
+         * @method _setPagination
+         * @private
+         */
+        _setPagination: function(){
+            var paginated = ( ("pageSize" in this._options) && (typeof this._options.pageSize !== 'undefined') );
+            /**
+             * Set pagination if defined
+             */
+            if( ("pageSize" in this._options) && (typeof this._options.pageSize !== 'undefined') ){
+                /**
+                 * Applying the pagination
+                 */
+                if( !this._pagination ){
+                    this._pagination = document.createElement('nav');
+                    this._pagination.className = 'ink-navigation';
+                    this._rootElement.parentNode.insertBefore(this._pagination,this._rootElement.nextSibling);
+                    this._pagination.appendChild( document.createElement('ul') ).className = 'pagination';
+
+                    var Pagination = Ink.getModule('Ink.UI.Pagination',1);
+
+                    this._pagination = new Pagination( this._pagination, {
+                        size: Math.ceil(this._totalRows/this._options.pageSize),
+                        onChange: Ink.bind(function( ){
+                            this._getData( this._options.endpoint );
+                        },this)
+                    }); 
+                }
+            }
+        },
+
+        /**
+         * Method to choose which is the best way to get the data based on the endpoint:
+         *     - AJAX
+         *     - JSONP
+         *
+         * @method _getData
+         * @param  {String} endpoint     Valid endpoint
+         * @param  {Boolean} [firstRequest] If true, will make the request set the headers onSuccess
+         * @private
+         */
+        _getData: function( endpoint ){
+
+            Ink.requireModules(['Ink.Util.Url_1'],Ink.bind(function( InkURL ){
+
+                var
+                    parsedURL = InkURL.parseUrl( endpoint ),
+                    paginated = ( ("pageSize" in this._options) && (typeof this._options.pageSize !== 'undefined') ),
+                    pageNum = ((!!this._pagination) ? this._pagination._current+1 : 1)
+                ;
+
+                if( parsedURL.query ){
+                    parsedURL.query = parsedURL.query.split("&");
+                } else {
+                    parsedURL.query = [];
+                }
+
+                if( !paginated ){            
+                    this._getDataViaAjax( endpoint );
+                } else {
+
+                    parsedURL.query.push( 'rows_per_page=' + this._options.pageSize );
+                    parsedURL.query.push( 'page=' + pageNum );
+
+                    var sortStr = '';
+                    for( var index in this._sortableFields ){
+                        if( this._sortableFields[index] !== 'none' ){
+                            parsedURL.query.push('sortField=' + this._originalFields[parseInt(index.replace('col_',''),10)]);
+                            parsedURL.query.push('sortOrder=' + this._sortableFields[index]);
+                            break;
+                        }
+                    }
+
+                    this._getDataViaAjax( endpoint + '?' + parsedURL.query.join('&') );
+                }
+
+            },this));
+
+        },
+
+        /**
+         * Gets the data via AJAX and triggers the changes in the 
+         * 
+         * @param  {[type]} endpoint     [description]
+         * @param  {[type]} firstRequest [description]
+         * @return {[type]}              [description]
+         */
+        _getDataViaAjax: function( endpoint ){
+
+            var paginated = ( ("pageSize" in this._options) && (typeof this._options.pageSize !== 'undefined') );
+
+            new Ajax( endpoint, {
+                method: 'GET',
+                contentType: 'application/json',
+                sanitizeJSON: true,
+                onSuccess: Ink.bind(function( response ){
+                    if( response.status === 200 ){
+
+                        var jsonResponse = JSON.parse( response.responseText );
+
+                        if( this._headers.length === 0 ){
+                            this._setHeaders( jsonResponse.headers, jsonResponse.rows );
+                            this._setHeadersHandlers();
+                        }
+
+                        this._setData( jsonResponse.rows );
+
+                        if( paginated ){
+                            if( !!this._totalRows && (parseInt(jsonResponse.totalRows,10) !== parseInt(this._totalRows,10)) ){ 
+                                this._totalRows = jsonResponse.totalRows;
+                                this._pagination.setSize( Math.ceil(this._totalRows/this._options.pageSize) );
+                            } else {
+                                this._totalRows = jsonResponse.totalRows;
+                            }
+                        } else {
+                            if( !!this._totalRows && (jsonResponse.rows.length !== parseInt(this._totalRows,10)) ){ 
+                                this._totalRows = jsonResponse.rows.length;
+                                this._pagination.setSize( Math.ceil(this._totalRows/this._options.pageSize) );
+                            } else {
+                                this._totalRows = jsonResponse.rows.length;
+                            }
+                        }
+
+                        this._setPagination( );
+                    }
+
+                },this)
+            } );
+        }
+    };
+
+    return Table;
+
+});