accurator/commit

Item page is generated at backend, solves #190.

diff --git a/api/accurator.pl b/api/accurator.pl
index c84e39e..86d537b 100644
--- a/api/accurator.pl
+++ b/api/accurator.pl
@@ -44,6 +44,7 @@ user:file_search_path(fonts, web(fonts)).
 :- http_handler(img('.'), serve_files_in_directory(img), [prefix]).
 :- http_handler(fonts('.'), serve_files_in_directory(fonts), [prefix]).
 % :- http_handler(cliopatria('annotate_image.html'), http_image_annotation, []).
+:- http_handler(cliopatria('item.html'), page_item, []).
 :- http_handler(cliopatria(ui_elements), ui_elements_api, []).
 :- http_handler(cliopatria(domains), domains_api, []).
 :- http_handler(cliopatria(metadata), metadata_api, []).
@@ -323,3 +324,160 @@ reply_expertise_results(cluster, Clusters) :-
 
 reply_expertise_results(list, List) :-
 	reply_json_dict(List).
+
+%%	page_item(+Request)
+%
+%	Replies html page
+page_item(Request) :-
+    get_parameters_page(Request, Options),
+	option(uri(Uri), Options),
+	reply_html_page(\head, \content(Uri)).
+
+%%	get_parameters_elements(+Request, -Options)
+%
+%	Retrieves an option list of parameters from the url.
+get_parameters_page(Request, Options) :-
+    http_parameters(Request,
+        [uri(Uri,
+		    [description('Uri of the item'),
+			 optional(false)])
+		]),
+    Options = [uri(Uri)].
+
+head -->
+html({|html||
+<title>Item</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="shortcut icon" href="img/favicon.ico">
+<link type="text/css" rel="stylesheet" media="screen" href="css/accurator.bootstrap.min.css" />
+<link type="text/css" rel="stylesheet" href="css/annotorious.css" />
+<link type="text/css" rel="stylesheet" media="screen" href="css/accurator.css" />
+|}).
+
+content(Uri) -->
+	{image_url(Uri, ImageUrl)},
+html({|html(ImageUrl)||
+<!-- Navbar -->
+<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+     <div class="container-fluid">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarDivMenu">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="intro.html">
+                <img id="navbarImgLogo" src="img/accurator.png" alt="Accurator">
+            </a>
+        </div>
+        <div class="collapse navbar-collapse" id="navbarDivMenu">
+            <ul class="nav navbar-nav navbar-right navbarLstFlag">
+            </ul>
+            <ul class="nav navbar-nav navbar-right navbarLstUser">
+            </ul>
+            <div class="navbar-form navbar-nav" id="navbarFrmSearch">
+                <div class="form-group">
+                    <input type="text" class="form-control" id="navbarInpSearch">
+                </div>
+                <button id="navbarBtnSearch" class="btn btn-default">
+                </button>
+            </div>
+            <button class="btn navbar-btn navbar-right btn-primary" id="navbarBtnRecommend">
+            </button>
+        </div>
+    </div>
+</nav>
+
+<!-- Events -->
+<div class="container" id="eventsDiv">
+</div>
+
+<div class="container">
+	<!-- Navigation -->
+	<div class="row" id="itemDivClusterNavigation">
+		<div class="itemDivNavigationButton col-md-2 col-xs-6">
+			<button class="btn btn-default itemBtnNavigation" id="itemBtnPrevious">
+				<span class="glyphicon glyphicon-chevron-left"></span>
+			</button>
+		</div>
+		<div class="itemDivNavigationButton col-md-2 col-xs-6 col-md-push-8" id="itemDivAlignButton">
+			<button class="btn btn-default itemBtnNavigation" id="itemBtnNext">
+				<span class="glyphicon glyphicon-chevron-right"></span>
+			</button>
+		</div>
+		<div class="col-md-8 col-md-pull-2" id="itemDivPath">
+		</div>
+	</div>
+
+	<!-- Image -->
+	<div class="row" id="itemDivImage">
+		<img class="itemImg annotatable" src="ImageUrl" alt="" />
+	</div>
+
+	<!-- Annotation field(s) -->
+	<div class="row" id="itemDivAnnotationFields">
+		<div class="col-md-6">
+			<form class="form-inline" id="itemFrmAnnotationFields">
+			</form>
+		</div>
+		<div class="col-md-6" id="itemDivAnnotations">
+		</div>
+	</div>
+
+	<!-- Metadata -->
+	<div id="itemDivMetadata"></div>
+</div>
+
+<!-- Login modal -->
+<div class="modal fade" id="loginDivLogin">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" id="loginBtnClose">&times;</button>
+				<h4 id="loginHdrTitle">
+				</h4>
+			</div>
+			<div class="modal-body">
+				<form role="form">
+					<div class="form-group">
+						<label id="loginLblUsername" for="loginInpUsername">
+						</label>
+						<input type="text" class="form-control" id="loginInpUsername">
+					</div>
+					<div class="form-group">
+						<label id="loginLblPassword" for="password">
+						</label>
+						<input type="password" class="form-control" id="loginInpPassword">
+					</div>
+					<p class="text-warning" id="loginTxtWarning">
+					</p>
+				</form>
+			</div>
+			<div class="modal-footer">
+				<button class="btn btn-primary" id="loginBtnLogin">
+				</button>
+				<button class="btn btn-link" id="mdlBtnIntro">
+				</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- Annotorious Annotation field(s) -->
+<div class="itemDivHidden">
+	<div id="itemDivAnnotoriousFields"></div>
+</div>
+
+<!-- Added Script -->
+<script type="text/javascript" src="js/accurator.jquery.min.js"></script>
+<script type="text/javascript" src="js/accurator.bootstrap.min.js"></script>
+<script type="text/javascript" src="js/accurator.laconic.js"></script>
+<script type="text/javascript" src="js/bloodhound.js"></script>
+<script type="text/javascript" src="js/typeahead.js"></script>
+<script type="text/javascript" src="js/annotorious.min.js"></script>
+<script type="text/javascript" src="js/deniche-plugin.js"></script>
+<script type="text/javascript" src="js/search.js"></script>
+<script type="text/javascript" src="js/accurator_utilities.js"></script>
+<script type="text/javascript" src="js/field.js"></script>
+<script type="text/javascript" src="js/accurator_item.js"></script>
+<script>itemInit()</script>
+|}).
diff --git a/lib/accurator/ui_elements.pl b/lib/accurator/ui_elements.pl
index e55fc8d..403a9d3 100644
--- a/lib/accurator/ui_elements.pl
+++ b/lib/accurator/ui_elements.pl
@@ -2,7 +2,9 @@
 			  get_title/2,
 			  uri_label/2,
 			  get_elements/3,
