[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="fr" lang="fr">
<!--
  Template made by Tian ( http://www.c-sait.net/ )
  Color scheme by Mario Tomic ( http://www.mariotomic.com/ )
-->
<head>
 <title>$$PAGETITLE$$</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
[JS_START]
 <script type="text/javascript">
<!--
expandTooltip="Afficher les informations du film";
collapseTooltip="Masquer les informations du film";
function prn(s)
{
 document.write(s)
}
function getE(id)
{
 return document.getElementById(id)
}
function expcolAll(dir,rowNum)
{
 for(x=0;x < rowNum;x++) {
  try {
   getE('movie'+x).style.display=dir
   if(dir=="none") getE('switch'+x).innerHTML="+"
   else getE('switch'+x).innerHTML="&ndash;"
  }
  catch(err) { }
 }
}
function toggleDisplay(id,swt)
{
 if((getE(id).style.display=="")||(getE(id).style.display=="none")) {
  getE(id).style.display="block"
  getE(swt).innerHTML="&ndash;"
  getE(swt).title=collapseTooltip
 } else {
  getE(id).style.display="none"
  getE(swt).innerHTML="+"
  getE(swt).title=expandTooltip
 }
 return false
}
function writeExpandControl(elementId,collapse)
{
 prn("<a href=\"#\" class=\"movie-expand\" id=\"switch"+elementId+"\" onclick=\"return toggleDisplay('movie"+elementId+"','switch"+elementId+"');\" title=\""+((collapse) ? expandTooltip : collapseTooltip)+"\">"+((collapse) ? "+" : "&ndash;")+"</a>")
}
function searchMovies(text)
{
 getE("collapseAll").click()
 alldt=document.getElementsByTagName("dt")
 alldd=document.getElementsByTagName("dd")
 nb=alldt.length
 re=new RegExp(text,"i")
 for(i=0;i<nb;i++) {
  s1=alldt[i].getElementsByTagName("a")[1].innerHTML
  s2=alldd[i].innerHTML
  res=0
  if(getE("searchType").value=="all") res=(re.test(s1)||re.test(s2))
  else res=re.test(s1)
  if(res) st="block"
  else st="none"
  alldt[i].style.display=st
  alldd[i].style.display=st
 }
}
-->
 </script>
[JS_END]
 <style type="text/css">
   body {
   background:#222222;
  }
  h1 {
   font-weight:bold;
   font-size:160%;
   text-align:center;
   margin-bottom:1em;
  }
  #top {
   color:#ffaa00 ! important;
   background:transparent ! important;
  }
  form {
   text-align:center;
   border:1px dashed #999999;
   background:#111111;
   margin:0 3em;
   padding:0.5em;
  }
  input,select {
   border:1px solid #666666;
   background: #333333;
   color: #b2b2b2;
   margin:0 0.5em;
  }
  input:focus, input.submit:hover {
   background:#000000;
   color: #b2b2b2;
  }
    }
  input:hover, input.submit:hover {
   background:#000000;
   color: #b2b2b2;
  }
  input.submit {
   cursor:pointer;
  }
  #links {
   margin-top:0.5em;
   text-align:center;
   font-size:120%;
   color: #333333;
  }
  img {
   float:left;
   margin:0 1em 1em 1em;
  }
  dt {
   color:#aaaaaa;
   font-size:120%;
   margin:0em 0.5em;
   clear:both;
  }
  dd {
   margin:0.5em 2em 1em;
   border-left:1px dashed #999999;
   border-bottom:1px dashed #999999;
  }
  table {
   font-size:90%;
   margin:0 1em;
   border:1px dashed #b2b2b2;
   width:60%;
   color: #b2b2b2;
  }
  th {
   font-weight:bold;
   text-align:left;
   width:25%;
  }
  .tr1 {
   background:#333333;
  }
  .tr2 {
   background:#333333;
  }
  a {
   color:#ffaa00;
   background:transparent;
   text-decoration:none;
  }
  a:hover, a:focus {
   color:#000000;
   background-color:#ffaa00;
  }
  .topl {
   color:#444444;
   font-size:90%;
  }
  .movie-expand {
   width:1em;
   text-align:center;
   font-size:120%;
   float:left;
   margin:0.2em;
  }
  p, #note {
   color:#b2b2b2;
   background:#000000;
   border:1px dashed #999999;
   clear:left;
   margin:1em 2em;
   padding:0.5em;
  }
  .borrowed0 {
   color:#222222;
   background:transparent;
   text-decoration:none;
   font-size:50%;
   display:block;
  }
  .borrowed1 {
   color:#333333;
   background:transparent;
   text-decoration:none;
   font-size:50%;
   display:block;
  }
  #note {
  	text-align:center;
  }
 </style>
