Source: vera.js

/**
    JavaScript code for the Veracitor project.
    Dependent on the global variable 'vera' recieved from a request made to
    the Veracitor home page.
    @name Vera
    @constructor
    @author John Brynte Turesson
 */
(function () {

    /** The current visible tab. */
    var activeTab;

    /** CSS classes. */
    var CLASSES = {
        'ACTIVE' : 'active'
    };
    
    var SIDE_TAB_WIDTH = 40;
    
    /** The time taken to switch from one tab to another in milliseconds. @inner @private @memberOf Veracitor */
    var TAB_SWITCH_TIME = 300;

    
    $(document).ready(init);
    
    /**
        This function is run when the document is loaded.
        @name Vera#init
        @function
     */
    var init = function () {
        var tab, name;
        
        activeTab = 0;
        
        vera.dom = {};
        
        for(tab in vera.tabs) {
            name = vera.tabs[tab].name.toLowerCase();
        
            // Create pointers to the dom elements
            vera.dom[name] = {};
            // Pointer to the view
            vera.dom[name].view = $("#" + vera.tabs[tab].viewid);
            // Pointer to the menu item
            vera.dom[name].menu = $("#" + vera.tabs[tab].menuid);
            // An index to specify the view position
            vera.dom[name].index = parseInt(tab);
            
            // Add click events
            vera.dom[name].menu.click(menuClick);
            
            // Set the active tab and initialize the tab positions
            if(tab == activeTab) {
                vera.dom[name].view.css({
                    'left' : '0px'
                });
                vera.dom[name].menu.addClass(CLASSES.ACTIVE);
            } else {
                vera.dom[name].view.css({
                    'left' : '100%'
                });
            }
        }
    }
    
    /**
        Handles the event fired when a menu tab is clicked.
        If the current visible tab is to the left of the clicked
        tab it will be animated out from the screen to the left,
        otherwise to the right.
        The clicked tab will be animated in to the screen, following
        the motion of the previous visible tab.
        @name Vera#menuClick
        @function
        @param {Event} evt The fired event.
     */
    var menuClick = function (evt) {
        /** A key in the vera.dom object of tab objects.
            @name Vera#menuClick#tab */
        var tab;
        /** The index of the clicked tab. */
        var clickedTab;

        clickedTab = 0;
        
        // Retrieve the index of the clicked tab
        for(tab in vera.dom) {
            if(vera.dom[tab].menu[0] == evt.target.parentNode) {
                clickedTab = vera.dom[tab].index;
            }
        }
        
        for(tab in vera.dom) {
            // Animate the clicked tab to the center of the screen
            if(vera.dom[tab].index == clickedTab) {
                vera.dom[tab].menu.addClass(CLASSES.ACTIVE);
                
                vera.dom[tab].view.animate({
                    'left' : '0px'
                }, TAB_SWITCH_TIME, null);
            
            // Animate the previous visible tab out of the screen
            } else if(vera.dom[tab].index == activeTab) {
                vera.dom[tab].menu.removeClass(CLASSES.ACTIVE);
                
                vera.dom[tab].view.animate({
                    'left' : (vera.dom[_tab].index < clickedTab) ?
                            '-100%' : '100%'
                }, TAB_SWITCH_TIME, null);
            
            // Move every other tab relative to the clicked tab
            } else {
                vera.dom[tab].menu.removeClass(CLASSES.ACTIVE);
                
                vera.dom[tab].view.css({
                    'left' : (vera.dom[tab].index < clickedTab) ?
                            '-100%' : '100%'
                });
            }
        }
        
        activeTab = clickedTab;
        
        return false;
    }

})();