var dragableCenter, dragableVertical, dragableHorizontal;

var box1, box2, box3, box4;

function initializeDragable()
	{
	dragableCenter = getId("dragableCenter");
	dragableVertical = getId("dragableVertical");
	dragableHorizontal = getId("dragableHorizontal");
	box1 = getId("box1");
	box2 = getId("box2");
	box3 = getId("box3");
	box4 = getId("box4");
	
	addEvent(dragableCenter, "mouseover", dragableMouseOver);
	addEvent(dragableVertical, "mouseover", dragableMouseOver);
	addEvent(dragableHorizontal, "mouseover", dragableMouseOver);
	addEvent(dragableCenter, "mouseout", dragableMouseOut);
	addEvent(dragableVertical, "mouseout", dragableMouseOut);
	addEvent(dragableHorizontal, "mouseout", dragableMouseOut);

	addEvent(document, "mousemove", mouseMove);
	addEvent(dragableCenter, "mousedown", dragableMouseClick);
	addEvent(dragableVertical, "mousedown", dragableMouseClick);
	addEvent(dragableHorizontal, "mousedown", dragableMouseClick);
	addEvent(dragableCenter, "mouseup", dragableMouseReleaseClick);
	addEvent(dragableVertical, "mouseup", dragableMouseReleaseClick);
	addEvent(dragableHorizontal, "mouseup", dragableMouseReleaseClick);

	}

startDragging = false;

function mouseMove(event)
	{
	if(startDragging == false) return;
	event = event || window.event;
	var mousePixelPosition = mouseCoordinates(event);
	var mousePercentagePosition = [ mousePixelPosition[0] / getBrowserWidth() * 100, mousePixelPosition[1] / getBrowserHeight() * 100 ];
	retargetBrosCross(mousePercentagePosition)
	//var box1 = getId("box1");
	//box1.innerHTML = mousePercentagePosition;
	}

function retargetBrosCross(mousePercentagePosition)
	{
	mousePercentagePosition[0] = mousePercentagePosition[0] - 1;
	mousePercentagePosition[1] = mousePercentagePosition[1] - 1;
	if(mousePercentagePosition[0] > 92) mousePercentagePosition[0] = 93;
	else if(mousePercentagePosition[0] < 5) mousePercentagePosition[0] = 4;
	if(mousePercentagePosition[1] > 88) mousePercentagePosition[1] = 89;
	else if(mousePercentagePosition[1] < 24) mousePercentagePosition[1] = 23;

	if(startDragging != "dragableHorizontal")
		{
		dragableVertical.style.left = mousePercentagePosition[0] + "%";
		box1.style.width = (mousePercentagePosition[0] - 4) + "%";
		box2.style.left = (mousePercentagePosition[0] + 4) + "%";
		box2.style.width = (93 - mousePercentagePosition[0] ) + "%";
		box3.style.width = (mousePercentagePosition[0] - 4) + "%";
		box4.style.left = (mousePercentagePosition[0] + 4) + "%";
		box4.style.width = (93 - mousePercentagePosition[0]) + "%";
		dragableCenter.style.left = mousePercentagePosition[0] + "%";
		}

	if(startDragging != "dragableVertical")
		{
		dragableHorizontal.style.top = mousePercentagePosition[1] + "%";

		box1.style.height = (mousePercentagePosition[1] - 23) + "%";
		box2.style.height = (mousePercentagePosition[1] - 23) + "%";
		box3.style.top = (mousePercentagePosition[1] + 6) + "%";
		box3.style.height = (89 - mousePercentagePosition[1]) + "%";
		box4.style.top = (mousePercentagePosition[1] + 6) + "%";
		box4.style.height = (89 - mousePercentagePosition[1]) + "%";
		dragableCenter.style.top = mousePercentagePosition[1] + "%";
		}


	}

function dragableMouseClick(event)
	{
	sender = getSenderByEvent(event);
	startDragging = sender.id;
	}

function dragableMouseReleaseClick()
	{
	startDragging = false;
	}

function mouseCoordinates(event)
	{
	if(event.pageX || event.pageY)
		{
		return [event.pageX, event.pageY];
		}
	return [(event.clientX + document.body.scrollLeft - document.body.clientLeft), (event.clientY + document.body.scrollTop  - document.body.clientTop)];
	}

function dragableMouseOver(event)
	{
	var sender = getSenderByEvent(event);
	sender.className = "dragableMouseOver";
	if(sender.id == "dragableCenter")
		{
		var dragableVertical = getId("dragableVertical");
		var dragableHorizontal = getId("dragableHorizontal");
		dragableVertical.className = "dragableMouseOver";
		dragableHorizontal.className = "dragableMouseOver";
		}
	}

function dragableMouseOut(event)
	{
	var sender = getSenderByEvent(event);	
	sender.className = "dragableMouseOut";
	if(sender.id == "dragableCenter")
		{
		var dragableVertical = getId("dragableVertical");
		var dragableHorizontal = getId("dragableHorizontal");
		dragableVertical.className = "dragableMouseOut";
		dragableHorizontal.className = "dragableMouseOut";
		}

	}