{% extends "base.html" %}
{% load markup %}
{% block title %}ReportLab Chart Gallery{%endblock%}
{% block extrahead %}
{{block.super}}
<link rel="stylesheet" href="{{ STATIC_URL }}chartgallery/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<style type="text/css">
.gallery {clear: both; display: block;}
.gallery div { float: left; width: {{sc.THUMBNAIL_WIDTH}}px; height: {{sc.THUMBNAIL_HEIGHT|add:10}}px;
		margin: 1em 1em 1em 0; overflow: hidden; text-align: center;
		font-size: .9em; position:relative;
	}
.gallery div a span {text-align: center; line-height: 100%;
	display: block; position: absolute;
	bottom: 0px; margin: 0 10%;   } 
    .gallery div img { border: 0 none; display: block}
    /*.gallery div.new_row, .gallery div.lf { clear: left }*/
    /*.gallery div.cr { clear: right }*/
	#main_content_sub_pages {
		width: 600px !important;
}
.manifesto {clear: both}
</style>
{% endblock%}
{% block menu %}
<div class="well well-sm nav-sidebar">
<ul class="sidemenu level0">
	<li><a href=".."><strong>ReportLab Chart Galleries</strong></a>
	{% for gall in chart_galleries %}
	<ul class="sidemenu level1">
	<li> 
	{% if gall = gallery %}<a href="#">{{gall|capfirst}}</a>{%else%}<a href="../{{gall}}/">{{gall|capfirst}}</a>{% endif %}
	</li>
{% endfor %}
</ul></li></ul>
</div>
{% endblock %}
{% block content %}
<div class="manifesto">
	{{manifest|markdown}}
</div>
<div class="divider"></div>
<h1>{{gallery|capfirst}} charts</h1>
<div id="divider" class="gallery">
{% for chart in charts %}
<div><a href="{{chart.0}}/?iframe=true&amp;width=900&amp;height=500&amp;ajax=true" rel="prettyPhoto[iframes]"><img src="{{chart.1}}" alt="{{chart.0}}" /><span>{{chart.2}}</span></a></div>
{% endfor %}
</div>
{% endblock %}

{% block extrajs %}
{{block.super}}
<script src="{{ STATIC_URL }}chartgallery/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='prettyPhoto']").prettyPhoto({social_tools:'', slideshow: false, opacity: .5});
	 });
</script>
{% endblock%}