Factored

gistfile1.js

var TopOffersTable = new Class({
    initialize: function(container, datastore, options) {
        this.klass = this;
        
        this.options;
        this.header;
        this.container = container;
        this.store = datastore;
        
        var rows = this.container.getElements('tr');
        for (var i = 1; i < rows.length; i++) {
            if (i == 1) {
                this.header = rows[i].get('html');
                break;
            }
        }
        
        this._setOptions(options);
    },
    
    //update table with dataStore rows
    render: function() {
        this.container.empty();
        var containerInnerHtml = '';

        containerInnerHtml += this.header;
        this.store.each(function(row, idx) {
            if(row['hidden'] == 0) {
                containerInnerHtml += row['raw'];
            }
        });
        this.container.set('html', containerInnerHtml);

        // setup click events for first row
        this._setHeaderEvents();
    },
    
    //set the event of each cell in the first row of the table
    _setHeaderEvents: function() {
        this.header.getChildren().each(function(cell, idx) {

            //only allow for provider, service, and price to be clickable
            if(idx==0 || idx==1 || idx==4) {
                cell.addEvents({
                    'click':function() {
                        switch(idx) {
                            case 0:
                            this.store.sort('provider');
                            break;
                    
                            case 1:
                            this.store.sort('category');
                            break;
                    
                            case 4:
                            this.store.sort('price');
                            break;
                        }                       
                    },
                    'mouseover': function() {
                        cell.oldClr = cell.getStyle('color');
                        cell.setStyle('color','red');
                    },
                    'mouseout':function() {
                        cell.setStyle('color', cell.oldClr);
                    }
                }).setStyle('cursor','pointer');
            }
        }, this);
    },
    
    _setOptions: function(options) {
        $merge(this.options, options);
    }
});

var DataStore = new Class({
    initialize: function(options) {
        this.options;
        this.items;
        this.filtered = false;
        
        this._setOptions(options);
    },
    
    init: function() {
        this.populate();
    },
    
    filter: function(params) {
        // override - see strategy pattern
    },
    
    // filter multiple properties in each row of the DataStore
    filter: function(params) {
        //make all rows hidden if first time filtering
        if(!this.filtered) { 
            this.filtered = true;
            this.items.each(function(row, idx) {
                this.items[idx]['hidden'] = true;
            }, this);   
        }
    
        //turn filter off by showing every row
        if(params == 'off') {
            this.items.each(function(row, idx) {
                this.items[idx]['hidden'] = false;
            }, this);
        } else {
            this._filter(params)
        }
    },
    
    //returns a property's value from each unhidden row in the dataStore
    getFiltered: function(property) {
        var filtered = [];
        this.dataStore.each(function(row, idx) { 
            if(row['hidden'] == false) {
                filtered.push(row[property]);
            }
        });
        return filtered;
    },

    //returns the size of the dataStore
    getSize: function() {
        return this.items.length;
    },

    //returns a property's value from each row in the dataStore 
    getValues: function(property) {
        var values = [];
        this.items.each(function(row, idx) {
            values.push(row[property]);
        });
        return this._quickSort(values);
    },
    
    //returns unique values of a property from each row in the dataStore
    getUniqueValues: function(property) {
        var arr = [];
        var tmp = [];
        this.dataStore.each(function(row, idx) {
            if(!tmp[row[property]]) {
                arr.push(row[property]);
                tmp[row[property]] = 1;
            }
        });
        return this.sort(arr);
    },

    //returns the dataStore object
    getDataStore: function() {
        return this.dataStore;
    },
    
    //check to see if value is in array
    _inArray: function(arr, val) {
        var found = false;
        if(val) {
            for(idx=0; idx < arr.length; idx++) {
                val1 = arr[idx].toLowerCase();
                val2 = val.toString().toLowerCase();
                if(val1 == val2) {
                    found = true;
                    break;
                }
            }
        }
        return found;
    },
    
    //checks a value to see if it is numerically in range with an array [low <= val <= high]
    _inRange: function(arr, val) {
        var found = false;
        if(val) {
            for(idx=0; idx < arr.length; idx++) {
                //range format = ['0-99'] or [0,99]
                range = (arr[idx].indexOf('-')!=-1) ? arr[idx].split('-') : arr;
                low = parseFloat(range[0]);
                high = parseFloat(range[1]);
                if(parseFloat(val) >= low && parseFloat(val) <= high) {
                    found = true;
                    break;
                }
            }
        }
        return found;
    },
    
    populate: function() {
        // override - see strategy pattern
    },
    
    _quickSort: function(array) {
        var start = 0;
        var rest = array.length;

        for (var i = rest - 1; i >= start;  i--) {
            for (var j = start; j <= i; j++) {
                t1 = array[j+1];
                t2 = array[j];
                if(t1 && /(\d{1,3}\.\d+\_\d+)/.exec(t2)) {
                    t1 = parseFloat(t1.split('_')[0]);
                    t2 = parseFloat(t2.split('_')[0]);
                } else if(t1 && /(\d{1,3}\.\d+)/.exec(t2)) {
                    t1 = parseFloat(t1);
                    t2 = parseFloat(t2);
                }
                if (t1 < t2) {
                    var temp = array[j];
                    array[j] = array[j + 1];
                    array[j + 1] = temp;
                }
            }
        }
        
        return array;
    }, 
    
    _setOptions: function (options) {
        $merge(this.options, options);
    },
    
    //sort a property of each row in the dataStore
    sort: function(property) {
        var data = []; 
        var temp = [];
        
        //create temp array
        this.items.each(function(row, suffix) {
            temp[suffix] = (row[property]+'_' + suffix).toLowerCase();
            data[suffix] = row;
        });
        
        //sort temp array
        temp = this._quickSort(temp);
        this.items = [];
        
        temp.each(function(row, idx) {
            index = parseInt(row.split('_')[1]);
            this.items.push(data[index]);
        }, this);
    }
});

