1 files changed, 282 insertions, 0 deletions
diff --git a/share/gcstar/html_models/GCstar/Shelf b/share/gcstar/html_models/GCstar/Shelf
new file mode 100644
index 0000000..e699fdc
--- /dev/null
+++ b/share/gcstar/html_models/GCstar/Shelf
@@ -0,0 +1,282 @@
+[HEADER]
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!--
+  Template made by Tian. It emulates a shelf display.
+-->
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>$$PAGETITLE$$</title>
+<style type="text/css">
+body
+{
+ color:black;
+}
+h1
+{
+ text-align:left;
+ margin-left:0.5em;
+ font-size:200%;
+ font-weight:bold;
+ color:#6c7b8b;
+}
+h2
+{
+ font-size:150%;
+ text-align:center;
+ color:#1c86ee;
+ font-weight:bold;
+ height:3em;
+}
+h3
+{
+ font-size:120%;
+ font-weight:bold;
+ margin:1em 0;
+ color:#6c7b8b;
+ border-bottom:1px dashed #6c7b8b;
+}
+#left
+{
+[JAVASCRIPT]
+ width:48%;
+[/JAVASCRIPT]
+ border:1px dashed #6c7b8b;
+ background:#f0f0f0;
+}
+.imgbox
+{
+ float:left;
+ padding:2em 1em 0em;
+ margin:0;
+}
+.imgbox img
+{
+ margin:0;
+ padding:0;
+[JAVASCRIPT]
+ cursor:pointer;
+[/JAVASCRIPT]
+}
+.imginfo
+{
+ float:left;
+ margin-top:0.5em;
+[JAVASCRIPT]
+ cursor:default;
+[/JAVASCRIPT]
+}
+.info
+{
+ position:fixed;
+ top:0;
+ right:1%;
+ width:48%;
+ display:none;
+}
+.synopsis
+{
+ height:8em;
+ overflow:auto;
+ padding:0.2em;
+ background:#f0f0f0;
+}
+table
+{
+ margin:0 2%;
+ width:95%;
+}
+th
+{
+ font-weight:bold;
+ text-align:left;
+ white-space:nowrap;
+ padding:0.5em;
+ background:#f0f0f0;
+ width:40%;
+}
+td
+{
+ padding:0.5em;
+ background:#f0f0f0;
+ display:block;
+ min-height:1.5em;
+ max-height:12em;
+ overflow:auto;
+}
+#note
+{
+ text-align:center;
+ padding-top:0.5em;
+[JAVASCRIPT]
+ width:48%;
+[/JAVASCRIPT]
+ color:#6c7b8b;
+}
+#note a
+{
+ font-weight:bold;
+ color:#1c86ee;
+}
+#note a:hover
+{
+ color:#6c7b8b;
+}
+.spacer
+{
+  clear: both;
+}
+[JAVASCRIPT]
+.expander
+{
+ padding:0;
+ width:1em;
+ display:block;
+ float:left;
+ text-align:center;
+ margin-right:0.5em;
+ cursor:pointer;
+}
+[/JAVASCRIPT]
+.info
+{
+ position:fixed;
+ top:0;
+ right:1%;
+ width:48%;
+ display:none;
+}
+.details
+{
+ overflow: auto;
+ height: 500px;
+}
+</style>
+[JAVASCRIPT]
+<script type="text/javascript">
+<!--
+function getBoxes()
+{
+  return document.getElementById("left").getElementsByTagName("div")
+}
+function getHeight()
+{
+  //From http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
+  myHeight = 0;
+  if( typeof( window.innerWidth ) == 'number' ) {
+    //Non-IE
+    myHeight = window.innerHeight;
+  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
+    //IE 6+ in 'standards compliant mode'
+    myHeight = document.documentElement.clientHeight;
+  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
+    //IE 4 compatible
+    myHeight = document.body.clientHeight;
+  }
+  return myHeight - 150;
+}
+function init()
+{
+  // CSS changes from http://www.quirksmode.org/dom/changess.html
+  if (!document.styleSheets) return;
+  var theRules = new Array();
+  if (document.styleSheets[0].cssRules)
+    theRules = document.styleSheets[0].cssRules
+  else if (document.styleSheets[0].rules)
+    theRules = document.styleSheets[0].rules
+  theRules[theRules.length-1].style.height = getHeight()+'px';
+
+  boxes = getBoxes()
+  for(i=0; i < boxes.length; i++)
+  {
+    box =  boxes[i]
+    if (box.className == "movie")
+    {
+      boxes2 = box.getElementsByTagName("div")
+      boxes2[0].onclick = function(evt)
+      {
+        div = this.parentNode
+        showMe(div.getElementsByTagName("div")[1], this)
+      }
+    }
+  }
+  headers = document.getElementById("left").getElementsByTagName("h3")
+  for(i=0; i < headers.length; i++)
+  {
+    header =  headers[i]
+    header.style.cursor = 'pointer'
+    header.innerHTML = '<span class="expander">−</span> ' + header.innerHTML
+    header.onclick = function(evt)
+    {
+      table = this.nextSibling
+      while (table.tagName != "TABLE") { table = table.nextSibling }
+      if (table.style.display == "none")
+      {
+        table.style.display = "table"
+        this.innerHTML = this.innerHTML.replace(/\+<\/span>/, '−</span>')
+      }
+      else
+      {
+        table.style.display = "none"
+        this.innerHTML = this.innerHTML.replace(/−<\/span>/, '+</span>')
+      }     
+    }
+  }
+}
+var currentBox = 0
+var currentImg = 0
+function showMe(box, img)
+{
+  hidePrevious()
+  box.style.display = "block"
+  img.style.background = "#4b4f63"
+  img.style.padding = "1em"
+  currentBox = box
+  currentImg = img
+}
+function hidePrevious()
+{
+  if (currentBox)
+  {
+    currentBox.style.display = "none"
+    currentImg.style.background = "#f0f0f0"
+    currentImg.style.padding = "2em 1em 0em"
+  }
+}
+-->
+</script>
+[/JAVASCRIPT]
+</head>
+<body [JAVASCRIPT]onload="init()"[/JAVASCRIPT]>
+<h1>$$PAGETITLE$$</h1>
+<div id="left">
+[/HEADER]
+[ITEM]
+<div class="movie">
+ <div class="imgbox">
+  <img src="$$COVER_FIELD$$" height="$$HEIGHT_PIC$$" alt="$$TITLE_FIELD$$" title="$$TITLE_FIELD$$" />
+ </div>
+ <div class="info">
+   <h2>$$TITLE_FIELD$$</h2>
+   <div class="details">
+     [LOOP0 values=GCSgroups idx=GROUP]
+     <h3>$$GROUP_LABEL$$</h3>
+     <table>
+      [LOOP1 values=GROUP idx=VALUE]
+      <tr><th>$$VALUE_LABEL$$</th><td>$$VALUE$$</td></tr>
+      [/LOOP1]
+     </table>
+     [/LOOP0]
+   </div>
+ </div>
+</div>
+[/ITEM]
+[FOOTER]
+<div class="spacer">&nbsp;</div>
+</div>
+<p id="note">$$GENERATOR_NOTE$$</p>
+</body>
+</html>
+[/FOOTER]
+[POST]
+[/POST]