// variables globales:
// pane4_movimiento = X, Y o B
// pane4_verbose = S / N


pane4_speedX = 0;
pane4_speedY = 0;
pane4_shift_interval = 0;
pane4_moveByButtons_interval=0;
pane4_speed_limit = 6;
pane4_moveon = false;
pane4_movedirection = '';

function pane4_over(event) {
	//start moving
	clearInterval(pane4_moveByButtons_interval);
	pane4_shift_interval = setInterval("pane4_shift()", 10);
}

function pane4_move(event) {
	//reset speed

	var el = event.srcElement;
	var mypane   = document.getElementById('pane4'); 
	var mytable  = document.getElementById('pane4table'); 

	if (!el) {
		//MOZILLA
		el = event.target;
	}

	if (pane4_movimiento == 'X' || pane4_movimiento == 'B')
		{
		var offsetCountX=0;
		while (el.id != "pane4container") 
			{
			offsetCountX += el.offsetLeft;
			el = el.parentNode;
			}
	
		var mouseX = event.offsetX + offsetCountX;
		if (typeof event.offsetX == "undefined") 
			{
			if (event.target.id.match("pane4left"))
				{mouseX = event.layerX;}
			else
				{
				if (event.target.id.match("pane4right")) 
					{mouseX = event.layerX;}
				else
					{mouseX = event.layerX + parseInt(document.getElementById('pane4table').offsetLeft) + 40 ;}
				}
			}
		pane4_speedX = (mouseX - (mypane.offsetWidth/2)) / (mypane.offsetWidth/2) * 10;
		if (pane4_speedX > pane4_speed_limit) pane4_speedX = pane4_speed_limit;
		if (pane4_speedX < -pane4_speed_limit) pane4_speedX = -pane4_speed_limit;
		}

	if (pane4_movimiento == 'Y' || pane4_movimiento == 'B')
		{
		var offsetCountY=0;
		while (el.id != "pane4container") 
			{
			offsetCountY += el.offsetTop;
			el = el.parentNode;
			}
		var mouseY = event.offsetY + offsetCountY;
		if (typeof event.offsetY == "undefined") 
			{
			if (event.target.id.match("pane4top")) 
				{mouseY = event.layerY;}
			else
				{
				if (event.target.id.match("pane4bottom"))
					{mouseY = event.layerY;}
				else
					{mouseY = event.layerY + parseInt(document.getElementById('pane4table').offsetTop) - 0 ;}
				}
			}
		pane4_speedY = (mouseY - (mypane.offsetHeight/2)) / (mypane.offsetHeight/2) * 10;
		if (pane4_speedY > pane4_speed_limit) pane4_speedY = pane4_speed_limit;
		if (pane4_speedY < -pane4_speed_limit) pane4_speedY = -pane4_speed_limit;
		}

	if (pane4_verbose == 'S')
		{
		document.getElementById('SpeedX').value = pane4_speedX;
		document.getElementById('SpeedY').value = pane4_speedY;
		document.getElementById('MouseX').value = mouseX;
		document.getElementById('MouseY').value = mouseY;
		document.getElementById('EventLayerX').value = event.layerX;
		document.getElementById('EventLayerY').value = event.layerY;
		document.getElementById('offsetTop').value = mytable.offsetTop;
		document.getElementById('offsetLeft').value = mytable.offsetLeft;
		document.getElementById('offsetWidth').value = mytable.offsetWidth;
		document.getElementById('offsetHeight').value = mytable.offsetHeight;
		document.getElementById('PaneoffsetTop').value = mypane.offsetTop;
		document.getElementById('PaneoffsetLeft').value = mypane.offsetLeft;
		document.getElementById('PaneoffsetWidth').value = mypane.offsetWidth;
		document.getElementById('PaneoffsetHeight').value = mypane.offsetHeight;
		}
}


function pane4_out() {
	//stop movement
	clearInterval(pane4_shift_interval);
	clearInterval(pane4_moveByButtons_interval);
}

