function setupNotes(pPrintPage, pContainingDiv) {
	var vPrevTop, vPrevHeight;
	
	sNoteIcon = $('<a class="note-icon" title="Add a note to this section"></a>');
	sNoteDiv = $('<div class="note"></div>');
	
	//pContaininDiv is used by print bookmarks page to restrict setting section ids to a single page.	
	$(pContainingDiv).find("#standard-detail .cmhtml-section, #detail-highlights #detail2-wrap .cmhtml-section, #detail-highlights #highlights-box .hl-box-wrap, #detail-highlights #detail-highlights-generic .cmhtml-section, #about-us #about-us-intro .cmhtml-section, #about-us #module-facts-wrap .mf-first, #about-us #module-full-wrap .module-full, #kpi .kpi-wrap:first, #board div[class^='board-wrap'], #our-strategy .os-box-wrap, #business-review div:first, #ceo div:first").
	each(function(i) {
		$(this).attr("id", "section" + i);

		if (!pPrintPage) {	
			vTop = $(this).position().top; //Position from content-wrap which has relative postion
			vHeight = $(this).outerHeight();
			vNoteDivOffset = 0;
			vNoteIconOffset = 0; 
			
			if(i == 0) {
				vMargin = vTop;
	
				vNoteDivOffset = $("#tabs").outerHeight() + 10 + 13; //Tabs height + #right-content margin + #content-wrap padding
				vNoteIconOffset = 13; //Top padding from #content-wrap 
	
				//Adjust icon offset for templates that have heading
				if ($("#main-heading").length) {
					if ($.browser.msie) {
						vNoteDivOffset = vNoteDivOffset - 13; //IE is out slightly
					}
	
					vNoteIconOffset = vNoteIconOffset + $("#main-heading").outerHeight() + 15;
				}
				
				//Adjust icon offset for templates that have full width intro
				if ($(".full-width").length) {
					vNoteIconOffset = vNoteIconOffset + $(".full-width").height() + 20;
				}
	
				//Adjust icon offset for business review (has extra top padding on "active-os")
				if ($("#business-review").length) {
					vNoteIconOffset = vNoteIconOffset - 10;
				}
	
				//Only one note for templates with interactive elements - notes do not move when content is shown hidden
				$("#kpi, #business-review, #ceo").each(function() {
					vHeight = $(this).height();
				});
				
	
			} else {
			 	vMargin = vTop - vPrevTop - vPrevHeight; 
			}
			
			vPrevTop = vTop;
			vPrevHeight = vHeight;
	
			//Set-up note divs
			vNoteDiv = sNoteDiv.clone().attr("id", "note" + i);
			$(vNoteDiv).hover(noteHoverOn, noteHoverOff).click(noteClick);
			$(vNoteDiv).css({"margin-top": vMargin - vNoteDivOffset + "px", "height": vHeight + "px"});
			$("#notes").append(vNoteDiv);
			
			//Set-up note icons
			vNoteIcon = sNoteIcon.clone().attr("id", "noteIcon" + i);
			$(vNoteIcon).hover(noteIconHoverOn, noteIconHoverOff).click(noteIconClick);
			$(vNoteIcon).css({"margin-top": vMargin - vNoteIconOffset + "px", "height": vHeight + "px"});			
			$("#note-icon-wrap").append(vNoteIcon);
		}
	});

	if (!pPrintPage) {	
		//Set-up existing notes & note icons
		vPageId = $("body").attr("id");
		vPageId = vPageId.substring(vPageId.indexOf('_') + 1);
	
		if (vPageId.length) {
			var timestamp = new Date();
			$.get("/notes/", {itemId:vPageId,timestamp:timestamp.getTime()}, function(pData) {
				vFragment = $(pData);
				vFragment.filter("p").each(function(i){
					vText = $(this).text();
					vNote = $("#" + this.id);
					vNote.append($("<div></div>").addClass("content").text(vText));
					vNote.unbind();
					vNote.append('<a href="#">Edit</a> <a href="#">Delete</a>');
					vNote.click(noteClick);
					vNote.find("a:last").click(deleteNote);
					
					vNoteIcon = $(vNote.attr("id").replace(/note/, "#noteIcon"));
					$(vNoteIcon).unbind().click(noteIconClick).addClass("note-done");
					$(vNoteIcon).attr("title", "Edit note");
				});
				
				numberNotes();		
			});
		}
	}
}

function noteIconHoverOn() {
	$(this).addClass("highlight");
}
	
function noteIconHoverOff() {
	$(this).removeClass("highlight");	
}

