function displayLargeImage(thisItem)
{
  // hide all pop-ups incase they are open
  for (var i = 1; i < carouselItemCount + 1; i++)
  {
    $(carouselEnlgardedPrefix + i).addClassName('hidden');
  }

  // work out the pop-up's id we want to show
  thisEnlarged = $(thisItem).readAttribute('id');
  thisEnlarged = thisEnlarged.replace(carouselItemPrefix, carouselEnlgardedPrefix);

  // decide where to place it on the screen
  var PAGEelemPos = $('page').cumulativeOffset();
  var LIelemPos = $(thisItem).cumulativeOffset();

  var mLeft = LIelemPos[0] - PAGEelemPos[0] - 60;
  $(thisEnlarged).setStyle({ 'margin': '-232px 0 0 ' + mLeft + 'px' });

  // show the pop-up
  $(thisEnlarged).removeClassName('hidden');
  
  // add an event listener to the blue/white 'close x' image to allow it to close when clicked
  var closeImage = $(thisEnlarged).getElementsByClassName('detailsClose');
  
  /*
  Event.observe(closeImage[0], 'click', function(event) {
  	alert("clicked");
    $(thisEnlarged).addClassName('hidden');
  });
  */
  
  Event.observe(closeImage[0], 'click', function(event) {
  	$(thisEnlarged).addClassName('hidden');
  });
  
  // add event listeners to the carousel navigation buttons so the pop-up is closed when we scroll
  Event.observe($('prev-arrow-container'), 'click', function(event) {
    $(thisEnlarged).addClassName('hidden');
  });
  Event.observe($('next-arrow-container'), 'click', function(event) {
    $(thisEnlarged).addClassName('hidden');
  });
}

/* override missing methods */
var overrideMethods = {
  cumulativeOffset: function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;
      element = element.offsetParent;
    } while (element);
    return Element._returnOffset(valueL, valueT);
  }
};

Element._returnOffset = function(l, t) {
  var result = [l, t];
  result.left = l;
  result.top = t;
  return result;
};

Element.addMethods(overrideMethods);
