var StyledTabbedPanel = {
init: function(tabsContainerId, moveLeftId, moveRightId) {
var tabsContainer = dojo.byId(tabsContainerId);
var moveLeft = dojo.byId(moveLeftId);
var moveRight = dojo.byId(moveRightId);
var tabs = tabsContainer.getElementsByTagName('li');
var height = 100;
tabsContainer.scrollTop = document._tabScrollTop;
function move(dir) {
var scrollTop = tabsContainer.scrollTop + height * dir;
if (scrollTop >= 0 && scrollTop <= tabsContainer.scrollHeight - height) {
tabsContainer.scrollTop = scrollTop;
document._tabScrollTop = scrollTop;
}
initLinks();
return false;
}
function initLinks() {

moveLeft.style.visibility = (tabsContainer.scrollTop - height >= 0) ? 'visible' : 'hidden';
moveRight.style.visibility =
(tabsContainer.scrollTop + height <= tabsContainer.scrollHeight - height) ? 'visible' : 'hidden';
fixScrollAlignment();
}
function fixScrollAlignment() {
if (tabsContainer.scrollTop > tabsContainer.scrollHeight - height) {
tabsContainer.scrollTop -= height;
}
var mod = tabsContainer.scrollTop % height;
if (mod != 0) {
tabsContainer.scrollTop -= mod;
}
}
function initTabs() {
var prevTab;
dojo.forEach(tabs, function(tab) {
DomUtils.removeStyle(tab, 'first-tab');
DomUtils.removeStyle(tab, 'last-tab');
if (tab.style.display != 'none') {
if (prevTab && tab.offsetTop != prevTab.offsetTop) {
DomUtils.addStyle(tab, 'first-tab');
DomUtils.addStyle(prevTab, 'last-tab');
}
prevTab = tab;
}
});
DomUtils.addStyle(tabs[0], 'first-tab');
DomUtils.addStyle(prevTab, 'last-tab');
}
function onResize() {
initLinks();
initTabs();
}
moveLeft.onclick = function() {
return move(-1);
};
moveRight.onclick = function() {
return move(1);
};
tabsContainer.resizeTabs = onResize;

dojo.disconnect(StyledTabbedPanel.onresize);
StyledTabbedPanel.onresize = dojo.connect(window, 'onresize', onResize);
dojo.addOnLoad(function() {
setTimeout(onResize, 100);
});

onResize();
}
};