FontChanger = Class.create();
FontChanger.prototype = {
	  id: null,
	  cookieManager: null,
	  cookieName: 'body.style.fontSize',
	  initialize: function(id) {
		this.id = id || 'fontChanger';
		this.cookieManager = new CookieManager();
		var fontSize = this.cookieManager.getCookie(this.cookieName);
		if (fontSize) document.body.style.fontSize = fontSize;
	},
	
	setCookieShelfLife: function(days) {
		this.cookieManager.cookieShelfLife = days;
	},
	
	change: function(fontSize) {
		document.body.style.fontSize = fontSize;
		this.cookieManager.setCookie(this.cookieName, fontSize);
	},
	
	reset: function() {
		document.body.style.fontSize = '';
		this.cookieManager.clearCookie(this.cookieName);
	},
	
	show: function() {
		var id = this.id;
		document.writeln([
'<div id="' + id + '">',
'<span style="cursor: pointer; " id="' + id + '_txt" >FONT SIZE : </span>',
'<span style="cursor: pointer; " id="' + id + '_S" ><a href="#">S</a></span>',
'<span style="cursor: pointer; " id="' + id + '_M" ><a href="#">M</a></span>',
'<span style="cursor: pointer; " id="' + id + '_L" ><a href="#">L</a></span>',
'</div>'
		].join("\n"));
	
		Event.observe($(id + '_S' ), 'click', this.onClickSmall.bind(this));
		Event.observe($(id + '_M' ), 'click', this.onClickMedium.bind(this));
		Event.observe($(id + '_L' ), 'click', this.onClickLarge.bind(this));
	
	},
	
		onClickSmall:  function(e) { this.change('80%' ); },
		onClickMedium: function(e) { this.change('100%'); },
		onClickLarge:  function(e) { this.change('130%'); }
};

FontChanger.start = function(id) {
  var fontChanger = new FontChanger(id);
  fontChanger.show();
};