jQuery(document).ready(function()
	{
		// *********************************
		// image change
		// small 90 * 910 , large: 710 * 910
		// *********************************
		var SF;
		$("#P1").click(function()
		{
			$("#STA").val() == "CL" ? SF = "_s" : SF = "";
			$("#RAIN_B_IMG").attr("src","../images/main_image/rain_01" + SF + ".jpg");
			$("#PID").val("01");
		});

		$("#P2").click(function() 
		{ 
			$("#STA").val() == "CL" ? SF = "_s" : SF = ""; 
			$("#RAIN_B_IMG").attr("src","../images/main_image/rain_02" + SF + ".jpg"); 
			$("#PID").val("02"); 
		});
		
		$("#P3").click(function() 
		{ 
			$("#STA").val() == "CL" ? SF = "_s" : SF = ""; 
			$("#RAIN_B_IMG").attr("src","../images/main_image/rain_03" + SF + ".jpg"); 
			$("#PID").val("03"); 
		});
		
		$("#P4").click(function() 
		{ 
			$("#STA").val() == "CL" ? SF = "_s" : SF = ""; 
			$("#RAIN_B_IMG").attr("src","../images/main_image/rain_04" + SF + ".jpg"); 
			$("#PID").val("04"); 
		});

		// *********************************
		// button controll
		// *********************************
		$("#I1").click(function()
		{
			$("#I1        ").attr("src","../images/btn_icon/photo_on.jpg");
			$("#I2,#I3,#I4").attr("src","../images/btn_icon/photo_off.jpg");
		});

		$("#I2").click(function()
		{
			$("#I2        ").attr("src","../images/btn_icon/photo_on.jpg");
			$("#I1,#I3,#I4").attr("src","../images/btn_icon/photo_off.jpg");
		});

		$("#I3").click(function()
		{
			$("#I3        ").attr("src","../images/btn_icon/photo_on.jpg");
			$("#I1,#I2,#I4").attr("src","../images/btn_icon/photo_off.jpg");
		});

		$("#I4").click(function()
		{
			$("#I4        ").attr("src","../images/btn_icon/photo_on.jpg");
			$("#I1,#I2,#I3").attr("src","../images/btn_icon/photo_off.jpg");
		});

		// *********************************
		// image open & controll
		// *********************************
		$(".RAIN_O_1").click(function()
		{
		  //$('#wrap_area').css({'background':'url(../images/main_image/rain_01_s.jpg) no repeat'});
			//alert("open");

			$("#STA").val("OP");

			$("#RAIN_B_IMG").css("z-index",998)
			                .css("margin-top","-0px")
			                .attr("src","../images/main_image/rain_" + $("#PID").val() + ".jpg"); // change image

			// method 2
			$( ".RAIN_B" ).css("margin-left","170px")
										.css("margin-top","-7px")
			              .css("width","1200px") //전체 길이값820
			              .css("z-index",998);
			$( ".RAIN_B" ).effect( "slide", "", 800 ).css("z-index",998);

			$(".RAIN_C")
			.animate(
			{
				width       :  "160px",
				opacity     :     1.0 ,
				marginTop   : "-975px",
				marginLeft  :  "1040px" //이미지 width값658
			}, 0 )
			.css("z-index",999);

			$(".RAIN_O_1").hide(); // open  button controll
			$(".RAIN_C_1").show(); // close button controll
		});

		// *********************************
		// image close & controll
		// *********************************
		$(".RAIN_C_1").click(function()
		{
			//alert($(this).attr("id"));
			$("#STA").val("CL");
			$(".RAIN_B") // close
			.animate(
			{
				width       : "820px",
				opacity     :     1.0,
				marginTop   :  "-7px",
				marginLeft  : "170px",
				borderWidth :   "0px"
			},
			 500 ,
			 "swing"
			 ).show("puff")
			.css("z-index",3);

			$(".RAIN_C") //
			.animate(
			{
				opacity     :      1.0,
				marginTop   : "-975px",
				marginLeft  :   "90px"
			}, 1000 )
			.css("z-index",5);

			// rain image
			$("#RAIN_B_IMG").attr("src","../images/main_image/rain_" + $("#PID").val() + "_s.jpg")
			                .css("z-index",4); // change image

			$(".RAIN_C_1").hide(); // close button controll
			$(".RAIN_O_1").show(); // open  button controll
		})
	});