﻿/*--------------------------------------------------------------------------*
 *  
 *  stylife ヘッダーメニューに使用するJS
 *  
 *  2009 Arcphilia 
 *  http://www.arcphilia.co.jp/
 *  
 *--------------------------------------------------------------------------*/

$(function(){

    $('.layerbg')
        .fadeTo(1,0.0)
        .hide();
        
    $('.layerMenu')
        .fadeTo(1,0.0)
        .hide();

    var lastClicked,
        $body = $('body');

    $.fn.extend({
        close : function(){
            return this.each(function(i){
                $(this)
                    .removeClass('CurrentMenu')
                    .fadeTo(150,0.0,function(){ $(this).hide() })
                    .prev('.layerbg')
                    .fadeTo(150, 0.0, function(){ $(this).hide() });
            });
        },
        open : function(){
            return this.each(function(i){
                $(this)
                    .addClass('CurrentMenu')
                    .show()
                    .fadeTo(300,1.0)
                    .prev('.layerbg')
                    .show()
                    .fadeTo(300,0.7);
            });
        }
    });

    var currentMenu,lastMenu;

	//boutiqueHeaderをマウスオーバー/アウトした際のレイヤーメニュー
	$('#BoutiqueLinkHeader')
	    .children('li')
		.click(
		    function(e){
		        currentMenu = '#layerMenu_' + $(this).attr('id');
		        
		        if($(e.target).is('.CloseMenu'))
		        {
		            $(currentMenu).close();
		        }
		        else{
    		        if(currentMenu != lastMenu){
    		            $(currentMenu).open();
    		            $(lastMenu).close();
    		        }
    		        else
    		        {
    		            if($(currentMenu).is('.CurrentMenu')){
    		                //$(currentMenu).close();
    		            }
    		            else
    		            {
    		                $(currentMenu).open();
    		            }
    		        }
		        }
		        lastMenu = currentMenu;
		    }
		)
		.bind('mouseleave', function(e){
		    $(this).children('.layerMenu').close();
		});
		
		//$('#BoutiqueLinkHeader').mouseout(console.log);
});