foo_table-rails 0.5.0 → 2.0.0

data/vendor/assets/javascripts/footable.core.js

@@ -1,7 +1,7 @@
 /*!
  * FooTable - Awesome Responsive Tables
- * Version : 0.5
- * http://themergency.com/footable
+ * Version : 2.0
+ * http://fooplugins.com/plugins/footable-jquery/
  *
  * Requires jQuery - http://jquery.com/
  *
@@ -9,7 +9,7 @@
  * Released under the MIT license
  * You are free to use FooTable in commercial projects as long as this copyright header is left intact.
  *
- * Date: 22 Apr 2013
+ * Date: 23 Aug 2013
  */
 (function ($, w, undefined) {
     w.footable = {
@@ -22,12 +22,35 @@
             parsers: {  // The default parser to parse the value out of a cell (values are used in building up row detail)
                 alpha: function (cell) {
                     return $(cell).data('value') || $.trim($(cell).text());
+                },
+                numeric: function (cell) {
+                    var val = $(cell).data('value') || $(cell).text().replace(/[^0-9.\-]/g, '');
+                    val = parseFloat(val);
+                    if (isNaN(val)) val = 0;
+                    return val;
                 }
             },
+            addRowToggle: true,
             calculateWidthAndHeightOverride: null,
             toggleSelector: ' > tbody > tr:not(.footable-row-detail)', //the selector to show/hide the detail row
             columnDataSelector: '> thead > tr:last-child > th, > thead > tr:last-child > td', //the selector used to find the column data in the thead
-            createDetail: function (element, data) {
+            detailSeparator: ':', //the seperator character used when building up the detail row
+            createGroupedDetail: function (data) {
+                var groups = { '_none': { 'name': null, 'data': [] } };
+                for (var i = 0; i < data.length; i++) {
+                    var groupid = data[i].group;
+                    if (groupid !== null) {
+                        if (!(groupid in groups))
+                            groups[groupid] = { 'name': data[i].groupName || data[i].group, 'data': [] };
+
+                        groups[groupid].data.push(data[i]);
+                    } else {
+                        groups._none.data.push(data[i]);
+                    }
+                }
+                return groups;
+            },
+            createDetail: function (element, data, createGroupedDetail, separatorChar, classes) {
                 /// <summary>This function is used by FooTable to generate the detail view seen when expanding a collapsed row.</summary>
                 /// <param name="element">This is the div that contains all the detail row information, anything could be added to it.</param>
                 /// <param name="data">
@@ -41,37 +64,60 @@
                 ///      'groupName': String // This is the actual name of the group the column belongs to.
                 ///    }
                 /// </param>
+                /// <param name="createGroupedDetail">The grouping function to group the data</param>
+                /// <param name="separatorChar">The separator charactor used</param>
+                /// <param name="classes">The array of class names used to build up the detail row</param>
 
-                var groups = { '_none': { 'name': null, 'data': [] } };
-                for (var i = 0; i < data.length; i++) {
-                    var groupid = data[i].group;
-                    if (groupid != null) {
-                        if (!(groupid in groups))
-                            groups[groupid] = { 'name': data[i].groupName, 'data': [] };
-
-                        groups[groupid].data.push(data[i]);
-                    } else {
-                        groups._none.data.push(data[i]);
-                    }
-                }
-
+                var groups = createGroupedDetail(data);
                 for (var group in groups) {
-                    if (groups[group].data.length == 0) continue;
-                    if (group != '_none') element.append('<h4>' + groups[group].name + '</h4>');
+                    if (groups[group].data.length === 0) continue;
+                    if (group !== '_none') element.append('<div class="' + classes.detailInnerGroup + '">' + groups[group].name + '</div>');
 
                     for (var j = 0; j < groups[group].data.length; j++) {
-                        element.append('<div><strong>' + groups[group].data[j].name + '</strong> : ' + groups[group].data[j].display + '</div>');
+                        var separator = (groups[group].data[j].name) ? separatorChar : '';
+                        element.append('<div class="' + classes.detailInnerRow + '"><div class="' + classes.detailInnerName + '">' + groups[group].data[j].name + separator + '</div><div class="' + classes.detailInnerValue + '">' + groups[group].data[j].display + '</div></div>');
                     }
                 }
             },
             classes: {
+                main: 'footable',
                 loading: 'footable-loading',
                 loaded: 'footable-loaded',
-                sorted: 'footable-sorted',
-                descending: 'footable-sorted-desc',
-                indicator: 'footable-sort-indicator'
+                toggle: 'footable-toggle',
+                disabled: 'footable-disabled',
+                detail: 'footable-row-detail',
+                detailCell: 'footable-row-detail-cell',
+                detailInner: 'footable-row-detail-inner',
+                detailInnerRow: 'footable-row-detail-row',
+                detailInnerGroup: 'footable-row-detail-group',
+                detailInnerName: 'footable-row-detail-name',
+                detailInnerValue: 'footable-row-detail-value',
+                detailShow: 'footable-detail-show'
+            },
+            triggers: {
+                initialize: 'footable_initialize',                      //trigger this event to force FooTable to reinitialize
+                resize: 'footable_resize',                              //trigger this event to force FooTable to resize
+                redraw: 'footable_redraw',								//trigger this event to force FooTable to redraw
+                toggleRow: 'footable_toggle_row',                       //trigger this event to force FooTable to toggle a row
+                expandFirstRow: 'footable_expand_first_row'             //trigger this event to force FooTable to expand the first row
             },
-            debug: false // Whether or not to log information to the console.
+            events: {
+                alreadyInitialized: 'footable_already_initialized',     //fires when the FooTable has already been initialized
+                initializing: 'footable_initializing',                  //fires before FooTable starts initializing
+                initialized: 'footable_initialized',                    //fires after FooTable has finished initializing
+                resizing: 'footable_resizing',                          //fires before FooTable resizes
+                resized: 'footable_resized',                            //fires after FooTable has resized
+                redrawn: 'footable_redrawn',                            //fires after FooTable has redrawn
+                breakpoint: 'footable_breakpoint',                      //fires inside the resize function, when a breakpoint is hit
+                columnData: 'footable_column_data',                     //fires when setting up column data. Plugins should use this event to capture their own info about a column
+                rowDetailUpdating: 'footable_row_detail_updating',      //fires before a detail row is updated
+                rowDetailUpdated: 'footable_row_detail_updated',        //fires when a detail row is being updated
+                rowCollapsed: 'footable_row_collapsed',                 //fires when a row is collapsed
+                rowExpanded: 'footable_row_expanded',                   //fires when a row is expanded
+                rowRemoved: 'footable_row_removed'                      //fires when a row is removed
+            },
+            debug: false, // Whether or not to log information to the console.
+            log: null
         },
 
         version: {
@@ -82,9 +128,9 @@
             parse: function (str) {
                 version = /(\d+)\.?(\d+)?\.?(\d+)?/.exec(str);
                 return {
-                    major: parseInt(version[1]) || 0,
-                    minor: parseInt(version[2]) || 0,
-                    patch: parseInt(version[3]) || 0
+                    major: parseInt(version[1], 10) || 0,
+                    minor: parseInt(version[2], 10) || 0,
+                    patch: parseInt(version[3], 10) || 0
                 };
             }
         },
@@ -95,14 +141,14 @@
                 ///<param name="plugin">The object defining the plugin, this should implement a string property called "name" and a function called "init".</param>
 
                 if (typeof plugin['name'] !== 'string') {
-                    if (w.footable.options.debug == true) console.error('Validation failed, plugin does not implement a string property called "name".', plugin);
+                    if (w.footable.options.debug === true) console.error('Validation failed, plugin does not implement a string property called "name".', plugin);
                     return false;
                 }
                 if (!$.isFunction(plugin['init'])) {
-                    if (w.footable.options.debug == true) console.error('Validation failed, plugin "' + plugin['name'] + '" does not implement a function called "init".', plugin);
+                    if (w.footable.options.debug === true) console.error('Validation failed, plugin "' + plugin['name'] + '" does not implement a function called "init".', plugin);
                     return false;
                 }
-                if (w.footable.options.debug == true) console.log('Validation succeeded for plugin "' + plugin['name'] + '".', plugin);
+                if (w.footable.options.debug === true) console.log('Validation succeeded for plugin "' + plugin['name'] + '".', plugin);
                 return true;
             },
             registered: [], // An array containing all registered plugins.
@@ -113,8 +159,8 @@
 
                 if (w.footable.plugins._validate(plugin)) {
                     w.footable.plugins.registered.push(plugin);
-                    if (options != undefined && typeof options === 'object') $.extend(true, w.footable.options, options);
-                    if (w.footable.options.debug == true) console.log('Plugin "' + plugin['name'] + '" has been registered with the Foobox.', plugin);
+                    if (options !== undefined && typeof options === 'object') $.extend(true, w.footable.options, options);
+                    if (w.footable.options.debug === true) console.log('Plugin "' + plugin['name'] + '" has been registered with the Foobox.', plugin);
                 }
             },
             init: function (instance) {
@@ -125,7 +171,7 @@
                     try {
                         w.footable.plugins.registered[i]['init'](instance);
                     } catch (err) {
-                        if (w.footable.options.debug == true) console.error(err);
+                        if (w.footable.options.debug === true) console.error(err);
                     }
                 }
             }
