var ToolPalette = {    
    intitialize: function () {
        var titleHeight = 26;
        var tallestRow = 0;
        var main = $$('.toolPalette_panes')[0];
        var offSet = main.getCoordinates().top;
        this.panes = $$('.toolPalette_pane');    
        var defaultPane = null;
        
        for (var i=0, l=this.panes.length; i<l;i++){
            var p = this.panes[i];
            p.setStyle('display', 'block');
            p.getElement('.toolPalette_paneContent').setStyle('display', 'block');
            
            var coords = p.getCoordinates();
            var t = coords.top - offSet;
            tallestRow = (coords.height > tallestRow ) ? coords.height : tallestRow;
            p.setStyles({'position': 'absolute', 'z-index' : i+1 ,'top': (t) + 'px'}); // TODO, get height at runtime
            if (p.hasClass('toolPalette_selectedPane') || i ==0) {
                defaultPane = p;
            }
        }
        
        var totalHeight = (((this.panes.length - 1) * titleHeight) + tallestRow);
        main.setStyle('height',  totalHeight + 'px');
        
        for (var i=0, l=this.panes.length; i<l;i++){
            var p = this.panes[i];
            p.setStyle('height', tallestRow + 'px');
            p.topTarget = i * titleHeight;
            p.bottomTarget = totalHeight - ( (l-i) * titleHeight);
            
            p.slideEffect = new Fx.Style(p, 'top', {'duration': 850, 'transition': Fx.Transitions.Cubic.easeOut});
            p.slideEffect.start(t);// preprocessing for better performance            
            p.getElement('.toolPalette_paneTitle').addEvent('mouseenter', this.doPaneIn.pass([p], this));
        }
        this.setPane(defaultPane);
    },
    setPane : function (active) {
        for (var i=0, l=this.panes.length, gtt = true; i<l;i++) {
            var p = this.panes[i];
            p.slideEffect.stop();
            if (gtt == true) {
                p.slideEffect.set(p.topTarget);
                gtt = !(p == active);
            } else {
                p.slideEffect.set(p.bottomTarget);
            }
        }
    },
    doPaneIn : function (active) {
        for (var i=0, l=this.panes.length, gtt = true; i<l;i++) {
            var p = this.panes[i];
            p.slideEffect.stop();
            if (gtt == true) {
                p.slideEffect.start(p.topTarget);
                gtt = !(p == active);
            } else {
                p.slideEffect.start(p.bottomTarget);
            }
        }
    }
}