//---------------------------- メガドロップ ナビゲーション --------------------------------//

//マウスオンflg
var navi_flg = false;		//グランドナビ
var mega_flg = false;		//メガドロエリア


window.addEvent('domready', function () {
	
	if (!$('drop-navi-product'))	return;
	
	
	//*****カレント準備
	var naviposi = $('product-search').getStyle('font-size');
	var current = false;
	
	//alert(naviposi);
	
	if(naviposi == '10%'){
		current = true;
		//alert('keep');
	}
	
	
	
	//*****①グランドナビにマウスオン
	
	$('drop-navi-product').addEvent('mouseenter', function (evt) {
		evt.stop();
		
		navi_flg = true;
		
		
		if (!mega_flg) {
			
			dropMegaArea($(this));
			
			$('drop-navi-product').setStyle('background','url(/common/images/gnavi_product-search.gif) left -30px no-repeat');
			//ナビゲーションキープ
			
		} else {
			//alert(mega_flg);
		}
	});
	
	//*****②グランドナビからマウスアウト
	//****2.1 準備
	var mega_drop_product = $('mega-drop-product');
	mega_drop_product.inner = mega_drop_product.getElement('.mega-drop-inner');
//	mega_drop_product.tween_open = new Fx.Tween(mega_drop_product, {duration: 100, link: 'cancel'});
//	mega_drop_product.tween_close = new Fx.Tween(mega_drop_product, {duration: 250, link: 'cancel'});
	mega_drop_product.tween_open = new Fx.Tween(mega_drop_product.inner, {duration: 100, link: 'cancel'});
	mega_drop_product.tween_close = new Fx.Tween(mega_drop_product.inner, {duration: 250, link: 'cancel'});
	
	$('drop-navi-product').addEvent('mouseleave', function (evt) {
		evt.stop();
		
		navi_flg = false;
		
		setTimeout(function () {
			
			if (!mega_flg) {
					closeMegaDrop(mega_drop_product);
					if(!current){
						$('drop-navi-product').setStyle('background','url(/common/images/gnavi_product-search.gif) left top no-repeat');
					}
					
			} else {
				//alert(navi_flg);
			}
		}, 10);
		
		
	});
	
	
	//*****③メガドロエリアにマウスオン
	
	mega_drop_product.addEvent('mouseenter', function (evt) {
		mega_flg = true;
		
		//$('drop-navi-product').setStyle('background','url(/common/images/gnavi_product-search.gif) left -30px no-repeat');
	});
	
	
	//*****④メガドロエリアからマウスアウト
	
	mega_drop_product.addEvent('mouseleave', function (evt) {
		
		var coordinates = mega_drop_product.getCoordinates();
		if (coordinates.left >= coordinates.right || coordinates.top >= coordinates.bottom) {
			mega_flg = false;
			
			if(!current){
				$('drop-navi-product').setStyle('background','url(/common/images/gnavi_product-search.gif) left top no-repeat');
			}
			return;
		}
		var page_x = evt.page.x;
		var page_y = evt.page.y;
		if (coordinates.left < page_x && page_x < coordinates.right && coordinates.top < page_y && page_y < coordinates.bottom ) {
			mega_flg = false;
			
			if(!current){
				$('drop-navi-product').setStyle('background','url(/common/images/gnavi_product-search.gif) left top no-repeat');
			}
			return;
		}
		
		setTimeout(function () {
			
			mega_flg = false;
			
			if (!navi_flg) {
					closeMegaDrop(mega_drop_product);
					
					if(!current){
						$('drop-navi-product').setStyle('background','url(/common/images/gnavi_product-search.gif) left top no-repeat');
					}
					
			} else {
				//alert(navi_flg);
			}
		}, 10);
		
	});

});

//---------------------------- ★メガドロップ ナビゲーション --------------------------------//



//---------------------------- メガドロップオープン function --------------------------------//

