var Table = new Class({
    initialize: function(options) {
        this.options = options;
        
        this.container = new Element('div');
        
        this.spinner_container = new Element('div');
        this.spinner_container.setStyles({
            'text-align': 'center',
            //'width': '100%',
            'height': '100%',
            'position': 'absolute',
            'left': '50%'
        });
        this.spinner = new Spinner();
        this.spinner_container.grab(this.spinner);
        this.container.grab(this.spinner_container);

        this.construct_table(this.options['sort_by']);
        this.table_container = new Element('div');
        this.container.grab(this.table_container);
    },
    
    filter: function(filters) {
        this.options['filters'] = filters;
        this.construct_table(this.options['sort_by']);
    },
    
    is_empty: function() {
        return this.table_container.getChildren().getChildren().length;
    },
    
    construct_table: function(sort_by) {    
        this.spinner.start();
        params = {
            'table_id': this.options['table_id'],
            'sort_by': sort_by,
            'filters': JSON.encode(this.options['filters']),
            'params': JSON.encode(this.options['params'])
        }
        call_ajax('get_table', params, function(response) {
            this.spinner.stop();
            head = response.data.head;
            body = response.data.body;
            
            table = new Element('table');
            table.set('class', 'modal-table full');
            table.set('id', this.options['table_id']);
            thead = new Element('thead');
            tbody = new Element('tbody');
            tr = new Element('tr');
            for(c=0; c < head.length; c++){
                i = head[c];
                th = new Element('th');
                th_a = new Element('a', {
                    'href': '#',
                    'id': i[0],
                    'html': i[1]
                });
                th_a.addEvent('click', function(elm) {
                    var id = event.target.get('id');
                    if(id == null) {
                        var id = event.target.getParent().get('id');
                    }
                    this.construct_table(id);
                }.bind(this));
                th.grab(th_a);
                tr.grab(th);
            }
            thead.grab(tr);

            for(row_c=0; row_c < body.length; row_c++){
                row = body[row_c];
                if(this.options.construct_row_callback) {
                    tr = this.options.construct_row_callback(row, head, body);
                }
                else {
                    tr = new Element('tr');
                    for(c=0; c < head.length; c++){
                        i = head[c];
                        td = new Element('td');
                        td.set('html', row[i[0]]);
                        tr.grab(td);
                    }
                }
                tbody.grab(tr);
            }

            table.grab(thead);
            table.grab(tbody);
            this.table_container.innerHTML = '';
            this.table_container.grab(table);
        }.bind(this))
    },
    toElement: function() {
        return this.container;
    }
})