<!--!
	admin_theme
	Created by Noah Kantrowitz on 2007-08-05.
	Copyright (c) 2009 Noah Kantrowitz. All rights reserved.
-->
<!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"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">
      <xi:include href="admin.html" />      
  <head>
    <title>Theme</title>
  </head>
  <body>
    <h2>Theme</h2>
  
    <form method="post">
      <div id="themelistdiv">
        <ul id="themelist">
          <li py:for="name, theme in themeengine.info">
            <p>
              <input type="radio" id="theme_${name}_radio" name="theme" value="$name" checked="${themeengine.current == name or None}" />
              <label for="theme_${name}_radio" class="themename">${name.title()}</label>
            </p>
            <p>
              <label for="theme_${name}_radio">
                <img height="240" width="420" src="${href.themeengine('screenshot', name)}" id="theme_${name}_img" alt="$theme.description"/>
              </label>
            </p>
          </li>
        </ul>
      </div>
      <div id="themebuttons">
        <img src="${href.chrome('themeengine', 'img', 'next.gif')}" border="0" id="nextbutton" />
        <img src="${href.chrome('themeengine', 'img', 'prev.gif')}" border="0" id="prevbutton" />
        <div id="themename">$themeengine.current</div>
        <div id="themedesc">${themeengine.current_theme and themeengine.current_theme.description or 'Theme not found'}</div>
        <input type="submit" value="Use this theme" />
      </div>
    </form>
  
    <script type="text/javascript">
      $(function() {
        $('#themelist input').remove();
        $('#themelist .themename').hide();
        $('#nextbutton, #prevbutton, #themename, #themedesc ').show();
        $('#themebuttons').append('<input type="hidden" id="themehidden" name="theme" value="$themeengine.current" />');
        $('#themelistdiv').jCarouselLite({
            btnNext: '#nextbutton',
            btnPrev: '#prevbutton',
            visible: 1,
            start: $themeengine.current_index,
            circular: true,
            afterEnd: function(elm) {
              console.log(elm);
              var value = elm.find('label.themename').text();
              $('#themename').text(value);
              $('#themedesc').text(elm.find('img').attr('alt'));
              $('#themehidden').val(value);
            }
        });
      });
    </script>
  </body>
</html>
