var loadingText = 'Loading...';
var titleText = 'Definition';
var closeText = 'Close';

$(document).ready(function () {
	/*
		<div id="glossaryPopup">
			<div class="glossaryPopupTop"></div>
			<div class="glossaryPopupMiddle">
				<div class="glossaryPopupTitle">
					<h4>titleText</h4>
					<div class="glossaryPopupCloseButton" title="closeText" alt="closeText"></div>
				</div>
				<div class="glossaryPopupMiddleWrapper">
					<p>loadingText</p>
				</div>
			</div>
			<div class="glossaryPopupBottom"></div>
		</div>
	*/
	// Append the popup div to the body of the page. This prevents messing up the markup with unused div elements.
	$('body').append('<div id="glossaryPopup"><div class="glossaryPopupTop"></div><div class="glossaryPopupMiddle"><div class="glossaryPopupTitle"><h4>' + titleText + '</h4><div class="glossaryPopupCloseButton" title="' + closeText + ' "alt="' + closeText + '"></div></div><div class="glossaryPopupMiddleWrapper"><p>'+ loadingText +'</p></div></div><div class="glossaryPopupBottom"></div></div>');
	$('#glossaryPopup .glossaryPopupCloseButton').click(function () {
		$('#glossaryPopup').fadeOut();
	});
	$('#mainInner span[@class*=glossaryDefinitionItem]').each(function () {
		// Stylize the items that have been identified as glossary definition handles
		$(this).addClass('glossaryItem');
		$(this).click(function () {
			// Get current position object of the glossary definition link (x,y coordinates)
			var offset = $(this).offset();
			$('#glossaryPopup').css('top', (offset.top + 15) + 'px');
			// Determine whether the glossary popup will display outside the viewport area
			// and place the popup accordingly.
			if((offset.left + $('#glossaryPopup').width()) < $(window).width()) {
				$('#glossaryPopup .glossaryPopupTop').removeClass('flip');
				$('#glossaryPopup').css('left', offset.left + 'px');
			} else {
				// Flip the top "bubble tail" so that the popup looks like it's showing inside the content area
				$('#glossaryPopup .glossaryPopupTop').addClass('flip');
				// The following calculation is used to place the popup within the content area:
				//		The left position of the current object
				//		PLUS
				//		The width of the current object
				//		MINUS
				//		The width of the popup object
				//		PLUS
				//		20px - don't know why, but for some reason the offset position is off.
				$('#glossaryPopup').css('left', (offset.left + $(this).width() - $('#glossaryPopup').width() + 25) + 'px');
			}
			$('#glossaryPopup').fadeIn();

			// Build an array from the list of class names for the current item
			classList = this.className.split(' ');
			// Loop through the class names array
			for(currentClassName in classList) {
				// Check if there is a class named 'glossaryDefinitionItem' - this specifies the definition id
				if(classList[currentClassName].indexOf('glossaryDefinitionItem') >= 0) {
					// Pull out the definition id and store it
					definitionId = classList[currentClassName].substring(22);
				}
			}

			// Place an AJAX call to get the definition of the glossary definition id requested
			$.post('index.cfm?method=glossaryDefinition.getDefinition', {def_id: definitionId}, function(glossaryDefinition) {
				$(".glossaryPopupMiddleWrapper p").html(glossaryDefinition);

				// Omniture call
				glossaryOmnitureTracking(glossaryDefinition);
			});
		});
	});
});

function glossaryOmnitureTracking(glossaryDefinition) {
	// Verify that the Omniture object has been initialized
	if(typeof s != 'undefined') {
		glossaryTerm = glossaryDefinition;
		glossaryPageName = s.pageName;
		s.linkTrackVars='prop17,prop18';
		s.linkTrackEvents='None';
		s.prop17= glossaryPageName;
		s.prop18= glossaryTerm;
		s.tl();
		s.prop17= '';
		s.prop18= '';
	}
}