Index: /main/trunk/model-sites-dev/von-sparql/transform/layouts/header.xsl
===================================================================
--- /main/trunk/model-sites-dev/von-sparql/transform/layouts/header.xsl	(revision 28914)
+++ /main/trunk/model-sites-dev/von-sparql/transform/layouts/header.xsl	(revision 28915)
@@ -27,4 +27,23 @@
 	</xsl:template>
 
+	<xsl:template name="goto-comparison-button">
+
+			<!-- comparison -->
+			<li>
+				<a href="{$library_name}/page/compare">
+					<xsl:attribute name="title">Collection Comparison page</xsl:attribute>
+					<span id="comparisonButton">Compare</span>
+					<script type="text/javascript">
+						<xsl:text disable-output-escaping="yes">
+							$("#comparisonButton").button();
+							$("#comparisonButton .ui-button-text").css({"padding-top":"0px", "padding-bottom":"3px"});
+						</xsl:text>
+					</script>
+				</a>
+			</li>
+
+	</xsl:template>
+
+
 	<!-- ***** HOME HELP PREFERENCES LOGIN ***** -->
 	<xsl:template name="home-help-preferences">
@@ -67,4 +86,5 @@
 			
 			<xsl:call-template name="goto-sparql-button"/>
+			<xsl:call-template name="goto-comparison-button"/>
 
 
Index: /main/trunk/model-sites-dev/von-sparql/transform/pages/about.xsl
===================================================================
--- /main/trunk/model-sites-dev/von-sparql/transform/pages/about.xsl	(revision 28915)
+++ /main/trunk/model-sites-dev/von-sparql/transform/pages/about.xsl	(revision 28915)
@@ -0,0 +1,176 @@
+<?xml version="1.0" encoding="ISO-8859-1"?>
+<xsl:stylesheet version="1.0"
+	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+	xmlns:java="http://xml.apache.org/xslt/java"
+	xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
+	xmlns:gslib="http://www.greenstone.org/skinning"
+	extension-element-prefixes="java util"
+	exclude-result-prefixes="java util">
+
+	<!-- use the 'main' layout -->
+	<!--<xsl:include href="layouts/main.xsl"/>-->
+
+	<!-- set page title -->
+	<!--<xsl:template name="pageTitle"><gslib:collectionName/></xsl:template>-->
+
+	<!-- set page breadcrumbs -->
+	<!--<xsl:template name="breadcrumbs"><gslib:siteLink/><gslib:rightArrow/></xsl:template>-->
+
+	<xsl:variable name="coll_name"><gslib:collectionName/></xsl:variable>
+	<xsl:variable name="coll_name_short"><gslib:collectionNameShort/></xsl:variable>
+	<xsl:template name="overview">
+
+		<link rel="stylesheet" type="text/css" href="sites/von-sparql/transform/pages/style.css"/>
+		<link rel="stylesheet" type="text/css" href="sites/{$site_name}/js/jquery-ui-extra/turnstyle-block.css"/>
+
+		<script type="text/javascript" src="https://www.google.com/jsapi"><xsl:text> </xsl:text></script>
+		<script type="text/javascript" src="http://beta.data2000.no/sgvizler/release/0.6/sgvizler.js"><xsl:text> </xsl:text></script>
+		<script type="text/javascript" src="sites/{$site_name}/js/von-sparql-script.js"><xsl:text> </xsl:text></script>
+		<script type="text/javascript" src="sites/{$site_name}/js/von-sparql-setup.js"><xsl:text> </xsl:text></script>
+		<script type="text/javascript" src="sites/{$site_name}/js/combobox.js"><xsl:text> </xsl:text></script>
+		<script type="text/javascript" src="sites/{$site_name}/js/jquery-ui-extra/turnstyle-block.js"><xsl:text> </xsl:text></script>
+
+		<xsl:variable name="protocol" select="substring-before(/page/pageRequest/@baseURL,':')"/>
+		<xsl:variable name="baseURL" select="substring-after(/page/pageRequest/@baseURL,':')"/>
+		<xsl:variable name="domain" select="substring-before($baseURL,':')"/>
+		<xsl:variable name="endpointPath" select="concat($protocol,':',$domain,':3030/greenstone/query')"/>
+
+		<div id="div_PredicateOverview" >
+			<div id="sgvzl_PredicateOverview"
+				  data-sgvizler-endpoint="{$endpointPath}"
+				  data-sgvizler-chart="google.visualization.Table"
+				  data-sgvizler-loglevel="2"
+				  data-sgvizler-chart-options="title=Predicate Overview|width=300"
+				  >
+			  <xsl:attribute name="data-sgvizler-query">
+
+			  SELECT (?p as ?Predicate) (COUNT (?s) as ?Total)WHERE
+			  {
+					 ?s &lt;http://purl.org/dc/elements/1.1/Relation.isPartOf&gt; &lt;http://localhost:8989/greenstone3/library/collection/<xsl:value-of select="$coll_name_short"/>&gt;;
+						  ?p ?o
+			  }
+			  GROUP BY ?p
+			  ORDER BY DESC(?Total)
+			  </xsl:attribute>
+			  <xsl:comment>Filler</xsl:comment>
+			</div>
+		</div>
+
+		<div id="searchContainer">
+			<div id="div_Selects">
+				<label for="sel_Predicate">Select Predicate:</label>
+				<select id="sel_Predicate">
+					<option value="None"></option>
+				</select>
+				<br/>
+					<input type="checkbox" id="cb_RefineSearch"/> <label for="cb_RefineSearch">Refine search to:</label>
+					<br/>
+				<div id="refineControls">
+					<table class="refineControls" id="table_refineControls">
+						<tr>
+						<td><label for="sel_RefineObject">Value:</label></td>
+						<td><select id="sel_RefineObject" enabled='false'>
+							<option value="None">Select predicate above</option>
+						</select>
+						</td>
+						</tr>
+						<tr>
+						<td>
+						<label for="sel_RefinePredicate">Visualize Predicate:</label>
+						</td>
+						<td>
+						<select id="sel_RefinePredicate" enabled='false'>
+						</select>
+						</td>
+						</tr>
+					</table>
+				</div>
+			</div>
+			<div id="searchControls">
+				<select id="sel_Limit">
+					<option value="None">No Limit</option>
+					<option value="10">10</option>
+					<option value="25">25</option>
+					<option value="50">50</option>
+					<option value="75">75</option>
+					<option value="100">100</option>
+				</select>
+				<select id="sel_ChartType">
+					<option value="google.visualization.Table">Table</option>
+					<option value="google.visualization.PieChart">Pie Chart</option>
+					<option value="google.visualization.BarChart">Bar Chart</option>
+					<option value="google.visualization.ImageSparkLine">Sparkline</option>
+					<option value="google.visualization.LineChart">Line Chart</option>
+				</select>
+				<button type="button" id="btn_ShowChart">Execute Query</button>
+			</div>
+<!--
+			<div id="#div_autocomplete" style="width:300px;">
+				<input id="autocomplete" type="text"/>
+			</div> -->
+		</div>	
+
+			<div id="sparqlQuery-turnstyle">
+				<div>
+					Show Sparql query
+				</div>
+				<div id="queryContainer" class="documenttext" style="display:none;">
+					<span id="span_sparqlQuery"><xsl:comment>filler</xsl:comment></span>
+				</div>
+			</div>
+
+			<div id="sgvzl_container" style="width:675px; height:400px; margin-top:10px; ">
+			</div>
+		<script type="text/javascript">
+			<xsl:text disable-output-escaping="yes">
+				<![CDATA[
+					var overviewSparqlQuery;
+
+					function createOverviewQuery(){
+						overviewSparqlQuery = $('#sgvzl_PredicateOverview').attr("data-sgvizler-query");
+					}
+
+					transformToTurnstyleBlock("sparqlQuery");
+
+					function sgvizGo(){
+						sgvizler
+							.defaultEndpointOutputFormat('jsonp')
+							// Add prefixes used in examples:
+							.prefix('dc',  "http://purl.org/dc/elements/1.1/")
+							.prefix('xsd',  "http://www.w3.org/2001/XMLSchema#")
+
+							// Draw all sgvizler containers on page:
+							.containerDrawAll();
+
+							createOverviewQuery();
+
+						 //Load possible predicate values into selector
+						 updatePredicateSelector();
+
+						 //Ensure search refinement elements are greyed
+						 toggle_RefineSearch(0);
+						 $('#cb_RefineSearch').prop('checked',false);
+					}
+
+					google.load('visualization','1', {packages: ['corechart']});
+					google.setOnLoadCallback(sgvizGo);
+					window.onload=setupPage;
+				]]>
+			  </xsl:text>
+		</script>
+
+	</xsl:template>
+	<!-- the page content -->
+	<xsl:template match="/page">
+  
+		<!--Display the description text of the current collection,
+		and if some services are available then create a list
+		of links for each service within a <ul id="servicelist"> element.-->
+		<gslib:collectionDescriptionTextAndServicesLinks/>
+		
+		<xsl:call-template name="overview"/>
+		
+	</xsl:template>
+
+</xsl:stylesheet>  
+
Index: /main/trunk/model-sites-dev/von-sparql/transform/pages/home.xsl
===================================================================
--- /main/trunk/model-sites-dev/von-sparql/transform/pages/home.xsl	(revision 28914)
+++ /main/trunk/model-sites-dev/von-sparql/transform/pages/home.xsl	(revision 28915)
@@ -8,148 +8,6 @@
 	exclude-result-prefixes="java util">
 
