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 scrollbar(){
  $(window).on("load",function(){
            $("#start > div > div").mCustomScrollbar({
                  axis:"y",
                  setTop: 0,
            });
        });
}

function clickhand(){
  $(".handler").on("mousedown", function (e) {
      e.preventDefault();
      $(this).addClass("mouseDown");
  }).on("mouseup", function () {
      $(this).removeClass("mouseDown");
  });
};

function drag() {

  var $hand1 = $( ".hand1" );
  var $hand2 = $( ".hand2" );

  $hand1.draggable({
    containment: "#start",
    scroll: false,
     // grid: [ 5, 5 ],
    drag: function(){
      // handler
        // dimension handler
        var $Hhand = $(this).outerHeight();
        var $Whand = $(this).outerWidth();
        // ajust handler
        var ajustH = $Hhand / 2;
        var ajustW = $Whand / 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);

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

        // bottom
        var $bottom = $(this).parent('#page').find(".bottom");

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

        // dimension blocs
        var Dw0 = $(window).outerWidth(true);
        var Dw1 = $recits.outerWidth(true);
        var Dw2 = $itw.outerWidth(true);
        var Dw3 = $img.outerWidth(true);

        // var Bw1 = (Dw0 - (Dw2 + Dw3));
        var Bw2 = (Dw0 - (Dw1 + Dw3));
        var Bw3 = (Dw0 - (Dw1 + Dw2));
        var Bl3 = Dw1 + Dw2;

        // app dimension
        var $handler2 = $(this).parent().find('.hand2');

        $handler2.css({
          "top": yPos + 25,
          "left": xPos + Bw2 - 25,
        });

        $recits.css({
          "width": xPos,
          "height": yPos - 2,
        });

        $itw.css({
          "width": Bw2,
          "height": yPos - 2,
        });

        $img.css({
          "width": Dw3,
          "height": yPos - 2,
        });

        $bottom.css({
          "top": yPos2 + 2,
        });

        $links.css({
          "width": xPos,
          "top": yPos2 + 2,
        });

        $rs.css({
          "width": Bw2,
        });

        $stmp.css({
          "width": Dw3,
        });
    }
  });

  $hand2.draggable({
    containment: "#start",
    scroll: false,
    drag: function(){
      // handler
        // dimension handler
        var $Hhand = $(this).outerHeight(true);
        var $Whand = $(this).outerWidth(true);
        // ajust handler
        var ajustH = $Hhand / 2;
        var ajustW = $Whand / 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);

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

        // bottom
        var $bottom = $(this).parent('#page').find(".bottom");

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

        // dimension blocs
        var Dw0 = $(window).outerWidth(true);
        var Dw1 = $recits.outerWidth(true);
        var Dw2 = $itw.outerWidth(true);
        var Dw3 = $img.outerWidth(true);

        var xPos3 = Dw0 - xPos;
        // var Bw1 = (Dw0 - (Dw2 + Dw3));
        var Bw2 = (Dw0 - (Dw1 + Dw3));
        var Bw3 = (Dw0 - (Dw1 + Dw2));
        var Bl3 = Dw1 + Dw2;
        // app dimension
        var $handler1 = $(this).parent().find('.hand1');

        $handler1.css({
          "top": yPos + 25,
          "left": xPos  - Bw2 - 25,
        });

        $recits.css({
          // "width": xPos,
          "height": yPos - 2,
        });
        $itw.css({
          "width": Bw2,
          "height": yPos - 2,
        });
        $img.css({
          "width": xPos3,
          "height": yPos - 2,
        });
        $bottom.css({
          "top": yPos2 + 2,
        })
        $rs.css({
          "width": Bw2,
        });
        $stmp.css({
          "width": xPos3,
        });
    }
  });
};

function map() {
  var mymap = L.map('mapid').setView([51.505, -0.09], 13);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);

	L.marker([51.5, -0.09]).addTo(mymap)
		.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

	L.circle([51.508, -0.11], 500, {
		color: 'red',
		fillColor: '#f03',
		fillOpacity: 0.5
	}).addTo(mymap).bindPopup("I am a circle.");

	L.polygon([
		[51.509, -0.08],
		[51.503, -0.06],
		[51.51, -0.047]
	]).addTo(mymap).bindPopup("I am a polygon.");


	var popup = L.popup();

	function onMapClick(e) {
		popup
			.setLatLng(e.latlng)
			.setContent("You clicked the map at " + e.latlng.toString())
			.openOn(mymap);
	}

	mymap.on('click', onMapClick);

}

$(document).ready(function() {
  wrap();
  map();
  // scrollbar();
  clickhand();
  drag();
});
