var TextExpander = new Class({
	Implements: [Options, Events],
	
	
	getOptions: function(){
		return {
		};
	},
	
	options: {
	},
	
	initialize: function(container,options){
		
		if (!$(container)) return false;
		
		this.setOptions(this.getOptions(), options);
		
		this.container = $(container);
		
		this.text = this.container.getProperty('html');
		
		this.container.empty();
		
		this.container.setStyles({'height':'100px','overflow':'hidden'});
		
		//create the expander div
		this.expander = new Element('div').setProperty('id', 'contentTextResizable').setStyles({'height':'80px','overflow':'hidden'}).inject(this.container);
		
		//create the span
		this.span = new Element('div',{'id':'contentTextSpan','html':this.text}).inject(this.expander);
		
		
		//create the button
		this.button = new Element('a',{'href':'#','text':'Ampliar text','styles':{'float':'right'}}).inject(this.container);
		
		this.button.addEvent('click', function(){
				this.toggle();
		}.bind(this));
		
		this.effect = new Fx.Morph(this.container, {duration: 500});
	},
	
	toggle: function() {
		
		if (this.container.getStyle('height') == '100px') {
			//maximize text
			this.expander.setStyle('height',this.span.offsetHeight+"px");
			
			//begin the animation
			this.effect.start({height:(this.span.offsetHeight+20)+"px"}).chain(function() {
				this.button.setProperty('text','Reduir Text');
			}.bind(this));
		} else {
			this.effect.start({height:(100)+"px"}).chain(function(){
				this.expander.setStyle('height','80px');
				this.button.setProperty('text','Ampliar Text');
			}.bind(this));
			
		}
			
	}
});