/**********************************************************/
/********************** Instructions **********************/
/***********************************************************

This set of snippets connects two heatmap questions together
by placing one on top of the other, and then swapping the
stacking order depending on if a certain area of the current
image is clicked. My prototype's full menu button is in the
upper left hand corner of the screen, which makes this easy.
If you need to do something with another spot on the page,
that's possible, you'll just need to do some extra math.

It's intended to answer questions like "Where would you go
to find information on purchasing a new car?" in a situation
where you have a mega navigation in your design, and want to
find out if people are able to understand that menu is how
you get to information.

Your heatmap questions should be the only two questions on
the page, and they should also be named the same/have the
same question. Once you're done, you can look at the heatmap
for your prototype's first state (in my case, nav not open)
as well as the second state (in my case, nav open) and see
where people end up.

This will also set two pieces of embedded data to
your first question - whether the final state was open or
closed when the person answered the question, and the total
number of times the menu was open or closed. This is handy
information to have as you can see if people bounced back
and forth between the two states before settling on a final
answer.

These are the keys:

megaNavFinalState
megaNavTotalTimesOpened

You'll need to change the QIDs to match your own questions.

***********************************************************/

/**********************************************************/
/********************** Question One **********************/
/*********************** Javascript ***********************/
/**********************************************************/

// Global variables for all questions on this page.

var initNavWidth = 1630,
		initMenuHitWidth = 178,
		initMenuHitHeight = 123,
		currentMenuWidth = 0,
		currentMenuHeight = 0,
		menuOpenCount = 0,
		finalStateClosed = true;

// Gets the offset relative to the current layer for browser compatibility reasons.
// This is important because we want the offset relative to our hotspot image.

function getOffset(evt) {
  var el = evt.target,
      x = 0,
      y = 0;

  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }

  x = evt.clientX - x;
  y = evt.clientY - y;

  return { x: x, y: y };
}

Qualtrics.SurveyEngine.addOnload(function()
{
	// Position questions so they overlap.
	jQuery('#QID1').css({
		"position": "relative",
		"top": "0",
		"left": "0",
		"z-index": "2"
	});

	jQuery('#QID2').css({
		"position": "absolute",
		"top": "0",
		"left": "0",
		"z-index": "1"
	});

	var that = this;

    this.questionclick = function(event,element){
		var imageWidth = element.width,
				scaleFactor = imageWidth / initNavWidth,
				offsetRelativeToClickedLayer = getOffset(event);

		currentMenuWidth = initMenuHitWidth * scaleFactor;
		currentMenuHeight = initMenuHitHeight * scaleFactor;

		// If in the menu hit area, "open" the menu by placing the menu question on top.
		if ( offsetRelativeToClickedLayer.x <= currentMenuWidth &&  offsetRelativeToClickedLayer.y <= currentMenuHeight ) {
			jQuery('#QID2').css({
					"z-index": "2"
			});

			finalStateClosed = true;
			menuOpenCount++;
		}
	}
});

// Sets embedded data for the final state and total times opened
// when moving to the next question.
Qualtrics.SurveyEngine.addOnPageSubmit(function(type) {
	if(type == "next") {
		Qualtrics.SurveyEngine.setEmbeddedData( 'megaNavFinalState', finalStateClosed );
		Qualtrics.SurveyEngine.setEmbeddedData( 'megaNavTotalTimesOpened', menuOpenCount );
	}
});

/**********************************************************/
/********************** Question Two **********************/
/*********************** Javascript ***********************/
/**********************************************************/

Qualtrics.SurveyEngine.addOnload(function()
{
	var that = this;

    this.questionclick = function(event,element){
		var imageWidth = element.width,
				scaleFactor = imageWidth / initNavWidth,
				offsetRelativeToClickedLayer = getOffset(event);

		currentMenuWidth = initMenuHitWidth * scaleFactor;
		currentMenuHeight = initMenuHitHeight * scaleFactor;

		// If in the menu close area, "close" the menu by placing the first question on top.
		// Not in yet but maybe worth considering: should a click outside the menu close it?
		if ( offsetRelativeToClickedLayer.x <= currentMenuWidth &&  offsetRelativeToClickedLayer.y <= currentMenuHeight ) {
			jQuery('#QID2').css({
					"z-index": "1"
			});

			finalStateClosed = true;
		}
	}
});