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);
    var imagename = 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;
		if (document.body.style.fontSize == 'medium'){ var img_s = 'off'; var img_n = 'off'; var img_b = 'on';
		}else if (document.body.style.fontSize == 'x-small'){ var img_s = 'on'; var img_n = 'off2'; var img_b = 'off';
		}else if (document.body.style.fontSize == 'small') {var img_s = 'off'; var img_n = 'on'; var img_b = 'off2';
		}else{var img_s = 'off'; var img_n = 'on'; var img_b = 'off2';
}
    document.writeln([
'<div id="' + id + '">',
'<img src="image/com/space.gif"width="100" height="44">',
'<a href="javascript:changeimg_s()" id="' + id + '-small"><img alt="" src="image/com/font_s_' + img_s + '.gif" width="44" height="45" border="0" class="f_navi_img" name="img_s"></a><a href="javascript: changeimg_n()" id="' + id + '-medium"><img alt="" src="image/com/font_n_' + img_n + '.gif" width="44" height="45" border="0" class="f_navi_img" name="img_n"></a><a href="javascript: changeimg_b()" id="' + id + '-large"><img alt="" src="image/com/font_b_' + img_b + '.gif" width="44" height="45" border="0" class="f_navi_img" name="img_b"></a>',
'</div>'
    ].join("\n"));
    Event.observe($(id + '-small' ), 'click', this.onClickSmall.bind(this));
    Event.observe($(id + '-medium'), 'click', this.onClickMedium.bind(this));
    Event.observe($(id + '-large' ), 'click', this.onClickLarge.bind(this));
  },
  onClickSmall:  function(e) { this.change('x-small');	},
  onClickMedium: function(e) { this.change('small');	},
  onClickLarge:  function(e) { this.change('medium');	}
};
// Bootstrap
FontChanger.start = function(id) {
  var fontChanger = new FontChanger(id);
  fontChanger.show();
};