-			  metadata/3
+			  metadata/3,
+			  image_url/2,
+			  thumbnail_url/2
 		  ]).
 
 /** <module> Accurator UI elements
diff --git a/web/html/item.html b/web/html/item.html
deleted file mode 100644
index 0756c21..0000000
--- a/web/html/item.html
+++ /dev/null
@@ -1,137 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<title>Item</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<link rel="shortcut icon" href="img/favicon.ico">
-	<link type="text/css" rel="stylesheet" media="screen" href="css/accurator.bootstrap.min.css" />
-	<link type="text/css" rel="stylesheet" href="css/annotorious.css" />
-	<link type="text/css" rel="stylesheet" media="screen" href="css/accurator.css" />
-</head>
-
-<body class="item">
-    <!-- Navbar -->
-    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
-         <div class="container-fluid">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarDivMenu">
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="intro.html">
-                    <img id="navbarImgLogo" src="img/accurator.png" alt="Accurator">
-                </a>
-            </div>
-            <div class="collapse navbar-collapse" id="navbarDivMenu">
-                <ul class="nav navbar-nav navbar-right navbarLstFlag">
-                </ul>
-                <ul class="nav navbar-nav navbar-right navbarLstUser">
-                </ul>
-                <div class="navbar-form navbar-nav" id="navbarFrmSearch">
-                    <div class="form-group">
-                        <input type="text" class="form-control" id="navbarInpSearch">
-                    </div>
-                    <button id="navbarBtnSearch" class="btn btn-default">
-                    </button>
-                </div>
-                <button class="btn navbar-btn navbar-right btn-primary" id="navbarBtnRecommend">
-                </button>
-            </div>
-        </div>
-    </nav>
-
-	<!-- Events -->
-	<div class="container" id="eventsDiv">
-	</div>
-
-    <div class="container">
-		<!-- Navigation -->
-		<div class="row" id="itemDivClusterNavigation">
-			<div class="itemDivNavigationButton col-md-2 col-xs-6">
-				<button class="btn btn-default itemBtnNavigation" id="itemBtnPrevious">
-					<span class="glyphicon glyphicon-chevron-left"></span>
-				</button>
-			</div>
-			<div class="itemDivNavigationButton col-md-2 col-xs-6 col-md-push-8" id="itemDivAlignButton">
-				<button class="btn btn-default itemBtnNavigation" id="itemBtnNext">
-					<span class="glyphicon glyphicon-chevron-right"></span>
-				</button>
-			</div>
-			<div class="col-md-8 col-md-pull-2" id="itemDivPath">
-			</div>
-		</div>
-
-		<!-- Image -->
-		<div class="row" id="itemDivImage">
-			<img class="itemImg" fields="itemDivAnnotoriousFields" alt="" />
-		</div>
-
-		<!-- Annotation field(s) -->
-		<div class="row" id="itemDivAnnotationFields">
-			<div class="col-md-6">
-				<form class="form-inline" id="itemFrmAnnotationFields">
-				</form>
-			</div>
-			<div class="col-md-6" id="itemDivAnnotations">
-			</div>
-		</div>
-
-		<!-- Metadata -->
-    	<div id="itemDivMetadata"></div>
-    </div>
-
-	<!-- Login modal -->
-	<div class="modal fade" id="loginDivLogin">
-		<div class="modal-dialog">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" id="loginBtnClose">&times;</button>
-					<h4 id="loginHdrTitle">
-					</h4>
-				</div>
-				<div class="modal-body">
-					<form role="form">
-						<div class="form-group">
-							<label id="loginLblUsername" for="loginInpUsername">
-							</label>
-							<input type="text" class="form-control" id="loginInpUsername">
-						</div>
-						<div class="form-group">
-							<label id="loginLblPassword" for="password">
-							</label>
-							<input type="password" class="form-control" id="loginInpPassword">
-						</div>
-						<p class="text-warning" id="loginTxtWarning">
-						</p>
-					</form>
-				</div>
-				<div class="modal-footer">
-					<button class="btn btn-primary" id="loginBtnLogin">
-					</button>
-					<button class="btn btn-link" id="mdlBtnIntro">
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<!-- Annotorious Annotation field(s) -->
-	<div class="itemDivHidden">
-		<div id="itemDivAnnotoriousFields"></div>
-	</div>
-
-    <!-- Added Script -->
-	<script type="text/javascript" src="js/accurator.jquery.min.js"></script>
-	<script type="text/javascript" src="js/accurator.bootstrap.min.js"></script>
-	<script type="text/javascript" src="js/accurator.laconic.js"></script>
-	<script type="text/javascript" src="js/bloodhound.js"></script>
-	<script type="text/javascript" src="js/typeahead.js"></script>
-	<script type="text/javascript" src="js/search.js"></script>
-	<script type="text/javascript" src="js/accurator_utilities.js"></script>
-	<script type="text/javascript" src="js/field.js"></script>
-	<script type="text/javascript" src="js/accurator_item.js"></script>
-	<script>itemInit()</script>
-	<script type="text/javascript" src="js/annotorious.min.js"></script>
-	<script type="text/javascript" src="js/deniche-plugin.js"></script>
-</body>
-</html>
diff --git a/web/js/accurator_item.js b/web/js/accurator_item.js
index cb1197b..0796b2d 100644
--- a/web/js/accurator_item.js
+++ b/web/js/accurator_item.js
@@ -53,6 +53,7 @@ function imagePromise() {
 		$(".itemImg").attr("id", id);
 		// Set location image
 		$(".itemImg").attr("src", metadata.image);
+
 		// Return info for anotorious
 		return metadata;
 	});
@@ -172,12 +173,10 @@ function addAnotorious(metadata) {
 			);
 			$("#itemDivAnnotoriousFields").append(field.node);
 		}
-
+		// Set fields attribute for annotorious deniche
+		$(".itemImg").attr("fields", "itemDivAnnotoriousFields");
 		// annotorious fields are added in deniche init
 		anno.addPlugin("DenichePlugin", {});
-		// Make the image annotateable
-		console.log("Image:", document.getElementById(imageId));
-		anno.makeAnnotatable(document.getElementById(imageId));
 	});
 }