var NXC = NXC || {};

NXC.Tabs = new Class( {

	Implements: [Options, Events],

	options: {
		'transitionDuration': 500,
		'startIndex': 0,
		'selectedLinkStyle': false,
		'selectedTabStyle': false,
		'onStart': $empty,
		'onComplete': $empty
	},

	stop			: false,
	tabs         : [],
	links        : [],
	currentIndex : 0,

	initialize: function( linksSelector, tabsSelector, options ) {
		this.links = document.getElements( linksSelector );
		this.tabs  = document.getElements( tabsSelector );

		this.setOptions( options );

		var fragment = new URI().get( 'fragment' );
		this.currentIndex = this.options.startIndex;
		if( fragment ) {
			fragment = decodeURIComponent( fragment );
			this.links.each( function( link, index ) {
				if( fragment == link.get( 'href' ).replace( '#', '' ) ) {
					this.currentIndex = index;
				}
			}.bind( this ) );
		}

		this.showStartTab( this.currentIndex );

		this.installEvents();
	},

	installEvents: function() {
		this.links.each( function( link, index ) {
			link.addEvent( 'click', function( e ) {
				e.stop();

				if( index !== this.currentIndex ) {
					this.showTab( index );
					if( link.get( 'href' ) ) {
						window.location = new URI().set( 'fragment', link.get( 'href' ).replace( '#', '' ) ).toString();
					}
				}
			}.bind( this ) );
		}.bind( this ) );
	},

	showStartTab: function( index ) {
		this.links.removeClass( this.options.selectedLinkStyle );

		this.tabs.setStyle( 'display', 'none' );
		this.tabs.setStyle( 'opacity', 0 );
		this.tabs.removeClass( this.options.selectedTabStyle );
		this.tabs[ index ].setStyles( {
			'display': 'block',
			'opacity': '1'
		} ).getParent().setStyle(
			'height', this.getContentWrapperHeight( this.tabs[ index ] )
		);

		if( this.options.selectedLinkStyle !== false ) {
	    	this.links[ index ].addClass( this.options.selectedLinkStyle );
		}
		if( this.options.selectedTabStyle !== false ) {
	    	this.tabs[ index ].addClass( this.options.selectedTabStyle )
		}

		this.currentIndex = index;
	},

	showTab: function( index ) {
		var link       = this.links[ index ];
		var showTab    = this.tabs[ index ];
		var currentTab = this.tabs[ this.currentIndex ];

		this.fireEvent( 'start', [ currentTab, showTab ] );
		if (this.stop){
			this.stop=false;
			return false;
		}
		if( this.options.selectedLinkStyle !== false ) {
	    	this.links.removeClass( this.options.selectedLinkStyle );
	    	link.addClass( this.options.selectedLinkStyle );
		}

		if( this.options.selectedTabStyle !== false ) {
	    	this.tabs.removeClass( this.options.selectedTabStyle );
	    	showTab.addClass( this.options.selectedTabStyle );
		}

		currentTab.get( 'tween', { property: 'opacity', duration: this.options.transitionDuration } ).start( 0 ).chain( function() {
			currentTab.setStyle( 'display', 'none' );
		}.bind( this ) );

		showTab.setStyle( 'display', 'block' );
		showTab.get( 'tween', { property: 'opacity', duration: this.options.transitionDuration } ).start( 1 );
		showTab.getParent().get( 'tween', { property: 'height', duration: this.options.transitionDuration } ).start(
			this.getContentWrapperHeight( showTab )
		).chain( function() {
			this.fireEvent( 'complete', [ currentTab, showTab ] );
		}.bind( this ) );

		this.currentIndex = index;
	},

	getContentWrapperHeight: function( tab ) {
		return tab.getStyle( 'height' ).toInt() + tab.getParent().getStyle( 'padding-top' ).toInt() + tab.getParent().getStyle( 'padding-bottom' ).toInt();
	}
} );