var fc = {
	popupQuestions: function() {
		var ROOTSELECTOR = '.popup-questions';
		
		if($(ROOTSELECTOR).length) {
			var ROOTCLASSJS = 'popup-questions-js';
			
			var HOVEREDQUESTIONCLASS = 'hovered'
			var ACTIVEQUESTIONCLASS = 'active'
			
			var USERINSTRUCTIONS = 'Click on the icons below to reveal what questions to ask.'
			
			$(ROOTSELECTOR).each(function(){
				var thisRoot = $(this);

				// Enable the layout for the JavaScript version
				thisRoot.addClass(ROOTCLASSJS);
				
				// Add end-user instructions after the heading
				$('h2', thisRoot).after('<p class="js-title-action">' + USERINSTRUCTIONS + '</p>');
				
				// For each question:
				$('.popup-question', thisRoot).each(function(){
					
					var thisQuestion = $(this);
					var thisIcon = $('h3', this);
					
					// When the icon is hovered, add a class indicating it's hovered
					// When the icon is no longer hovered, remove the class
					
					thisIcon.bind('mouseover', function(){
						thisIcon.addClass(HOVEREDQUESTIONCLASS);
					});
	
					thisIcon.bind('mouseout', function(){
						thisIcon.removeClass(HOVEREDQUESTIONCLASS);
					});
					
					// When the icon is clicked, show the info, and add a class indicating it's active. When the icon is clicked again, hide the info and remove the active class.
					var thisInfo = $('.popup-questions-info', this);
					
					thisIcon.bind('click', function(){
						if (thisQuestion.hasClass(ACTIVEQUESTIONCLASS)) {
							thisQuestion.removeClass(ACTIVEQUESTIONCLASS);
							thisIcon.removeClass(ACTIVEQUESTIONCLASS);
						}
						else {
							thisQuestion.addClass(ACTIVEQUESTIONCLASS);
							thisIcon.addClass(ACTIVEQUESTIONCLASS);
						}
					});
					
					// Add a close icon to the info
					var closeIcon = $('<img alt="Close" class="close-icon" src="/images/boilershop/fc/icon-close-question.gif" width="15" height="15" />');
					
					closeIcon.bind('click', function(){
						thisQuestion.removeClass(ACTIVEQUESTIONCLASS);
						thisIcon.removeClass(ACTIVEQUESTIONCLASS);
					});
					
					$('.popup-questions-info-bottom', thisInfo).append(closeIcon);
					
					// Add HTML to contain the line image for the hovered/active state
					thisIcon.append($('<div class="line"></div>'));
					
				});// end each()
			});// end each()
		} //end if
	}
}

$(function(){
	fc.popupQuestions();
});