Tabbing Menu

jjo_tabbing_menu.js

( function($) {
    'use strict';
    $.fn.ToggleTabMenu = function() {
        function Tab( el ) {
                var tab = {
                    init : function( el ) {
                        this.$el = $( el );
                        this.cacheDom();
                    },
                    cacheDom : function() {
                        this.$link = this.$el.find( 'a' );
                        this.day   = this.$link.attr( 'rel' ).toLowerCase();
                    },
                    activate : function() {
                        this.$link.addClass( 'active' );
                        this.$el.addClass( 'active' );
                    },
                    deactivate : function() {
                        this.$link.removeClass( 'active' );
                        this.$el.removeClass( 'active' );
                    }
                }
                tab.init( el );
                return tab;
        };
        function View( el ) {
                var view = {
                    init : function( el ) {
                        this.$el = $( el );
                        this.cacheDom();
                    },
                    cacheDom : function() {
                        this.day = this.$el.attr( 'class' ).toLowerCase();
                    },
                    activate : function() {
                        this.$el.show();
                    },
                    deactivate : function() {
                        this.$el.hide();
                    }
                }
                view.init( el );
                return view;
        }
        function Schedule( el ) {
                var schedule = {
                    init : function( el ) {
                        this.$el = $( el );
                        this.day = this.getToday();
                        this.cacheDom();
                        this.bindEvents();
                        this.initView();
                    },
                    getToday : function() {
                        var today = new Date().getDay() || 7;
                        return today - 1;
                    },
                    cacheDom : function() {
                        this.tabs = $.map( this.$el.find( '.scheduleDays > li' ), function( tab ) {
                            return new Tab( tab );
                        });
                        this.views = $.map( this.$el.find( '.scheduleModule > li' ), function( view ) {
                            return new View( view );
                        });
                    },
                    bindEvents : function() {
                        var self = this;
                        $.each( this.tabs, function( index, tab ) {
                            tab.$link.on( 'click', self.toggleView.bind( self ) );
                        });
                    },
                    toggleView : function( event ) {
                        var self = this;
                        // Stop window from reloading
                        event.preventDefault();
                        $.each( self.tabs, function( i, tab ) {
                            // Activate clicked tab
                            if( tab.$link.is( event.target ) ) {
                                tab.activate();
                                self.views[i].activate();
                            } else {
                                // Deactivate all others
                                tab.deactivate();
                                self.views[i].deactivate();
                            }
                        });
                        return;
                    },
                    initView: function() {
                        // If we don't have a tab / view for today, activate the first tab
                        if( !this.showToday() ) {
                            this.views[0].activate();
                            this.tabs[0].activate();
                        }
                        return;
                    },
                    showToday : function() {
                        var self    = this;
                        var display = false;
                        $.each( this.views, function( i, view ) {
                            // If is todays tab
                            if( self.day === i ) {
                                // Set display to true (we have today)
                                display = true;
                                // Activate View
                                view.activate();
                                // Activate corrosponding tab
                                self.tabs[i].activate();
                                // We got what we came for, let's break out of the loop
                                return false;
                            } else {
                                // Make sure other views are hidden
                                view.deactivate();
                                // Make sure other tabs are inactive
                                self.tabs[i].deactivate();
                            }
                        });
                        // Return display, true || false depending on if we have a day
                        return display;
                    },
                }
                schedule.init( el );
                return schedule;
        };
        var menu = this;
        this.init = function() {
            menu.shedule = $.map( menu, function( el ) {
                return new Schedule( el );
            });
            return this;
        }
        return this.init();
    }; // end plugin
})( jQuery );


jQuery( document ).ready( function( $ ) {
  // And then inside your document.ready function
  var schedule = $( '#jg-schedule' ).ToggleTabMenu();
});