// w3remote initialization script

var setLineFrom;
var setLineTo;
var showLine;
if(document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG","1.1")) {
	var svgtop = document.createElementNS("http://www.w3.org/2000/svg","svg");
	var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
	svgtop.appendChild(path);
	svgtop.setAttribute("width",1);
	svgtop.setAttribute("height",1);
	svgtop.setAttribute("overflow","visible");
	svgtop.setAttribute("viewBox","0 0 1 1");
	path.setAttribute("stroke","red");
	path.setAttribute("fill","none");
	path.setAttribute("stroke-width", 2);
	path.setAttribute("d","M 0 0 L 1024 200");
	svgtop.style.position = "absolute";
	svgtop.style.top = svgtop.style.left = "0px";
	document.body.appendChild(svgtop);
	var x0,y0;
	var to = "0 0";
	setLineFrom = function(x,y) {
		x0=x; y0=y;
		from = ""+ x + " " + y;		
		path.setAttribute("d", "M "+from+" L "+to);
	}
	setLineTo = function(x,y) {
		to = ""+ x + " " + y;
		var w = Math.max(x,x0) + 20;
		var h = Math.max(y,y0) + 20;
		svgtop.setAttribute("width",w);
		svgtop.setAttribute("height",h);
		svgtop.setAttribute("viewBox","0 0 "+w+" "+h);
		path.setAttribute("d", "M "+from+" L "+to);
	}
	showLine = function(s) {
		svgtop.setAttribute("width",1);
		svgtop.setAttribute("height",1);
		svgtop.setAttribute("viewBox","0 0 "+1+" "+1);
		svgtop.style.visibility = s?"visible":"hidden";
	}
	showLine(false);
}
else {
	var dline;
	dline = document.createElement("v:line");
	dline.unselectable = "on";
	dline.style.position = "absolute";
	dline.style.top = "0px";
	dline.style.left = "0px";
	dline.strokecolor = "red";
	dline.strokeweight = 2;
	dline.from = "10 10"
	dline.to = "10 10";
	dline.unselectable = "on";
	dline.filled = false;
	dline.style.behavior="url(#default#VML)";
	document.body.appendChild(dline);
	setLineFrom = function(x,y) {
		dline.from = ""+ x + " " + y;
	}
	setLineTo = function(x,y) {
		dline.to = ""+ x + " " + y;
	}
	showLine = function(s) {
		dline.style.visibility = s?"visible":"hidden";
	}
	showLine(false);
}

function getPageX(e) {
	if(e.pageX) return e.pageX;
	return e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
}
function getPageY(e) {
	if(e.pageY) return e.pageY;
	return e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
function getOffsetTop(elt) {
	if(elt == null) return 0;
	return elt.offsetTop + getOffsetTop(elt.offsetParent);
}
function getOffsetLeft(elt) {
	if(elt == null) return 0;
	return elt.offsetLeft + getOffsetLeft(elt.offsetParent);
}
function dist(a,b,c,d) {
	a-=c;
	b-=d;
	return Math.sqrt(a*a+b*b);
}

var posimg = document.getElementsByName('pos')[0];
var mdown=0;
var dragbegun=0;
var x0=0; var y0=0;
var submit_ok = 0;
posimg.onmousedown = function(evt) {
	var e = evt?evt:event;
	setLineFrom(x0 = getPageX(e), y0 = getPageY(e));
	if(e.button - ((e.which == null)?1:0) == 0) {
		mdown = 1;
		dragbegun = 0;
		return false;
	}
	return true;
};

document.body.onmouseup = function(evt) {
	if(mdown == 1) {
		var e = evt?evt:event;
		var x1,y1;
		setLineTo(x1 = getPageX(e), y1 = getPageY(e));
		if(dragbegun == 1 && dist(x0,y0,x1,y1) <= 5) {
			// cancel drag
		}
		else if(dragbegun == 1) {
			x1 -= getOffsetLeft(posimg);
			y1 -= getOffsetTop(posimg);
			document.mouseform['drag.x'].value = x0 - getOffsetLeft(posimg);
			document.mouseform['drag.y'].value = y0 - getOffsetTop(posimg);
			document.mouseform['dragto.x'].value = x1;
			document.mouseform['dragto.y'].value = y1;
			if(x1 <= posimg.clientWidth && x1 >= 0 && y1 <= posimg.clientHeight && y1 >= 0)
				document.mouseform.submit();		
		}
		else if(dragbegun == 0) { 
			// click
			x1 -= getOffsetLeft(posimg);
			y1 -= getOffsetTop(posimg);
			document.mouseform['dragto.x'].value = x1;
			document.mouseform['dragto.y'].value = y1;
			document.mouseform.submit();
		}
		mdown = 0;
		showLine(false);
		return false;
	}
	return true;
};
document.body.onmousemove = function(evt) {
	window.status = [x0,y0,mdown].join(' ');
	if(mdown == 1) {
		var e = evt?evt:event;
		var x1,y1;
		setLineTo(x1 = getPageX(e), y1 = getPageY(e));
window.status = [x0,y0,x1,y1,mdown,dragbegun].join(' ');
		if(dragbegun == 0 && dist(x0,y0,x1,y1) > 5) {
			dragbegun = 1;
			showLine(true);
		}
	}
	return true;
};

document.mouseform.onsubmit = function(evt) { return false; } // never submit via clicking the image directly
document.body.onload=function(){document.typeform.type.focus()}