/*
 * Geeklogサイト用文字サイズ操作パッケージ v1.0
 * Copyright: 2011 im-ltd(imai at im-ltd.ath.cx)
 * Lisence: GPL v2以降に準じます。
 */

/*
使用方法

1.ファイルの配置
テーマがあるディレクトリにgltextsize.jsをコピーする。
ProfessionalCSSであれば/public_html/layout/ProfessionalCSS/javascriptなど。

2.header.thtmlに以下を追加する

<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="{layout_url}/javascript/gltextsize.js" type="text/javascript"></script>

3.サイト内のいずれかに以下のような、サイズ変更用のボタンを表示するコードを追加する。
  idが"textsize"である要素の子要素をボタンとして設定する。要素の種類は何でもよい。
  追加する場所としては例えばヘッダの中やブロックなどが考えられる。

<div id="textsize">
<a href="#">小</a>&nbsp
<a href="#">中</a>&nbsp
<a href="#">大</a>&nbsp
<a href="#">特大</a>
</div>
 */

/*
カスタマイズ

デフォルトでは文字サイズは以下の4種類が設定できる。

"10px", "14px", "18px", "22px"

これはGlTextSize.sizesで設定されており、これを変更することで設定できる文字サイズと数を変更できる。
例えば以下のコードで3種類の文字サイズを指定できる。

GlTextSize.sizes = ["12px", "16px", "20px"];

この数にidがtextsizeの要素の子要素の数を合わせる。

文字サイズを変更するターゲットはbodyが指定されている。これはGlTextSize.targetに設定されている。
これに任意のjQueryのセレクタを設定すれば、指定された要素の文字サイズだけが変更される。
例えば記事だけの文字サイズを変更したければ、GlTextSize.targetに".storytext,.featuredstorytext"を指定する。
設定例はこのファイルの最後にコメントで記載してある。
 */

jQuery.noConflict();

/*
 * Cookie操作パッケージ
 */
var GlCookie = {
    /*
     * get: cookieの値を取得する。指定されたcookieがない場合は空文字列を返す。
     * args:
     * key: cookieの名前(文字列)
     * returns: cookieの値(文字列)
     */ 
    get: function(key) {
        var match = ('; ' + document.cookie + ';').match('; ' + key + '=(.*?);');
        return match ? decodeURIComponent(match[1]) : '';
    },

    /*
     * set: cookieを設定する。
     * args:
     * key: cookieの名前(文字列)
     * value: cookieの値(文字列)
     * expires: 有効期限(文字列またはDateオブジェクト)
     * domain: cookieのドメイン(文字列)
     * path: cookieのパス(文字列)
     * secure: cookieのセキュアフラグ(bool)
     */
    set: function(key, value, expires, domain, path, secure) {
        var buffer = key + '=' + encodeURIComponent(value);
        if (typeof expires != 'undefined') buffer += '; expires=' + new Date(expires).toUTCString();
        if (typeof domain != 'undefined') buffer += '; domain=' + domain;
        if (typeof path != 'undefined') buffer += '; path=' + path;
        if (secure) buffer += '; secure';
        document.cookie = buffer;
    }
};

/*
 * サイトのテキストサイズ変更パッケージ
 */
var GlTextSize = {
  sizes: ["10px", "14px", "18px", "22px"], // 設定するサイズ(デフォルトは4種類)
  key: "gl_textsize", // cookie名
  target: "body", // サイズを設定する要素
  panelid: "#textsize", // サイズ変更ボタンを表示する親要素のID

  /*
   * set: targetで指定された要素の文字サイズを設定する
   * args:
   * size: 設定する文字サイズ(文字列)。CSSで設定できる任意の形式。
   */
  set: function(size) {
    jQuery(this.target).css("font-size", size);
    var exp = new Date();
    exp.setDate(exp.getDate() + 30); // cookieは30日間有効
    var dum;
    // 設定をcookieに保存する
    GlCookie.set(this.key, size, exp, dum, "{cookie_path}");
  },

  /*
   * get: cookieに保存された文字サイズを取得する
   * returns: cookieの値(文字列)。設定されていなければ空文字列を返す。
   */
  get: function() {
    return GlCookie.get(this.key);
  },

  /*
   * init: 初期設定を行う
   */
  init: function() {
    this.numSizes = this.sizes.length; // 設定できる文字サイズの数を取得
    this.defaultSize = this.sizes[1]; // デフォルトは2番目のサイズ

    // this.panelidの子要素にクリックのハンドラを設定する
    var buttons = jQuery(this.panelid).children();
    jQuery(buttons).each(function(index) {
      if(index < GlTextSize.numSizes) {
        jQuery(this).click(function() {
          GlTextSize.set(GlTextSize.sizes[index]);
          return false;
        });
      }
    });

    // 文字サイズの初期設定を行う
    var size = this.get();
    if(size == "") {
      size = this.defaultSize;
    }
    GlTextSize.set(size);
  } 
}

jQuery(document).ready(function() {
  // カスタマイズの例
  //GlTextSize.sizes = ["12px", "16px", "20px"];
  //GlTextSize.target = ".storytext,.featuredstorytext";
  GlTextSize.init();
});