/*
Script: tabs.js

Author: Andrew Hite - Impulse Development

*/

var Tabs = new Class({
	Implements: [Options],
	
	options: {
	},
	
	initialize: function(element, options){
		this.setOptions(options);
		
		this.tabElement = element;
		
		this.defaultWidth = this.tabElement.getWidth();
		
		this.textElement = new Element('span').set('text', this.tabElement.get('text'));
		
		this.tabElement.set('text', '');
		this.textElement.inject(this.tabElement);
		
		this.textElement.setOpacity(0);
		
		this.tabElement.set('morph', { duration: 'short' });
		this.textElement.set('morph', { duration: 'short' });
		
		this.tabElement.addEvent('mouseenter', this.slideOut.bind(this));
		this.tabElement.addEvent('mouseleave', this.slideIn.bind(this));
	},
	
	slideOut: function(){		
		this.tabElement.morph({
			width: this.textElement.getWidth() + this.tabElement.getWidth() + 6
		});
		
		this.textElement.morph({
			opacity: 1
		});
	},
	
	slideIn: function(){
		this.tabElement.morph({
			width: this.defaultWidth
		});
		
		this.textElement.morph({
			opacity: 0
		});
	}
});

window.addEvent('domready', function() {
	$$('.sections-buttons').each(function(element){
		new Tabs(element);	
	});
});