const elem = document.getElementById('vcontainer');
const zoomIn = document.getElementById('zoom-in');
const zoomOut = document.getElementById('zoom-out');
const zoomReset = document.getElementById('zoom-reset');
var magIcons = $('#mag-icons-div');
var outer = $('#outer');
if(typeof zoomstep == 'undefined')
	zoomstep = 0.2;
const panzoom = Panzoom(elem, {step: zoomstep});
const parent = elem.parentElement;
//parent.addEventListener('wheel', panzoom.zoomWithWheel);
zoomIn.addEventListener('click', panzoom.zoomIn)
zoomOut.addEventListener('click', panzoom.zoomOut)
zoomReset.addEventListener('click', panzoom.reset)

$(window).scroll(function () {
	var diff = outer.offset().top - $(window).scrollTop();
	console.log('outer: ' + outer.offset().top + ' win: ' + $(window).scrollTop() + ' diff: ' + diff);
	var hasClass = magIcons.hasClass('mag-fixed');
	if(diff < 102 && !hasClass) {
		magIcons.addClass("mag-fixed");
	} 
	else if(diff > 40 && hasClass) {
		magIcons.removeClass("mag-fixed");
	}
});