FileTableDesign = Class.create();
FileTableDesign.prototype = {
    row:'',
    header:'',
    footer:'',
    empty:'',
    walkfunc:null,
    initialize: function (row, header, footer, empty, walkfunc){
        this.header = header;
        this.footer = footer;
        this.row = row;
        this.empty = empty;
        this.walkfunc = walkfunc;
    }
}

Render = Class.create();
Render.prototype = {
    list:null,
    design:null,
    divID:'files',
    itemsInRow:4,
    bindData: function(list){
        if (list == null) list = {undefined:null};
        this.list = list;
    },
    initialize: function(list){
        this.bindData(list);
    },
    render: function (){
        try{
            if (this.list == null) throw 'No data binded';
            if (this.design == null) throw 'No design supplied';
            var content = "";
            var len = 0;
            var rowTpl = new Template(this.design.row, /(^|.|\r|\n)(\{\$\s*(\w+)\s*\})/);
            var list = $H(this.list).sortBy( function(a){ if(a[0]=='undefined') return 0;return(parseInt(a[1].i));});
            var len = list.length;
            for (var i=0;i<len;i++) {
                var id = list[i][0];
                if (id == 'undefined') continue;
                if (this.design.walkfunc != null) this.design.walkfunc(this.list[id]);
                this.list[id].trbr = ((i+1)%4 == 0)?'</tr><tr>':'';
                content += rowTpl.evaluate(this.list[id]);
            }
            if (len == 0) 
                content = this.design.empty;
            else 
                content = this.design.header + content + this.design.footer;
            $(this.divID).innerHTML = content;
        }catch(e){
            alert(e);
        }
    },
    reload: function(str){
    	try{
		    Render.bindData(eval(str));
		    Render.render();
    	}catch(e){
    		alert('Invalid data');	
    	}
    }
}