// Implements a panel which is displayed/hidden when a element anchor is clicked
//
// Parameters:
//
// - anchorElement: id of the anchor element
// - flyoutElement: id of the flyout element
// - (optional) align: how to align the flyout to the anchor (see Ext.Element.alignTo())
// - (optional) cls: class to be applied to the anchor element when the flyout is visible
Twi.FlyoutPanel = function(anchorElement, flyoutElement, align, cls) {
	this.version = '1.0';
	
	// toggle the visibility of the flyout panel
	this.toggle = function()
	{
		if (this._flyout.isVisible())
			this.hide();
		else
			this.show();
	};
	
	// show the flyout panel
	this.show = function()
	{
		if (this._cls!='') this._anchor.addClass(this._cls);
		this._flyout.alignTo(this._anchor, this._align);
		//this._flyout.fadeIn({endOpacity: .94, duration: .75});
		this._flyout.show();
		this._flyout.setOpacity(.94);
		var txt = this._flyout.first('INPUT');
		if (txt != null)
		{
			txt.focus();
			
			txt.on('click', this._txtClicked, this, {stopPropagation: true});
			//txt.on('mouseover', txt.focus());
		}
	};

	// hide the flyout panel
	this.hide = function()
	{
		this._flyout.fadeOut({duration: .3});
		//this._flyout.hide();
		if (this._cls!='') this._anchor.removeClass(this._cls);
	};
	
	
	// ------------------------- private -------------------------
	this._flyoutClicked = function(e)
	{
		//if (!this._preventClose)
			this.hide();
		//this._preventClose = false;
	};
	this._txtClicked = function(e)
	{
		//this._preventClose = true;
	};
	this._anchor = Ext.get(anchorElement);
	this._flyout = Ext.get(flyoutElement);
	if ((this._anchor == null) || (this._flyout == null)) return;
	this._align = (align||'');
	this._cls = (cls||'');
	this._anchor.on('click', this.toggle, this);
	this._flyout.on('click', this._flyoutClicked, this);
	this._flyout.hide();
};