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 + '">',

'<p>文字サイズ変更</p>',

'<ul><li id="' + id + '-small" >小</li>',

'<li id="' + id + '-medium">中</li>',

'<li id="' + id + '-large" >大</li></ul>',

'</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('80%' ); },

  onClickMedium: function(e) { this.change('90%'); },

  onClickLarge:  function(e) { this.change('100%'); }

};

// Bootstrap

FontChanger.start = function(id) {

  var fontChanger = new FontChanger(id);

  fontChanger.show();

};