/*
* tabbedView.js - DHTML tabbed views
*
* PREREQUISITES:
* - prototype.js v1.6
* - lowpro.js v0.5
*
* TO-DO:
* - store a cookie to remember which tab was selected the last time the page was loaded
*
* v0.1 - 2007-06-05 - Morgan Aldridge
* Initial development.
* v0.1.1 - 2007-06-18 - Morgan Aldridge
* Initial working beta.
* v0.1.2 - 2007-08-01 - Morgan Aldridge
* Work began on porting this to the Protype.js framework
* v0.1.3 - 2007-08-10 - Morgan Aldridge
* Port to Prototype.js feature complete. Superfluous
* features still pending.
* v0.1.4 - 2007-11-29 - Morgan Aldridge
* Added functionality for disabled tabs and improved
* support for nested tab views.
* v0.1.5 - 2007-11-30 - Morgan Aldridge
* Added support for default tabs.
* v0.1.6 - 2007-12-03 - Morgan Aldridge
* Modified tab width & positioning to better support
* nested tabs and provide a more traditional layout.
* v0.1.7 - 2008-01-17 - Morgan Aldridge
* Better utilization of Prototype.js library and now
* supports Prototype.js 1.6 & Lowpro.js 0.5.
* v0.1.8 - 2008-01-21 - Morgan Aldridge
* Modifications to not add the behavior until page is
* fully ready.
* v0.1.9 - 2008-01-31 - Morgan Aldridge
* Modifications to automatically convert links to tab
* anchors (ids) to calls to selectTabById().
* v0.2.0 - 2008-02-05 - Morgan Aldridge
* Modifications to more appropriately scroll to tabs when
* anchor links are clicked.
* v0.2.1 - 2008-02-13 - Morgan Aldridge
* Switched from using lowpro's AddBehavior() and
* Event.onReady() to $$().each() and to observing
* 'dom:loaded' events, respectively.
* v0.2.2 - 2008-03-31 - Morgan Aldridge
* Replaced calls to getElementsByClassName() with
* select() to avoid issues with Safari 3.1 & Firefox 3
* v0.2.3 - 2009-04-17 - Morgan Aldridge
* Auto selects tab by URL anchor/hash.
*/
//console.log("Begin: tabbedView.js...");
function selectTab( tab )
{
// step through all the tabs in this tabview
var allTabs = tab.up().select('.tab');
for ( var i = 0; i < allTabs.length; i++ )
{
var singleTab = allTabs[i];
// is this tab in the same tab view we're working with?
if ( singleTab.up().id == tab.up().id )
{
// if this is not the tab we want to select
if ( singleTab != tab )
{
// hide its content and make sure it doesn't have the class 'selected'
if ( singleTab.hasClassName('selected') )
{
singleTab.removeClassName('selected');
}
singleTab.select('.tab_content').invoke('hide');
}
// otherwise, if this is the tab we want to select
else
{
// show its content and make sure it has the class 'selected'
if ( !singleTab.hasClassName('selected') )
{
singleTab.addClassName('selected');
}
singleTab.select('.tab_content').invoke('show');
}
}
// if it's not, then honor its existing selected/unselected tab states
else
{
var tabContentElements = singleTab.select('.tab_content');
if ( singleTab.hasClassName('selected') )
{
tabContentElements.invoke('show');
}
else
{
tabContentElements.invoke('hide');
}
}
}
}
function selectTabById( tabId )
{
selectTab( $(document.getElementById(tabId)) );
}
document.observe('dom:loaded', function() {
//console.log("\tBegin: tabbedView.js, document.observe('dom:loaded', function () { ... }) ...");
$$('div.tabbed').each(function(element) {
// get all the tab view's individual tabs
var tabs = element.select('.tab');
// count the number of tabs in this tab view
var numTabs = 0;
for ( var i = 0; i < tabs.length; i++ )
{
// is the tab in this tab view?
if ( tabs[i].up().id == element.id )
{
numTabs++;
}
}
// step through all the tabs again
var thisTabIndex = 0;
var tabOffset = -2;
var defaultTab;
for ( var i = 0; i < tabs.length; i++ )
{
var tab = tabs[i];
// is the tab in this tab view?
if ( tab.up().id == element.id )
{
// remember the default tab
if ( tab.hasClassName('default') )
{
defaultTab = tab;
}
// or at least the first tab
else if ( thisTabIndex == 0 )
{
defaultTab = tab;
}
// grab the h3 element with a class of 'tab_heading' and apply
// some CSS to it to pull it out and make it into a tab
var tabHeading = tab.select('.tab_heading');
if (tabHeading.first().tagName.toLowerCase() == 'h3')
{
tabHeading.first().setStyle({
'display': 'block',
'position': 'absolute',
'top': '-25px',
'left': tabOffset+'px'
});
tabOffset += tab.select('.tab_heading').first().getWidth()+2;
}
// increment the index of this tab in this tab view
thisTabIndex++;
}
}
if ( location.hash )
{
var urlAnchor = location.hash.substring(location.hash.lastIndexOf('#')+1);
if ( $(urlAnchor).hasClassName("tab") )
{
selectTabById(urlAnchor);
// scroll to the parent tab view so the tabs are in view
var tabbedViewPos = $(urlAnchor).cumulativeOffset();
window.scrollTo(tabbedViewPos.left, tabbedViewPos.top-25);
}
else
{
// show the first/default tab
selectTab( defaultTab );
}
}
else
{
// show the first/default tab
selectTab( defaultTab );
}
});
$$('div.tabbed .tab h3.tab_heading').each(function(element) {
// select the tab that this h3 element belongs to when clicked on
element.observe('click', function() {
if ( !this.up().hasClassName('disabled') )
{
selectTab(this.up())
}
});
});
$$('a.tabLink').each(function(element) {
element.observe('click', function(event) {
// parse the anchor link and select the specified tab
var tabId = this.href.substring(this.href.lastIndexOf('#')+1);
selectTabById(tabId);
// scroll to the parent tab view so the tabs are in view
var tabbedViewPos = $(tabId).cumulativeOffset();
window.scrollTo(tabbedViewPos.left, tabbedViewPos.top-25);
// prevent the default click event from occurring and scrolling to the id
event.stop();
});
});
//console.log("\tEnd: tabbedView.js, document.observe('dom:loaded', function () { ... }) ...");
});
//console.log("End: tabbedView.js.");