var LabelColors = [
		{bg: '#DEE5F2', fg: '#5A6986'}, {bg: '#E0ECFF', fg: '#206CFF'},
		{bg: '#DFE2FF', fg: '#0000CC'}, {bg: '#E0D5F9', fg: '#5229A3'},
		{bg: '#FDE9F4', fg: '#854F61'}, {bg: '#FFE3E3', fg: '#CC0000'},

		{bg: '#5A6986', fg: '#DEE5F2'}, {bg: '#206CFF', fg: '#E0ECFF'},
		{bg: '#0000CC', fg: '#DFE2FF'}, {bg: '#5229A3', fg: '#E0D5F9'},
		{bg: '#854F61', fg: '#FDE9F4'}, {bg: '#CC0000', fg: '#FFE3E3'},

		{bg: '#FFF0E1', fg: '#EC7000'}, {bg: '#FADCB3', fg: '#B36D00'},
		{bg: '#F3E7B3', fg: '#AB8B00'}, {bg: '#FFFFD4', fg: '#636330'},
		{bg: '#F9FFEF', fg: '#64992C'}, {bg: '#F1F5EC', fg: '#006633'},

		{bg: '#EC7000', fg: '#FFF0E1'}, {bg: '#B36D00', fg: '#FADCB3'},
		{bg: '#AB8B00', fg: '#F3E7B3'}, {bg: '#636330', fg: '#FFFFD4'},
		{bg: '#64992C', fg: '#F9FFEF'}, {bg: '#006633', fg: '#F1F5EC'}
	];

function hex(x)
{
	var x = parseInt(x);
	if (x==0) return '00';
	x = parseInt(x).toString(16);
	if (x.length < 2) return '0' + x;
	return x;
}

function rgb2hex(rgb)
{
	if (rgb[0]=='#') return rgb;
	rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
	return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}


function ColorList(onChangeColor)
{
	this.panel = $('<ul class="label-colors"></ul>');
	var that = this;
	$.each(LabelColors, function(i, c)
	{
		that.panel.append(
			$('<li>a</li>').css({'background-color': c.bg, 'color': c.fg}));
	});
	$('li', this.panel).click($.proxy(this, 'on_change_color'));
	if (onChangeColor)
		this.onChangeColor = onChangeColor;
	else
	{
		this.onChangeColor = function(bg, fg)
		{
			alert(bg + ' ' + fg);
		};
	}
}

ColorList.prototype =
{
	on_change_color: function(e)
	{
		if (this.onChangeColor)
		{
			var li = $(e.target);
			this.onChangeColor(rgb2hex(li.css('background-color')), rgb2hex(li.css('color')));
		}
	},

	reset_list: function()
	{
		$('li', this.panel).attr('class', '');
	},

	set_current: function(bg, fg)
	{
		this.reset_list();
		var klass = 'selected1';
		if (bg < fg) klass = 'selected2';
		$('li', this.panel).filter(function()
		{
			var li = $(this);
			return rgb2hex(li.css('background-color'))==bg.toLowerCase() &&
							rgb2hex(li.css('color'))==fg.toLowerCase();
		}).attr('class', klass);
	}
};


function LabelPanel(options)
{
	this.settings = $.extend(
	{
			onChangeColor: function(bg, fg){alert('Change Color');},
			onDelColor: function(){alert('Delete Color');},
			onRename: function(){alert('Rename');},
			onDelete: function(){alert('Delete');}
	}, options);

	this.panel = $('<div />');
	this.color_list = new ColorList($.proxy(this, 'on_change_color'));
	this.panel.append(this.color_list.panel);
	var actions = $('<ul></ul>').append(
		$('<li>Удалить цвет</li>').click($.proxy(this, 'on_del_color')),
		$('<li>Переименовать</li>').click($.proxy(this, 'on_rename')),
		$('<li>Удалить ярлык</li>').click($.proxy(this, 'on_delete'))
	);
	this.panel.append(actions);
	this.panel = EmbededPanel(this.panel);
}

