Element.extend({
  fadeIn: function(duration, onComplete, bind) {
		this.getFx(duration ? duration : 200, onComplete, bind);
		this.fx.set({ opacity:0 });
		this.show();
		this.fx.start({ opacity:1 });
	},
	
	fadeOut: function(duration, onComplete, bind) {
	  this.getFx(duration ? duration : 200, onComplete, bind);
		this.fx.start({ opacity:0 });
	},
	
	getFx: function(duration, onComplete, bind, options) {
		options = options || {};
		if (!this.fx)
		  this.fx = new Fx.Styles(this, $extend({ wait:false, duration:duration }, options));
		this.fx.$events = this.fx.$events || {};
  	this.fx.$events['onComplete'] = onComplete ? [ onComplete.bind(bind) ] : [];
	},
	
	hide: function() {
		this.setStyle('display', 'none');
		return this;
	},
	
	show: function() {
		this.setStyle('display', '');
	},
	
	render: function(data, return_html) {
		var html = TrimPath.processDOMTemplate(this.id, $merge({}, data));
		return return_html ? html : new Element('div').setHTML(html).getFirst();
	}
});