$(function(){
 
                var li_width = {_min: '0px', _max: '840px'};
                var li_height = {_min: '24px', _max: '24px'};
			
			    $(document).ready(function(){
				//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
				//Vertical Sliding
				$('.boxgrid.slidedown').hover(function(){
					$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
				});
				//Horizontal Sliding
				$('.boxgrid.slideright').hover(function(){
					$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
				});
				//Diagnal Sliding
				$('.boxgrid.thecombo').hover(function(){
					$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
				});
				//Partial Sliding (Only show some of background)
				$('.boxgrid.peek').hover(function(){
					$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
				});
				
				
				//Main Contents border
				$('.boxgrid.captionfull').hover(function(){
					$(".cover", this).stop(true, true).animate({width: li_width._max},{queue:false,duration:500});
				}, function() {
					$(".cover", this).stop(true, true).animate({width: li_width._min},{queue:false,duration:1});
				});
				
				//Archive contents border
				$('.boxgrid.captionfull').hover(function(){
					$(".cover2", this).stop(true, true).animate({width: '696px'},{queue:false,duration:500});
				}, function() {
					$(".cover2", this).stop(true, true).animate({width: li_width._min},{queue:false,duration:1});
				});
				
				//Number border
				$('.boxgrid.captionfull').hover(function(){
					$(".cover3", this).stop(true, true).animate({width: '30px'},{queue:false,duration:500});
				}, function() {
					$(".cover3", this).stop(true, true).animate({width: li_width._min},{queue:false,duration:1});
				});
				
				//contents button
				$('.boxgrid.captionfull').hover(function(){
					$(".hover", this).stop().animate({left:'0px'},{queue:false,duration:1});
				}, function() {
					$(".hover", this).stop(true, true).animate({left:'-114px'},{queue:false,duration:1});
				});
				
				//contents button 1
				$('.boxgrid.captionfull.1').hover(function(){
					$("#imgboxL .imgslideL").stop(true, true).animate({left:'0px'},{queue:false,duration:500});
				}, function() {
					$("#imgboxL .imgslideL").stop(true, true).animate({left:'0px'},{queue:false,duration:1});
				});
				
				//contents button 2
				$('.boxgrid.captionfull.2').hover(function(){
					$("#imgboxL .imgslideL").stop(true, true).animate({left:'-480px'},{queue:false,duration:500});
				}, function() {
					$("#imgboxL .imgslideL").stop(true, true).animate({left:'-480px'},{queue:false,duration:1});
				});
				
				//contents button 3
				$('.boxgrid.captionfull.3').hover(function(){
					$("#imgboxL .imgslideL").stop(true, true).animate({left:'-960px'},{queue:false,duration:500});
				}, function() {
					$("#imgboxL .imgslideL").stop(true, true).animate({left:'-960px'},{queue:false,duration:1});
				});
				
				//contents button 4
				$('.boxgrid.captionfull.4').hover(function(){
					$("#imgboxL .imgslideL").stop(true, true).animate({left:'-1440px'},{queue:false,duration:500});
				}, function() {
					$("#imgboxL .imgslideL").stop(true, true).animate({left:'-1440px'},{queue:false,duration:1});
				});
				
				//contents button 5
				$('.boxgrid.captionfull.5').hover(function(){
					$("#imgboxL .imgslideL").stop(true, true).animate({left:'-1920px'},{queue:false,duration:500});
				}, function() {
					$("#imgboxL .imgslideL").stop(true, true).animate({left:'-1920px'},{queue:false,duration:1});
				});
				
				// imgbox 2
				
				//contents button 1
				$('.boxgrid.captionfull.6').hover(function(){
					$("#imgboxL2 .imgslideL").stop(true, true).animate({left:'0px'},{queue:false,duration:500});
				}, function() {
					$("#imgboxL2 .imgslideL").stop(true, true).animate({left:'0px'},{queue:false,duration:1});
				});
				
				//contents button 2
				$('.boxgrid.captionfull.7').hover(function(){
					$("#imgboxL2 .imgslideL").stop(true, true).animate({left:'-480px'},{queue:false,duration:500});
				}, function() {
					$("#imgboxL2 .imgslideL").stop(true, true).animate({left:'-480px'},{queue:false,duration:1});
				});
				
				//contents button 3
				$('.boxgrid.captionfull.8').hover(function(){
					$("#imgboxL2 .imgslideL").stop(true, true).animate({left:'-960px'},{queue:false,duration:500});
				}, function() {
					$("#imgboxL2 .imgslideL").stop(true, true).animate({left:'-960px'},{queue:false,duration:1});
				});
				
				//contents button 4
				$('.boxgrid.captionfull.9').hover(function(){
					$("#imgboxL2 .imgslideL").stop(true, true).animate({left:'-1440px'},{queue:false,duration:500});
				}, function() {
					$("#imgboxL2 .imgslideL").stop(true, true).animate({left:'-1440px'},{queue:false,duration:1});
				});
				
				//contents button 5
				$('.boxgrid.captionfull.10').hover(function(){
					$("#imgboxL2 .imgslideL").stop(true, true).animate({left:'-1920px'},{queue:false,duration:500});
				}, function() {
					$("#imgboxL2 .imgslideL").stop(true, true).animate({left:'-1920px'},{queue:false,duration:1});
				});
				
			});
			
			});