/**
 * Main JavaScript file
 *
 * @package     Tabber
 * @version     1.0.2
 *
 * @author      Peter van Westen <peter@nonumber.nl>
 * @link        http://www.nonumber.nl
 * @copyright   Copyright (C) 2010 NoNumber! All Rights Reserved
 * @license     http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 */

window.addEvent( 'domready', function() {
	// Only do stuff if tabber_nav is found
	if ( $$( 'div.tabber_nav' ).length ) {
		Tabber = new Tabber();
	} else {
		// Try again 2 seconds later, because IE sometimes can't see object immediatly
		(function() {
			if ( $$( 'div.tabber_nav' ).length ) {
				Tabber = new Tabber();
			}
		}).delay( 2000 );
	}
});

var Tabber = new Class({
	initialize: function()
	{
		var self = this;
		this.docScroll = new Fx.Scroll( window );
		this.containers = new Array();

		$$( 'div.tabber_container' ).each( function( container ) {
			var active = 0;

			$ES( 'div.tabber_content', container ).each( function( el ) {
				el.fx = new Fx.Style( el, 'height', { 'duration' : tabber_slide_speed, onComplete: function() { self.autoHeight( el ); } } );
			});

			// add onclick events on tabs
			$ES( 'li.tabber_tab', container ).each( function( el, i ) {
				self.containers[el.id] = container.id;

				// set first tab as active or active tab
				if ( ( !i && !el.hasClass( 'inactive' ) ) || el.hasClass( 'active' ) ) {
					active = el.id;
				}

				el.addEvent( 'click', function() { self.showTab( el.id, container.id ); } );
			});

			// add fx
			$ES( 'div.tabber_item', container ).each( function( el ) {
				el.fade_in = new Fx.Styles( el, { 'duration' : tabber_fade_in_speed } );
				el.fx = new Fx.Slide( el, { 'duration' : 0, onComplete: function() { self.autoHeight( el.getParent() ); } } );
				el.fx.hide();
			});

			// show tabs list
			$ES( 'div.tabber_nav', container ).each( function( el ) {
				el.setStyle( 'display', 'block' );
			});

			// hide content titles
			$ES( 'h2.tabber_title', container ).each( function( el ) {
				el.setStyle( 'display', 'none' );
			});

			// show only active tab
			self.showTab( active, container.id, 1 );
		});

		// add onclick events on tab links {tablink=...}
		$$( 'a.tabber_tablink' ).each( function( el ) {
			if ( el.rel && typeof self.containers[el.rel] !== 'undefined' ) {
				el.addEvent( 'click', function() {
					self.showTab( el.rel, self.containers[el.rel], 0, 1 );
					self.docScroll.toElement( $( el.rel ) );
				} );
				el.href = 'javascript://';
			}
		});
	},

	showTab: function( id, c_id, first, scroll )
	{
		var self = this;
		var container = $( c_id );
		var item =  $( id );
		var isactive = ( item && item.hasClass( 'active' ) );
		var content = null;

		// remove all active classes
		$ES( 'li.tabber_tab', container ).each( function( el ) {
			if ( el.hasClass( 'active' ) ) {
				el.removeClass( 'active' );
				content = $( 'item_'+el.id );
				if ( content ) {
					content.getParent().getParent().setStyle( 'height', parseInt( content.getStyle( 'height' ) ) );
				}
			}
		});

		if ( item ) {
			item.addClass( 'active' );
		}
		
		var el = $( 'item_'+id );

		// show active content block
		if ( el ) {
			content = el.getParent().getParent();
			content.className = ( 'tabber_content '+( el.className.replace( 'tabber_item', '' ) ) ).trim();
			el.fx.stop();
			// show active content block
			if ( first ) {
				el.fx.show();
				this.autoHeight( el.getParent() );
				this.autoHeight( content );
			} else if ( !isactive ) {
				el.fade_in.stop();
				el.setStyle( 'opacity', 0 );
				el.fx.show();
				this.autoHeight( el.getParent() );
				el.fade_in.start( { 'opacity' : 1 } );
				content.fx.stop().start( parseInt( el.getStyle( 'height' ) ) );
			}
			if ( ( tabber_scroll && !first ) || scroll ) {
				this.docScroll.stop().toElement( container );
			}
		}

		// hide all content block
		$ES( 'div.tabber_item', container ).each( function( el ) {
			if ( id && el.id && el.id != 'item_'+id ) {
				el.fx.hide();
			}
		});
	},

	autoHeight: function( el )
	{
		if ( el.getStyle( 'height' ) && parseInt( el.getStyle( 'height' ) ) > 0 ) {
			el.setStyle( 'height', 'auto' );
		}
	}
});