{% extends "base.html" %}
{% block extra_css %}
<link rel="stylesheet" href="/static/css/book_list.css">
<link rel="stylesheet" href="/static/css/book_panel.css">
<link rel="stylesheet" href="/static/css/search.css">
{% endblock %}
{% block extra_head %}
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/js/wishlist.js"></script>
<script type="text/javascript" src="/static/js/greenpanel.js"></script>
<script type="text/javascript" src="/static/js/toggle.js"></script>
<script type="text/javascript" src="/static/js/jquery.endless-scroll.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
var page = 1;
$j(document).ready(function() {
    $j(document).endlessScroll({
        bottomPixels: 250,
        fireOnce: false,
        fireDelay: false,
        insertAfter: "#results-bottom",
        loader: '<img src="/static/images/loading.gif" alt="loading..." />',
        callback: function(p) {
            page += 1;
            var url = "?q={{ q }}&page=" + page;
            $j.get(url, function(html) {
                var view = $j(".listview").length > 0 ? "list" : "panel";
                var results = $j(html).find(".book");
                $j("#results").append(results);
                if (view === "list") toggleList();
                else togglePanel();
                setupWishlistControls();
            });
        }
    });
});
</script>
{% endblock %}

{% block title %}Google Books search results{% endblock %}

{% block content %}
    <div id="main-container">
    <div class="js-main">
        <div id="js-leftcol">
            {% include "explore.html" %}
        </div>

        <div id="js-maincol-fr">
        <div class="js-maincol-inner">
            <div id="content-block">
                <div class="content-block-heading">
                    <h2 class="content-heading">Google Books search results</span></h2>
                        <ul class="book-list-view">
                            <li>View As:</li>
                            <li class="view-list">
                                <a href="#" id="toggle-list">
                                <img src="/static/images/booklist/view-list.png" align="view list" title="view list" height="21" width="24" alt="use list view" />
                                </a>
                            </li>
                            <li class="view-list">
                                <a href="#" id="toggle-panel">
                                <img src="/static/images/booklist/view-icon.png" align="view icon" title="view icon" height="22" width="22" alt="use panel view" />
                                </a>
                            </li>
                        </ul>
                </div>
                <div id="content-block-content"><div id="results">
                    {% for work in results %}
                    <div class="{% cycle 'row1' 'row2' %} book">
                    {% with work.googlebooks_id as googlebooks_id %}
                    {% with work.last_campaign_status as status %}
					{% with work.last_campaign.deadline as deadline %}
                    {% include "book_panel.html" %}
                    {% endwith %}{% endwith %}{% endwith %}
                    </div>
                    {% empty %}
                    <h2>Sorry, couldn't find that!</h2>
                    <div class="js-search">
                        <div class="js-search-inner">
                            <form action="{% url search %}" method="get"> 
			                    <input type="text" id="watermarkempty" size="25" onfocus="imgfocusempty()" onblur="imgblurempty(15)" class="inputbox" name="q" value="{{ q }}">
                                <input type="button" onclick="this.form.searchword.focus();"  class="button" value="Search">
                            </form>
                        </div>
                    </div>
                    {% endfor %}
                </div></div>
                <div id="results-bottom"></div>
            </div>    
        </div>
        </div>
    </div>
    </div>

{% endblock %}