var List = 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_list(this.options['sort_by']);
        this.list_container = new Element('div');
        this.container.grab(this.list_container);
    },
    
    construct_list: function(sort_by) {
        this.spinner.start();
        params = {
            'list_id': this.options['list_id'],
            'sort_by': sort_by,
            'params': JSON.encode(this.options['params'])
        }
        call_ajax('get_list', params, function(response) {
            this.spinner.stop();

            /*
            <ul class="modal-list">
                <li>
                    <a href="#">Community Website A</a>
                    
                    <!-- Label list. Can contain labels. -->
                    <ul class="labels">
                        <li><a href="###" class="modal-label">Dashboard</a></li>
                        <li><a href="####" class="modal-label">Issues</a></li>
                    </ul>
                </li>
            </ul>
            */
            
            this.list_container.innerHTML = '';
            
            if(this.options['title']) {
                header = new Element('h3');
                header.set('html', this.options['title']);
                this.list_container.grab(header);
            }
            
            ul = new Element('ul');
            ul.set('class', 'modal-list');

            for(row_c=0; row_c < response.data.length; row_c++){
                row = response.data[row_c];
                if(this.options.construct_row_callback) {
                    tr = this.options.construct_row_callback(row, response.data);
                }
                else {
                    li = new Element('li');
                    li.set('html', row);
                }
                ul.grab(li);
            }

            this.list_container.grab(ul);
        }.bind(this))
    },
    toElement: function() {
        return this.container;
    }
})