/**
 * css_switcher.jQuery.js
 * CSS切替えプラグイン
 *
 * 前提条件
 * jQuery 1.3.2
 * jquery.cookie.js"
 *
 * 使い方
 * - 切替えるCSSファイルを全てhead内の<link>に記述してください。
 * - 各<link>タグのtitle要素にユニークな名称を設定してください(例:title="B")。
 * - CSSを切替えるリンクは<ul id="css_switcher"><li><a href="#B"
 *   のような構造になっている必要があります。
 *   上記の例ではhref属性のBが、上記の<link>タグのtitle属性に対応したスタイルの名称になります。
 * - クリックされた<a>タグにはselectedというクラス名が追加されます。
*/
(function($){
  $.fn.css_switcher = function(opt){

    var target_id            = 'css_switcher';
    var selectionClassName   = "selected";
    var cookie_name          = 'css_switcher';
    var cookie_expires       = 365;
    var cookie_path          = '/';

    var style_name_in_cookie = null;
    var new_cookie           = null;
    var old_cookie           = null;
    var selectedStyleName    = "";
    // 切替えスイッチの各アンカーの配列
    var $anchors  = $('#css_switcher li a');
    // head内の<link>タグの配列
    var $linkTags = $('head link');
    // デフォルトのサイズに対応する要素
    var $default  = $('#css_switcher li a.default');

    // 既存のCookieを取得
    style_name_in_cookie = jQuery.cookie(cookie_name);
    // Cookieがセットしてあれば、そのスタイルを使用する。
    if(style_name_in_cookie != null){
      selectedStyleName = style_name_in_cookie;
      switchCSS(selectedStyleName, null);
      $anchors.each(function(){
        if($(this).attr('class')==selectedStyleName){
          switchCSS(selectedStyleName, $(this));
        }
      });
    }else{
      // Cookieが存在しない場合
      switchCSS("default", $default);
    }

    // リンクをクリックしたときのイベント
    $anchors.click(function(){
      // クリックされた<a>タグからスタイル名を抽出する。
      $clickedAnchor = $(this);
      selectedStyleName = getStyleName($clickedAnchor);
      switchCSS(selectedStyleName, $clickedAnchor );
      // クリックイベントをキャンセルする
      return false;
    });

/*
* 選択されたCSSに切替える関数
*/
    function switchCSS(selectedStyleName, $clickedAnchor) {
      disableAllCSS();
      $('head link').each(function(){
        var title = $(this).attr('title');
        // クリックした要素に対応するCSSだけを有効にしてcookieに記録する。
        if (selectedStyleName == title) {
          $(this).removeAttr('disabled');
          $.cookie(cookie_name, selectedStyleName,
                   {
                     expires: cookie_expires,
                     path: cookie_path
                   }
                  );
        }
      });
      // クラス名が付いている<a>タグがあればそれを外す
      $('#css_switcher li a.selected').each(function(){
        $(this).removeClass(selectionClassName);
      });
      // 選択中のCSSに対応するボタンに特定のクラス名をつける
      if($clickedAnchor) {
        $clickedAnchor.addClass(selectionClassName);
      }
    }
/*
* クリックされた<a>タグのhrefからスタイル名だけを抽出する関数
*/
    function getStyleName($clickedAnchor){
      return $clickedAnchor.attr('href').substring(1, $clickedAnchor.attr('href').length);
    }

    // 切替えボタンに対応する<link>タグを全て無効にする関数。
    function disableAllCSS(){
      $anchors.each(function(){
        var styleName = getStyleName($(this));
        $linkTags.each(function(){
          var title = $(this).attr('title')
          if(styleName == title){
            // タグを無効にする
            $(this).removeAttr('disabled');
            $(this).attr('disabled', 'disabled');
          }
        })
      });
    }
  }
})(jQuery);