var activityCalendarCoords = { left:0.023, top:0.034, right: 0.485, bottom: 0.484 };
var calendarDateSelectionCoords = { left:0.023, top:0.102, right:0.108, bottom:0.297 };
var calendarSelectionTreeCoords = { left:0.023, top:0.298, right:0.108, bottom:0.447 };
var calendarIntervalPropertiesCoords = { left:0.396, top:0.102, right:0.485, bottom:0.447 };

var reportViewCoords = { left: 0.505, top: 0.034, right: 0.967, bottom: 0.484 };
var reportMarkupCoords = { left:0.505, top:0.114, right:0.592, bottom:0.448 };
var reportChartPropertiesCoords = { left:0.879, top:0.114, right:0.967, bottom: 0.448 };

var activityTreeCoords = { left: 0.268, top: 0.504, right: 0.729, bottom: 0.953 };
var treeNotesCoords = { left:0.286, top:0.718, right:0.624, bottom:0.818 };
var quickTreeCoords = { left:0.268, top:0.819, right:0.395, bottom:0.943 };
var prioritizerCoords = { left:0.396, top:0.819, right:0.729, bottom:0.943 };
var WorkItemPropertiesCoords = { left:0.625, top:0.572, right:0.729, bottom:0.818 };

function adjustAreaElement(areaId, percentages, imgWidth, imgHeight)
{
  var areaElement = document.getElementById(areaId);
  areaElement.coords = Math.round(percentages.left * imgWidth) + ',' + Math.round(percentages.top * imgHeight) + ',' + Math.round(percentages.right * imgWidth) + ',' + Math.round(percentages.bottom * imgHeight);
}

function adjustImageMap()
{
  var imgElem = document.getElementById('compositionImg');
  adjustAreaElement('workItemNotesArea', treeNotesCoords, imgElem.width, imgElem.height);
  adjustAreaElement('quickTreeArea', quickTreeCoords, imgElem.width, imgElem.height);
  adjustAreaElement('prioritizerArea', prioritizerCoords, imgElem.width, imgElem.height);
  adjustAreaElement('workItemPropertiesArea', WorkItemPropertiesCoords, imgElem.width, imgElem.height);
  adjustAreaElement('activityTreeArea', activityTreeCoords, imgElem.width, imgElem.height);

  adjustAreaElement('calendarDateSelectionArea', calendarDateSelectionCoords, imgElem.width, imgElem.height);
  adjustAreaElement('calendarSelectionTreeArea', calendarSelectionTreeCoords, imgElem.width, imgElem.height);
  adjustAreaElement('calendarIntervalPropertiesArea', calendarIntervalPropertiesCoords, imgElem.width, imgElem.height);
  adjustAreaElement('activityCalendarArea', activityCalendarCoords, imgElem.width, imgElem.height);

  adjustAreaElement('reportMarkupArea', reportMarkupCoords, imgElem.width, imgElem.height);
  adjustAreaElement('reportChartPropertiesArea', reportChartPropertiesCoords, imgElem.width, imgElem.height);
  adjustAreaElement('reportViewArea', reportViewCoords, imgElem.width, imgElem.height);
}

$(document).ready(function(){
  adjustImageMap();
  $(window).resize(adjustImageMap);
});