function JRepeater()
{
    // private fields
    var _jevent = new JEvent(); 
    var _element;
    var _template;
    
    // private methods
    var _drawHtml = function(html)
    {
         _element.innerHTML = html;
    };
    
    // public fields
    this.dataSource = null;  
    this.children = new Array(); 
    this.columns = 1;
    this.columnBorderStyle = "solid 1px black;";
    this.columnAlign = "center";
    
    // public setters
    this.setElement = function(value) { _element = value; }
    this.setTemplate = function(value) { _template = new JTemplate(value); }
    
    // public getters 
    this.getElement = function() { return _element; }
    this.getTemplate = function() 
    { 
        if (_template == null)
            _template = new JTemplate(_element.innerHTML); 
        return _template;
    }
    this.getEvent = function() { return _jevent; }
    this.getHtml = function() { return _element.innerHTML; }
    
    // public events
    this.onDataBind = function(action) { this.getEvent().addListener(this,"onDataBind",action); }; 
    this.onDataBindRemove = function(action) { this.getEvent().removeListener(this,"onDataBind",action); };
    
    this.dataBind = function()
    {
        // start to evaluate columns
        var html = (this.columns <= 1) ? "" : "<table>";
        
        // validate data source
        if (this.dataSource == null || this.dataSource.length == 0)
        {
            _drawHtml(html);
            return;
        }
        
        for(var i = 0; i < this.dataSource.length; i++)
        {
            // format data item
            var dataItem;
            if (typeof(this.dataSource[i]) == 'string')
            {
                dataItem = {"Value": this.dataSource[i], "Index": i};
            }
            else
            {
                dataItem = this.dataSource[i];
                dataItem.Index = i;
            }
            
            // fire event
            var dataArgs = {"dataItem": dataItem, "index": i};           
            this.getEvent().fireEvent(this,'onDataBind', dataArgs);        
            
            // evaluate item             
            var itemHtml = this.getTemplate().evaluate(dataArgs.dataItem);
            
            // generate child repeater
            for(var j = 0; j < this.children.length; j++)
            { 
                var templateHtml = this.children[j].getTemplate().template;
                var replaceHtml = this.children[j].getHtml();
                itemHtml = itemHtml.replace(new RegExp(templateHtml,"g"), replaceHtml );
            }
            
            // item evaluate columns
            if (this.columns > 1)
            {
                var currentColumn = ((i + 1) % this.columns);
                if (currentColumn == 1)
                   itemHtml = "<tr><td style='vertical-align:top;border:" + this.columnBorderStyle + "' align='" + this.columnAlign + "'>" + itemHtml + "</td>";
                else if (currentColumn == 0)
                   itemHtml = "<td style='vertical-align:top;border:" + this.columnBorderStyle + "' align='" + this.columnAlign + "'>" + itemHtml + "</td></tr>";
                else
                   itemHtml = "<td style='vertical-align:top;border:" + this.columnBorderStyle + "' align='" + this.columnAlign + "'>" + itemHtml + "</td>";
            }
            
            html += itemHtml;
        }
        
        // end to evaluate columns
        if (this.columns > 1)
        {
            var currentColumn = -1;
            var i = this.dataSource.length;
            
            if (this.dataSource.length > this.columns)
            {
                while (currentColumn != 1)
                {
                    i += 1;
                    currentColumn = (i % this.columns);
                    
                     
                    if (currentColumn == 0)
                       html += "<td></td></tr>";
                    else if (currentColumn > 1)
                       html += "<td></td>";
                }
            }
            else
            {
                html += "</tr>";
            }
            html += "</table>";
        }
        
        // redraw html
        _drawHtml(html);
    }
}