/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	tx_s2pwsproducts_comparison_tabs.js
	November 2009 / S2 INTERMEDIA GmbH / Alexander Buch
	$Id$
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Mootools specific
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
(function(){
	if (typeof(MooTools) == 'undefined') 
		return;
	var $ = document.id;
	
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       Tabnavigation
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	window.addEvent('domready', function(e){
		var tabSheets = $$('.tx-s2pwsproducts-comparison-tab');
		
		var tabNavigation = new Element('div', {
			'class': 'navigation-tab-zone clearfix'
		}).inject(tabSheets[0], 'before');
		
		var tabNavigationList = new Element('ul', {
			'class': 'navigation-tab clearfix'
		}).inject(tabNavigation);
		
		tabSheets.each(function(el, i) {
			var tabItem = new Element('li', {
				'class': (i == 0) ? 'tab-first active' : (i == tabNavigationList.length) ? 'tab-last' : ''
			}).inject(tabNavigationList);
			
			var tabItemLink = new Element('a', {
				'html': el.get('title'),
				'title':  el.get('title'),
				'href': 'javascript:void(0);',
				'class': (i == 0) ? 'tab-active' : '',
				'events': {
					'click': function(e) {
						var e = new Event(e).stop();
						tabNavigation.getElements('a').each(function(item){
							item.getParent().removeClass('active');
							item.removeClass('tab-active');
						});
						this.addClass('tab-active');
						this.getParent().addClass('active');
						tabSheets.each(function(sheet) {
							sheet.setStyle('display', 'none');
						});
						el.setStyle('display', 'block');
					}
				}
			}).inject(tabItem);
			el.setStyle('display', 'none');
		});
		tabSheets[0].setStyle('display', 'block');
	});
})();