$(document).ready(function(){


  		// ------------ DRAG ------------ 

		$( function() {
	  		$( ".draggable" ).draggable();
		});
//{ containment: [-1300,-750,1800,1250] }
		// ------------ ZOOM -------------

		// $(window).on('wheel', function(event){
		// 	var zoom_wheel = 1.0;

		// 	// deltaY obviously records vertical scroll, deltaX and deltaZ exist too
		// 	if(event.originalEvent.deltaY < 0){
		// 		zoom_wheel += 0.1;
		// 		var zoom_lvl = zoom_wheel.toString();
		// 	    $('#chaos').css('transform', 'scale(' + zoom_lvl + ',' + zoom_lvl + ')');
		// 	}
		// 	else {
		// 	    zoom_wheel -= 0.1;
		// 	    var zoom_lvl = zoom_wheel.toString();
		// 	    $('#chaos').css('transform', 'scale(' + zoom_lvl + ',' + zoom_lvl + ')');
		// 	}
		// });    



		function zoom(event) {

			$("body").mousemove(function(event){            
            	var relX = event.pageX - $(this).offset().left;
            	var relY = event.pageY - $(this).offset().top;

            	var x_lvl = relX.toString();
            	var y_lvl = relY.toString();
            	$('body').css('transform-origin', x_lvl + " " + relY);
        	});

		    event.preventDefault();

		    scale += event.deltaY * -0.01;

		    // Restrict scale
		    scale = Math.min(Math.max(.125, scale), 4);

		    // Apply scale transform
		    el.style.transform = `scale(${scale})`;

		    
		}

		let scale = 1;
		const el = document.querySelector('body');
		el.onwheel = zoom;


});