/*
ドロップダウンメニューを jQueryで実現するスクリプト
*/


(function( jQuery ){

	/*************************
	* コンストラクタ
	*/
	function SygClickDown( root, opt ){

		var className = "scdHover";
		var nowActive = "";
		
		// ターゲット配下の「li」に、クリック属性を付与
//		jQuery( 'li', root ).each( function(){
		root.children('li').each( function(){
			
			var obj = jQuery(this);
			
			/*********************
			* liクリック
			*/
			obj.click( function(){
				
				
				// アクティブがあったら開放
				if( nowActive ){
					// nowActive.removeClass( className );
					nowActive.children( opt.dropitem ).hide();
				}
				
				// クリックされたのがアクティブだったら開放
				if( nowActive == obj ){
					nowActive = ""
				}else{
					// obj.addClass( className );
					nowActive = obj;
					
					var dropitem = nowActive.children( opt.dropitem );
					
					switch( opt.mode ){
						
						case 'simple':
							dropitem.show();
							break;
						
						case 'fade':
							dropitem.fadeIn( opt.speed );
							break;
						
						case 'height':
							dropitem.animate(
								{ height:'toggle', opacity:'toggle' }, 
								{ duration:opt.speed, easing:opt.easing });
							break;

						case 'move':
							dropitem.show();
							var y = dropitem.position().top;
							var h = dropitem.prop('clientHeight');
							dropitem.hide();
						
							dropitem.css("top",y-h);
						
							dropitem.animate(
								{ top:y, opacity:'toggle' }, 
								{ duration:opt.speed, easing:opt.easing });
							break;
					}
				}
			});
		});
		
	}
	
	/*************************
	* プラグイン定義
	*/
	jQuery.fn.sygClickDown = function( config ) {
		
		// すでに作成されていたらそのまま返す
		var el = this.data("sygClickDown");
		if( el ){ return el; }
		
		/*********************************/
		// 初期値
		var defaults = {
			mode: 'simple',		// simple , fade , move, fademove
			speed: 200,
			easing: "swing",
			dropitem: 'ul'		// ドロップダウン表示する子要素。通常は「ul」
		};
		var options = jQuery.extend( defaults, config );
		
		/*********************************/
		return this.each( function(){
			el = new SygClickDown( jQuery(this), options );
			jQuery(this).data( "sygClickDown", el );
		});
		
		
	};

})( jQuery );


