image_annotation/commit

use Y.Overlay for additional info

diff --git a/applications/annotation.pl b/applications/annotation.pl
index c7b1891..f84096d 100644
--- a/applications/annotation.pl
+++ b/applications/annotation.pl
@@ -185,6 +185,7 @@ js_module('annotation', json([fullpath(Path),
 				    requires(['recordset-base',
 					      autocomplete,
 					      'autocomplete-highlighters',
+					      overlay,
 					      'io','json-parse',
 					      'querystring-stringify-simple'
 				  ])
diff --git a/config-available/image_annotation.pl b/config-available/image_annotation.pl
index 67b83d4..cb64607 100644
--- a/config-available/image_annotation.pl
+++ b/config-available/image_annotation.pl
@@ -5,13 +5,11 @@
 
 :- use_module(library('semweb/rdf_db')).
 
-% @TBD
-% requires Dublin Core and SKOS
-
 % hack namespace
 :- rdf_register_ns(oac, 'http://www.openannotation.org/ns/').
 :- rdf_register_ns(an, 'http://semanticweb.cs.vu.nl/annotate/').
 :- rdf_register_ns(gv, 'http://semanticweb.cs.vu.nl/graph/version/').
 :- rdf_register_ns(prov, 'http://www.w3.org/ns/prov-o/').
 
+:- use_module(library(skos_schema)).
 :- use_module(applications(annotation)).
diff --git a/web/css/annotation.css b/web/css/annotation.css
index 465cfd7..8601f52 100644
--- a/web/css/annotation.css
+++ b/web/css/annotation.css
@@ -67,10 +67,11 @@ body {
 	margin: 0 0 6px;
 }
 
-div.aclist_extra {
-	padding: .5em;
+.yui3-overlay {
+	padding: 10px;
 	background-color: white;
 	border: solid grey 1pt;
 	position: absolute;
 	width: 200px;
-}
+	z-index: 1;
+}
\ No newline at end of file
diff --git a/web/js/annotation.js b/web/js/annotation.js
index 12ad6fc..f2a46d4 100644
--- a/web/js/annotation.js
+++ b/web/js/annotation.js
@@ -30,7 +30,11 @@ YUI.add('annotation', function(Y) {
 		initializer: function(args) {
 			var parentNode = this.DEF_PARENT_NODE,
 				tags = new Y.Recordset({records:this.get("tags")});
+				
 			this.tagList = parentNode.appendChild(Node.create(Annotation.LIST_TEMPLATE));
+			this.infoNode = new Y.Overlay({
+			}).render(parentNode);
+			
 			this._renderTags(tags._items, 0); // how to get the items nicely?
 			tags.on("add", this._addTags, this);
 			tags.on("remove", this._removeTags, this);
@@ -82,19 +86,22 @@ YUI.add('annotation', function(Y) {
 			});
 		},
 		_onHover : function(e) {
-			if (!e.newVal) return;
-			var scope = e.newVal.getData().result.raw.info.scopeNotes[0];
-			var defin = e.newVal.getData().result.raw.info.definitions[0];
-			if (scope || defin) {
-				Y.all('.aclist_extra').remove(true);
-				var node = Y.Node.create("<div class='aclist_extra'></div>");
-				if (scope) node.append("<div class='aclist_extra_scope'>"+scope+"</div>");
-				if (defin) node.append("<div class='aclist_extra_defin'>"+defin+"</div>");
-				var width = parseInt(e.newVal.get('parentNode').getComputedStyle("width"));
-				var Xval = width + e.newVal.getX();
-				var Yval = e.newVal.getY();
-				e.newVal.append(node);
-				node.setXY([Xval,Yval]);
+			var infoNode = this.infoNode,
+				active = e.newVal,
+				body = '';
+			if(active) {	
+				var scope = active.getData().result.raw.info.scopeNotes[0],
+					defin = active.getData().result.raw.info.definitions[0];
+				if (scope) { body += "<div class='scope'>"+scope+"</div>"; } 
+				if (defin) { body += "<div class='defin'>"+defin+"</div>"; }
+			}
+			if(body) {
+				infoNode.set("bodyContent", body);
+				infoNode.set("align", {node:active, 
+				                      points:[Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.TR]});
+				infoNode.show();
+			} else {
+				infoNode.hide();
 			}
 		},
 		_onItemSelect : function(e) {
@@ -127,6 +134,6 @@ YUI.add('annotation', function(Y) {
 	Y.Plugin.Annotation = Annotation;
 
 }, '0.0.1', { requires: [
-	'node','event','autocomplete','recordset','io-base','querystring-stringify-simple'
+	'node','event','autocomplete','overlay','recordset','io-base','querystring-stringify-simple'
 	]
 });