</head>
<body>
 <h1><a id="top">$$PAGETITLE$$</a></h1>
[JS_START]
 <form onsubmit="searchMovies(getE('searchText').value); return false" action="">
  <div>
  <input type="text" id="searchText" title="$$FORM_INPUT$$" />
  <select id="searchType">
   <option value="title">$$FORM_SEARCH1$$</option>
   <option value="all">$$FORM_SEARCH2$$</option>
  </select>
  <input type="button" class="submit" value="$$FORM_SEARCHBUTTON$$" title="$$FORM_SEARCHTITLE$$" onclick="searchMovies(getE('searchText').value)" />
  <input type="button" class="submit" value="$$FORM_ALLBUTTON$$" title="$$FORM_ALLTITLE$$" onclick="searchMovies('')" />
  <br />
  <br />
  <input  type="button" class="submit" value="$$FORM_EXPAND$$" onclick="expcolAll('block','$$TOTALNUMBER$$')" title="$$FORM_EXPANDTITLE$$" />
  <input  type="button" id="collapseAll" class="submit" value="$$FORM_COLLAPSE$$" onclick="expcolAll('none','$$TOTALNUMBER$$')" title="$$FORM_COLLAPSETITLE$$" />
  </div>
 </form>
[JS_END]
 <div id="links">| _ | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z |</div>
 <dl>
[/HEADER]
[ITEM]
  <dt>
[JS_START]
   <script type="text/javascript">writeExpandControl('$$IDX$$',1)</script>
[JS_END]
   <a id="movielink_$$IDX$$" href="$$URL$$">$$TITLE$$</a> | <a class="topl" href="#top">($$TOP$$)</a>   
   <span class="borrowed$$BORROWER_FLAG$$">$$BORROWER_YESNO$$$$BORROWER_OREMPTY$$</span>
  </dt>
  <dd>
   <div id="movie$$IDX$$" style="display:none;">
    <img src="$$IMAGE$$" alt="$$TITLE$$" title= "$$TITLE$$" height="$$HEIGHT_PIC$$" />
    <table>
     <tr class="tr1"><th>$$TIME_LABEL$$</th><td>$$TIME$$</td></tr>
     <tr class="tr2"><th>$$GENRE_LABEL$$</th><td>$$GENRE$$</td></tr>
     <tr class="tr1"><th>$$DATE_LABEL$$</th><td>$$DATE$$</td></tr>
     <tr class="tr2"><th>$$DIRECTOR_LABEL$$</th><td>$$DIRECTOR$$</td></tr>
     <tr class="tr1"><th>$$ACTORS_LABEL$$</th><td>$$ACTORS$$</td></tr>
     <tr class="tr2"><th>$$FORMAT_LABEL$$</th><td>$$FORMAT$$ ($$NUMBER$$)</td></tr>
     <tr class="tr1"><th>$$RATING_LABEL$$</th><td>$$RATING$$/10</td></tr>
     <tr class="tr2"><th>$$AUDIO_LABEL$$</th><td>$$AUDIO$$</td></tr>
     <tr class="tr1"><th>$$SUBT_LABEL$$</th><td>$$SUBT$$</td></tr>
    </table>
    <p>$$SYNOPSIS$$<br /><br /><em>$$COMMENT$$</em></p>
   </div>
  </dd>
[/ITEM]
[FOOTER]
 </dl>
 <div id="note">$$GENERATOR_NOTE$$</div>
</body>
</html>
[/FOOTER]
[POST]

  my %letters = ();
  my $idx = 0;

  foreach (@items)
  {
    my $firstLetter = uc(substr($_->{title}, 0, 1));
    $firstLetter =~ s/[^A-Z]/_/;
    if (!$letters{$firstLetter})
    {
    	$body =~ s/<a id="movielink_$idx"/<a id="$firstLetter"/;
        $letters{$firstLetter} = 1;
    }
    $idx++;
  }

  foreach (keys %letters)
  {
    $header =~ s/\| $_ \|/| <a href="#$_">$_<\/a> |/;
  }
[/POST]