-
-  <xsl:template name="von-sparql-canvas">
-    
-    <link rel="stylesheet" type="text/css" href="sites/von-sparql/transform/pages/style.css"/>
-  	<script type="text/javascript" src="https://www.google.com/jsapi"><xsl:text> </xsl:text></script>
-	<script> 
-		<xsl:text disable-output-escaping="yes">google.load('visualization','1', {'packages':['corechart']});</xsl:text>
-	</script>
-	<script type="text/javascript" src="http://beta.data2000.no/sgvizler/release/0.6/sgvizler.js"><xsl:text> </xsl:text></script>
-
-    <script type="text/javascript" src="ext/von-sparql/von-sparql-script.js"><xsl:text> </xsl:text></script>
-    <script type="text/javascript" src="ext/von-sparql/von-sparql-setup.js"><xsl:text> </xsl:text></script>
-    <script type="text/javascript" src="ext/von-sparql/combobox.js"><xsl:text> </xsl:text></script>
-
-    <xsl:variable name="protocol" select="substring-before(/page/pageRequest/@baseURL,':')"/>
-    <xsl:variable name="baseURL" select="substring-after(/page/pageRequest/@baseURL,':')"/>
-    <xsl:variable name="domain" select="substring-before($baseURL,':')"/>
-	<xsl:variable name="endpointPath" select="concat($protocol,':',$domain,':3030/greenstone/query')"/>    
-
-
-	<div id="div_PredicateOverview" style="height:270px" width="auto">
-		<div id="sgvzl_PredicateOverview"
-			  data-sgvizler-endpoint="{$endpointPath}"
-			  data-sgvizler-chart="google.visualization.Table"
-			  data-sgvizler-loglevel="2"
-			  data-sgvizler-chart-options="title=Predicate Overview"
-			  style="width:550px;"
-			  >
-		  <xsl:attribute name="data-sgvizler-query">
-
-			  SELECT (?p as ?Predicate)(COUNT (?hts) as ?Hathi) (COUNT (?nzs) as ?NZ)((?NZ + ?Hathi) as ?Total)WHERE
-			  {
-				  {
-					?hts &lt;http://purl.org/dc/elements/1.1/Relation.isPartOf&gt; &lt;http://localhost:8989/greenstone3/library/collection/hathitrust-tab&gt;;
-						 ?p ?o
-				  }
-				  UNION
-				  {
-					 ?nzs &lt;http://purl.org/dc/elements/1.1/Relation.isPartOf&gt; &lt;http://localhost:8989/greenstone3/library/collection/nz-natlib-cat&gt;;
-						  ?p ?o
-				  }
-			  }
-			  GROUP BY ?p
-			  ORDER BY DESC(?Predicate)
-
-		  </xsl:attribute>
-		  <xsl:comment>Filler</xsl:comment>
-		</div>
-		<div id="queryContainer">
-			 <span>SPARQL Query:</span>
-			 <br/>
-			 <span id="span_sparqlQuery"
-				   style="font-size:10pt;">
-			 <xsl:comment>Filler</xsl:comment>
-			 </span>
-		</div>
-	</div>
-	<div id="searchContainer">
-		<div id="searchControls">
-			<label for="sel_Predicate">View Predicate:</label>
-			<select id="sel_Predicate">
-				<option value="None"></option>
-			</select> 
-			<br/>
-				<input type="checkbox" id="cb_RefineSearch"/> <label for="cb_RefineSearch">Refine search to:</label>
-				<br/>
-			<div id="refineControls">
-				<label for="sel_RefineObject">?o</label>
-				<select id="sel_RefineObject" enabled='false'>
-					<option value="None">Select predicate above</option>
-				</select>
-				<br/>
-				<label for="sel_RefinePredicate">?p</label>
-				<select id="sel_RefinePredicate" enabled='false'>
-					<option value="None">Select ?o above</option>
-				</select>
-			</div>
-
-			<select id="sel_Limit">
-				<option value="None">No Limit</option> 
-				<option value="10">10</option> 
-				<option value="25">25</option> 
-				<option value="50">50</option> 
-				<option value="75">75</option> 
-				<option value="100">100</option> 
-			</select>
-			<select id="sel_ChartType">
-				<option value="google.visualization.Table">Table</option> 
-				<option value="google.visualization.PieChart">Pie Chart</option> 
-				<option value="google.visualization.BarChart">Bar Chart</option> 
-				<option value="google.visualization.ImageSparkLine">Sparkline</option> 
-			</select>
-			<button type="button" id="btn_ShowChart">Execute Query</button>
-			<button type="button" id="btn_ShowQuery">Show SPARQL Query</button>
-		</div>
-		<div id="selectDataset">
-		<span>Search Datasets:</span>
-		<br/>
-		<input type="radio" name="radio_Dataset" value="all"/>All<br/>
-		<input type="radio" name="radio_Dataset" value="nz_natlib_cat"/>NZ National Library Catalogue<br/>
-		<input type="radio" name="radio_Dataset" value="hathitrust_tab"/>Hathi Trust<br/>
-		</div>
-	</div>
-	<script type="text/javascript">
-		<xsl:text disable-output-escaping="yes">
-			var overviewSparqlQuery;
-			function createOverviewQuery()
-			{
-				overviewSparqlQuery = $('#sgvzl_PredicateOverview').attr("data-sgvizler-query");
-			}
-			
-			google.load('visualization','1', {packages: ['imagechart']});		
-
-			$(document).ready(
-				function (){
-					sgvizler
-						.defaultEndpointOutputFormat('jsonp')
-						// Add prefixes used in examples:
-						.prefix('dc',  "http://purl.org/dc/elements/1.1/")
-						.prefix('xsd',  "http://www.w3.org/2001/XMLSchema#")
-
-						// Draw all sgvizler containers on page:
-						.containerDrawAll();
-
-						createOverviewQuery();
-
-					 //Load possible predicate values into selector
-					 updatePredicateSelector();
-
-					 //Ensure search refinement elements are greyed
-					 toggle_RefineSearch(0);   
-					 $('#cb_RefineSearch').prop('checked',false);
-				}
-			);
-
-			window.onload=setupPage;
-		  </xsl:text>
-	</script>
-
-	<div id="sgvzl_container"
-		 style="width:auto; height:400px; margin-top:10px; ">
-	</div>
-	</xsl:template>
-
+	<xsl:variable name="coll_name"><gslib:collectionName/></xsl:variable>
+	<xsl:variable name="coll_name_short"><gslib:collectionNameShort/></xsl:variable>
 
 	<!-- the page content -->
