// Make explanation and main div dragable
jQuery(document).ready(function(){
  jQuery("#explanationDiv").draggable();
});

jQuery(document).ready(function(){
  if (jQuery("#main").length == 1)							
  {
	  jQuery("#main").draggable();
  }
  else
  {
	  jQuery("#largePlan").draggable();
  }
});

// Initialise layout etc.
function initialise()
{
	// Centre the image in the scrollable div
	var div = document.getElementById("plan");
	div.scrollTop = div.scrollHeight / 2;
	div.scrollLeft = div.scrollWidth / 2;
}

function showExplanation(explanation)
{
  (explanation != null) ? explanation = document.getElementById(explanation).innerHTML : explanation = '';
  var p = document.getElementById('explanationPara');
  p.innerHTML = explanation;
  var d = document.getElementById('explanationDiv');
  d.style.display = 'block';
}

function hideExplanation()
{
  var div = document.getElementById('explanationDiv');
  div.style.display = 'none';
}

var isFrozen = false;

function freeze()
{
	isFrozen = true;
}

function unfreeze()
{
	isFrozen = false;
	var p = document.getElementById('explanationPara');
	p.innerHTML = '<strong>Click to freeze.</strong>';
}

function scrollPlan(event)
{
	if (!isFrozen)
	{
		var explanationDiv = document.getElementById("explanationDiv");
		var pos_x = event.offsetX ? (event.offsetX) : event.pageX - explanationDiv.offsetLeft;
		var pos_y = event.offsetY ? (event.offsetY) : event.pageY - explanationDiv.offsetTop;
		pos_x -= 7; // 7 is padding plus border
		pos_y -= 7;
		
		//document.getElementById("x").value = pos_x;
		//document.getElementById("y").value = pos_y;
		
		var smallPlanImage = document.getElementById("smallPlan");
		var x_percent = pos_x / smallPlanImage.width;
		var y_percent = pos_y / smallPlanImage.height;
		
		var largeImageDiv = document.getElementById("plan");
		var largeImage = document.getElementById("largePlan");
		//largeImageDiv.scrollTop = largeImageDiv.scrollHeight * y_percent;
		//largeImageDiv.scrollLeft = largeImageDiv.scrollWidth * x_percent;	
		largeImageDiv.scrollTop = (largeImage.height * y_percent) - 250;
		largeImageDiv.scrollLeft = (largeImage.width * x_percent) - 400;
	}
	else
	{
		var p = document.getElementById('explanationPara');
        p.innerHTML = '<strong>Double-click to unfreeze.</strong>';
	}
}

var panning = false;

function startPanning(obj, event)
{
	obj.style.cursor = 'move';
    panning = event;
}

function stopPanning(obj)
{
	obj.style.cursor = 'default';
	panning = false;
}

function pan(event)
{
	if (panning)
	{
      document.getElementById("plan").scrollTop = document.getElementById("plan").scrollTop + 1;
	  document.getElementById("plan").scrollLeft = document.getElementById("plan").scrollLeft + 1;
      dragging = event;
      e.preventDefault();
      e.stopPropagation();
	}

}