function pane4_shift() {

	var mypane   = document.getElementById('pane4'); 
	var mytable  = document.getElementById('pane4table'); 
	var myleft   = document.getElementById('pane4left');
	var myright  = document.getElementById('pane4right');
	var mytop    = document.getElementById('pane4up');
	var mybottom = document.getElementById('pane4down');

	//actually move the pane4
	// el -.25 controla la zona muerta central
	if (pane4_movimiento == 'X' || pane4_movimiento == 'B')
		{
		var actual_speedX = Math.abs(pane4_speedX) - .25;
		if (actual_speedX<0) actual_speedX=0;
		if (pane4_speedX<0) actual_speedX = -1 * actual_speedX;
		cambiarX = true;
		}
		
	if (pane4_movimiento == 'Y' || pane4_movimiento == 'B')
		{
		var actual_speedY = Math.abs(pane4_speedY) - .25;
		if (actual_speedY<0) actual_speedY=0;
		if (pane4_speedY<0) actual_speedY = -1 * actual_speedY;
		cambiarY = true;
		}

	if (mytable.offsetWidth> mypane.offsetWidth) /* si no, no cal moure-ho */
		{
		if (pane4_movimiento == 'X' || pane4_movimiento == 'B')
			{
			 if (parseInt(mytable.offsetLeft)>0 && actual_speedX<0) {
				 	if (myleft)
						if (!myleft.src.match("stop")) myleft.src = myleft.src.replace("move","stop");
	
					cambiarX=false;
					if (pane4_moveon && pane4_movedirection=='left') pane4_moveoff();
				} else {
				 	if (myleft)
						if (myleft.src.match("stop")) myleft.src = myleft.src.replace("stop","move");
				}
			
			if (parseInt(mytable.offsetLeft) < parseInt( mypane.offsetWidth - mytable.offsetWidth - 100) && actual_speedX>0) {
				 	if (myright)
						if (!myright.src.match("stop")) myright.src = myright.src.replace("move","stop");
	
					cambiarX=false;
					if (pane4_moveon && pane4_movedirection=='right') pane4_moveoff();
				} else {
				 	if (myright)
						if (myright.src.match("stop")) myright.src = myright.src.replace("stop","move");
				}
			
			if (cambiarX) mytable.style.left = (parseInt(mytable.offsetLeft) - parseInt(actual_speedX)) + "px";
			}
		}
		
	if (mytable.offsetHeight> mypane.offsetHeight) /* si no, no cal moure-ho */
		{
		if (pane4_movimiento == 'Y' || pane4_movimiento == 'B')
			{
			if (parseInt(mytable.offsetTop)>0 && actual_speedY<0) {
			 	if (mytop)
					if (!mytop.src.match("stop")) mytop.src = mytop.src.replace("move","stop");
	
				cambiarY=false;
				if (pane4_moveon && pane4_movedirection=='up') pane4_moveoff();
		
			} else {
			 	if (mytop)
					if (mytop.src.match("stop")) mytop.src = mytop.src.replace("stop","move");
			}
		
			if (parseInt(mytable.offsetTop) < parseInt(mypane.offsetHeight - mytable.offsetHeight + 0) && actual_speedY>0) {
			 	if (mybottom)
					if (!mybottom.src.match("stop")) mybottom.src = mybottom.src.replace("move","stop");
				cambiarY=false;
				if (pane4_moveon && pane4_movedirection=='down') pane4_moveoff();
				} else {
				 	if (mybottom)
						if (mybottom.src.match("stop")) mybottom.src = mybottom.src.replace("stop","move");
				}
	
			if (cambiarY)
				{
				mytable.style.top = (parseInt(mytable.offsetTop) - parseInt(actual_speedY)) + "px";
				}
			}
		}

	
	if (pane4_verbose == 'S')
		{
		var mycheck6  = document.getElementById('checkbox6'); 
		if (mycheck6.checked) mycheck6.checked=false;
		else mycheck6.checked=true;

		document.getElementById('Pleft').value = mytable.style.left;
		document.getElementById('Ptop').value = mytable.style.top;
		document.getElementById('ActualX').value = actual_speedX;
		document.getElementById('ActualY').value = actual_speedY;
		}
return;
}

function pane4_moveleft()
{
if (!pane4_moveon)
	{
	clearInterval(pane4_moveByButtons_interval);
	document.getElementById('pane4left').src = 'pane4/pane4_touchleft.jpg';
	pane4_moveon = true;
	pane4_movedirection = 'left';
	
	if (pane4_verbose == 'S')
		{
		document.getElementById('MoveOn').checked = true;
		document.getElementById('Left').checked = true;
		}
	
	pane4_speedX = -3;
	pane4_speedY = 0;
	pane4_moveByButtons_interval = setInterval("pane4_moveByButtons()", 10);
	}
return;
}

function pane4_moveright()
{
if (!pane4_moveon)
	{
	clearInterval(pane4_moveByButtons_interval);
	document.getElementById('pane4right').src = 'pane4/pane4_touchright.jpg';
	pane4_moveon = true;
	pane4_movedirection = 'right';
	if (pane4_verbose == 'S')
		{
		document.getElementById('MoveOn').checked = true;
		document.getElementById('Right').checked = true;
		}
	pane4_speedX = +3;
	pane4_speedY = 0;
	pane4_moveByButtons_interval = setInterval("pane4_moveByButtons()", 10);
	}
return;
}

function pane4_moveup()
{
if (!pane4_moveon)
	{
	clearInterval(pane4_moveByButtons_interval);
	document.getElementById('pane4up').src = 'pane4/pane4_touchup.jpg';
	pane4_moveon = true;
	pane4_movedirection = 'up';
	if (pane4_verbose == 'S')
		{
		document.getElementById('MoveOn').checked = true;
		document.getElementById('Up').checked = true;
		}
	pane4_speedY = -3;
	pane4_speedX = 0;
	pane4_moveByButtons_interval = setInterval("pane4_moveByButtons()", 10);
	}
return;
}

