added tabset

tabset.js

@@ -0,0 +1,104 @@
+/**
+ * Unobtrusive TabSet
+ * Author: John Nunemaker
+ * Website: Addicted To New (http://addictedtonew.com)
+ * Requires: Prototype 1.6+
+ * 
+ * - Checks url to see if it should activate based on hash (ie: http://somedomain.com/#team)
+ * - Ff no hash in url or hash in url is for a different tab set, it activates the first tab
+ *   in the set
+ * - Tabs can be bookmarked because of the url checking
+ * - Sets a class of 'active' on the active tab (li), can be changed with activeClass option
+ *
+ * Usage:
+ * <ul id="some_id">
+ *   <li><a href="#about">About</a></li>
+ *   <li><a href="#team">Team</a></li>
+ *   <li><a href="#contact">Contact</a></li>
+ * </ul>
+ *
+ * <div id="about">Some text...</div>
+ * <div id="team">Some text...</div>
+ * <div id="contact">Some text...</div>
+ *
+ * <script type="text/javascript">
+ *   new TabSet('some_id');
+ *   // new TabSet('some_id', {activeClass: 'current'}); // would change the active class to current
+ * 	 // new TabSet('some_id', {stopEvent:true}); // stops the click event when tab link is clicked
+ * </script>
+ */
+var TabSet = Class.create({ 
+	/* element is the id of the tab set ul */ 
+	initialize: function(element, options) { 
+		this.options = $H({ activeClass: 'active', stopEvent: false }).merge(options); 
+		this.element = $(element);
+		this.tabs 	 = this.element.select('a');
+		this.areas 	 = $A([]);
+		this.tabs.each(function(tab) {
+			var area = this.areaForTab(tab);
+			if (area) { this.areas.push(area); }
+		}.bind(this));
+		this.areas.invoke('hide');
+		this.addObservers();
+		this.setInitialTab(); 
+	},
+
+	addObservers: function() { 
+		this.tabs.each(function(tab) { tab.observe('click', this.onClick.bindAsEventListener(this)); }.bind(this)); 
+	},
+
+	setInitialTab: function() {
+		var initialTab = this.tabs.first();
+		if (window.location.hash) {
+			this.tabs.detect(function(tab) {
+				if (this.parseHash(tab.href) == this.parseHash(window.location.hash)) {
+					initialTab = tab;
+				}
+			}.bind(this));
+		} 
+		this.showTab(initialTab); 
+	},
+
+	showTab: function(tab) { 
+		var tab = $(tab); 
+		this.areas.invoke('hide');
+		this.setActiveListElement(tab);
+		this.areaForTab(tab).show();
+	},
+
+	setActiveListElement: function(tab) {
+		this.removeActiveClass();
+		$(tab).up().addClassName(this.options.get('activeClass'));
+	},
+
+	removeActiveClass: function() {
+		this.tabs.each(function(tab) {
+			tab.up().removeClassName(this.options.get('activeClass')); 
+		}.bind(this));
+	},
+
+	isTab: function(el) { 
+		return (this.tabs.include($(el))) ? true : false; 
+	},
+
+	isArea: function(el) { 
+		return (this.areas.include($(el))) ? true : false;
+	},
+
+	onClick: function(event) { 
+		if (this.options.get('stopEvent')) { event.stop(); } 
+		var el = Event.findElement(event, 'a'); 
+		this.showTab(el); 
+	},
+
+	areaForTab: function(tab) {
+		var tab     = $(tab);
+	  var area_id = tab.readAttribute('href').split('#')[1];
+	  return $(area_id);
+	},
+
+	parseHash: function(href) {
+		var str = href.split('#').last();
+	  return str;
+	}
+});