Index: /main/trunk/model-sites-dev/von-sparql/transform/pages/home.xsl
===================================================================
--- /main/trunk/model-sites-dev/von-sparql/transform/pages/home.xsl	(revision 28736)
+++ /main/trunk/model-sites-dev/von-sparql/transform/pages/home.xsl	(revision 28737)
@@ -15,43 +15,128 @@
     <script type="text/javascript" src="ext/jena/sgvizler/jsapi"><xsl:text> </xsl:text></script>
     <script type="text/javascript" id="sgvzlr_script" src="ext/jena/sgvizler/sgvizler.js"><xsl:text> </xsl:text></script>
+    <script type="text/javascript" src="ext/von-sparql/von-sparql-script.js"><xsl:text> </xsl:text></script>
+<div>
+<div id="sgvzl_PredicateOverview"
+      data-sgvizler-endpoint="http://localhost:3030/greenstone/query"
+      data-sgvizler-chart="gTable"
+      data-sgvizler-loglevel="2"
+      data-sgvizler-chart-options="title=Items by Language"
+      width="100"
+      style="width:450px; height:250px;display:inline-block;float:left" >
+  <xsl:attribute name="data-sgvizler-query">
+      SELECT ?Predicate (COUNT (?Predicate) AS ?Count) (COUNT (DISTINCT ?o) AS ?Distinct_Values)
+      WHERE{
+        ?s ?Predicate ?o
+      }
+      GROUP BY ?Predicate
+      ORDER BY DESC (?Predicate)
+  </xsl:attribute>
+  <xsl:comment>Filler</xsl:comment>
+</div>
+<div id="queryContainer"
+     style="
+     border:1px solid #DFD9C3;
+     width:450px;height:250px;
+     float:left;
+     margin-left:15px;
+     padding:10px;
+     overflow-y:scroll;"
+     >
+     <span>SPARQL Query:</span>
+     <br/>
+     <span id="span_sparqlQuery"
+           style="font-size:10pt;">
+     <xsl:comment>Filler</xsl:comment>
+     </span>
+</div>
+</div>
+<br/>
+<div style="margin-top:20px;margin-bottom:10px;display:inline-block;">
+    <label for="sel_Predicate">View Predicate:</label>
+    <select id="sel_Predicate">
+        <option value="None"></option>
+    </select> 
+    <br/>
+    <div style="margin-left:20px;margin-bottom:20px;margin-top:5px">
+        <input type="checkbox" id="cb_RefineSearch"/> <label for="cb_RefineSearch">Refine search to:</label>
+        <br/>
+        <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="gTable">Table</option> 
+        <option value="gPieChart">Pie Chart</option> 
+        <option value="gBarChart">Bar Chart</option> 
+    </select>
+    <button type="button" id="btn_ShowChart">Execute Query</button>
+</div>
+<script type="text/javascript">
+      <xsl:text disable-output-escaping="yes">
+      var overviewSparqlQuery;
+      function sgvizlerGo (){
+         overviewSparqlQuery = $('#sgvzl_PredicateOverview').attr("data-sgvizler-query");
+         sgvizler.go();
 
-    <script type="text/javascript">
-      <xsl:text disable-output-escaping="yes">
-      sgvizler.option.namespace.mo ='http://purl.org/ontology/mo/';
-      sgvizler.option.namespace.salami = 'http://nema.lis.illinois.edu/salamiEndpoint/';
+         //Load possible predicate values into selector
+         updatePredicateSelector();
 
-      sgvizler.option.namespace.salami = 'http://nema.lis.illinois.edu/salamiEndpoint/';
-      
+         //Ensure search refinement elements are greyed
+         toggle_RefineSearch(0);   
+         $('#cb_RefineSearch').prop('checked',false);
+      }
       sgvizler.option.namespace.dc = 'http://purl.org/dc/elements/1.1/';
       sgvizler.option.namespace.gsembedded = 'http://greenstone.org/gsembedded#'
       sgvizler.option.namespace.greenstonedata = 'http://localhost:3030/greenstone/data/'
-      $(document).ready(sgvizler.go());
+      $(document).ready(sgvizlerGo());
+
+      $("#btn_ShowChart").click(function(){
+        newPredQuery("sgvzl_container", $('#sel_ChartType').val())
+      });
+      $("#cb_RefineSearch").click(function(){
+        if(document.getElementById("cb_RefineSearch").checked==false)
+            toggle_RefineSearch(0);
+        else
+            toggle_RefineSearch(1);
+
+        generateQuery();
+      });
+      $("#sel_Predicate").change(function(){
+        updateRefineObjectSelector($("#sel_Predicate").val());
+        generateQuery();
+      });
+      $("#sel_RefineObject").change(function(){
+        updateRefinePredicateSelector($("#sel_RefineObject").val());
+        generateQuery();
+      });
+      $("#sel_RefinePredicate").change(function(){
+        generateQuery();
+      });
+      $("#sel_Limit").change(function(){
+        generateQuery();
+      });
       </xsl:text>
-    </script>
+</script>
 
+<div id="sgvzl_container"
+     style="width:auto; height:400px; margin-top:10px; ">
+</div>
+</xsl:template>
 
-<div id="sgvzl_example1"
-      data-sgvizler-endpoint="http://localhost:3030/greenstone/query"
-
-      data-sgvizler-chart="gPieChart"
-      data-sgvizler-loglevel="2"
-      data-sgvizler-chart-options="title=Items by Language"
-      style="width:900px; height:400px; margin-left: auto; margin-right: auto">
-  <xsl:attribute name="data-sgvizler-query">
-     SELECT (?langTag) (COUNT(?langTag) AS ?freqCount)
-     WHERE {
-       GRAPH &lt;http://localhost:3030/greenstone/data/hathitrust-tab&gt;  {
-         ?s &lt;http://purl.org/dc/elements/1.1/Language&gt; ?langTag .
-       }
-     }
-     GROUP BY ?langTag
-  </xsl:attribute>
-</div>
-
-
-
-
-  </xsl:template>
 
 	<!-- the page content -->
