var SlideBar = Class.create({ initialize: function(name, gap) { this.name = name; this.gap = gap; }, version: '0.0.1', slide_tween: "", tab_tween: "", current: "", duration: 1, tab: true, slide: function (id){ var target = $(this.name + '-items'); var child = $(this.name + '-'+id); var targetx = child.offsetLeft - this.gap; var effects = new Array(); effects.push( new Effect.Move(target, { sync:true, x: -targetx, y: 0, mode: 'absolute', duration: this.duration }) ); var tab = $(this.name + '-tab'); this.current = this.name + '-' +id; if (this.tab){ var control = $(this.name + '-controls-' +id); var tabx = control.offsetLeft; if (this.tab_tween) this.tab_tween.cancel(); effects.push( new Effect.Move(tab, { sync:true, x: tabx, y: 0, mode: 'absolute', duration: this.duration }) ); } else { var control = $(this.name + '-controls'); var tabs = this.getTabs(); var length = tabs.length; for (i = 0; i < length; i++){ var marker = $(this.name +"-controls-"+i); (i == id) ? marker.addClassName("selected") : marker.removeClassName("selected"); } } new Effect.Parallel(effects); }, next: function(){ var tabs = this.getTabs(this.name); var tab = $(this.name + '-tab'); var currentNode = this.getCurrent(this.current, tabs); if (currentNode < tabs.length){ var id = (currentNode != -1) ? id = tabs[ currentNode + 1 ] : tabs[1]; id = id.split(this.name+"-").join(""); this.slide(id); } }, prev: function(){ var tabs = this.getTabs(this.name); var tab = document.getElementById(this.name + '-items'); var currentNode = this.getCurrent(this.current, tabs); if (currentNode > 0) { var id = tabs[ currentNode - 1 ]; id = id.split(this.name+"-").join(""); this.slide(id); }; }, getTabs: function(){ var target = document.getElementById(this.name + '-items'); var tabs = target.getElementsByTagName("ul"); var tab_array = new Array(); for (var i =0; i < tabs.length; i++){ if (tabs[i].id) tab_array.push(tabs[i].id); } return tab_array; }, getCurrent: function(node, tabs){ for (var i = 0; i < tabs.length; i++){ if (node == tabs[i]) return i; } return -1; } });