$(document).ready(function() {


	    $('#menu a.out')
		.css( {backgroundPosition: "-24px -96px"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(-24px -12px)"}, {duration:600})
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(-24px 96px)"}, {duration:600, complete:function(){
				$(this).css({backgroundPosition: "-24px -96px"})
			}})
		});
		
		
		
		
	
		
        
		$("#menu").click(function(){	
		    $("#layer")
			   .css("display","block");	
			$(".line_v_01")
			   .animate({width: '1px', height: '600px', top:'0',left:'30px',opacity:1},{duration:200, easing:'linear'})
			   .animate({width: '1px', height: '1px', top:'600px',left:'30px',opacity:0},{duration:500, easing:'linear'})
			$(".line_v_02")
			   .animate({width: '1px', height: '1000px', bottom:'0',left:'271px',opacity:1},{duration:200, easing:'linear'})
			   .animate({width: '1px', height: '1px', bottom:'1000px',left:'271px',opacity:0},{duration:500, easing:'linear'})
			$(".line_v_03")
			   .animate({width: '1px', height: '1000px', top:'0',left:'290px',opacity:1},{duration:200, easing:'linear'})
			   .animate({width: '1px', height: '1px', top:'1000px',left:'290px',opacity:0},{duration:500, easing:'linear'})
			$(".line_v_04")
			   .animate({width: '1px', height: '700px', bottom:'0',left:'530px',opacity:1},{duration:250, easing:'linear'})
			   .animate({width: '1px', height: '1px', bottom:'1000px',left:'530px',opacity:0},{duration:550, easing:'linear'})
			$(".line_v_05")
			   .animate({width: '1px', height: '800px', top:'0',left:'550px',opacity:1},{duration:150, easing:'linear'})
			   .animate({width: '1px', height: '1px', top:'800px',left:'550px',opacity:0},{duration:450, easing:'linear'})
			$(".line_v_06")
			   .animate({width: '1px', height: '900px', bottom:'0px',left:'790px',opacity:1},{duration:300, easing:'linear'})
			   .animate({width: '1px', height: '1px', bottom:'900px',left:'790px',opacity:0},{duration:600, easing:'linear'})
			$(".line_h_01")
			   .animate({width: '810px', height: '1px', top:'175px',left:'0',opacity:1},{duration:300, easing:'linear'})
			   .animate({width: '1px', height: '1px', top:'175px',left:'810px',opacity:0},{duration:600, easing:'linear'})
			$(".line_h_02")
			   .animate({width: '810px', height: '1px', top:'416px',left:'0',opacity:1},{duration:300, easing:'linear'})
			   .animate({width: '1px', height: '1px', top:'416px',left:'0',opacity:0},{duration:600, easing:'linear'})
			$(".line_h_03")
			   .animate({width: '810px', height: '1px', top:'435px',left:'0',opacity:1},{duration:300, easing:'linear'})
			   .animate({width: '1px', height: '1px', top:'435px',left:'810px',opacity:0},{duration:600, easing:'linear'})
			$(".line_h_04")
			   .animate({width: '810px', height: '1px', bottom:'0',left:'0',opacity:1},{duration:300, easing:'linear'})
			   .animate({width: '1px', height: '1px', bottom:'674px',left:'0',opacity:0},{duration:600, easing:'linear'})
			$(".line_h_05")
			   .animate({width: '810px', height: '1px', top:'694px',left:'0',opacity:1},{duration:300, easing:'linear'})
			   .animate({width: '1px', height: '1px', top:'694px',left:'810px',opacity:0},{duration:600, easing:'linear'})
			$(".line_h_06")
			   .animate({width: '810px', height: '1px', top:'154px',left:'0',opacity:1},{duration:300, easing:'linear'})
			   .animate({width: '1px', height: '1px', top:'154px',left:'0',opacity:0},{duration:600, easing:'linear'})
	    });
	

		



		
		
		
		$("#suyama").click(function(){
			$("#layer")
			   .css("display","block");						
            $("#suyama li")
			   .css("display","none");
			$("#jessica li")
			   .css("display","none");
			$("#suyama img")
			   .animate({width: '160px', left:'0px',}, {queue:false,duration:1500, easing:'easeInOutExpo'})
			   .animate({width: '0px', height: '0px', top:'500px',left:"500px"}, {duration:800, easing:'easeInOutBounce'})
			$("#suyama_bg img")
			   .animate({width: '160px', height: '240px', top:'240px',left:'500px'},1600)
			   .animate({width: '1360px', height: '334', top:'-321px',left:"-340px"}, {duration:800, easing:'easeInOutExpo'})
			   .animate({width: '334px', height: '1360', top:'-733px',left:"-388px"}, {duration:800, easing:'easeInOutExpo'})
			$("#jessica img")
			   .animate({width: '160px'}, {duration:1600, easing:'easeOutBounce'})
			   .animate({width: '0px', height: '0px', top:'0px',left:"0px"}, {duration:800, easing:'easeInOutExpo'})
            $("#jessica_bg img")
			   .animate({width: '160px', height: '0'}, {duration:1600, easing:'easeOutBounce'})
			   .animate({width: '0px', height: '0px'}, {duration:800, easing:'easeInOutExpo'})
			   .animate({width: '539px', height: '179px', top:'-160px',left:"-320px"}, {duration:800, easing:'easeInOutExpo'})

            });

		
		
						

	
	});