/*---------------------------------------------------
 * イベント処理
 *---------------------------------------------------*/
var EventUtil = {
  attach: function(elem, event, handler) {
      if (elem.addEventListener) // not IE
        elem.addEventListener(event, handler, false);
      else // IE
        elem.attachEvent('on' + event, handler);
  },
  detach: function(elem, event, handler) {
      if (elem.removeEventListener) // not IE
        elem.removeEventListener(event, handler, false);
      else // IE
        elem.detachEvent('on' + event, handler);
  }
};

/*---------------------------------------------------
 * イベントの登録、解除
 *---------------------------------------------------*/
// イベントの割り当て
EventUtil.attach(window, 'load', init);
// unload イベントでイベント解除
EventUtil.detach(window, 'unload', init);


/*---------------------------------------------------
 * Stringにメソッド追加
 *---------------------------------------------------*/
String.prototype.camelize = function( ) {
    return this.replace( /-([a-z])/g,
                         function( $0, $1 ) { return $1.toUpperCase( ) } );
}
String.prototype.deCamelize = function( ) {
    return this.replace( /[A-Z]/g,
                         function( $0 ) { return "-" + $0.toLowerCase( ) } );
}


/*---------------------------------------------------
 * 外部 css を変更する
 *---------------------------------------------------*/
function CssChange() {
    this.initialize.apply(this, arguments);
}
CssChange.prototype = {
  initialize: function( selector, property) {
      this.selector = selector;
      this.property = property;
  },
    // CSS に ルールを加える
  cssAddRule: function (selector, property) {
      this.selector = selector;
      this.property = property;

      var cssFiles = document.styleSheets; // すべての CSS ファイル
      var sheet = document.styleSheets[ cssFiles.length - 1 ]; // 最後の CSS ファイルの後に加えればよいので
      if( sheet.addRule ) { // IE
          sheet.addRule( this.selector, "{" + this.property + "}", sheet.rules.length );
          return sheet.rules.length;
      } else if( sheet.insertRule ) { // Mozilla
          return sheet.insertRule( this.selector + "{" + this.property + "}", sheet.cssRules.length );
      }
      return null;
  },
    // CSS からルールを取り出す
  getStyleValue: function (selector, property) {
      this.selector = selector.toLowerCase();
      this.property = property;
    
      var sheetindex = 0;
      if ( this.property.indexOf( "-" ) != -1 )
        this.property = this.property.camelize();
      var cssFiles = document.styleSheets; // すべての CSS ファイル
      var rules;

      for ( var j = cssFiles.length - 1; j >= 0; j-- ) { // すべての CSS ファイルを後ろから見ていく
        rules = cssFiles[ j ].rules // IE
          || cssFiles[ j ].cssRules; // Mozilla

        // CSS の中身を一つずつ見ていく
        for ( var i = rules.length - 1; i >= 0; i-- ) {
          var rule = rules[i];
          
          if( rule.selectorText.toLowerCase() != this.selector
              || rule.style[ this.property ] == "" ) continue;
          return rule.style[ this.property ];
        }
      }
      return null;
  }
}


/*---------------------------------------------------
 * タブメニューのクラス
 *---------------------------------------------------*/
function TabMenuCss() {
    this.initialize.apply(this, arguments);
};
TabMenuCss.prototype = {
  initialize: function(liId) {
      this.liId = liId;
      this.liElement = document.getElementById(liId);
      this.liParentElement = this.liElement.parentNode; // ul の要素
      this.liChildElement = this.liElement.getElementsByTagName('a')[0]; // 色を塗る対象の a 要素
      this.cssChangeTest = new CssChange();
      this.liIdA = "#" + this.liId + " a"; // css の「li a」
      this.liIdAStyle = this.cssChangeTest.getStyleValue(this.liIdA, "background-position");
      this.liIdAHover = this.liIdA + ":hover"; // css の「li a:hover」
      this.liIdAHoverStyle = this.cssChangeTest.getStyleValue(this.liIdAHover, "background-position");
      this.property;
      this.result;
  },
  onImage: function() {
      this.property = "background-position: " + this.liIdAHoverStyle;
      this.result = this.cssChangeTest.cssAddRule(this.liIdA, this.property);
      return this.result;
  },
  offImage: function() {
      this.property = "background-position: " + this.liIdAStyle;
      this.result = this.cssChangeTest.cssAddRule(this.liIdA, this.property);
      return this.result;
  }
}

/*---------------------------------------------------
 * onload 時に実行される関数
 *---------------------------------------------------*/
function init() {
    var pathName = location.href.split("/"); // 「/」で区切る
    var tagId = pathName[pathName.length-2]; // pathname を取得（id と同じになるはず）

    // fileId という id がなければ何もしない
    if (document.getElementById(tagId) == null) {
        return null;
    }

    var tab = new TabMenuCss(tagId);
    tab.onImage();
    tab = null;

}