@@ -145,7 +191,8 @@
         var o = $.extend(true, {}, w.footable.options, options); //merge user and default options
         return this.each(function () {
             instanceCount++;
-            this.footable = new Footable(this, o, instanceCount);
+            var footable = new Footable(this, o, instanceCount);
+			$(this).data('footable', footable);
         });
     };
 
@@ -174,13 +221,13 @@
         t.stop = function () {
             ///<summary>Stops the timer if its runnning and resets it back to its starting state.</summary>
 
-            if (t.id != null) {
+            if (t.id !== null) {
                 clearTimeout(t.id);
                 t.id = null;
                 t.busy = false;
             }
         };
-    };
+    }
 
     function Footable(t, o, id) {
         ///<summary>Inits a new instance of the plugin.</summary>
@@ -196,11 +243,13 @@
         ft.breakpointNames = '';
         ft.columns = {};
 
-        var opt = ft.options;
-        var cls = opt.classes;
-        var indexOffset = 0;
+        var opt = ft.options,
+            cls = opt.classes,
+            evt = opt.events,
+            trg = opt.triggers,
+            indexOffset = 0;
 
-        // This object simply houses all the timers used in the footable.
+        // This object simply houses all the timers used in the FooTable.
         ft.timers = {
             resize: new Timer(),
             register: function (name) {
@@ -216,29 +265,19 @@
 
             if ($table.hasClass(cls.loaded)) {
                 //already loaded FooTable for the table, so don't init again
-                ft.raise('footable_already_initialized');
+                ft.raise(evt.alreadyInitialized);
                 return;
             }
 
+            //raise the initializing event
+            ft.raise(evt.initializing);
+
             $table.addClass(cls.loading);
 
             // Get the column data once for the life time of the plugin
             $table.find(opt.columnDataSelector).each(function () {
                 var data = ft.getColumnData(this);
                 ft.columns[data.index] = data;
-
-                if (data.className != null) {
-                    var selector = '', first = true;
-                    $.each(data.matches, function (m, match) { //support for colspans
-                        if (!first) {
-                            selector += ', ';
-                        }
-                        selector += '> tbody > tr:not(.footable-row-detail) > td:nth-child(' + (parseInt(match) + 1) + ')';
-                        first = false;
-                    });
-                    //add the className to the cells specified by data-class="blah"
-                    $table.find(selector).not('.footable-cell-detail').addClass(data.className);
-                }
             });
 
             // Create a nice friendly array to work with out of the breakpoints object.
@@ -252,49 +291,110 @@
                 return a['width'] - b['width'];
             });
 
-            //bind the toggle selector click events
-            ft.bindToggleSelectors();
-
-            ft.raise('footable_initializing');
-
-            $table.bind('footable_initialized', function () {
-                //resize the footable onload
-                ft.resize();
-
-                //remove the loading class
-                $table.removeClass(cls.loading);
-
-                //hides all elements within the table that have the attribute data-hide="init"
-                //what does this do? LOL
-                $table.find('[data-init="hide"]').hide();
-                $table.find('[data-init="show"]').show();
-
-                //add the loaded class
-                $table.addClass(cls.loaded);
-            });
+            $table
+                //bind to FooTable initialize trigger
+                .bind(trg.initialize, function () {
+                    //remove previous "state" (to "force" a resize)
+                    $table.removeData('footable_info');
+                    $table.data('breakpoint', '');
+
+                    //trigger the FooTable resize
+                    $table.trigger(trg.resize);
+
+                    //remove the loading class
+                    $table.removeClass(cls.loading);
+
+                    //add the FooTable and loaded class
+                    $table.addClass(cls.loaded).addClass(cls.main);
+
+                    //raise the initialized event
+                    ft.raise(evt.initialized);
+                })
+                //bind to FooTable redraw trigger
+                .bind(trg.redraw, function () {
+                    ft.redraw();
+                })
+
+                //bind to FooTable resize trigger
+                .bind(trg.resize, function () {
+                    ft.resize();
+                })
+                //bind to FooTable expandFirstRow trigger
+                .bind(trg.expandFirstRow, function () {
+                    $table.find(opt.toggleSelector).first().not('.' + cls.detailShow).trigger(trg.toggleRow);
+                });
 
-            $table.bind('footable_resize', function () {
-                ft.resize();
-            });
+            //trigger a FooTable initialize
+            $table.trigger(trg.initialize);
 
+            //bind to window resize
             $window
                 .bind('resize.footable', function () {
                     ft.timers.resize.stop();
                     ft.timers.resize.start(function () {
-                        ft.resize();
+                        ft.raise(trg.resize);
                     }, opt.delay);
                 });
+        };
+
+        ft.addRowToggle = function () {
+            if (!opt.addRowToggle) return;
+
+            var $table = $(ft.table),
+                hasToggleColumn = false;
+
+            //first remove all toggle spans
+            $table.find('span.' + cls.toggle).remove();
+
+            for (var c in ft.columns) {
+                var col = ft.columns[c];
+                if (col.toggle) {
+                    hasToggleColumn = true;
+                    var selector = '> tbody > tr:not(.' + cls.detail + ',.' + cls.disabled + ') > td:nth-child(' + (parseInt(col.index, 10) + 1) + ')';
+                    $table.find(selector).not('.' + cls.detailCell).prepend($('<span />').addClass(cls.toggle));
+                    return;
+                }
+            }
+            //check if we have an toggle column. If not then add it to the first column just to be safe
+            if (!hasToggleColumn) {
+                $table
+                    .find('> tbody > tr:not(.' + cls.detail + ',.' + cls.disabled + ') > td:first-child')
+                    .not('.' + cls.detailCell)
+                    .prepend($('<span />').addClass(cls.toggle));
+            }
+        };
 
