[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;
}
h3
{
 font-size:120%;
 font-weight:bold;
 margin:1em 0;
 color:#6c7b8b;
 border-bottom:1px dashed #6c7b8b;
}
#left
{
[JS_START]
 width:48%;
[JS_END]
 border:1px dashed #6c7b8b;
 background:#f0f0f0;
}
.imgbox
{
 float:left;
 padding:2em 1em 0em;
 margin:0;
}
img
{
 margin:0;
 padding:0;
[JS_START]
 cursor:pointer;
[JS_END]
}
.info
{
 position:fixed;
 top:0;
 right:1%;
 width:48%;
 display:none;
}
.synopsis
{
 height:8em;
 overflow:auto;
 padding:0.2em;
 background:#f0f0f0;
}
table
{
 margin:0 0.5em;
}
th
{
 font-weight:bold;
 text-align:left;
 white-space:nowrap;
 padding:0.5em;
 background:#f0f0f0;
}
td
{
 padding:0.5em;
 background:#f0f0f0;
}
#note
{
 text-align:center;
 padding-top:0.5em;
[JS_START]
 width:48%;
[JS_END]
 color:#6c7b8b;
}
#note a
{
 font-weight:bold;
 color:#1c86ee;
}
#note a:hover
{
 color:#6c7b8b;
}
.spacer
{
  clear: both;
}
</style>
[JS_START]
<script type="text/javascript">
function getBoxes()
{
  return document.getElementById("left").getElementsByTagName("div")
}
function init()
{
  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)
      }
    }
  }
}
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>
[JS_END]
</head>
<body [JS_START]onload="init()"[JS_END]>
<h1>$$PAGETITLE$$</h1>
<div id="left">
[/HEADER]
[ITEM]
<div class="movie">
 <div class="imgbox">
  <img src="$$IMAGE$$" height="$$HEIGHT_PIC$$" alt="$$TITLE$$" title="$$TITLE$$" />
 </div>
 <div class="info">
   <h2>$$TITLE$$</h2>
   <h3>$$INFO_LABEL$$</h3>
   <table>
    <tr><th>$$DATE_LABEL$$</th><td>$$DATE$$</td></tr>
    <tr><th>$$DIRECTOR_LABEL$$</th><td>$$DIRECTOR$$</td></tr>
    <tr><th>$$TIME_LABEL$$</th><td>$$TIME$$</td></tr>
    <tr><th>$$TYPE_LABEL$$</th><td>$$TYPE$$</td></tr>
    <tr><th>$$ACTORS_LABEL$$</th><td>$$ACTORS$$</td></tr>
   </table>
   <p class="synopsis">
     $$SYNOPSIS$$
   </p>
   <h3>$$PERSO_LABEL$$</h3>
   <table>
    <tr><th>$$RATING_LABEL$$</td><td>$$RATING$$/10</td></tr>
    <tr><th>$$FORMAT_LABEL$$</td><td>$$FORMAT$$ ($$NUMBER$$)</td></tr>
    <tr><th>$$BORROWER_LABEL$$</td><td>$$BORROWER$$</td></tr>
   </table>
 </div>
</div>
[/ITEM]
[FOOTER]
<div class="spacer">&nbsp;</div>
</div>
<p id="note">$$GENERATOR_NOTE$$</p>
</body>
</html>
[/FOOTER]
[POST]
[/POST]
