if (!window.LFI)
	var LFI = new Object();
	
LFI.Tabs = Class.create();
LFI.Tabs.prototype = {
	speed: 0.5,
	selectedClassName: 'ui-tabs-selected',
	hiddenClassName: 'ui-tabs-hide',
	
	initialize: function(selector) {
		var self=this;
		$($$(selector)[0].parentNode).addClassName('ui-tabs');
		$$(selector+' a').each(this.initTab.bind(this));
  	},

	initTab: function(el) {
		this.getTabContent(el).addClassName('ui-tabs-panel');
		if ($(el.parentNode).hasClassName('first')) {
			this.showContent(el);
		} else {
			this.getTabContent(el).addClassName('ui-tabs-panel').addClassName(this.hiddenClassName);
		}
		el.observe('click', this.showContent.bind(this, el));
	},

	showContent: function(el, e) {
		if (!$(el.parentNode).hasClassName(this.selectedClassName)) {
			if (e) {
				// Find previous tab
				$(el.parentNode).siblings().each(function(li){
					if (li.hasClassName(this.selectedClassName)) {
						li.removeClassName(this.selectedClassName);

						// Create the overlay element.
						var bgcolor = $('product-expanded').getStyle('background-color');
						if (!bgcolor || bgcolor == 'transparent' || bgcolor == 'rgba(0, 0, 0, 0)') bgcolor = 'white';
						var overlay = new Element('div').setStyle({
							position: 'absolute',
							top: '2px', left: 0,
							width: '100%', height: '100%',
							backgroundColor: bgcolor,
							opacity: 0,
							zIndex: 10
						});
						this.getTabContent(li.childElements()[0])
							.setStyle({ position: 'relative' })
							.insert({ top: overlay });
						new Effect.Appear(overlay, {
							duration: this.speed,
							from: 0,
							to: 1,
							afterFinish: function(event) {
								event.element.up('div').addClassName(this.hiddenClassName);
								// Remove the overlay from the old pane...
								var overlay = event.element.remove();
								// ...and add it to the newly active one.
								this.getTabContent(el)
									.setStyle({position: 'relative'})
									.insert({ top: overlay })
									.removeClassName(this.hiddenClassName);
								// Then fade out the overlay to reveal the contents of the newly active pane.
								new Effect.Fade(overlay, {
									duration: this.speed,
									from: 1,
									to: 0,
									afterFinish: function(event) {
										event.element.remove();
									}.bind(this)
								});
							}.bind(this)
						});
					}
				}.bind(this));
			}
			// Set the initially visible tab.
			$(el.parentNode).addClassName(this.selectedClassName);
		}
		
		// Kill default event
		if (e) e.preventDefault();
	},
	
	getTabContent: function(aTag) {
 		return $(aTag.href.split('#')[1]);
	}
};