Expandable = Class.create({
	initialize: function(element,c){
		
		this.element = $(element);
		this.expanded = false;
		this.addObservers();
		
		if(c == 0){
			currExpanded = this.element.id;
			currOption = this.element;
			Effect.toggle($('expandable_'+this.element.id),'Blind', {duration:0.3});
			Effect.toggle($('expandable_'+this.element.id),'Appear', {duration:0.3});
			Element.removeClassName(this.element,'expandable');
			Element.addClassName(this.element,'shrinkable');
			this.expanded = true;
		}
		
	},
	
	addObservers: function(){
		this.observers = {
			clickThis: this.clickThis.bind(this)
		}
		
		this.element.observe("click",this.observers.clickThis);
	},
	
	clickThis: function(e){			
		
		Effect.toggle($('expandable_'+this.element.id),'Blind', {duration:0.3});
		Effect.toggle($('expandable_'+this.element.id),'Appear', {duration:0.3});
		
		if(currExpanded != null){
			Effect.toggle($('expandable_'+currExpanded),'Blind', {duration:0.3});
			Element.removeClassName($(currOption),'shrinkable');
			Element.addClassName($(currOption),'expandable');
			$(currOption).expanded = false;
		}
		
		if(this.element.hasClassName('shrinkable')){
			this.expanded = false;
			//Effect.Fade($('expandable_'+this.element.id),{duration: 0.3, from: 1, to: 0});
			Element.removeClassName(this.element,'shrinkable');
			Element.addClassName(this.element,'expandable');
		}else{
			this.expanded = true;
			//Effect.Appear($('expandable_'+this.element.id),{duration: 0.3, from: 0, to: 1});
			//Effect.BlindDown($('expandable_'+this.element.id),{duration: 0.3});
			Element.removeClassName(this.element,'expandable');
			Element.addClassName(this.element,'shrinkable');
		}
		currExpanded = this.element.id;
		currOption = this.element;
		e.stop();
		
	}
	
});

function init(){
	currExpanded = null;
	currOption = null;
	i = 0;
	$$(".expandable").each(function(expandable){
		var x = new Expandable($(expandable),i);	
		i++;			  
	});
}


Event.observe(window,'load',init);