/**
 * Because JavaScript is enabled, we can override the non-JS default styles with styles for the
 * JS-enabled sidetab-panel.
 */
function stp_enableJSStyles() {
	$$('.ds-sidetab-panel-content').each(function(el) {
		el.setStyle('height', 500);
	});
	// Hide all panels...
	$$('.ds-sidetab-panel-box').each(function(el) {
		el.setStyles({
			'position':   'absolute',
			'display':    'none',
			'opacity':    0,
			'top':        0,
			'left':       0,
			'height':     460,
			'overflow-y': 'auto'
		});
	});
	// Except for the active panel
	$$('.ds-sidetab-panel-box.active').each(function(el) {
		el.setStyles({
			'display': 'block',
			'opacity': 1
		});
	});
	// Force the proper width on all panel boxes because IE is loopy.
	$$('.ds-sidetab-panel').each(function(el) {
		var width = el.getElement('.ds-sidetab-panel-content').getSize().x;
		
		el.getElements('.ds-sidetab-panel-box').each(function(box) {
			var widthPadding = box.getStyle('padding-left').toInt();
			widthPadding += box.getStyle('padding-right').toInt();
			
			box.setStyle('width', width - widthPadding);
		});
	});
}

/**
 * Add the mouse enter, leave, and click effects to a tab's link.
 *
 * @param tabLink The tab <a> tag to add the mouse event effects to.
 */
function stp_addTabEffects(tabLink) {
	
	// Make animations snappy
	tabLink.set('morph', {'duration': 50});

	// Add the required events (mouse enter, leave, and click)
	// (Only fired for non-active tabs)
	tabLink.addEvents({
		mouseenter: function() {
			if (!this.hasClass('active')) {
				// Morph to semi-active
				this.morph({
					'padding-right': 30,
					'margin-left': 10,
					'opacity': 0.9
				});
			}
		},
		mouseleave: function() {
			if (!this.hasClass('active')) {
				// Morph to inactive
				this.morph({
					'padding-right': 15,
					'margin-left': 25,
					'opacity': 0.7
				});
			}
		},
		click: function() {
			if (!this.hasClass('active')) {
				var panel = this.getParent().getParent().getParent();
				
				// Morph the active link to inactive
				panel.getElements('.ds-sidetab-panel-nav li a.active').each(function(el) {
					var toInactiveFx = new Fx.Morph(el, {'duration': 50});
				
					toInactiveFx.start({
						'padding-right': 15,
						'margin-left': 25,
						'background-color': '#ddd',
						'background-image': 'url(tab-shade.gif)',
						'opacity': 0.7
					});
				
					toInactiveFx.addEvent('complete', function(el) {
						el.removeClass('active');
						el.removeEvents('complete');
					});
				});
			
				// Morph this tab to active
				var toActiveFx = new Fx.Morph(this, {'duration': 50});
			
				toActiveFx.start({
					'padding-right': 30,
					'margin-left': 10,
					'background-color': '#f6f6f6',
					'background-image': 'none',
					'opacity': 1
				});
				
				toActiveFx.addEvent('complete', function(el) {
					el.addClass('active');
					el.removeEvents('complete');
				});
			}
		}
	});
}

/**
 * Add the panel switching code to a tab's <a> element.
 *
 * @param tabLink The tab <a> element to add the click event handler to.
 */
function stp_addTabClickEvent(tabLink){
	tabLink.addEvent('click', function() {
		if (!this.hasClass('active')) {
			var panel = this.getParent().getParent().getParent();
			var oldBox = panel.getElements('.ds-sidetab-panel-box.active')[0];
			var newBox = $(this.getProperty('href').split('#')[1]);
	
			var oldBoxFx = new Fx.Tween(oldBox, {'duration': 300});
			var newBoxFx = new Fx.Tween(newBox, {'duration': 400});
	
			newBox.setStyle('opacity', '0');
			newBox.setStyle('display', 'block');

			// On finish, remove 'active' class from old box and hide display
			oldBoxFx.addEvent('complete', function(e) {
				e.removeClass('active');
				e.setStyle('display', 'none');
			});

			// On finish, add 'active' class to new box
			newBoxFx.addEvent('complete', function(e) {
				e.addClass('active');
			});

			// Start crossfade effect
			oldBoxFx.start('opacity', '0');
			newBoxFx.start('opacity', '1');
		}

		return false;
	});
}

/**
 * When the DOM is ready, prepare the sidetab-panels and MAN THE TORPEDOES.
 */
window.addEvent('domready', function() {
	// Override the non-JS styles
	stp_enableJSStyles();
	
	// For each sidetab-panel on the page...
	$$('.ds-sidetab-panel').each(function(panel) {
		// Add the hover and click events to this panel's tabs
		panel.getElements('.ds-sidetab-panel-nav li a').each(function(el) {
			return stp_addTabEffects(el);
		});
		
		// Add tab click event (panel cross-fade) to this panel's tabs 
		panel.getElements('.ds-sidetab-panel-nav li a').each(function(el) {
			stp_addTabClickEvent(el);
		});
	});
});