-            ft.raise('footable_initialized');
+        ft.setColumnClasses = function () {
+            $table = $(ft.table);
+            for (var c in ft.columns) {
+                var col = ft.columns[c];
+                if (col.className !== null) {
+                    var selector = '', first = true;
+                    $.each(col.matches, function (m, match) { //support for colspans
+                        if (!first) selector += ', ';
+                        selector += '> tbody > tr:not(.' + cls.detail + ') > td:nth-child(' + (parseInt(match, 10) + 1) + ')';
+                        first = false;
+                    });
+                    //add the className to the cells specified by data-class="blah"
+                    $table.find(selector).not('.' + cls.detailCell).addClass(col.className);
+                }
+            }
         };
 
         //moved this out into it's own function so that it can be called from other add-ons
         ft.bindToggleSelectors = function () {
             var $table = $(ft.table);
+
+            if (!ft.hasAnyBreakpointColumn()) return;
+
+            $table.find(opt.toggleSelector).unbind(trg.toggleRow).bind(trg.toggleRow, function (e) {
+                var $row = $(this).is('tr') ? $(this) : $(this).parents('tr:first');
+                ft.toggleDetail($row.get(0));
+            });
+
             $table.find(opt.toggleSelector).unbind('click.footable').bind('click.footable', function (e) {
-                if ($table.is('.breakpoint') && $(e.target).is('td')) {
-                    var $row = $(this).is('tr') ? $(this) : $(this).parents('tr:first');
-                    ft.toggleDetail($row.get(0));
+                if ($table.is('.breakpoint') && $(e.target).is('td,.footable-toggle')) {
+                    $(this).trigger(trg.toggleRow);
                 }
             });
         };
@@ -307,13 +407,16 @@
         ft.getColumnData = function (th) {
             var $th = $(th), hide = $th.data('hide'), index = $th.index();
             hide = hide || '';
-            hide = hide.split(',');
+            hide = jQuery.map(hide.split(','), function (a) {
+                return jQuery.trim(a);
+            });
             var data = {
                 'index': index,
                 'hide': { },
                 'type': $th.data('type') || 'alpha',
                 'name': $th.data('name') || $.trim($th.text()),
                 'ignore': $th.data('ignore') || false,
+                'toggle': $th.data('toggle') || false,
                 'className': $th.data('class') || null,
                 'matches': [],
                 'names': { },
@@ -321,14 +424,14 @@
                 'groupName': null
             };
 
-            if (data.group != null) {
+            if (data.group !== null) {
                 var $group = $(ft.table).find('> thead > tr.footable-group-row > th[data-group="' + data.group + '"], > thead > tr.footable-group-row > td[data-group="' + data.group + '"]').first();
                 data.groupName = ft.parse($group, { 'type': 'alpha' });
             }
 
-            var pcolspan = parseInt($th.prev().attr('colspan') || 0);
+            var pcolspan = parseInt($th.prev().attr('colspan') || 0, 10);
             indexOffset += pcolspan > 1 ? pcolspan - 1 : 0;
-            var colspan = parseInt($th.attr('colspan') || 0), curindex = data.index + indexOffset;
+            var colspan = parseInt($th.attr('colspan') || 0, 10), curindex = data.index + indexOffset;
             if (colspan > 1) {
                 var names = $th.data('names');
                 names = names || '';
@@ -343,10 +446,13 @@
 
             data.hide['default'] = ($th.data('hide') === "all") || ($.inArray('default', hide) >= 0);
 
+            var hasBreakpoint = false;
             for (var name in opt.breakpoints) {
                 data.hide[name] = ($th.data('hide') === "all") || ($.inArray(name, hide) >= 0);
+                hasBreakpoint = hasBreakpoint || data.hide[name];
             }
-            var e = ft.raise('footable_column_data', { 'column': { 'data': data, 'th': th } });
+            data.hasBreakpoint = hasBreakpoint;
+            var e = ft.raise(evt.columnData, { 'column': { 'data': data, 'th': th } });
             return e.column.data;
         };
 
@@ -371,6 +477,18 @@
         ft.hasBreakpointColumn = function (breakpoint) {
             for (var c in ft.columns) {
                 if (ft.columns[c].hide[breakpoint]) {
+                    if (ft.columns[c].ignore) {
+                        continue;
+                    }
+                    return true;
+                }
+            }
+            return false;
+        };
+
+        ft.hasAnyBreakpointColumn = function () {
+            for (var c in ft.columns) {
+                if (ft.columns[c].hasBreakpoint) {
                     return true;
                 }
             }
@@ -379,6 +497,15 @@
 
         ft.resize = function () {
             var $table = $(ft.table);
+
+            if (!$table.is(':visible')) {
+                return;
+            } //we only care about FooTables that are visible
+
+            if (!ft.hasAnyBreakpointColumn()) {
+                return;
+            } //we only care about FooTables that have breakpoints
+
             var info = {
                 'width': $table.width(),                  //the table width
                 'height': $table.height(),                //the table height
@@ -386,16 +513,18 @@
                 'viewportHeight': ft.getViewportHeight(), //the width of the viewport
                 'orientation': null
             };
+
             info.orientation = info.viewportWidth > info.viewportHeight ? 'landscape' : 'portrait';
 
             info = ft.calculateWidthAndHeight($table, info);
 
             var pinfo = $table.data('footable_info');
             $table.data('footable_info', info);
-            ft.raise('footable_resizing', { 'old': pinfo, 'info': info });
+            ft.raise(evt.resizing, { 'old': pinfo, 'info': info });
 
             // This (if) statement is here purely to make sure events aren't raised twice as mobile safari seems to do
-            if (!pinfo || ((pinfo && pinfo.width && pinfo.width != info.width) || (pinfo && pinfo.height && pinfo.height != info.height))) {
+            if (!pinfo || ((pinfo && pinfo.width && pinfo.width !== info.width) || (pinfo && pinfo.height && pinfo.height !== info.height))) {
+
                 var current = null, breakpoint;
                 for (var i = 0; i < ft.breakpoints.length; i++) {
                     breakpoint = ft.breakpoints[i];
@@ -405,90 +534,148 @@
                     }
                 }
 
-                var breakpointName = (current == null ? 'default' : current['name']);
-
-                var hasBreakpointFired = ft.hasBreakpointColumn(breakpointName);
+                var breakpointName = (current === null ? 'default' : current['name']),
+                    hasBreakpointFired = ft.hasBreakpointColumn(breakpointName),
+                    previousBreakpoint = $table.data('breakpoint');
 
                 $table
+                    .data('breakpoint', breakpointName)
                     .removeClass('default breakpoint').removeClass(ft.breakpointNames)
-                    .addClass(breakpointName + (hasBreakpointFired ? ' breakpoint' : ''))
-                    .find('> thead > tr:last-child > th')
-                    .each(function () {
-                        var data = ft.columns[$(this).index()], selector = '', first = true;
-                        $.each(data.matches, function (m, match) {
-                            if (!first) {
-                                selector += ', ';
-                            }
-                            var count = match + 1;
-                            selector += '> tbody > tr:not(.footable-row-detail) > td:nth-child(' + count + ')';
-                            selector += ', > tfoot > tr:not(.footable-row-detail) > td:nth-child(' + count + ')';
-                            selector += ', > colgroup > col:nth-child(' + count + ')';
-                            first = false;
-                        });
+                    .addClass(breakpointName + (hasBreakpointFired ? ' breakpoint' : ''));
+
+                //only do something if the breakpoint has changed
+                if (breakpointName !== previousBreakpoint) {
+                    //trigger a redraw
+                    $table.trigger(trg.redraw);
+                    //raise a breakpoint event
+                    ft.raise(evt.breakpoint, { 'breakpoint': breakpointName, 'info': info });
+                }
+            }
 
-                        selector += ', > thead > tr[data-group-row="true"] > th[data-group="' + data.group + '"]';
-                        var $column = $table.find(selector).add(this);
-                        if (data.hide[breakpointName] == false) $column.show();
-                        else $column.hide();
+            ft.raise(evt.resized, { 'old': pinfo, 'info': info });
+        };
 
-                        if ($table.find('> thead > tr.footable-group-row').length == 1) {
-                            var $groupcols = $table.find('> thead > tr:last-child > th[data-group="' + data.group + '"]:visible, > thead > tr:last-child > th[data-group="' + data.group + '"]:visible'),
-                                $group = $table.find('> thead > tr.footable-group-row > th[data-group="' + data.group + '"], > thead > tr.footable-group-row > td[data-group="' + data.group + '"]'),
-                                groupspan = 0;
+        ft.redraw = function () {
+            //add the toggler to each row
+            ft.addRowToggle();
 
-                            $.each($groupcols, function () {
-                                groupspan += parseInt($(this).attr('colspan') || 1);
-                            });
+            //bind the toggle selector click events
+            ft.bindToggleSelectors();
+
+            //set any cell classes defined for the columns
+            ft.setColumnClasses();
 
-                            if (groupspan > 0) $group.attr('colspan', groupspan).show();
-                            else $group.hide();
+            var $table = $(ft.table),
+                breakpointName = $table.data('breakpoint'),
+                hasBreakpointFired = ft.hasBreakpointColumn(breakpointName);
+
+            $table
+                .find('> tbody > tr:not(.' + cls.detail + ')').data('detail_created', false).end()
+                .find('> thead > tr:last-child > th')
+                .each(function () {
+                    var data = ft.columns[$(this).index()], selector = '', first = true;
+                    $.each(data.matches, function (m, match) {
+                        if (!first) {
+                            selector += ', ';
                         }
-                    })
-                    .end()
-                    .find('> tbody > tr.footable-detail-show').each(function () {
-                        ft.createOrUpdateDetailRow(this);
+                        var count = match + 1;
+                        selector += '> tbody > tr:not(.' + cls.detail + ') > td:nth-child(' + count + ')';
+                        selector += ', > tfoot > tr:not(.' + cls.detail + ') > td:nth-child(' + count + ')';
+                        selector += ', > colgroup > col:nth-child(' + count + ')';
+                        first = false;
                     });
 
-                $table.find('> tbody > tr.footable-detail-show:visible').each(function () {
-                    var $next = $(this).next();
-                    if ($next.hasClass('footable-row-detail')) {
-                        if (breakpointName == 'default' && !hasBreakpointFired) $next.hide();
-                        else $next.show();
+                    selector += ', > thead > tr[data-group-row="true"] > th[data-group="' + data.group + '"]';
+                    var $column = $table.find(selector).add(this);
+                    if (data.hide[breakpointName] === false) $column.show();
+                    else $column.hide();
+
+                    if ($table.find('> thead > tr.footable-group-row').length === 1) {
+                        var $groupcols = $table.find('> thead > tr:last-child > th[data-group="' + data.group + '"]:visible, > thead > tr:last-child > th[data-group="' + data.group + '"]:visible'),
+                            $group = $table.find('> thead > tr.footable-group-row > th[data-group="' + data.group + '"], > thead > tr.footable-group-row > td[data-group="' + data.group + '"]'),
+                            groupspan = 0;
+
+                        $.each($groupcols, function () {
+                            groupspan += parseInt($(this).attr('colspan') || 1, 10);
+                        });
+
+                        if (groupspan > 0) $group.attr('colspan', groupspan).show();
+                        else $group.hide();
                     }
+                })
+                .end()
+                .find('> tbody > tr.' + cls.detailShow).each(function () {
+                    ft.createOrUpdateDetailRow(this);
                 });
 
-                // adding .footable-first-column and .footable-last-column to the first and last th and td of each row in order to allow
-                // for styling if the first or last column is hidden (which won't work using :first-child or :last-child)
-                $table.find('> thead > tr > th.footable-last-column, > tbody > tr > td.footable-last-column').removeClass('footable-last-column');
-                $table.find('> thead > tr > th.footable-first-column, > tbody > tr > td.footable-first-column').removeClass('footable-first-column');
-                $table.find('> thead > tr, > tbody > tr')
-                    .find('> th:visible:last, > td:visible:last')
-                    .addClass('footable-last-column')
-                    .end()
-                    .find('> th:visible:first, > td:visible:first')
-                    .addClass('footable-first-column');
-
-                ft.raise('footable_breakpoint_' + breakpointName, { 'info': info });
-            }
+            $table.find('> tbody > tr.' + cls.detailShow + ':visible').each(function () {
+                var $next = $(this).next();
+                if ($next.hasClass(cls.detail)) {
+                    if (!hasBreakpointFired) $next.hide();
+                    else $next.show();
+                }
+            });
 
-            ft.raise('footable_resized', { 'old': pinfo, 'info': info });
+            // adding .footable-first-column and .footable-last-column to the first and last th and td of each row in order to allow
+            // for styling if the first or last column is hidden (which won't work using :first-child or :last-child)
+            $table.find('> thead > tr > th.footable-last-column, > tbody > tr > td.footable-last-column').removeClass('footable-last-column');
+            $table.find('> thead > tr > th.footable-first-column, > tbody > tr > td.footable-first-column').removeClass('footable-first-column');
+            $table.find('> thead > tr, > tbody > tr')
+                .find('> th:visible:last, > td:visible:last')
+                .addClass('footable-last-column')
+                .end()
+                .find('> th:visible:first, > td:visible:first')
+                .addClass('footable-first-column');
+
+            ft.raise(evt.redrawn);
         };
 
-        ft.toggleDetail = function (actualRow) {
-            var $row = $(actualRow),
-                created = ft.createOrUpdateDetailRow($row.get(0)),
+        ft.toggleDetail = function (row) {
+            var $row = (row.jquery) ? row : $(row),
                 $next = $row.next();
 
-            if (!created && $next.is(':visible')) {
-                $row.removeClass('footable-detail-show');
+            //check if the row is already expanded
+            if ($row.hasClass(cls.detailShow)) {
+                $row.removeClass(cls.detailShow);
+
                 //only hide the next row if it's a detail row
-                if ($next.hasClass('footable-row-detail')) $next.hide();
+                if ($next.hasClass(cls.detail)) $next.hide();
+
+                ft.raise(evt.rowCollapsed, { 'row': $row[0] });
+
             } else {
-                $row.addClass('footable-detail-show');
-                $next.show();
+                ft.createOrUpdateDetailRow($row[0]);
+                $row.addClass(cls.detailShow);
+                $row.next().show();
+
+                ft.raise(evt.rowExpanded, { 'row': $row[0] });
             }
         };
 
+        ft.removeRow = function (row) {
+            var $row = (row.jquery) ? row : $(row);
+            if ($row.hasClass(cls.detail)) {
+                $row = $row.prev();
+            }
+            var $next = $row.next();
+            if ($row.data('detail_created') === true) {
+                //remove the detail row
+                $next.remove();
+            }
+            $row.remove();
+
+            //raise event
+            ft.raise(evt.rowRemoved);
+        };
+
+        ft.appendRow = function (row) {
+            var $row = (row.jquery) ? row : $(row);
+            $(ft.table).find('tbody').append($row);
+
+            //redraw the table
+            ft.redraw();
+        };
+
         ft.getColumnFromTdIndex = function (index) {
             /// <summary>Returns the correct column data for the supplied index taking into account colspans.</summary>
             /// <param name="index">The index to retrieve the column data for.</param>
@@ -505,30 +692,37 @@
 
         ft.createOrUpdateDetailRow = function (actualRow) {
             var $row = $(actualRow), $next = $row.next(), $detail, values = [];
-            if ($row.is(':hidden')) return false; //if the row is hidden for some readon (perhaps filtered) then get out of here
-            ft.raise('footable_rowdetailupdated', { 'row': $row, 'detail': $next });
+            if ($row.data('detail_created') === true) return true;
+
+            if ($row.is(':hidden')) return false; //if the row is hidden for some reason (perhaps filtered) then get out of here
+            ft.raise(evt.rowDetailUpdating, { 'row': $row, 'detail': $next });
             $row.find('> td:hidden').each(function () {
                 var index = $(this).index(), column = ft.getColumnFromTdIndex(index), name = column.name;
-                if (column.ignore == true) return true;
+                if (column.ignore === true) return true;
 
                 if (index in column.names) name = column.names[index];
                 values.push({ 'name': name, 'value': ft.parse(this, column), 'display': $.trim($(this).html()), 'group': column.group, 'groupName': column.groupName });
                 return true;
             });
-            if (values.length == 0) return false; //return if we don't have any data to show
+            if (values.length === 0) return false; //return if we don't have any data to show
             var colspan = $row.find('> td:visible').length;
-            var exists = $next.hasClass('footable-row-detail');
+            var exists = $next.hasClass(cls.detail);
             if (!exists) { // Create
-                $next = $('<tr class="footable-row-detail"><td class="footable-cell-detail"><div class="footable-row-detail-inner"></div></td></tr>');
+                $next = $('<tr class="' + cls.detail + '"><td class="' + cls.detailCell + '"><div class="' + cls.detailInner + '"></div></td></tr>');
                 $row.after($next);
             }
             $next.find('> td:first').attr('colspan', colspan);
-            $detail = $next.find('.footable-row-detail-inner').empty();
-            opt.createDetail($detail, values);
+            $detail = $next.find('.' + cls.detailInner).empty();
+            opt.createDetail($detail, values, opt.createGroupedDetail, opt.detailSeparator, cls);
+            $row.data('detail_created', true);
+            ft.raise(evt.rowDetailUpdated, { 'row': $row, 'detail': $next });
             return !exists;
         };
 
         ft.raise = function (eventName, args) {
+
+            if (ft.options.debug === true && $.isFunction(ft.options.log)) ft.options.log(eventName, 'event');
+
             args = args || { };
             var def = { 'ft': ft };
             $.extend(true, def, args);
@@ -542,5 +736,5 @@
 
         ft.init();
         return ft;
-    };
+    }
 })(jQuery, window);