---------------------------------------------------------------
    |                                                              |
    |    LEAN MEAN STATE MACHINE                                   |
    |    "LOOK MA! - NO CONDITIONALS!"                             |
    |                                                              |
    | A menu system built using a Moore State Machine, for mobile. |
    | Responsive - reduce the width of your browser to view.       |
    | (webkit of course - don't waste your time with IE)           |                               |
    |                                                              |
    ---------------------------------------------------------------

var SlideNav = (function(){
                    
                    // a little help from jquery for older devices
                    $(".bm_ssli:even").css({"clear":"left"});
                    $(".bm_ssli:even .bm_sslia").css({"border-right":"1px solid #aaa"});
        
                    // cache the elements
                    var nav_bar = $('.adv_bm_bar');
                        var menu_btn = $("#bm_menu_btn");
                        var search_btn = $('#bm_search_btn');
                    
                    
                    var nav_outer = $('#adv_bm_nav_outer'); // outer wrapper
                        var nav_inner = $('#adv_bm_nav_inner'); // inner wrapper
                            var nav_main = $('.bm_nav_main'); // sections and classifieds
                            var nav_sub = $('.bm_nav_sub'); // sub-sections
                    
                    
                    var search_outer = $('#adv_bm_search_outer');
                    
                    
                    // start the Machine (states are transitions, NOT end result)
                    var state = 0;
                    var statesArray = [[1,2],[3,4,5],[8,0],[1,2],[8,0],[6,7],[3,4,5],[8,0],[3,4,5]]; 
                    // nextState = statesArray[currState][button];
                    // menu button = 0, search button = 1, subsection button = 2
                    
                    nav_bar.on('click', '.bm_btn', function(){
                        doSlide($(this).data('btn'));
                    });
                    nav_main.on('click', '.bm_slide_btn', function(){
                        // TODO: ajax for this.id
                        doSlide($(this).data('btn'));
                    });
                    
                    
                    
                    function doSlide(button){
                        state = statesArray[state][button];
                        transition[state]();
                        }
                    
                    
                    var transition = {
                        0 : function(){
                            action.close(search_outer, search_btn);
                            },
                        1 : function(){
                            action.open(nav_outer, menu_btn);
                            },
                        2 : function(){
                            action.open(search_outer, search_btn);
                            },
                        3 : function(){
                            action.close(nav_outer, menu_btn);
                            },
                        4 : function(){
                            action.close(nav_outer, menu_btn);
                            action.open(search_outer, search_btn);
                            },
                        5 : function(){
                            action.close(menu_btn);
                            action.open(nav_inner);
                                     window.scrollTo(0, 0);
                            menu_btn.addClass('bm_back_icon');
                            },
                        6 : function(){
                            action.close(nav_inner);
                            action.open(menu_btn);
                            menu_btn.removeClass('bm_back_icon');
                            },
                        7 : function(){
                            action.close(nav_inner, nav_outer);
                            action.open(search_outer, search_btn);
                            menu_btn.removeClass('bm_back_icon');
                            },
                        8 : function(){
                            action.close(search_outer, search_btn);
                            action.open(nav_outer, menu_btn);
                        }
                    }
                    
                    
                    var action = {
                        open : function(){
                                    var args = Array.prototype.slice.call(arguments);
                                    var i = args.length;  
                                    while (i--) {  
                                        args[i].addClass('open');  
                                    }
                                },
                        close : function(){
                                    var args = Array.prototype.slice.call(arguments);
                                    var i = args.length;  
                                    while (i--) {  
                                        args[i].removeClass('open');  
                                    }
                                }   
                       }
               })();