

function setTabsListeners() {

    var event  = YAHOO.util.Event;
    var dom    = YAHOO.util.Dom;
    var basePos;
    var maxTop;
    var selSlide;
    var activeTab = null;
    var dropInAction = false;
    
    var isIE = YAHOO.env.ua.ie || YAHOO.env.ua.opera;
    
    function tabOver() {
        var cy = dom.getY(this);

        var offset = cy-maxTop;

        if (isIE || this == activeTab || offset<-6 || offset == 0) { return; }

        if (this.downEffect != null) {
            this.downEffect.cancel();
        }

        this.upEffect = new Effect.Move(this, {y:offset, x:0, mode:'relative', transition: Effect.Transitions.sinoidal, duration: 0.2});
    }
    
    function tabOut() {
        _tabOut(this);
    }
    
    function _tabOut(element) {
        var cy = dom.getY(element);
        
        var offset = basePos-cy;
        
        if (isIE || element == activeTab || offset>6 || offset == 0) { return; }

        if (element.upEffect != null) {
            element.upEffect.cancel();
        }
        
        element.downEffect = new Effect.Move(element, {y:offset, x:0, mode:'relative', transition: Effect.Transitions.sinoidal, duration: 0.2});
    }
    
    function setTabActive() {
        
        if (dropInAction || this == activeTab) { return; }

        _setTabActive(this);

        var newSlide = this.id + 'Slide';
        dom.setStyle(selSlide, 'z-index', '3');
        dom.setStyle(newSlide, 'z-index', '2');

        dom.removeClass(newSlide, 'slideHidden');
        dom.setStyle(newSlide, 'display', 'block');

        Effect.DropOut(selSlide, { duration: '0.7', afterFinish: function() {dropInAction = false;} });
        
        dropInAction = true;
        
        selSlide = newSlide;

        /* move bookmark tail */
        var left;
        
        switch(this.id) {

            case 'about':
                left = '30px';
                break;
                
            case 'search':
                left = '167px';
                break;
                                
            case 'share':
                left = '304px';
                break;
                            
            case 'manage':
                left = '441px';
                break;
                            
            case 'discover':
                left = '578px';
                break;
                
        }

        new Effect.Morph('tabBottom', { style: 'left:'+left+';', duration: 0.7 });

    }

    function _setTabActive(elem) {

        if (elem.upEffect != null) { elem.upEffect.cancel(); }

        if (activeTab != null) {
            dom.removeClass(activeTab, 'tabActive');
            dom.addClass(activeTab, 'tab');
            dom.setY(activeTab, basePos);
        }

        dom.setY(elem, basePos-1);
        dom.removeClass(elem, 'tab');
        dom.addClass(elem, 'tabActive');
        activeTab = elem;

    }

    var tabs = dom.getElementsByClassName("tab");    

    event.addListener(tabs, 'mouseover', tabOver);
    event.addListener(tabs, 'mouseout',  tabOut);    
    event.addListener(tabs, 'click',     setTabActive);
    
    basePos = dom.getY(tabs[0]);
    maxTop  = basePos + 6;
    
    selSlide = 'aboutSlide';
    _setTabActive(tabs[0]);
} 
