// Medio ロールオーバ ver0.1.0
// 使い方 (画像入れ替え)
// 1.ロールオーバ画像を（例えばbutton1.jpgならば button1_h.jpg として）用意する
// 2.ロールオーバーさせたい画像のクラス名に "medio_rollover" を追加する
// 3.このJavascriptファイルを読み込む
//　注)*_h.jpg , *_a.jpg などのファイル名の画像には適用されません
//
// 使い方 (透明度変更)
// 1.ロールオーバーさせたい画像のクラス名に medio_rollover_o を追加する
// 2.このJavascriptファイルを読み込む
//



// MEDIO ネームスペースが存在しなければ作成する
if (typeof MEDIO == "undefined" || MEDIO == null) {
  var MEDIO = {};
  // イベントを追加
  MEDIO.addEvent = function(element, name, listener) {
    if (element.addEventListener) {
      element.addEventListener(name, listener, false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + name, listener);
    }
       
  };
}

/**
 * MEDIO rollover クラス
 * 
 * @author takabayashi@mediocom.jp
 */
MEDIO.rollover = function() {
  this.initialize.apply(this, arguments);
};

/**
 * コンストラクタ
 * 
 * @access public
 */
MEDIO.rollover.prototype.initialize = function() {
  this.loadedImages = {};
  var self = this;
  MEDIO.addEvent(window, 'load', function() { self.onWindowLoad('img')});
};

/**
 * Window onload イベント処理
 * 
 * 指定のタグのクラス名をチェックして、画像の先読み、マウスイベントの設定
 * などを行う。
 * 
 * @access publick
 */
MEDIO.rollover.prototype.onWindowLoad = function(tagname) {
  var elms = document.body.getElementsByTagName(tagname);
  var self = this;
    
  for (var i = 0, j = elms.length; i < j; i ++) {
    if (elms[i].className.match(new RegExp("(^|\\s)medio_rollover(\\s|$)"))) {
      this.preLoadImage(elms[i].src);
      MEDIO.addEvent(elms[i], 'mouseover', function(event) { self.imageOn(event) });
      MEDIO.addEvent(elms[i], 'mouseout', function(event) { self.imageOff(event) });
    } else if (elms[i].className.match(new RegExp("(^|\\s)medio_rollover_o(\\s|$)"))) {
      MEDIO.addEvent(elms[i], 'mouseover', function(event) { self.opacityOn(event)});
      MEDIO.addEvent(elms[i], 'mouseout', function(event) { self.opacityOff(event)});
    }
  }
  
}

/**
 * ロールオーバー画像先読み処理
 * 
 * ロールオーバー画像を先読みして、ロードに成功したらロード済みに設定する。
 * 
 * @aceess publick
 */
MEDIO.rollover.prototype.preLoadImage = function(src) {
  if (src.match(/^(.+)\.(jpg|gif|png)$/)) {
    var basename = RegExp.$1;
    var ext = RegExp.$2;
    if (!basename.match(/(_h|_a)$/)) {
      var imgObject = new Image;
      var self = this;
      imgObject.onload = function() {
        self.setLoaded(basename);
      }
      imgObject.src = basename + '_h.' + ext;
    }
  }
};
/**
 * ロード済みに設定
 * 
 * @access public
 */
MEDIO.rollover.prototype.setLoaded = function(basename) {
  this.loadedImages[basename] = 1;
};
/**
 * ロード済みかどうかをかえす
 * 
 * @access public
 */
MEDIO.rollover.prototype.isLoaded = function(basename) {
  return this.loadedImages[basename];
};
/**
 * 画像ロールオーバーをオン
 * 
 * 
 */
MEDIO.rollover.prototype.imageOn = function(event) {
  var elm = event.target || event.srcElement;

  if (elm.src.match(/^(.+)\.(jpg|gif|png)$/)) {
    var basename = RegExp.$1;
    var ext = RegExp.$2;
    if (!basename.match(/(_h|_a)$/) && this.isLoaded(basename)) {
      elm.src = basename + '_h.' + ext;
    }
  }
};

MEDIO.rollover.prototype.imageOff = function(event) {
  var elm = event.target || event.srcElement;
  if (elm.src.match(/^(.+)_h\.(jpg|gif|png)$/)) {
    var basename = RegExp.$1;
    var ext = RegExp.$2;
    if (this.isLoaded(basename)) {
      elm.src = basename + '.' + ext;
    }
  }
};

MEDIO.rollover.prototype.opacityOn = function(event) {
  var elm = event.target || event.srcElement;
  this.setOpacity(elm, 0.75);
}

MEDIO.rollover.prototype.opacityOff = function(event) {
  var elm = event.target || event.srcElement;
  this.setOpacity(elm, 1);
}


MEDIO.rollover.prototype.setOpacity = function(element, opacity) {
  var ua = navigator.userAgent;
  if (opacity > 1) {
      opacity = opacity / 100;
  }
  // safari
  if (ua.indexOf('AppleWebKit/') > -1) {
    element.style.opacity = opacity;
  // opera
  } else if (window.opera) {
    element.style.opacity = opacity;
  // Gecko
  } else if (ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') == -1) {
    element.style.MozOpacity = opacity;
  // win ie
  } else if (window.attachEvent && ua.indexOf('Mac_PowerPC') == -1) {
    element.style.filter="alpha(opacity=0)"
    element.filters.alpha.opacity  = (opacity * 100)
  }
}



/**
 * インスタンス作成／処理の実行
 */
new MEDIO.rollover();