$(function() {
 var $mc = $("#mainContainer");
 var $wrap = $("#wrap");
 var $ca = $("#mainContainer > .centerArea");
 var $item = $("#mainContainer .items .item");
 var $row = $("#mainContainer .items .row");
 // ¸ÞÀÎÆäÀÌÁö ÄÁÅÙÃ÷ ³ôÀÌ ¸ÂÃã
 function itemSync() {
  var wheight = $(window).height();
  var wsize = $(window).width();
  if(wsize > 1440) {
   $mc.css('height', wheight + 'px');
   $wrap.css('height', wheight + 'px');
   $row.css('height', wheight/2 + 'px');
   $ca.css('height', wheight + 'px');
   $item.removeAttr('style');
  } else if (wsize < 1441 && wsize > 768) {
   $wrap.removeAttr('style');
   $mc.removeAttr('style');
   $row.removeAttr('style');
   $item.css('height','450px');
   $ca.css('height', wheight + 'px');
  } else if (wsize < 769 && wsize > 480) {
   $mc.removeAttr('style');
   $row.removeAttr('style');
   $item.css('height','300px');
   $ca.removeAttr('style');
  } else {
   $item.css('height','200px');
  }
 }
 itemSync();
 // ¸ÞÀÎÆäÀÌÁö °¢ ¾ÆÀÌÅÛ ¸¶¿ì½º ¿À¹ö½Ã ¹Ú½º ½½¶óÀ̵ù
 $("#mainContainer .items .item").bind('mouseenter mouseleave', function(e) {
  var pageX = e.offsetX;
  var pageY = e.offsetY;
  var itemWn = (pageX * 100) / $(this).width();
  var itemHn = (pageY * 100) / $(this).height();
  var posX;
  var posY;
  var wSize = $(window).width();
  
  if(wSize>480) {
   if(e.type === 'mouseenter') {
    if(itemHn < itemWn) {
     if(itemWn > 90) {
      posX = 100;
      posY = 0;
     } else {
      posX = 0;
      posY = -100;
     }
    } else if (itemWn < itemHn) {
     if(itemHn > 90) {
      posX = 0;
      posY = 100;
     } else {
      posX = -100;
      posY = 0;
     }
    }
    $(this).find('.slipbox').css({top:posY+'%', left:posX+'%'});
    $(this).find('.slipbox').stop(true,true).animate({top:0, left:0}, 500);
   } else {
    if(itemHn < itemWn) {
     if(itemWn > 90) {
      posX = 100;
      posY = 0;
     } else {
      posX = 0;
      posY = -100;
     }
    } else if(itemWn < itemHn) {
     if(itemHn > 90) {
      posX = 0;
      posY = 100;
     } else {
      posX = -100;
      posY = 0;
     }
    }
    $(this).find('.slipbox').stop(true,false).animate({top:posY+'%', left:posX+'%'}, 300);
   }
  } else {
   $(this).find('.slipbox').css({top:'-100%', left:'-100%'});
  }
 });
 // â »çÀÌÁî Á¶Àý½Ã ÄÁÅÙÃ÷ ³ôÀÌ ¸ÂÃã
 $(window).resize(function() {
  itemSync();
 });
})