// Namespace our methods so they are private and don't populate the global namespace
var SpinSix = function(){
	
	var TabControl = Class.create({
	  initialize: function(elem) {
			// Get all the tab list items
			this.buttons  = elem.select('ul:first-child li');
			this.contents = elem.select('.tab_content');
			
			elem.down('ul').observe('click', this.onclickButton.bindAsEventListener(this));

			// Get all the tab contents
			this.buttons.each(function(button, index) {
				button.setAttribute('index', index);
			});

			var active = elem.getAttribute('active') || 1;
			this.setActive(this.buttons[active-1]);
	  },
	
	  onclickButton: function(event) {
			var clicked_tab = event.findElement('li');
			if ((clicked_tab === undefined) || (clicked_tab == this.active)) return;
			this.setActive(clicked_tab);
		},
		
		setActive: function(clicked_tab) {			
			// Remove the old class
			if (this.active) {
				this.active.removeClassName('active');
				this.getContent(this.active).removeClassName('active');
			}
			
			clicked_tab.addClassName('active');	
			this.getContent(clicked_tab).addClassName('active');
			
			this.active = clicked_tab;	// Update active element with new item
		},
		
		getContent: function(button) {
			return this.contents[button.getAttribute('index')];
		}
	});

	$(document).observe('dom:loaded', function() {
		$$('ul.buttons li a').each(function(elem) {
			var height = elem.getHeight();
			
			var line_class = "single-line";
			
			if (height >= 36) {
				line_class = "triple-line";
				elem.up('ul').addClassName(line_class);
			} else if (height >= 24)
				line_class = "double-line";
			
			elem.up().addClassName(line_class);
			
			elem.setStyle({ width: elem.getWidth() + 'px', display: 'block' });
		});
		
		$$('div[tabs=true]').each(function(elem) { new TabControl(elem); });
	});
	
}();