var text_size_control = {

	small_size : "0.7em",
	medium_size : "0.8em",
	large_size : "1em",

	option_small : null,
	option_medium : null,
	option_large : null,

	control : null,

	create_control : function() {

		var control = document.createElement("div");
		var text = document.createTextNode("Text size");
		var h3 = document.createElement("h3");
		h3.appendChild(text);

		var options = document.createElement("ul");

		var option_text_small = document.createTextNode("S");
		var option_text_medium = document.createTextNode("M");
		var option_text_large = document.createTextNode("L");

		this.option_small = document.createElement("li");
		this.option_small.id = "text-size-small";
		this.option_small.title = "Small";

		Event.observe(this.option_small, 'click', function() { text_size_control.set_small() });
		Event.observe(this.option_small, 'mouseover', function(e) { text_size_control.highlight(e) });
		Event.observe(this.option_small, 'mouseout', function(e) { text_size_control.unhighlight(e) });

		this.option_medium = document.createElement("li");
		this.option_medium.id = "text-size-medium";
		this.option_medium.title = "Medium";

		Event.observe(this.option_medium, 'click', function() { text_size_control.set_medium() });
		Event.observe(this.option_medium, 'mouseover', function(e) { text_size_control.highlight(e) });
		Event.observe(this.option_medium, 'mouseout', function(e) { text_size_control.unhighlight(e) });

		this.option_large = document.createElement("li");
		this.option_large.id = "text-size-large";
		this.option_large.title = "Large";
		this.option_large.className = "last";

		Event.observe(this.option_large, 'click', function() { text_size_control.set_large() });
		Event.observe(this.option_large, 'mouseover', function(e) { text_size_control.highlight(e) });
		Event.observe(this.option_large, 'mouseout', function(e) { text_size_control.unhighlight(e) });

		this.option_small.appendChild(option_text_small);
		this.option_medium.appendChild(option_text_medium);
		this.option_large.appendChild(option_text_large);

		options.appendChild(this.option_small);
		options.appendChild(this.option_medium);
		options.appendChild(this.option_large);

		control.appendChild(h3);
		control.appendChild(options);

		this.control = control;

	},

	init : function() {

		this.create_control();
		$("text-size").appendChild(this.control);

		var current_value = this.get_cookie();

		if (current_value) {

			if (current_value == 'small')
				this.set_small();
			else if (current_value == 'medium')
				this.set_medium();
			else if (current_value == 'large')
				this.set_large();

		}

	},
	
	highlight : function(e) {
		var ele = Event.element(e)
		ele.addClassName("highlight");
	},
	
	unhighlight : function(e) {
		var ele = Event.element(e)
		ele.removeClassName("highlight");
	},

	get_body : function() {
		var body = $$("body")[0];
		return body;
	},

	reset_options : function() {
		this.option_small.removeClassName("current");
		this.option_medium.removeClassName("current");
		this.option_large.removeClassName("current");
	},

	set_small : function() {
		this.set_cookie('small');
		this.get_body().setStyle({ fontSize: this.small_size });
		this.reset_options();
		this.option_small.addClassName("current");
	},

	set_medium : function() {
		this.set_cookie('medium');
		this.get_body().setStyle({ fontSize: this.medium_size });
		this.reset_options();
		this.option_medium.addClassName("current");
	},

	set_large : function() {
		this.set_cookie('large');
		this.get_body().setStyle({ fontSize: this.large_size });
		this.reset_options();
		this.option_large.addClassName("current");
	},

	set_cookie : function(value) {
		jar = new CookieJar({
			expires: 604800,   // seconds
			path: '/'
		});
		jar.put('text-size', value);
	},

	get_cookie : function() {
		jar = new CookieJar({
			expires: 604800,   // seconds
			path: '/'
		});
		return jar.get('text-size');
	}

}

Event.observe(window, 'load', function() { text_size_control.init() });