jQuery(function($){
  
  //変数にクッキー名を入れる
  var history = $.cookie('fontSize');
  
  //適用する箇所を指定。今回は部分的に#test内のpに
  //ここは適用させたい場所をかならず変更してください。
  //例：body class="◯◯"など
  var elm = $('body','');

  
  //変数が空ならfontMを、空でなければクッキーに保存しておいたものを適用
  if(!history){
    elm.addClass('fontS');
    var defaltImg = $('#fontS').children('img');
    imgOn(defaltImg);
    defaltImg.addClass('active');
  }else{
    elm.addClass(history);
    var histryImg = $('#'+history).children('img');
    imgOn(histryImg);
    histryImg.addClass('active');
  }

  //クリックしたら実行
  $('li','#fontChange').click(function(){
  
    //クリックした要素のID名を変数にセット
    var setFontSize = this.id;
      
    //クッキーに変数を保存
    $.cookie('fontSize', setFontSize, {path: '/'});
    
    //activeのclassが付いている部分の画像をoff画像に。その後activeのclassも削除
    var activeElm = $('.active');
    imgOff(activeElm);
    activeElm.removeClass('active');
    
    //クリックしたボタンをactiveにして、他のボタンのactiveを削除
    $(this).children('img').addClass('active');
    var activeElm = $('.active');
    imgOn(activeElm);
    
    //一度classを除去して、変数をclassとして追加
    elm.removeClass().addClass(setFontSize);
  });
  
  //off画像をon画像に
  function imgOn(elm){
    elm.attr("src", elm.attr("src").replace("_n.", "_a."));
  }
  
  //on画像をoff画像に
  function imgOff(elm,notElm){
    elm.not(notElm).attr("src", elm.attr("src").replace("_a.", "_n."));
  } 
  
});