var CustomizeButton = Class.create(
{
	active: false,
	
	animating: false,
	
	height: null,
	
	initialize: function( element )
	{
		this.element = $( element );
		if( !this.element ) return;
		
		this.initDOM();
		this.initOther();
		this.initEvents();
	},
	
	initDOM: function()
	{
		this.dom = {};
		this.dom.customizeBox = $( "customize-box" );
		this.dom.customizeList = $( "customize-list" );
	},
	
	initOther: function()
	{
		this.height = this.dom.customizeList.getHeight();
		
		// set "height" instead of "max-height" for IE6
		
		if( typeof IEVersion != "undefined" && IEVersion == 6 )
			this.dom.customizeBox.setStyle( { height: (( this.height || 250 ) + 30 ) + "px" } );
		else
			this.dom.customizeBox.setStyle( { maxHeight: ( this.height || 250 ) + "px" } );
	},
	
	initEvents: function()
	{
		this.element.observe( "click", this.handleClick.bind( this ) );
	},
	
	handleClick: function( e )
	{
		Event.stop( e );
		this.element.blur();
		
		if( this.animating )
			return; // ignore clicks during animation sequence
		
		if( this.active )
			this.deactivate();
		else
			this.activate();
	},
	
	activate: function()
	{
		this.element.setStyle( { display: "" } );
		this.element.addClassName( "active" );
		this.active = true;
		Effect.BlindDown( this.dom.customizeBox, { beforeStart: this.setAnimatingTrue.bind( this ), afterFinish: this.setAnimatingFalse.bind( this ) } );
		return this;
	},
	
	deactivate: function()
	{
		this.element.removeClassName( "active" );
		this.active = false;
		Effect.BlindUp( this.dom.customizeBox, { beforeStart: this.setAnimatingTrue.bind( this ), afterFinish: this.setAnimatingFalse.bind( this ) } );
	},
	
	isActive: function()
	{
		return this.active;
	},
	
	setAnimatingTrue: function()
	{
		this.animating = true;
	},
	
	setAnimatingFalse: function()
	{
		this.animating = false;
	},
	
	isAnimating: function()
	{
		return this.animating;
	}
});

document.observe( "dom:loaded", function(){ new CustomizeButton( "customize" ) } );