function pane4_movedown()
{
if (!pane4_moveon)
	{
	clearInterval(pane4_moveByButtons_interval);
	document.getElementById('pane4down').src = 'pane4/pane4_touchdown.jpg';
	pane4_moveon = true;
	pane4_movedirection = 'down';
	if (pane4_verbose == 'S')
		{
		document.getElementById('MoveOn').checked = true;
		document.getElementById('Down').checked = true;
		}
	pane4_speedY = 3;
	pane4_speedX = 0;
	pane4_moveByButtons_interval = setInterval("pane4_moveByButtons()", 10);
	}
return;
}

function pane4_mouseoverleft(i)
{
if (i==1) document.getElementById('pane4left').src = 'pane4/pane4_mouseoverleft.jpg';
if (i==2) document.getElementById('pane4left').src = 'pane4/pane4_moveleft.jpg';
return;
}

function pane4_mouseoverright(i)
{
if (i==1) document.getElementById('pane4right').src = 'pane4/pane4_mouseoverright.jpg';
if (i==2) document.getElementById('pane4right').src = 'pane4/pane4_moveright.jpg';
return;
}

function pane4_mouseoverup(i)
{
if (i==1) document.getElementById('pane4up').src = 'pane4/pane4_mouseoverup.jpg';
if (i==2) document.getElementById('pane4up').src = 'pane4/pane4_moveup.jpg';
return;
}

function pane4_mouseoverdown(i)
{
if (i==1) document.getElementById('pane4down').src = 'pane4/pane4_mouseoverdown.jpg';
if (i==2) document.getElementById('pane4down').src = 'pane4/pane4_movedown.jpg';
return;
}

function pane4_moveoff()
{
clearInterval(pane4_moveByButtons_interval);
pane4_moveon= false;

var mytable  = document.getElementById('pane4table'); 
var mypane   = document.getElementById('pane4'); 

if (pane4_verbose == 'S')
	{
	document.getElementById('MoveOn').checked = false;
	document.getElementById('Left').checked = false;
	document.getElementById('Right').checked = false;
	document.getElementById('Up').checked = false;
	document.getElementById('Down').checked = false;
	document.getElementById('pane4'+pane4_movedirection).src = 'pane4/pane4_move'+pane4_movedirection+'.jpg';
	}
	
pane4_speedX=0;
pane4_speedY=0;

if (pane4_movimiento == 'X' || pane4_movimiento == 'B')
	{
	var myleft   = document.getElementById('pane4left');
	if (parseInt(mytable.offsetLeft)>0) {
		if (!myleft.src.match("stop")) 
			{
			myleft.src = myleft.src.replace("move","stop");
			myleft.src = myleft.src.replace("touch","stop");
			}
		}
		
	var myright  = document.getElementById('pane4right');
	if (parseInt(mytable.offsetLeft) < parseInt( mypane.offsetWidth - mytable.offsetWidth - 100)) {
		if (!myright.src.match("stop"))
			{
			myright.src = myright.src.replace("move","stop");
			myright.src = myright.src.replace("touch","stop");
			}
		}
	}

if (pane4_movimiento == 'Y' || pane4_movimiento == 'B')
	{
	var mytop    = document.getElementById('pane4up');
	if (parseInt(mytable.offsetTop)>0) {
		if (!mytop.src.match("stop"))
			{
			mytop.src = mytop.src.replace("move","stop");
			mytop.src = mytop.src.replace("move","stop");
			}
		}
	
	var mybottom = document.getElementById('pane4down');
	if (parseInt(mytable.offsetTop) < parseInt(mypane.offsetHeight - mytable.offsetHeight)) {
		if (!mybottom.src.match("stop"))
			{
			mybottom.src = mybottom.src.replace("move","stop");
			mybottom.src = mybottom.src.replace("touch","stop");
			}
	
		} 
	}
return;
}

function pane4_moveByButtons()
{
if (pane4_moveon)
	{
	<!-- acelerador -->	
	if (pane4_speedY < pane4_speed_limit)
		pane4_speedY = pane4_speedY * 1.025;

	if (pane4_speedX < pane4_speed_limit)
		pane4_speedX = pane4_speedX * 1.025;

	pane4_shift();	

	if (pane4_verbose == 'S')
		{
		document.getElementById('SpeedX').value = pane4_speedX;
		document.getElementById('SpeedY').value = pane4_speedY;

		var mycheck6  = document.getElementById('checkbox6'); 
		if (mycheck6.checked) mycheck6.checked=false;
		else mycheck6.checked=true;
		}
	}
else
	{
	clearInterval(pane4_moveByButtons_interval);
	}
return;
}