@@ -173,6 +31,4 @@
 		</div>
 
-		<xsl:call-template name="von-sparql-canvas"/>
-
 		<gslib:serviceClusterList/>
 
Index: /main/trunk/model-sites-dev/von-sparql/transform/pages/style.css
===================================================================
--- /main/trunk/model-sites-dev/von-sparql/transform/pages/style.css	(revision 28914)
+++ /main/trunk/model-sites-dev/von-sparql/transform/pages/style.css	(revision 28915)
@@ -1,34 +1,121 @@
+/************************/
+/**** comparison.xsl ****/
+/************************/
+
+#div_queryWrapper{
+	width: 100%;	
+	height: auto;
+	border: 1px solid black;
+	display:table;
+	table-layout:fixed;
+	margin-bottom: 2px;
+}
+
+#div_queryWrapper > div{
+	height:100%;
+	width:50%;
+	padding: 5px;
+	display:table-cell;
+}
+
+#div_queryWrapper select{
+	max-width: 300px;
+}
+
+#div_leftQuery{
+	border-right:1px solid black;
+}
+
+#div_comparisonWrapper{
+	width: 100%;
+	max-height: 300px;
+	border: 1px solid black;
+	display: table;
+	table-layout: fixed;
+}
+#div_comparisonWrapper > div{
+	padding:5px;
+	display: table-cell;
+	height: 300px;
+}
+
+#div_combinedQuery{
+	width:70%;
+}
+
+#div_combinedResults{
+	width: auto;
+	max-height:350px;
+}
+
+#div_resultPredicates{
+	margin-left:10px;
+}
+
+#div_venn{
+	width: 35%;
+	height: auto;
+	border-right: 1px solid black;
+	margin-bottom: 3px;
+}
+#venn{
+	width:100%;
+	height: 170px;
+    border:1px solid #DFD9C3;
+}
+
+.searchControls{
+    margin-left:5px;
+	margin-bottom:5px;
+}
+
+.filteredDatasetTable{
+	height:200px;
+}
+
+.colorIndicator{
+	height:10px;
+	width:10px;
+	display:inline-block;
+	border:1px solid #DFD9C3;
+	margin-top:4px;
+	padding:1px;
+	border-radius:10px;
+	opacity:0.75;
+}
+/************************/
+/**** about.xsl *********/
+/************************/
+#div_PredicateOverview{
+	height:260px;
+	width:100%;
+}
 #sgvzl_PredicateOverview{
