var Tree = new Class({
    Implements: Options,
    
    options: {
        duration: 1000,
        transition: Fx.Transitions.linear,
        hideOnStart: true
    },
    
    initialize: function(container, handles, subMenu, options){
        this.container	= $pick($(container), $('tree'));
        this.handles	= $pick(handles, '.handle');
        this.subMenu	= $pick(subMenu, '.sub');
        this.setOptions(options);
        this.start();
    },
    
    start: function(){
        var handles = this.container.getElements(this.handles).reverse();
        handles.each(function(handle){
            var subMenu = handle.getNext(this.subMenu);
            if(subMenu != null){
                handle.setStyle('cursor', 'pointer');
                //subMenu.store('height', subMenu.getStyle('height'));
                subMenu.setStyle('overflow', 'hidden');
                if(this.options.hideOnStart) subMenu.setStyle('height', '0px');
                subMenu.fx = new Fx.Morph(subMenu, {
                    duration: this.options.duration,
                    transition: this.options.transition,
                    link: 'chain',
                    onStart: function(el){ el.h = el.getStyle('height'); },
                    onComplete: function(el){ if(el.getStyle('height') != '0px') el.setStyle('height', ''); }
                });
                handle.addEvent('click', function(){
                    var subMenu = this.getNext();
                    if(subMenu.getStyle('height') != '0px') subMenu.fx.start({ height: 0, opacity: [1, 0]});
                    else subMenu.fx.start({ height: subMenu.scrollHeight, opacity: [0, 1] });
                })
            }
        }, this)
    }
});