/*
  2007-11-15
  prototype.js 1.6

*/

var RolloverImage = Class.create({

	initialize: function( className, onSuffix, aSuffix ){
		if(!document.getElementById || !document.images || !className) return;

		// 
		this.targetClassName = className;
		this.onSuffix = onSuffix;
		this.aSuffix = aSuffix;
		//this.mdSuffix = mdSuffix;
		this.buttons = [];

		// 
		var _this  = this;
		var imgs   = [];
		var inputs = [];
		var rolloverObj    = [];

		$A($$('.'+this.targetClassName)).each( function( el ){
			if( el.hasClassName( _this.targetClassName ) && (el.tagName=="IMG"||el.tagName=="INPUT") )
				rolloverObj.push(el);
		} );

		rolloverObj.each(function( el ){ _this.registButton(el); });
		this.preloadImages();
	},


	registButton : function( el ){
		var _this = this;
		var btn = new Object();
		btn.src = el.src;
		btn.filetype = btn.src.substring(btn.src.lastIndexOf('.'));
		btn.basename = btn.src.substring(0, btn.src.length-btn.filetype.length);
		btn.onsrc = btn.basename + this.onSuffix + btn.filetype;

		el.offsrc = btn.src;
		el.onsrc  = btn.onsrc;
		el.lock   = false;
		if( this.aSuffix ){
			btn.activesrc = btn.basename + this.aSuffix + btn.filetype;
			el.activesrc = btn.activesrc;
		}
		/*if( this.mdSuffix ){
			btn.mousedownsrc = btn.basename + this.mdSuffix + btn.filetype;
			el.mousedownsrc = btn.activesrc;
		}*/

		this.buttons.push( el );

		if( !this.aSuffix ){
			el.observe( 'mouseover', function(){ _this.swapImage( el, 'on' ); } );
			el.observe( 'mouseout',  function(){ _this.swapImage( el, 'off'); } );
			if(el.parentNode && el.parentNode.tagName=="A"){// Operaではtabキーによるa要素へのフォーカスが効かない。
				var p = el.parentNode;
				Event.observe( p, 'focus', function(){ _this.swapImage( el, 'on' ); } );
				Event.observe( p, 'blur',  function(){ _this.swapImage( el, 'off'); } );
			}
			/*if( this.mdSuffix ){
				el.observe( 'click', function(){ _this.swapImage( el, 'mousedown' );alert("ddddd") } );
			}*/
		}
		else {
			el.observe( 'mouseover', function(){ if(!el.lock) _this.swapImage( el, 'on' ); } );
			el.observe( 'mouseout',  function(){ if(!el.lock) _this.swapImage( el, 'off'); } );
			el.observe( 'mouseup',  function(){
				_this.buttons.each(function(button){
					_this.deactivate(button)
				});
				_this.activate( el );
			} );

			if(el.parentNode && el.parentNode.tagName=="A"){
				var p = el.parentNode;
				Event.observe( p, 'focus', function(){ if(!el.lock) _this.swapImage( el, 'on' ); } );
				Event.observe( p, 'blur',  function(){ if(!el.lock) _this.swapImage( el, 'off'); } );

				Event.observe( p, 'keypress',  function(e){
					if( Prototype.Browser.IE || (!Prototype.Browser.IE && e.keyCode == Event.KEY_RETURN) ){
						Event.stop(e);
						_this.buttons.each(function(button){
							_this.deactivate(button)
						});
						_this.activate( el );
					}
				} );
			}

		}
	},


	preloadImages : function(){
		var ret = [];
		for( var i=0; i<this.buttons.length; i++ ){
			(new Image()).src = this.buttons[i].onsrc;
			ret[ret.length] = this.buttons[i].onsrc;
			if(this.buttons[i].activesrc){
				(new Image()).src = this.buttons[i].activesrc;
				ret[ret.length] = this.buttons[i].activesrc;
			}
		}
	},


	swapImage : function( obj, status ){
		if( !obj || !obj[status+"src"] ) return;
		if( !obj.lock )
			obj.src = obj[status+"src"];
	},


	// statusをonにしっぱなしにしたい場合
	activate : function( el ){
		this.swapImage( el, 'active' );
		this.lock( el );
	},

	// acitevateでonにしたものは、必ずdeactivateでoffに。swapImageではlock解除されず。
	deactivate : function( el ){
		this.unlock( el );
		this.swapImage( el, 'off' );
	},

	lock : function( obj ){
		if( obj.lock == 'undefined' ) return;
		if(!obj.lock) obj.lock = true;
	},

	unlock : function( obj ){
		if( obj.lock == 'undefined' ) return;
		if( obj.lock ) obj.lock = false;
	}

});


/*
document.observe("dom:loaded", function() {
	//new RolloverImage( 'rollover', 'on', 'on' );
	new RolloverImage( 'rollover', 'on' );
});
*/