first stage of adding qTip to the annotate.

www/css/annotate.css

@@ -3,8 +3,6 @@
 	border-bottom:1px solid #A29330;
 	padding:5px 10px 8px 5px;
 	text-align:center;
-	z-index:1;
-	position:relative;
 	font:12px "Lucida Grande",Verdana,Arial;
 	color:#615503;
 	display:none;
@@ -12,7 +10,12 @@
 #wdn_annotate_notice img {
 	margin:0 10px -5px 0;
 }
-.wdn_annotate {
-	min-height:20px;
-	border:1px solid black;
+.wdn_annotate .annotable {
+	background:url("images/note.png") no-repeat scroll 0 0 transparent;
+	float:right;
+	height:20px;
+	position:relative;
+	right:-3px;
+	width:28px;
+	cursor:pointer;
 }
\ No newline at end of file

www/scripts/annotate_functions.js

@@ -7,15 +7,58 @@ var annotate = function() {
 		},
 
 		setupUserNotice : function() { //indicate to user areas are annotatable
-			$('#wdn_wrapper').before('<div id="wdn_annotate_notice"><img src="'+annotate.path+'css/images/note.png" />This page has areas in which you can save personal annotations specific to particular content. <a href="#">Show these areas</a></div>');
+			$('#wdn_wrapper').before('<div id="wdn_annotate_notice"><img src="'+annotate.path+'css/images/note.png" />This page has areas in which you can save personal annotations specific to particular content. <a href="#" onclick="annotate.showAnnotableRegions();">Show these areas</a></div>');
 			$('#wdn_annotate_notice').slideDown('slow');
 		},
 		
 		showAnnotableRegions : function() { //add markup/icon to areas which can be annotatable
+			$('.wdn_annotate').each(function(){
+				$(this).append('<a href="#" class="annotable"></a>');
+			});
+		},
 		
+		buildAnnotables : function(element) { //when a user clicks on one of the icons, bring up a qTip with the textarea/contenteditable for the note
+			try {
+		    	$(element).qtip({
+		    		content:{
+		    			text: 'blah blah'
+		    		},
+		            position : {
+		            	corner : {
+		            		target : 'topMiddle',
+		            		tooltip : 'bottomMiddle'
+		            	},
+		            	container: $('body'),
+		            	adjust : {
+		            		screen : true,
+		            		y : 3,
+		            		x : 5
+		            	}
+		            },
+		            show: {
+		            	delay : 150
+		            },
+		            hide: {
+		            	fixed : true,
+		            	delay : 150
+		            },
+		            style: { 
+		            	tip: { 
+		            		corner: 'bottomMiddle' ,
+		            		size: { x: 25, y: 15 },
+		            		color: '#c8c8c8'
+		            	},
+		            	"padding" : "9px",
+		            	"width":"98px",
+		            	classes : {
+		            		tooltip : 'courseInfo'
+		            	}
+		            }
+		    	});
+	    	} catch(e) {}
 		},
 		
-		buildAnnotables : function() { //when a user clicks on one of the icons, bring up a qTip with the textarea/contenteditable for the note
+		createNote : function() { //either get the note from DB or just setup a new one
 			
 		}
 	};