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([
'<span id="' + id + '">',
'　文字： ',
'<a href="javascript:void(0)" style="cursor: pointer; font-size: 100%;" id="' + id + '-large">最大</a>',
'<a href="javascript:void(0)" style="cursor: pointer; font-size: 100%;" id="' + id + '-medium">拡大</a>',
'<a href="javascript:void(0)" style="cursor: pointer; font-size: 100% ;" id="' + id + '-small">標準</a>',
'</span>'
    ].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('small' ); },
  onClickMedium: function(e) { this.change('medium'); },
  onClickLarge:  function(e) { this.change('large'); }
};
// Bootstrap
FontChanger.start = function(id) {
  var fontChanger = new FontChanger(id);
  fontChanger.setCookieShelfLife(90);
  fontChanger.show();
};


FontChanger_eng = Class.create();
FontChanger_eng.prototype = {
  id: null,
  cookieManager: null,
  cookieName: 'body.style.fontSize',
  initialize: function(id) {
    this.id = id || 'fontChanger_eng';
    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([
'<th>Character:<th>',
'<td><a href="javascript:void(0)" style="cursor: pointer; font-size: 100%;" id="' + id + '-large">biggest</a>',
'<a href="javascript:void(0)" style="cursor: pointer; font-size: 100%;" id="' + id + '-medium">bigger</a>',
'<a href="javascript:void(0)" style="cursor: pointer; font-size: 100% ;" id="' + id + '-small" class="noborder">normal</a></td>',
'</span>'
    ].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('small' ); },
  onClickMedium: function(e) { this.change('medium'); },
  onClickLarge:  function(e) { this.change('large'); }
};
// Bootstrap
FontChanger_eng.start = function(id) {
  var fontChanger_eng = new FontChanger_eng(id);
  fontChanger_eng.setCookieShelfLife(90);
  fontChanger_eng.show();
};