var TopOffersTableDataStore = new Class({
    Extends: DataStore,
    initialize: function(container, options) {
        this.parent(options);
        
        // reference to this keyword;
        this.klass = this;
        
        // HTML container element
        this.container = container;

        this._setOptions(options);

        this.parent.init();
    },

    // override
    _filter: function(params) {
        //filter by property
        for(property in params) {
            this.items.each(function(row, idx) {
                if(property=='price') {
                    this.items[idx]['hidden'] = !this.inRange(params[property], this.items[idx][property])
                } else {
                    this.items[idx]['hidden'] = !this.inArray(params[property], this.items[idx][property]);
                }
            }, this);
        }
    }
    
    filterByProvider: function(value) {
        this.filter({'provider': [value]});
    },
    
    filterByCategory: function(value) {
        this.filter({'category': [value]});
    },
    
    filterByPrice: function(value) {
        this.filter({'price': [value]});
    },
    
    // override
    populate: function() {
        this.container.getElements('tr').each(function(row, idx) {
            // check to see if there's a header row present
            if (row.get('html').indexOf('th') !== -1) {
                // if not, then populate the datastore
                if (!row.hasClass('mostPopularPackageRow')) {
                    var fields = row.getElements('td');
                    var data = '';
                    
                    var priceString = fields[4].get('text').trim();
                    //var numeric = priceString.match(/^-?[£$€Û¢´]\d/);
                    var price = priceString.match(/([\d\.]+)/);
                    price = (price)?price[1]:1.00;
                    
                    if (priceString.indexOf('kWh') != -1) {
                        // convert price to dollars
                        price = (price / 100);
                    }
                    
                    var isPopular = row.hasClass('mostPopularPackage');
                    if (isPopular) {
                        data += '<tr class="mostPopularPackageRow">' + row.getPrevious().get('html') + '</tr>';
                        data += '<tr class="mostPopularPackage">' + row.get('html') + '</tr>';
                    } else {
                        data += '<tr>' + row.get('html') + '</tr>';
                    }

                    
                    this.items.push({
                        provider: fields[0].get('text').trim(),
                        category: fields[1].get('text').trim(),
                        price: price,
                        raw: data,
                        hidden: false,
                        popular: isPopular
                    });
                }
            }
        }, this);
    }
});