//megaDrop
function dropMegaArea(gnavi) {
	
	$$('.mega-drop').setStyle('display','none');
	$$('.drop_light').setStyle('display','none');
	
	if(gnavi.hasClass('drop-navi')){
		
		//$$('.mega-drop').setStyle('display','block');
		//そのまま表示
		
		var idx = gnavi.id.lastIndexOf('-');
		//「-」の切り取り
		
		var id = gnavi.id.substr(idx+1);
		//カーソル +1
		
		var opValue = 0;
		//透明度を0に
		
		var mega_drop = $('mega-drop-'+id);
		gnavi.mega_drop = mega_drop;
//		mega_drop.setStyle('opacity',opValue);
		mega_drop.setStyle('opacity',1);
		mega_drop.getElement('.mega-drop-inner').setStyle('opacity',opValue);
		mega_drop.setStyle('display','block');
		mega_drop.getElement('.mega-drop-inner').setStyle('display','block');
		//メガドロップ表示（透明度0）
		
		
		var tween = mega_drop.tween_open || new Fx.Tween(mega_drop, {duration: 100, link: 'cancel'});
		// close中ならキャンセルする
		if (mega_drop.tween_close) {
			mega_drop.tween_close.cancel();
		}
		
		// Fx.Tween で opacity をアニメーションする
		
		tween.start('opacity', 0, 1).chain(function () {
			dropLight(mega_drop);
			//mega_flg = true;
		});
		
		// 100ミリ秒かけて、opacity を 0 から 1 まで変化させる。
		// 完了したら dropLight() を呼び出す。
	}
}

//---------------------------- ★メガドロップオープン function --------------------------------//



//---------------------------- メガドロップクローズ function --------------------------------//

function closeMegaDrop(mega_drop){
	
	//alert(mega_drop);
	mega_drop = $(mega_drop);
	
	var clValue = 1;
	
	mega_drop.setStyle('opacity',clValue);
	mega_drop.setStyle('display','block');
	
	var tween = mega_drop.tween_close/* || new Fx.Tween(mega_drop, {duration: 250, link: 'cancel'})*/;
	// open中ならキャンセルする
	if (mega_drop.tween_open) {
		mega_drop.tween_open.cancel();
	}
	
	// Fx.Tween で opacity をアニメーションする
	
	tween.start('opacity', 1, 0).chain(function () {
		mega_flg = false;
//		mega_drop.setStyle('display','none');
		mega_drop.inner.setStyle('display','none');
	});
	
	var drop_light_tween = mega_drop.drop_light;
	if (drop_light_tween) {
		//drop_light_tween.converge();
		drop_light_tween.converge().chain(function () {
			mega_drop.setStyle('display','none');
		});
	}

}
//---------------------------- ★メガドロップクローズ function --------------------------------//

//
Fx.Pulsar = new Class({	// Abstract Class: supposed to Mix-in to Subclass of Fx.

	initializePulsar: function () {
		if (this.options.period) {
			this.options.period = Fx.Durations[this.options.period] * 2 || this.options.period.toInt();
			this.options.duration = this.options.period / 2;
		} else {
			this.options.period = this.options.duration * 2;
		}
		var _frequency = (this.options.frequency || '0').toInt();
		this.options.frequency = _frequency;
		this.addEvent('start', function () {
			this.remainTimes = _frequency;
		});
		this.remainTimes = 0;
		this.to_terminate = false;
	},

	step: function () {	// Override Fx::step
		var time = $time();
		while (true) {
			if (time < this.time + this.options.duration){
				var delta = this.transition((time - this.time) / this.options.duration);
				return this.set(this.compute(this.from, this.to, delta));
			} else if (time < this.time + this.options.period) {
				var delta = this.transition((this.options.period + this.time - time) / this.options.duration);
				return this.set(this.compute(this.from, this.to, delta));
			} else if (this.to_terminate) {
				this.to_terminate = false;
				this.remainTimes = 0;
				this.set(this.compute(this.from, this.to, 0));
				return this.complete();
			} else if (--this.remainTimes == 0) {
				this.to_terminate = false;
				this.set(this.compute(this.from, this.to, 0));
				return this.complete();
			} else {
				this.time += this.options.period;
			}
		}
	},

	converge: function () {
		if (this.timer) {
			this.to_terminate = true;
		}
		return this;
	},

	reset: function () {
		this.pause();
		this.set(this.compute(this.from, this.to, 0));
		this.time = 0;
		this.to_terminate = false;
		return this;
	}

});

