﻿/** SimpleTabs - Unobtrusive Tabs with Ajax** @version		1.0** @license		MIT License* @author		Harald Kirschner <mail [at] digitarald.de>* @copyright	2007 Author*/
var SimpleTabs = new Class({ Implements: [Events, Options], options: { show: 0, selector: ".tab-tab", classWrapper: "tab-wrapper", classMenu: "tab-menu", classContainer: "tab-container", onSelect: function(a, b, c) { a.addClass("tab-selected"); b.setStyle("display", "") }, onDeselect: function(a, b, c) { a.removeClass("tab-selected"); b.setStyle("display", "none") }, onRequest: function(a, b, c) { b.addClass("tab-ajax-loading") }, onComplete: function(a, b, c) { b.removeClass("tab-ajax-loading") }, onFailure: function(a, b, c) { b.removeClass("tab-ajax-loading") }, onAdded: Class.empty, getContent: null, ajaxOptions: {}, cache: true }, initialize: function(b, a) { this.element = $(b); this.setOptions(a); this.selected = null; this.build() }, build: function() { this.tabs = []; this.menu = new Element("ul", { "class": this.options.classMenu }); this.wrapper = new Element("div", { "class": this.options.classWrapper }); this.element.getElements(this.options.selector).each(function(a) { var b = a.get("href") || (this.options.getContent ? this.options.getContent.call(this, a) : a.getNext()); this.addTab(a.innerHTML, a.title || a.innerHTML, b) }, this); this.element.empty().adopt(this.menu, this.wrapper); if (this.tabs.length) { this.select(this.options.show) } }, addTab: function(g, f, e) { var c = $(e); var b = (c || new Element("div")).setStyle("display", "none").addClass(this.options.classContainer).inject(this.wrapper); var h = this.tabs.length; var a = (this.options.hover) ? "mouseenter" : "click"; var d = { container: b, toggle: new Element("li").grab(new Element("a", { href: "#", title: f }).grab(new Element("span", { html: g }))).addEvent(a, this.onClick.bindWithEvent(this, [h])).inject(this.menu) }; if (!c && $type(e) == "string") { d.url = e } this.tabs.push(d); return this.fireEvent("onAdded", [d.toggle, d.container, h]) }, onClick: function(a, b) { this.select(b); return false }, select: function(a) { if (this.selected === a || !this.tabs[a]) { return this } if (this.ajax) { this.ajax.cancel().removeEvents() } var b = this.tabs[a]; var d = [b.toggle, b.container, a]; if (this.selected !== null) { var c = this.tabs[this.selected]; if (this.ajax && this.ajax.running) { this.ajax.cancel() } d.extend([c.toggle, c.container, this.selected]); this.fireEvent("onDeselect", [c.toggle, c.container, this.selected]) } this.fireEvent("onSelect", d); if (b.url && (!b.loaded || !this.options.cache)) { this.ajax = this.ajax || new Request.HTML(); this.ajax.setOptions({ url: b.url, method: "get", update: b.container, onFailure: this.fireEvent.pass(["onFailure", d], this), onComplete: function(e) { b.loaded = true; this.fireEvent("onComplete", d) } .bind(this) }).setOptions(this.options.ajaxOptions); this.ajax.send(); this.fireEvent("onRequest", d) } this.selected = a; return this } });