-    width:550px;
+	/*left:20%;*/
+	width:60%;
     height:250px;
     display:inline-block;
-    float:left;
 }
 
-#queryContainer{
+#sparqlQuery-area{
     border:1px solid #DFD9C3;
-    width:350px;height:230px;
-    float:right;
-    margin-left:15px;
+    width:655px;
+	height:auto;
     padding:10px;
-    overflow-y:scroll;
 }
 
 #searchContainer{
-    margin-bottom:10px;
     width:100%;
     height:auto;
-	min-height:110px;
 	overflow:auto;
 }
 
 #searchControls{
-    width:65%;
-    float:left;
+	margin-top:10px;
+	margin-bottom:5px;
 }
 
 #refineControls{
     margin-left:20px;
-    margin-bottom:20px;
     margin-top:5px
 }
@@ -41,5 +128,15 @@
 }
 
+#span_sparqlQuery{
+	font-size: 10pt;
+	display:block;
+}
+
+/************************/
+/******* global *********/
+/************************/
+
 .ui-autocomplete{
+	position: absolute;
 	max-height: 300px;
 	overflow-y: auto;
@@ -47,2 +144,32 @@
 	z-index: 1000 !important;
 }
+
+.basicControls{
+	margin-top:5px;
+	border-top:1px inset #dfd9c3;
+}
+.refineControls{
+	margin-top:5px;
+	border-top:1px inset #dfd9c3;
+	border-bottom:1px inset #dfd9c3;
+}
+.alignRight{
+	text-align:right;
+}
+
+.autocomplete-custom{
+	padding-left:5px;
+	padding-bottom:3px;
+	font-size:1em;
+}
+
+ul.ui-autocomplete.ui-menu{
+	font-size:0.8em;	
+}
+.ui-autocomplete-loading{
+	background: white url('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif') right center no-repeat;
+}
+
+.bold{
+	font-weight: bold;
+}