Fx.Pulsar.Tween = new Class({

	Extends: Fx.Tween,

	Implements: Fx.Pulsar,

	initialize: function(element, options){
		this.parent(element, options);
		this.initializePulsar();
	}

});
//

//---------------------------- メガドロップライト function --------------------------------//
function dropLight(mega_drop) {
	
	var lightValue = 0;
	
	var drop_light = mega_drop.getElement('.drop_light');
	drop_light.setStyle('opacity',lightValue);
	drop_light.setStyle('display','block');
	
	var tween = mega_drop.drop_light;
	if (!tween) {
		tween = new Fx.Pulsar.Tween(drop_light, {duration: 1700});
		mega_drop.drop_light = tween;
	}

	//var tween = new Fx.Tween(drop_light, {duration: 300});
	//alert(drop_light);
	
	tween.start('opacity', 0, 1);

}

//---------------------------- ★メガドロップライト function --------------------------------//



//---------------------------- ドロップライト サブナビ function --------------------------------//

window.addEvent('domready', function () {
	
	if (!$('subnavi_light_shop'))	return;
	
	//---☆一番最初
	
	$$('.subnavi_light').setStyle('opacity','0');
	$$('.subnavi_light').setStyle('display','block');
	
	
	//-----☆販売店を探す
	
	var subnavi_light_shop = $('subnavi_light_shop');
	subnavi_light_shop.tween = new Fx.Pulsar.Tween(subnavi_light_shop, {duration: 1700});
	$('shop-navi').addEvent('mouseenter', function () {
		dropSubnaviLight(subnavi_light_shop);
	});
	
	$('shop-navi').addEvent('mouseleave', function () {
		closeSubnaviLight(subnavi_light_shop);
	});
	
	//-----☆購入方法について
	
	var subnavi_light_howto = $('subnavi_light_howto');
	subnavi_light_howto.tween = new Fx.Pulsar.Tween(subnavi_light_howto, {duration: 1700});
	$('howto-navi').addEvent('mouseenter', function () {
		dropSubnaviLight(subnavi_light_howto);
	});
	
	$('howto-navi').addEvent('mouseleave', function () {
		closeSubnaviLight(subnavi_light_howto);
	});
	
	//-----☆SoftBank SELECTIONについて
	
	var subnavi_light_about = $('subnavi_light_about');
	subnavi_light_about.tween = new Fx.Pulsar.Tween(subnavi_light_about, {duration: 1700});
	$('about-navi').addEvent('mouseenter', function () {
		dropSubnaviLight(subnavi_light_about);
	});
	
	$('about-navi').addEvent('mouseleave', function () {
		closeSubnaviLight(subnavi_light_about);
	});
	
	
});

//-----☆☆☆function

//マウスオーバー
function dropSubnaviLight(gnavi) {
	
	//alert(gnavi);
	
	gnavi.setStyle('opacity','0');
	gnavi.setStyle('display','block');
	
	var tween = gnavi.tween;
	tween.start('opacity', 0, 1);
	
}
//マウスアウト
function closeSubnaviLight(gnavi) {
	
	//alert(gnavi);
	gnavi.setStyle('opacity','1');
	gnavi.setStyle('display','block');
	
	var tween = gnavi.tween;
	tween.converge();
}

//---------------------------- ★ドロップライト サブナビ function --------------------------------//



//---------------------------- メガドロップエリア内 画像切り替え --------------------------------//

window.addEvent('domready', function () {

	//drop-product-photo
	$$('.drop-product-photo-dest').setStyle('display','none');
	
	//Initial value
	$$('#bluetooth.drop-product-photo-dest').setStyle('display','block');
	
	$$('.drop-product-photo-src').addEvent('mouseenter', function () {
		
		$$('.drop-product-photo-dest').setStyle('display','none');
		
		//var href = this.href;
		//var idx = href.indexOf('#');
		var id = this.id;
		//alert(id);
		var block = 'pho_'+id;
		//alert(block);
		$(block).setStyle('display','block');
	});
	
	$$('.drop-product-photo-src').addEvent('mouseleave', function () {
		$$('.drop-product-photo-dest').setStyle('display','none');
	});
});

//---------------------------- ★メガドロップエリア内 画像切り替え --------------------------------//