var active = false;

switchStyle = function (elem) {
	if (active) {
		$$('link[rel*=alternate stylesheet][title=' + active.readAttribute('title') + ']').last().disabled = true;
		active.removeClassName('active');
	}
	elem.addClassName('active');
	$$('link[rel*=alternate stylesheet][title="' + elem.readAttribute('title') + '"]').last().disabled = false;
	active = elem;
}

document.observe ("dom:loaded", function() {
	var activeDefaultName = GetCookie("style") ? GetCookie("style") : 'normal';
	$$('link[rel*=alternate stylesheet][title!=empty]').each(function(elem){elem.disabled = true;});
	$$('link[rel*=alternate stylesheet][title="' + activeDefaultName + '"]').last().disabled = false;
	$('header').insert(
		new Element('ul', { 'class' : 'css-switcher' })
			.insert(new Element('li', { 'class': 'switch m', title: 'normal'}).update('a').observe('click', function(event){switchStyle(event.element());}))
			.insert(new Element('li', { 'class': 'switch l', title: 'large'}).update('a').observe('click', function(event){switchStyle(event.element());}))
			.insert(new Element('li', { 'class': 'switch xl', title: 'extra-large'}).update('a').observe('click', function(event){switchStyle(event.element());}))
		);
	active = $$('li[title=' + activeDefaultName + ']').last();
	active.addClassName('active');
	Event.observe(window, 'unload', function() {
		SetCookie("style", active.title, 365);
	})
});