var Panel = new Class({
	
	Implements: Chain,
	
	initialize: function(element, url, morph, settings)
	{
		this.id = element;
		this.e = $(element);
		this.url = url;
		this.m = morph;
		this.s = settings;
		
		this.applySettings();
		this.t = new Fx.Morph(this.e,{duration:'normal', transition:'cubic:out', onComplete: function() { this.afterMorph();}.bind(this) });
		this.e.setStyle('opacity',0);
		//this.t.addEvent('onComplete', function() { this.callChain();}.bind(this))};
	},
	
	
	doRefresh: function()
	{
		this.clearChain();
		this.chain(	function(){ this.doMorph(this.m.morphClose); }		);
		this.chain(	function(){ this.doRequest(); }					);
		this.chain(	function(){ this.doMorph(this.m.morphOpen); }		);
		this.callChain();
	},
	
	doOpen: function()
	{
		this.clearChain();
		this.chain(	function(){ this.doRequest(); }					);
		this.chain(	function(){ this.doMorph(this.m.morphOpen); }		);
		this.callChain();
	},
	
	doClose: function()
	{
		this.clearChain();
		this.chain(	function(){ this.doMorph(this.m.morphClose); }		);
		this.callChain();
	},
	
	doRequest: function()
	{
		this.e.empty();//clear the div for cleaner transition
		new Request.HTML({url:this.url, update:this.e, 	data:vo, onSuccess:function(responseTree, responseElements, responseHTML, responseJavaScript){this.afterRequest(responseTree, responseElements, responseHTML, responseJavaScript);}.bind(this) }).send();
	},
	
	afterRequest: function(responseTree, responseElements, responseHTML, responseJavaScript)
	{
		//alert(responseJavaScript);
		this.callChain();
		initAjaxButton(this.id);
		initMoreButton(this.id);
		initTips(this.id);
		
	},
	
	doMorph: function(what)
	{
		
		this.t.start(what);
	},
	
	afterMorph: function(t)
	{
		if(this.callChain()== false)
		{
			if($('player')&&this.id=='content')
			{
				$('player').setStyle('visibility','visible');
			}
			if(this.parentChain)
			{
				this.parentChain.callChain();
				
			}
		}else{
			this.callChain();
		}
	},
	
	addToParentChain: function(parentChain)
	{
		this.parentChain = parentChain;
	},
	
	applySettings: function()
	{
		this.e.setStyle('width',this.s.width);
		this.e.setStyle('top',this.s.top);
		this.e.setStyle('left',this.s.left);
		this.e.setStyle('marginLeft',this.s.marginLeft);
		this.e.setStyle('display', 'block');
	}
	
});