LabelPanel.prototype =
{
	on_change_color: function(bg, fg)
	{
		if (this.settings.onChangeColor)
			this.settings.onChangeColor(bg, fg);
	},

	on_del_color: function(e)
	{
		if (this.settings.onDelColor)
			this.settings.onDelColor(e);
	},

	on_rename: function(e)
	{
		if (this.settings.onRename)
			this.settings.onRename(e);
	},

	on_delete: function(e)
	{
		if (this.settings.onDelete)
			this.settings.onDelete(e);
	},

	update_settings: function(options)
	{
		this.settings = $.extend(this.settings, options);
	},

	set_current_color: function(bg, fg)
	{
		this.color_list.set_current(bg, fg);
	}
};


function CreateLabelButton(url, label, bg, fg, embeded_panel)
{
	var div = $('<div class="label-button" />');
	var button = $('<i />').css({'background-color': bg, 'border-color': bg, 'color': fg});

	function onChangeColor(b, f)
	{
		bg = b;
		fg = f;
		button.css({'background-color': b, 'border-color': b, 'color': f});
		alert('Change Color label ' + label + ' on ' + b + ' ' + f);
	}

	function onDelColor()
	{
		bg = '#EEEEEE';
		fg = '#222222';
		button.css({'background-color': '#EEEEEE', 'border-color': '#EEEEEE', 'color': '#222222'});
		alert('Delete Color label ' + label);
	}

	function onRename(){alert('Rename label ' + label);}
	function onDelete()
	{
		alert('Delete label ' + label);
		div.remove();
	}

	button.panel_button(
		{
			embeded_panel: embeded_panel.panel,
			selfclick_close: false,
			onOpen: function()
			{
				embeded_panel.update_settings(
					{
						onChangeColor: onChangeColor,
						onDelColor: onDelColor,
						onRename: onRename,
						onDelete: onDelete
					});
				embeded_panel.set_current_color(bg, fg);
			}
		});
	var a = $('<a />');
	a.attr('href', url).text(label);
	div.append(button, a);
	div.hover(function(){button.text('▼');}, function(){button.text('');});
	return div;
}

function CreateMailLabelButton(options)
{
	var	settings = $.extend(
	{
		chain_id: '',
		label: 'Входящие',
		fg: '#222222',
		bg: '#EEEEEE',
		onSearch: function(label)
		{
			alert('Search mail chains with label ' + label);
		},
		labelDeleted: function(chain_id, label)
		{
			alert('Delete label ' + label + ' form chain ' + chain_id);
		}
	}, options);

	function mouse_in()
	{
		$(this).css({'color': settings.bg, 'background-color': settings.fg});
	}

	function mouse_out()
	{
		$(this).css({'color': settings.fg, 'background-color': settings.bg});
	}

	var button = $('<span class="label" />');
	var search_btn = $('<a href="#" />').text(settings.label);
	search_btn.attr('titile', 'Поиск всех сообщений с ярлыком ' + settings.label);
	search_btn.css({'color': settings.fg, 'background-color': settings.bg});
	search_btn.hover(mouse_in, mouse_out);
	search_btn.click(function()
	{
		if (settings.onSearch) settings.onSearch(settings.label);
		return false;
	});
	var del_btn = $('<b />').text('X');
	del_btn.attr('titile', 'Удалить ярлык  ' + settings.label + ' из данной цепочки');
	del_btn.css({'color': settings.fg, 'background-color': settings.bg});
	del_btn.hover(mouse_in, mouse_out);
	del_btn.click(function()
	{
		if (settings.labelDeleted) settings.labelDeleted(settings.chain_id, settings.label);
		button.remove();
		return false;
	});
	var div = $('<i>&nbsp;</i>').css({'border-color': settings.bg, 'background-color': settings.fg});
	button.append(search_btn, div, del_btn);
	return button;
};