/*  PetaTabMotionClass.js
 *
 *	このクラスは、class名が"js_tabmotion"の要素を移動させるクラスです。
 *　イベントは"js_tabmotion"内のはじめのa要素に設定されます。
 *  （Prototype.js, scriptaculous.js, effects.js　に依存します。）
 *
/*--------------------------------------------------------------------------*/

//  PetaTabMotionクラス
var PetaTabMotion = Class.create();

PetaTabMotion.prototype = {
	initialize: function(elem, opts) {
		this.elem = $(elem);
		this.btnelem = this.elem.getElementsByTagName('a')[0];
		
		this.movingflag = true; // 処理中かどうかを判別するフラグ
		this.typeflag = true; // 「進む」「戻る」を判別するフラグ
		this.waitprevflag = false; // 「戻る」動作を待つフラグ
		
		this.opts = Object.extend({
			moveX: 0,
			moveY: 30
		}, opts || {});
		
		Element.observe(this.btnelem, 'mouseover', this.playMove.bind(this));
		Element.observe(this.btnelem, 'mouseout', this.prevMove.bind(this));
	},

	move: function(x, y) {
		if(this.movingflag) {
			this.movingflag = false;
			
			new Effect.MoveBy(this.elem, y, x,{
				duration: 0.2,
				afterFinishInternal: this.finishMove.bind(this)
			});
		}
	},
	
	playMove: function() {
		if(this.typeflag && this.movingflag) {
			this.typeflag = false;
			this.moveX = this.opts.moveX;
			this.moveY = this.opts.moveY;
			this.move(this.moveX, this.moveY);			
		}
	},
	
	prevMove: function() {
		if(!this.typeflag && this.movingflag) {
			this.typeflag = true;
			this.moveX = -(this.opts.moveX);
			this.moveY = -(this.opts.moveY);
			this.move(this.moveX, this.moveY);
		}else if(!this.typeflag && !this.movingflag) {
			this.waitprevflag = true;
		}
	},
	
	finishMove: function() {
		this.movingflag = true;
		if(this.waitprevflag) {
			this.waitprevflag = false;
			this.prevMove();
		}
	}
};


// イテレータ　（拡張メソッド） 
Object.extend(PetaTabMotion, {
	create: function(elem, opts) {
		return new PetaTabMotion(elem, {moveY: 20});
	}
});


var petatabmotions;

Element.observe(window, 'load', function() {
	petatabmotions = $$('*.js_tabmotion').collect(PetaTabMotion.create);
});


/*  マウスオーバーで要素を出現させる関数
 *
/*--------------------------------------------------------------------------*/

function viewElement(elem) {
	$(elem).style.display = "block";
	new Effect.Fade(elem, {
									from: 0,
									to: 0.9,
									duration: 0.3
									});
}

function hideElement(elem) {
	new Effect.Fade(elem, {
									from: 0.9,
									to: 0,
									duration: 0.3,
									afterFinishInternal: function() {$(elem).style.display = "none";}
									});
}