function dragMoveListener(event)
{
  var target = event.target
  // keep the dragged position in the data-x/data-y attributes
  var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
  var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

  // translate the element
  target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'

  // update the posiion attributes
  target.setAttribute('data-x', x)
  target.setAttribute('data-y', y)
}

function getCoreDraggableOptions()
{
    let core_draggable_options = {

	listeners: { move: dragMoveListener },

	modifiers: [
	    interact.modifiers.restrictRect({
		restriction: 'parent',
		endOnly: true
	    })
	],	

	inertia: {
            resistance: 6,
            //minSpeed: 20,
            //endSpeed: 10,
            smoothEndDuration: 500,
            allowResume: true
	}		
    };

    return core_draggable_options;
}

function getCoreResizableOptions()
{
    let core_resizable_options = {
	
	edges: { left: true, right: true, bottom: true, top: true },
	    
	listeners: {
	    move (event) {
		var target = event.target
		var x = (parseFloat(target.getAttribute('data-x')) || 0)
		var y = (parseFloat(target.getAttribute('data-y')) || 0)
		
		// update the element's style
		target.style.width = event.rect.width + 'px'
		target.style.height = event.rect.height + 'px'
		
		// translate when resizing from top or left edges
		x += event.deltaRect.left
		y += event.deltaRect.top
		
		target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
		
		target.setAttribute('data-x', x)
		target.setAttribute('data-y', y)
		
		// var textEl = $(event.target).find('.interact-info-bar')[0];		    
		// textEl.textContent = "Resized to: " + Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height) + " pixels"
	    }
	},
	
	modifiers: [
	    // keep the edges inside the parent
	    interact.modifiers.restrictEdges({
		outer: 'parent'
	    }),
	    
	    // minimum size
	    interact.modifiers.restrictSize({
		min: { width: 100, height: 50 }
	    })
	],
	    
	
	inertia: {
            resistance: 6,
            //minSpeed: 20,
            //endSpeed: 10,
            smoothEndDuration: 500,
            allowResume: true
	}		
    };

    return core_resizable_options;
    
}


function getCoreGesturableOptions(elem,angleScale)
{
    let core_gesturable_options = {
	
	listeners: {
	    start (event) {
		angleScale.angle -= event.angle;
	    },
	    move (event) {
		let currentAngle = event.angle + angleScale.angle;
		let currentScale = event.scale * angleScale.scale;
		
		let scale_elem = $(elem).find('.scale-element')[0];
		
		scale_elem.style.transform =			
		    'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')';
		
		dragMoveListener(event);
	    },
	    end (event) {
		angleScale.angle = angleScale.angle + event.angle;
		angleScale.scale = angleScale.scale * event.scale;			
	    }
	}
    };

    return core_gesturable_options;
}
    
    
    
$(document).ready(function() {

    let draggable_options = getCoreDraggableOptions();
    let resizable_options = getCoreResizableOptions();
    
    draggable_options.autoScroll =true;    
    
    interact('.resize-drag')
	.draggable(draggable_options)
	.resizable(resizable_options)

    // still needed??
    //window.dragMoveListener = dragMoveListener


    var $drag_and_zoom_elems = $('.drag-and-zoom');

    $drag_and_zoom_elems.each(function(index) {

	let this_elem = this;

	/*
	let draggable_options = getCoreDraggableOptions();
	let angleScale = {
	    angle: 0,
	    scale: 1
	}

	*/
	
	let this_angle_scale = {
	    angle: 0,
	    scale: 1
	}

	
	let gdraggable_options = getCoreDraggableOptions();
	let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);

	interact(this_elem)
	    .gesturable(gesturable_options)
	    .draggable(gdraggable_options);
		
	/*
	interact(this_elem)
	    .gesturable({
		listeners: {
		    start (event) {
			angleScale.angle -= event.angle		
		    },
		    move (event) {
			let currentAngle = event.angle + angleScale.angle
			let currentScale = event.scale * angleScale.scale

			let this_scale_elem = $(this_elem).find('.scale-element')[0];
			
			this_scale_elem.style.transform =			
			    'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
			
			dragMoveListener(event)
		    },
		    end (event) {
			angleScale.angle = angleScale.angle + event.angle
			angleScale.scale = angleScale.scale * event.scale			
		    }
		}
	    })
	    .draggable(draggable_options)
	    
	*/

    });
});


$(document).ready(function() {
    
    const win1 = new WinBox({
	id:    "my-winbox1",
	title: 'Winbox + Interact Example 1',
	x: 200,
	y: 200,
	width: '400px',
	height: '400px',
	border: "0.3em",
	background: "#29e",
	html: "<p style=\"padding: 8px; color: #000;\">This window can be dragged around and resized</p>"
    });
    
    let draggable_options = getCoreDraggableOptions();
    let resizable_options = getCoreResizableOptions();
    
    draggable_options.autoScroll = true;
	
    interact('#my-winbox1')
	.draggable(draggable_options)
	.resizable(resizable_options);



    const win2 = new WinBox({
	id:    "my-winbox2",
	title: 'Winbox + Interact Example 2',
	x: 800,
	y: 200,
	width: '500px',
	height: '300px',
	border: "0.3em",
	background: "#29e",
	html: "<p class=\"scale-element\" style=\"padding: 8px; color: #000;\">This window can be dragged around, rotated and zoomed in and out</p>"
    });
    
    /*
    interact('#my-winbox2')
	.draggable(draggable_options)
	.resizable(resizable_options);
    */

    let this_elem = document.getElementById('my-winbox2');
    
    let this_angle_scale = {
	angle: 0,
	scale: 1
    }
    
    
    let gdraggable_options = getCoreDraggableOptions();
    let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
    
    interact('#my-winbox2')
	.gesturable(gesturable_options)
	.draggable(gdraggable_options);
    
    
	/*
	interact('#my-winbox')
	    .draggable({
		// enable inertial throwing
		inertia: true,
		// keep the element within the area of it's parent
		modifiers: [
		    interact.modifiers.restrictRect({
			restriction: 'parent',
			endOnly: true
		    })
		],
		// enable autoScroll
		autoScroll: true,
		
		listeners: {
		    // call this function on every dragmove event
		    move: dragMoveListener,
		    
		    // call this function on every dragend event
		    end (event) {
			var textEl = event.target.querySelector('p')
			
			textEl && (textEl.textContent =
				   'moved a distance of ' +
				   (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
					      Math.pow(event.pageY - event.y0, 2) | 0))
				   .toFixed(2) + 'px')
		    }
		}
	    });
	*/
	
});