(function($)
{
	$.fn.panel_button = function(options)
	{
		if (this.length == 0) return this;
		
		var win = $(window);
		var settings = $.extend(
		{
			h_align: 'left',
			panel: '',
			panel_container: 'body',
			embeded_panel: undefined,
			selfclick_close: true,
			onOpen: undefined,
			onClose: undefined
		}, options);

		var button = this.first();
		var is_opened = false;
		var is_just_opened = true;
		var panel = settings.embeded_panel
		if (!panel)
			panel = EmbededPanel(settings.panel, settings.panel_container);

		var close_panel = function()
		{
				panel.hide();
				button.removeClass('pressed');
				is_opened = false;
				if (settings.onClose) settings.onClose(panel);
		};

		button.mousedown(function(e)
		{
			var clone_button = $(this);
			if (is_opened)
			{
				close_panel();
				if (button[0] == clone_button[0]) return false;
			}
			button = clone_button;
			var v_align = 'bottom';
			button.addClass('pressed');
			var panel_height = panel.outerHeight();
			var panel_width = panel.outerWidth();
			var win_y = win.scrollTop();
			var win_h = win.height();
			var btn_pos = button.offset();
			var btn_height = button.outerHeight();
			var btn_width = button.outerWidth();
			var btn_padding = parseInt(button.css('padding-bottom'));
			var btn_border = parseInt(button.css('border-bottom-width'));
			var bottom_space = win_y + win_h - btn_pos.top - btn_height;
			if (bottom_space < panel_height)
			{
				var top_space = btn_pos.top - win_y;
				if (top_space >= panel_height || top_space > bottom_space)
				v_align = 'top';
			}
			if (v_align == 'bottom')
			{
				panel.css('top', btn_pos.top + btn_height);
				panel.css('bottom', 'auto');
			}
			else
			{
				panel.css('top', btn_pos.top - panel_height);
				panel.css('bottom', 'auto');
			}
			if (settings.h_align == 'left')
			{
				panel.css('right', 'auto');
				panel.css('left', btn_pos.left);
			}
			else
			{
				var btn_width = button.outerWidth();
				panel.css('left', btn_pos.left - panel_width - 1 + btn_width);
				panel.css('right', 'auto');
			}
			panel.show();
			is_opened = true;
			is_just_opened = true;
			if (settings.onOpen) settings.onOpen(panel);
		});
		
		$(document).mousedown(function(e)
		{
			if (is_opened)
			{
				if (e.target == button[0] && is_just_opened)
				{
					is_just_opened = false;
					return;
				}
				var in_panel = false;
				if  (e.target == panel[0])
				{ 
					if (!settings.selfclick_close) return;
				}
				else
				{
					$.each($(e.target).parents(), function(i, v)
					{
						if (v == panel[0])
						{
							in_panel = true;
							return false;
						}
					});
				}
				if (in_panel) return;
				close_panel();
			}
		}).click(function(e)
		{
			if (is_opened)
			{
				var in_panel = false;
				$.each($(e.target).parents(), function(i, v)
				{
					if (v == panel[0])
					{
						in_panel = true;
						return false;
					}
				});
				if (in_panel) close_panel();
			}
		});

		return button;
	};

})(jQuery);


function PannelButton(title, options)
{
	var button = jQuery('<button class="with-panel"></button>').append(title);
	return button.panel_button(options);
}

function EmbededPanel(panel, container)
{
		if (!container)
			container = 'body';
		var panel = jQuery('<div class="embeded-panel"></div>').append(panel).appendTo(container);
		panel.hide();
		panel.css('position', 'absolute');
		return panel
}