function noteHoverOn() {
	$(this).addClass("note-hover");
	$(this).append("<span>Add Note</span>");
}
	
function noteHoverOff() {
	$(this).removeClass("note-hover");	
	$(this).find("span").remove();
}

function noteClick() {
	vNoteDiv = $(this);
	
	//Remove styles and event listeners.
	$(vNoteDiv).removeClass("note-hover");
	$(vNoteDiv).find("span").remove();
	$(vNoteDiv).unbind();
	
	//Add edit form / modify existing note.
	vTextarea = $('<textarea rows="5" cols="20"></textarea>');
	vText = $("div.content", vNoteDiv).remove().text();
	if(vText) {
		vTextarea.val(vText);
	}
	$("a", vNoteDiv).remove(); //Remove edit/delete links
	vLink = $('<a href="#">Done</a>').click(noteBlur);
	$(vNoteDiv).append(vTextarea);
	$(vNoteDiv).append(vLink);
	$(vNoteDiv).find("textarea").focus();
	
	//Change note icon state.
	vNoteIcon = $(vNoteDiv.attr("id").replace(/note/, "#noteIcon"));
	vNoteIcon.unbind().removeClass("note-done").addClass("highlight").click(noteIconClick); //Remove hover event.
	$(vNoteIcon).attr("title", "Edit note");	
		
	return false;
}

function noteIconClick() {
	if(!$("#notes:visible").length) {
		$("#tabs li:contains('Notes') a" ).triggerHandler("click"); //Simulate clicking on Notes tab
	}

	vNoteDiv = $(this).attr("id").replace(/noteIcon/, "#note");
	if(!$(vNoteDiv).find(".content").length) { //Dont go directly into edit mode with existing content
		$(vNoteDiv).triggerHandler("click"); //Simulate clicking on Add note
	}

	return false;
}


function noteBlur() {
	vTextarea = $(this).prev();
	vNoteDiv = vTextarea.parent();
	vNoteIcon = $(vNoteDiv.attr("id").replace(/note/, "#noteIcon"));

	//AJAX bit that saves the note entry.
	vPageId = $("body").attr("id").match(/\d+/)[0];
	vSectionId = vTextarea.parent().attr("id").match(/\d+/)[0];
	$.post("/notes/", {"action":"edit", "itemId":vPageId, "section":vSectionId, "note":vTextarea.val()});
	
	//Display note and remove edit form.
	vNoteDiv.append($('<div></div>').addClass("content").text(vTextarea.val()));
	vNoteDiv.find("a").remove();
	vNoteDiv.append('<a href="#">Edit</a> <a href="#">Delete</a>');
	vNoteDiv.click(noteClick);
	vNoteDiv.find("a:last").click(deleteNote);
	vTextarea.remove();

	//Change state of note icon
	vNoteIcon.removeClass("highlight").addClass("note-done");
	
	numberNotes();
	return false;
}

function deleteNote() {
	vNoteDiv = $(this).parent();

	//AJAX bit that deletes the note entry.
	vPageId = $("body").attr("id").match(/\d+/)[0];
	vSectionId = vNoteDiv.attr("id").match(/\d+/)[0];
	$.post("/notes/", {"action":"delete", "itemId":vPageId, "section":vSectionId});

	//Change DOM to remove note and add hover.
	vNoteDiv.find("div,a").remove();
	vNoteDiv.hover(noteHoverOn, noteHoverOff);
	vNoteDiv.click(noteClick)
	
	//Change state of note icon	vNoteIcon = $(vNoteDiv.attr("id").replace(/note/, "#noteIcon"));
	vNoteIcon.unbind().removeClass("note-done");
	vNoteIcon.attr("title","Add a note to this section");	
	vNoteIcon.hover(noteIconHoverOn, noteIconHoverOff).click(noteIconClick);

	numberNotes();
	return false;	
}

// Footnote-style numbering for printing notes
function numberNotes() { 
	$("div.user-note").remove();
	$("#print-notes").children().remove();
	
	if ($("#notes div.content").length) {
		vFooterNotesDiv = $("#print-notes");
		vFooterNotesDiv.append("<h4>Notes</h4>");
		vFooterNotesDiv.append("<ol></ol>");
	}
	
	$("#notes div.content").each(function(i) {
		vSection = $($(this).parent().attr("id").replace(/note/, "#section"));
		$(vSection).prepend("<div class='user-note'>(See note " + (i+1) + ")</div>");
		vListItem = $("<li></li>").append($(this).html());
		$("ol", vFooterNotesDiv).append(vListItem);
	});	
}