var scopediv1;
var scopediv2;
var scopediv3;
var scopediv4;
var scopeleft;
var scopetop;
var scoperight;
var scopebottom;
var scopex = 400;
var scopey = 200;

var scopeWidth = 320;
var scopeHeight = 320;

var hole;

function mousemove(e) {
	if (e==null) e = event;
	scopex = e.clientX - scopeWidth/2;
	scopey = e.clientY - scopeHeight/2;
	update();
}

function p(a) {
	return a<0?0:a;
}

function update() {
	var x = scopex;
	var y = scopey;
	
	var bodyWidth = document.documentElement.clientWidth;//window.innerWidth;//document.clientWidth;//window.clientWidth;
	var bodyHeight = document.documentElement.clientHeight;//document.body.clientHeight;//window.innerHeight;//document.body.offsetHeight;//window.clientHeight; 
		
	scopediv1.style.left = x+"px";
	scopediv1.style.top = y+"px";

	scopediv2.style.top = y+"px";
	scopediv2.style.left = x+scopeWidth-scopediv2.clientWidth+"px";

	scopediv3.style.top = y+"px";
	scopediv3.style.left = x+scopeWidth/2-scopediv3.clientWidth/2+"px";

	scopediv4.style.top = y+scopeHeight-scopediv4.clientHeight+"px";
	scopediv4.style.left = x+scopeWidth/2-scopediv4.clientWidth/2+"px";

	
	scopetop.style.height = p(y)+"px";
	scopetop.style.width = bodyWidth+"px";
 	
	scopeleft.style.top = y+"px";
	scopeleft.style.height = p(bodyHeight - y) + "px";
	scopeleft.style.width = p(x)+"px";
	
	scopebottom.style.top = y + scopeHeight + "px";
	scopebottom.style.left = x+"px";
	scopebottom.style.width = p(bodyWidth - x) + "px";
	scopebottom.style.height = p(bodyHeight - y -scopeHeight) + "px";
	
	scoperight.style.top = y+"px";
	scoperight.style.left = x+scopeWidth+"px";
	scoperight.style.height = p(scopeHeight)+"px";
	scoperight.style.width = p(bodyWidth - x - scopeWidth) + "px";	
	
	var wall = document.getElementById("wall");
	if (wall.clientHeight!=bodyHeight) {
		wall.style.height = bodyHeight+"px";
	}
}

function issafari() {
	try {
		return navigator.userAgent.match(/Safari/i);
	} catch (e) {
		return false;
	}

}

function isbrowsersupported() {
	try {
		if (navigator.userAgent.match(/iPhone/i)) {
			return false;
		}
		return acceptableIE ||navigator.userAgent.match(/Safari/i)||
		navigator.userAgent.match(/Firefox/i) || navigator.userAgent.match(/Opera/i);
	} catch (e) {
		return false;
	}
}

function init() {
	if (!isbrowsersupported()) {
		document.body.style.cursor = "crosshair";
		var links = document.getElementsByTagName("a");
		for (var i in links) {
			links[i].style.cursor = "pointer";
		}
		return;
	}
	scopediv1 = document.getElementById("scope1");
	scopediv2 = document.getElementById("scope2");
	scopediv3 = document.getElementById("scope3");
	scopediv4 = document.getElementById("scope4");
	scopetop = document.getElementById("scopetop");
	scopeleft = document.getElementById("scopeleft");
	scopebottom = document.getElementById("scopebottom");
	scoperight = document.getElementById("scoperight");
	
	scopediv1.style.display = "block"; 
	scopediv2.style.display = "block";
	scopediv3.style.display = "block";
	scopediv4.style.display = "block";
	scopetop.style.display =  "block";
	scopeleft.style.display = "block";
	scopebottom.style.display = "block";
	scoperight.style.display = "block";

	document.body.onmousemove = mousemove;
	document.body.onmouseup = shoot;
	window.onresize = update;
	update();
	
	
	// disable text selection
	document.onselectstart = function() {return false;} // ie
  	if (!issafari) {
  		document.onmousedown = function() {return false;} // mozilla
	}
	
	if (!acceptableIE)
	document.getElementById("embedparent").innerHTML = 
	'<embed src="shot.wav" autostart="false" width="1" height="1" id="shoot" enablejavascript="true"></embed>';

	hole = new Image();
	hole.src = "hole.png";

}

function shoot(e) {
	if (e==null) e = event;

  	var sound=document.getElementById("shoot");
  	if (sound) {
		try {
			sound.Stop();
			sound.Rewind();
		} catch(e) {
		}
		
		try {
		
		
	  		sound.Play();
	  	} catch(e) {
	  	}
  	} else if (acceptableIE) {
  		document.all.bgsound.src = "shot.wav";
  	}
	var h = new Image();
	h.src = hole.src;
	
	h.style.position = "absolute";
	h.style.left = e.clientX - 11 + "px";
	h.style.top = e.clientY - 11 + "px";
	
	document.body.appendChild(h);
  	
  	
  	
}


init();