var ProductDetailTab = Class.create(
{
	sectionHeight: null,
	
	initialize: function( element, detail )
	{
		this.element = $( element );
		this.detail = detail;
		
		this.initDOM();
		this.initEvents();
	},
	
	initDOM: function()
	{
		this.id = this.element.getAttribute( "id" );
		this.sectionId = this.id.replace( /-tab$/, "" );
		this.section = $( this.sectionId );
		
		this.section.setStyle( { display: "inline-block" } );
		this.sectionHeight = this.section.getHeight();
		
		var heightStyle = ( typeof IEVersion != "undefined" && IEVersion == 6 ? "height" : "max-height" );
		var tempMax = parseInt( $( this.section.parentNode ).getStyle( heightStyle ).replace( "px" ) );
		
		if( this.sectionHeight > tempMax )
			this.sectionHeight = tempMax;
			
		this.section.setStyle( { display: "" } );
		
		if( this.element.hasClassName( "active" ) )
			this.detail.setCurrentTab( this );
	},
	
	initEvents: function()
	{
		this.element.observe( "click", this.handleClick.bind( this ) );
	},
	
	handleClick: function( e )
	{
		Event.stop( e );	
		this.element.blur();
		this.activate();
	},
	
	activate: function()
	{
		this.element.addClassName( "active" );

		
		new Effect.Morph( this.detail.dom.content,
		{
			style: 'height: ' + this.sectionHeight + 'px',
			duration: this.getAdjustedDuration( 2.0 ),
			beforeStart: function()
			{
				this.detail.dom.content.setStyle( { height: this.detail.getCurrentTab().getSectionHeight() + "px", display: "block", overflow: "hidden" } );
				this.section.setOpacity( 0 );
				
			}.bind( this ),
			afterFinish: function()
			{
				this.detail.getCurrentTab().deactivate();
				this.section.addClassName( "active" );
				this.detail.setCurrentTab( this );
				this.detail.dom.content.setStyle( { height: "", display: "", overflow: "" } );
				
				new Effect.Opacity( this.section,
				{
					from: 0,
					to: 1,
					duration: 0.5
				});
			
			}.bind( this )
		});
	},
	
	deactivate: function()
	{
		this.element.removeClassName( "active" );
		this.section.removeClassName( "active" );
		
		this.detail.setCurrentTab( null );
	},
	
	getSectionHeight: function()
	{
		return this.sectionHeight;
	},
	
	getAdjustedDuration: function( duration )
	{
		var activeHeight = this.detail.getCurrentTab().getSectionHeight();
		var diff = this.sectionHeight - activeHeight;
		
		if( diff < 0 )
			diff = -diff;
		
		var percent = diff / ( this.sectionHeight * 2 );
		
		if( percent > 1 )
			percent = 1;
		
		var durr = ( duration * percent ).toFixed( 1 );
		return durr > duration ? duration : durr;
	}		
		
});