function BrashTabs(controlContainer, xmlDocument, thumbnailWidth, totalWidth) {
    this.controlContainer = controlContainer;
    this.xmlDoc = xmlDocument;
    this.thumbnailWidth = thumbnailWidth;
    this.totalWidth = totalWidth;
    this.canvasWidth = 200;
    this.canvasHeight = 200;
    this.activeCategory = "undefined";
    this.activeTemplate = "undefined";
    this.listposition = 0;
    this.listStep = 0;
    this.timerID = null;    
}

BrashTabs.prototype.Draw = function() {
    var xmlNode = this.xmlDoc.getElementsByTagName('category');
    var ulElement = document.createElement('ul');    
            
    var i,j;
    var iRow = 0, jRow = 0;
    for (i=0; i < xmlNode.length;i++) {
        if (xmlNode[i].nodeType != 1) continue;                
        var liElement = document.createElement('li');
        var anchorElement = document.createElement('a');
        var categoryID = xmlNode[i].getAttribute('id');
        var textData = document.createTextNode(xmlNode[i].getAttribute('name'));
        anchorElement.appendChild(textData);
        liElement.appendChild(anchorElement);
        ulElement.appendChild(liElement);                
        anchorElement.onclick = createMethodReference(this, "setActiveCategory",categoryID);
        if((this.activeCategory == "undefined" && iRow  == 0) || (this.activeCategory == categoryID)) {
            liElement.className = 'active';
                    
            //Create Table
            var tableElement = document.createElement('table'); 
            var tableBody = document.createElement('tbody');   
            var tableRow = document.createElement('tr');             
                
            tableElement.cellPadding = "0";
            tableElement.cellSpacing = "0";
            liElement.appendChild(tableElement);
            tableElement.appendChild(tableBody);
            tableBody.appendChild(tableRow);
                    
            var ulElemetInt = document.createElement('ul');
            ulElemetInt.id = "ulElemetInt";
                                        
            for(j=0; j < xmlNode[i].childNodes.length; j++) {
                if (xmlNode[i].childNodes[j].nodeType != 1) continue;
                var templateID = xmlNode[i].childNodes[j].getAttribute('id');
                var liElemetInt = document.createElement('li');
                var divElement = document.createElement('div');
                var imgElem = document.createElement('img');
                imgElem.src = "../Images/Canvas/Thumbnails/" + templateID + ".png";                        
                divElement.onclick = createMethodReference(this, "setActiveTemplate",templateID);
                divElement.id = templateID;
                divElement.appendChild(imgElem);
                liElemetInt.style.width = this.thumbnailWidth + "px";
                liElemetInt.appendChild(divElement);
                ulElemetInt.appendChild(liElemetInt);
                if((this.activeTemplate == "undefined" && jRow  == 0) || (this.activeTemplate == templateID)) {
                    divElement.className = 'active';  
                    this.activeTemplate = templateID;  
                    this.canvasWidth = xmlNode[i].childNodes[j].getAttribute('width');;
                    this.canvasHeight = xmlNode[i].childNodes[j].getAttribute('height');;
                }
                jRow++;
            }
            ulElemetInt.style.width = jRow*this.thumbnailWidth + 'px';
            ulElemetInt.style.marginRight = this.listposition + 'px';
                         
            //add scroll part
            var tableCellScrl = document.createElement('td');
            tableCellScrl.className = "rcell";
                    
            this.createTemplateNav(jRow, ulElemetInt, tableCellScrl);
                                        
            tableRow.appendChild(tableCellScrl); 
                    
            //add list part
            var tableCellLst = document.createElement('td');
            var divListContainer = document.createElement('div');
            tableCellLst.className = "lcell";
            divListContainer.className = "lst";                    
            divListContainer.style.width = this.totalWidth + "px";
            divListContainer.appendChild(ulElemetInt);
            tableCellLst.appendChild(divListContainer);
            tableRow.appendChild(tableCellLst);                                   
                    
            tableBody.appendChild(tableRow);
        } 
        iRow++;       
    }
            
    //remove old elements
    this.controlContainer.innerHTML = "";
    this.controlContainer.appendChild(ulElement); 
}

BrashTabs.prototype.setActiveTemplate = function(at) {
    this.activeTemplate = at;
    this.Draw();
} 

BrashTabs.prototype.setActiveCategory = function(ac) {            
    this.activeCategory = ac;
    this.activeTemplate = "undefined";
    this.listposition = 0
    this.Draw();
} 

function createMethodReference(object, methodName, at) {
    return function () {
        object[methodName](at);
    };
}  

BrashTabs.prototype.createTemplateNav= function(totalItems, list, parent) {
    var ItemsWidth = totalItems*this.thumbnailWidth;
    
    var imgScrlRight = document.createElement('img');
    imgScrlRight.id = 'imgScrlRight';
    parent.appendChild(imgScrlRight); 
            
    var imgScrlLeft = document.createElement('img'); 
    imgScrlLeft.id = 'imgScrlLeft';          
    parent.appendChild(imgScrlLeft);    
            
    if(this.listposition == 0) {
        imgScrlLeft.src = "../Images/Canvas/UI/moveLeftDisable.gif"; 
    } else {
        imgScrlLeft.src = "../Images/Canvas/UI/moveLeft.gif"; 
        imgScrlLeft.style.cursor = "pointer";
        var obj = this; 
        imgScrlLeft.onclick = function() {
            obj.timerID = setInterval(function(){obj.MoveElement('left');},10);
            imgScrlLeft.onclick = null;
        }                    
    }
                   
    if(ItemsWidth > this.totalWidth - this.listposition) {
        imgScrlRight.src = "../Images/Canvas/UI/moveRight.gif"; 
        imgScrlRight.style.cursor = "pointer";
        var obj = this;
        imgScrlRight.onclick = function() {
            obj.timerID = setInterval(function(){obj.MoveElement('right');},10);
            imgScrlRight.onclick = null;
        }               
    } else {
        imgScrlRight.src = "../Images/Canvas/UI/moveRightDisable.gif";                              
    }            
}
        
BrashTabs.prototype.MoveElement = function(dir) {
    if(dir == 'right')
        this.listStep -= 5;
    else
        this.listStep += 5;
            
    document.getElementById('ulElemetInt').style.marginRight =  (this.listposition + this.listStep) + "px"; 
            
    if(Math.abs(this.listStep) >= this.thumbnailWidth) {
        clearInterval(this.timerID);
        this.listposition += this.listStep;
        this.listStep = 0;
        this.Draw();
    }                       
}