// FontChanger
// Copyright (c) 2007 Hirotaka Ogawa
// REQUIRES: prototype.js, cookiemanager.js
var fontChanger = null;
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) {
    var id = this.id;
    if (fontSize == '80%')
    {
        document.getElementById(id + '-small').innerHTML = '<img src="cmn/img/fontsize_s_in.gif">';
        document.getElementById(id + '-medium').innerHTML = '<img src="cmn/img/fontsize_m.gif">';
        document.getElementById(id + '-large').innerHTML = '<img src="cmn/img/fontsize_l.gif">';
    } else if (fontSize == '100%') {
        document.getElementById(id + '-small').innerHTML = '<img src="cmn/img/fontsize_s.gif">';
        document.getElementById(id + '-medium').innerHTML = '<img src="cmn/img/fontsize_m_in.gif">';
        document.getElementById(id + '-large').innerHTML = '<img src="cmn/img/fontsize_l.gif">';
    } else if (fontSize == '120%') {
        document.getElementById(id + '-small').innerHTML = '<img src="cmn/img/fontsize_s.gif">';
        document.getElementById(id + '-medium').innerHTML = '<img src="cmn/img/fontsize_m.gif">';
        document.getElementById(id + '-large').innerHTML = '<img src="cmn/img/fontsize_l_in.gif">';
    } else {
        document.getElementById(id + '-small').innerHTML = '<img src="cmn/img/fontsize_s_in.gif">';
        document.getElementById(id + '-medium').innerHTML = '<img src="cmn/img/fontsize_m.gif">';
        document.getElementById(id + '-large').innerHTML = '<img src="cmn/img/fontsize_l.gif">';
    }
    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 fontSize = document.body.style.fontSize;
    var id = this.id;
    if (fontSize == '80%')
    {
        document.writeln([
            '<div id="' + id + '">',
            '<img src="cmn/img/fontsize.gif">',
            '<span style="cursor: pointer; font-size: 80% ;" id="' + id + '-small" ><img src="cmn/img/fontsize_s_in.gif"></span>',
            '<span style="cursor: pointer; font-size: 100%;" id="' + id + '-medium"><img src="cmn/img/fontsize_m.gif"></span>',
            '<span style="cursor: pointer; font-size: 120%;" id="' + id + '-large" ><img src="cmn/img/fontsize_l.gif"></span>',
            '</div>'
        ].join("\n"));
    } else if (fontSize == '100%') {
        document.writeln([
            '<div id="' + id + '">',
            '<img src="cmn/img/fontsize.gif">',
            '<span style="cursor: pointer; font-size: 80% ;" id="' + id + '-small" ><img src="cmn/img/fontsize_s.gif"></span>',
            '<span style="cursor: pointer; font-size: 100%;" id="' + id + '-medium"><img src="cmn/img/fontsize_m_in.gif"></span>',
            '<span style="cursor: pointer; font-size: 120%;" id="' + id + '-large" ><img src="cmn/img/fontsize_l.gif"></span>',
            '</div>'
        ].join("\n"));
    } else if (fontSize == '120%') {
        document.writeln([
            '<div id="' + id + '">',
            '<img src="cmn/img/fontsize.gif">',
            '<span style="cursor: pointer; font-size: 80% ;" id="' + id + '-small" ><img src="cmn/img/fontsize_s.gif"></span>',
            '<span style="cursor: pointer; font-size: 100%;" id="' + id + '-medium"><img src="cmn/img/fontsize_m.gif"></span>',
            '<span style="cursor: pointer; font-size: 120%;" id="' + id + '-large" ><img src="cmn/img/fontsize_l_in.gif"></span>',
            '</div>'
        ].join("\n"));
    } else {
        document.writeln([
            '<div id="' + id + '">',
            '<img src="cmn/img/fontsize.gif">',
            '<span style="cursor: pointer; font-size: 80% ;" id="' + id + '-small" ><img src="cmn/img/fontsize_s_in.gif"></span>',
            '<span style="cursor: pointer; font-size: 100%;" id="' + id + '-medium"><img src="cmn/img/fontsize_m.gif"></span>',
            '<span style="cursor: pointer; font-size: 120%;" id="' + id + '-large" ><img src="cmn/img/fontsize_l.gif"></span>',
            '</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('100%'); },
  onClickLarge:  function(e) { this.change('120%'); }
};
// Bootstrap
FontChanger.start = function(id) {
  fontChanger = new FontChanger(id);
};
// LINK writeln
FontChanger.link = function(id) {
  fontChanger.show();
};

