var anbu = { // BOUND ELEMENTS // ------------------------------------------------------------- // Binding these elements early, stops jQuery from "querying" // the DOM every time they are used. el : { main : $('.anbu'), close : $('#anbu-close'), zoom : $('#anbu-zoom'), hide : $('#anbu-hide'), show : $('#anbu-show'), tab_pane : $('.anbu-tab-pane'), hidden_tab_pane : $('.anbu-tab-pane:visible'), tab : $('.anbu-tab'), tabs : $('.anbu-tabs'), tab_links : $('.anbu-tabs a'), window : $('.anbu-window'), closed_tabs : $('#anbu-closed-tabs'), open_tabs : $('#anbu-open-tabs'), content_area : $('.anbu-content-area') }, // CLASS ATTRIBUTES // ------------------------------------------------------------- // Useful variable for Anbu. isZoomed : false, // is anbu in full screen mode small_height : $('.anbu-content-area').height(), // initial height of content area active_tab : 'anbu-active-tab', // the name of the active tab css tab_data : 'data-anbu-tab', // the data attribute of the tab link mini_button_width : '2.6em', // size of anbu when compact window_open : false, // is the top window open? active_pane : '', // current active pane // START() // ------------------------------------------------------------- // Sets up all the binds for Anbu! start : function () { // hide initial elements anbu.el.close.hide(); anbu.el.zoom.hide(); anbu.el.tab_pane.hide(); // bind all click events anbu.el.close.click( function () { anbu.close_window(); }); anbu.el.hide.click( function () { anbu.hide(); }); anbu.el.show.click( function () { anbu.show(); }); anbu.el.zoom.click( function () { anbu.zoom(); }); anbu.el.tab.click( function () { anbu.clicked_tab($(this)); }); }, // CLICKED_TAB() // ------------------------------------------------------------- // A tab has been clicked, decide what to do. clicked_tab : function (tab) { // if the tab is closed if(anbu.window_open && anbu.active_pane == tab.attr(anbu.tab_data)) { anbu.close_window(); } else { anbu.open_window(tab); } }, // OPEN_WINDOW() // ------------------------------------------------------------- // Animate open the top window to the appropriate tab. open_window : function (tab) { // can't directly assign this line, but it works $('.anbu-tab-pane:visible').fadeOut(200); $('.' + tab.attr(anbu.tab_data)).delay(220).fadeIn(300); anbu.el.tab_links.removeClass(anbu.active_tab); tab.addClass(anbu.active_tab); anbu.el.window.slideDown(300); anbu.el.close.fadeIn(300); anbu.el.zoom.fadeIn(300); anbu.active_pane = tab.attr(anbu.tab_data); anbu.window_open = true; }, // CLOSE_WINDOW() // ------------------------------------------------------------- // Animate closed the top window hiding all tabs. close_window : function() { anbu.el.tab_pane.fadeOut(100); anbu.el.window.slideUp(300); anbu.el.close.fadeOut(300); anbu.el.zoom.fadeOut(300); anbu.el.tab_links.removeClass(anbu.active_tab); anbu.active_pane = ''; anbu.window_open = false; }, // SHOW() // ------------------------------------------------------------- // Show the Anbu toolbar when it has been compacted. show : function () { anbu.el.closed_tabs.fadeOut(600, function () { anbu.el.open_tabs.fadeIn(200); }) anbu.el.main.animate({width: '100%'}, 700); anbu.el.main.removeClass('hidden'); }, // HIDE() // ------------------------------------------------------------- // Hide the anbu toolbar, show a tiny re-open button. hide : function () { anbu.close_window(); anbu.el.window.slideUp(400, function () { anbu.close_window(); anbu.el.main.addClass('hidden'); anbu.el.open_tabs.fadeOut(200, function () { anbu.el.closed_tabs.fadeIn(200); }) anbu.el.main.animate({width: anbu.mini_button_width}, 700); }); }, // TOGGLEZOOM() // ------------------------------------------------------------- // Toggle the zoomed mode of the top window. zoom : function () { if(anbu.isZoomed) { height = anbu.small_height; anbu.isZoomed = false; } else { // the 6px is padding on the top of the window height = ($(window).height() - anbu.el.tabs.height() - 6) + 'px'; anbu.isZoomed = true; } anbu.el.content_area.animate({height: height}, 700); } } jQuery(document).ready(function () { // launch anbu anbu.start(); });