function wrap(){
  $('#start > div:nth-child(-n+3)').wrapAll('<div class="top"></div> ')
  $('#start > div:nth-child(n+2)').wrapAll('<div class="bottom"></div> ')
};

function drag() {

  var $hand = $( ".handler" );

  $hand.draggable({
    drag: function(){

      // dimension handler
      var $heighthand = $(this).outerHeight();
      var $widthhand = $(this).outerWidth();

      // ajust handler
      var ajustH = $heighthand /2;
      var ajustW = $widthhand /2;

      // position handler
      var offset = $(this).offset();
      var xPos = offset.left + ajustW;
      var yPos = offset.top - ajustH;

      var xPos2 = xPos + (ajustW * 2);
      var yPos2 = yPos + (ajustH * 2);

      // top
      var $recits = $(this).parent('#page').find('#recits');
      var $itw = $(this).parent('#page').find("#interviews");
      var $links = $(this).parent('#page').find("#links");

      // bottom
      var $rs = $(this).parent('#page').find("#reseaux-sociaux");
      var $stmp = $(this).parent('#page').find("#streetmap");
      var $img = $(this).parent('#page').find("#img");

      // style
      var style_recit =  { width: xPos, height : yPos }
      var style_height =  { height : yPos }

      // app style
      $recits.css(style_recit);
      $itw.css(style_height);
      $links.css(style_height);

      // width div
      var $w0 = $('html').outerWidth();
      var $w1_1 = $recits.outerWidth();
      var $w1_2 = $itw.outerWidth();
      var $w1_3 = $links.outerWidth();

      var $w2_1 = ($w1_2 + $w1_3) - $w0;
      var $w2_2 = ($w1_1 + $w1_3) - $w0;
      var $l2_2 = ($w1_1);
      var $w2_3 = ($w1_1 + $w1_2) - $w0;
      var $l2_3 = ($l2_2 + $w1_2);

      // style_bottom
      var yPos2 = yPos + (ajustH * 2);

      var $style_rs = { width: xPos, top : yPos2, height: 'auto' }
      var $style_stmp = { width: $w1_2, top : yPos2, left : $l2_2, height: 'auto' }
      var $style_img = { width: $w1_3, top : yPos2, left : $l2_3, height: 'auto' }

      $rs.css($style_rs);
      $stmp.css($style_stmp);
      $img.css($style_img);
    }
  });
};

$(document).ready(function() {
  wrap();
  drag();
});
