
var crossFadeTabs = function( selector ) {
	var list 			= $( selector );

	var heights 	= {};
	var labels 		= $$( "#"+selector+" dt" );
	var panes 		= $$( "#"+selector+" dd" );
	var tabHeight = labels[0].getCoordinates().height;
	
	var fx 				= new Fx.Elements( panes, { duration: 500 } );

	panes.each( function( pane, i ) {
		pane.addClass( 'pane' );
		var o = {};

		heights[i] = pane.getCoordinates().height;
		if( i != 0 ) {
			o[i] = { opacity : 0 };
			fx.set( o );
			pane.setStyle( 'visibility', 'hidden' );
		} else {
			list.setStyle( 'height', heights[i] + tabHeight );
			pane.setStyle( 'height', heights[i] );

		}
	});


	labels.each( function( label, i ) {
		label.addClass( 'label' );
		

		label.addEvent( "click", function( event ) {
			label.addClass( 'selected' );
			var o = {};

			labels.each( function( oldLabel, j ) {
				if( i != j && oldLabel.hasClass( 'selected' ) ) {
					oldLabel.removeClass( 'selected' );
					o[j] = { opacity : 0 };
					o[i] = { opacity : 1, height : [ heights[j], heights[i] ] };
					fx.start( o );
					list.setStyle( 'height', heights[i] + tabHeight );
					
				}
			});
		});
		if( i == 0 ) { 
			label.addClass( 'selected' ); 
		}
	});

};


