/**
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;
}
})();