
// Animate DIV
  $(document).ready(function(){
	jQuery.easing.def = 'easeOutQuart'; // 에니메이션의 처음과 끝의 자연스러운 움직임을 제어
	
	$("#middle .contents").css({'min-height':$("#rightcol .contents").outerHeight() // 중앙 단의 최소 높이는 우측 단의 컨텐츠 높이
	});
	$("#leftcol .contents").css({'min-height':$("#middle .contents").outerHeight() // 좌측 단의 최소 높이는 중앙 단의 컨텐츠 높이
	});
	  
/* 2단으로 바꾸기 08.11.26 by me
------------------------------------------------*/
	$(".allow_left").toggle(function(){ // 좌측 단의 .allow_left 클래스가 지정된 버튼을 클릭 할 경우
	  $("#leftcol").animate({ width:"90%" }, 1000 ) // 좌측 단의 너비가 전체 화면의 90%로 늘어나고 속도는 1초이며
	  $("#middle").animate({ left:"90%" }, 1000 ) // 중앙 단은 왼쪽에서부터 오른쪽으로 화면의 90% 영역만큼 이동하며
	  $(".allow_left").css({"background-position":"right -9px"}); // .allow_left 클래스가 지정된 버튼의 배경의 포지션을 바꿔 이미지가 바뀐듯 보이게 한다
  
	  },function(){ // 좌측 단의 .allow_left 클래스를 다시한번 클릭 할 경우
	  $("#leftcol").animate({width:"70%"}, 1000 ) // 좌측 단의 너비가 60%로 돌아오고
	  $("#middle").animate( { width:"30%", left:"70%"}, 1000 ) // 중앙 단은 화면의 왼편으로부터 60% 떨어진 위치로 되돌아오고
	  $(".allow_left").css({"background-position":""}); // .allow_left 클래스가 지정된 버튼의 CSS를 초기화여 원위치 시킨다
	});

    $(".allow_middle").toggle(function(){
      $("#leftcol").animate({ width:"60%", left:"-60%" }, 1000 ) //IE6인경우를 위해 좌측 단 왼쪽으로 이동시키기
	  $("#middle").animate( { width:"100%", left:"0px" }, 1000 )
	  $(".allow_middle").css({"background-position":"right -18px"});
            
	  },function(){
	  $("#leftcol").animate({width:"70%", left:"0px" }, 1000 ) // 좌측 단의 너비가 60%로 돌아오고
	  $("#middle").animate( {width:"30%", left:"70%"}, 1000 ) // 중앙 단은 화면의 왼편으로부터 60% 떨어진 위치로 되돌아오고
	  $(".allow_left").css({"background-position":""})
	  $(".allow_middle").css({"background-position":""});
     
          

    });  






/* 기존 3단 내용
	$(".allow_left").toggle(function(){ // 좌측 단의 .allow_left 클래스가 지정된 버튼을 클릭 할 경우
	  $("#leftcol").animate({ width:"90%" }, 1000 ) // 좌측 단의 너비가 전체 화면의 90%로 늘어나고 속도는 1초이며
	  $("#middle").animate({ left:"90%" }, 1000 ) // 중앙 단은 왼쪽에서부터 오른쪽으로 화면의 90% 영역만큼 이동하며
	  $("#rightcol").animate({ left:"100%" }, 1000 ) // 우측 단은 왼쪽에서부터 오른쪽으로 화면의 100%, 즉 완전히 사라지며
	  $(".allow_left").css({"background-position":"right -9px"}); // .allow_left 클래스가 지정된 버튼의 배경의 포지션을 바꿔 이미지가 바뀐듯 보이게 한다
  
	  },function(){ // 좌측 단의 .allow_left 클래스를 다시한번 클릭 할 경우
	  $("#leftcol").animate({width:"575px"}, 1000 ) // 좌측 단의 너비가 575px로 돌아오고
	  $("#middle").animate( { left:"575px"}, 1000 ) // 중앙 단은 화면의 왼편으로부터 575px 떨어진 위치로 되돌아오고
	  $("#rightcol").animate( { left:"1075px" }, 1000 ); // 우측 단은 화면의 왼편으로부터 1075px 떨어진 위치로 되돌아오고
	  $(".allow_left").css({"background-position":""}); // .allow_left 클래스가 지정된 버튼의 CSS를 초기화여 원위치 시킨다
	});

    $(".allow_middle").toggle(function(){
      $("#leftcol").animate({ width:"575px" }, 1000 )
	  $("#middle").animate( { width:"500px", left:"0px" }, 1000 )
	  $("#rightcol").animate( { left:"500px" }, 1000 );
	  $(".allow_middle").css({"background-position":"right -9px"});

	  },function(){
	  $("#leftcol").animate({width:"575px" }, 1000 );
	  $("#middle").animate( { width:"500px", left:"575px" }, 1000 )
	  $("#rightcol").animate( { left:"1075px" }, 1000 );
	  $(".allow_middle").css({"background-position":""});
    }); 
	
    $(".allow_middleExpand").toggle(function(){
      $("#leftcol").animate({ width:"575px" }, 1000 )
	  $("#middle").animate( { width:"90%", left:"0px" }, 1000 )
	  $("#rightcol").animate( { left:"90%" }, 1000 );
	  $(".allow_middleExpand").css({"background-position":"right -9px"});

	  },function(){
	  $("#leftcol").animate({width:"575px" }, 1000 )
	  $("#middle").animate( { width:"500px", left:"575px" }, 1000 )
	  $("#rightcol").animate( { left:"1075px" }, 1000 );
	  $(".allow_middleExpand").css({"background-position":""});
    });
	
    $(".allow_right").toggle(function(){
      $("#leftcol").animate({ width:"575px" }, 1000 )
	  $("#middle").animate( { width:"500px", left:"0px" }, 1000 )
	  $("#rightcol").animate( { left:"0px" }, 1000 );
	  $(".allow_right").css({"background-position":"right -9px"});

	  },function(){
	  $("#leftcol").animate({width:"575px" }, 1000 )
	  $("#middle").animate( { width:"500px", left:"575px" }, 1000 )
	  $("#rightcol").animate( { left:"1075px" }, 1000 );
	  $(".allow_right").css({"background-position":""});
    });

    $(".both").click(function(){ // 두개 이상의 스크립트를 동시에 작동하는 예제인데 여기서는 사용하지 않고 있다(개발용)
      $(".allow_left").add(".allow_middle").add(".allow_right").click();
    });
*/	
    $(".reset").click(function(){ // 여기에 쓰여진 모든 CSS 설정을 초기화 시키는 코드인데 여기서는 사용하지 않고 있다(개발용)
      $("div").css({width:"", left:""});
    });	

  });