{% extends "base.html" %}
{% load endless %}
{% load truncatechars %}

{% block title %} — {{ supporter.username }}{% endblock %}
{% block extra_css %}
<link type="text/css" rel="stylesheet" href="/static/css/supporter_layout.css" />
<link type="text/css" rel="stylesheet" href="/static/css/searchandbrowse.css" />
<link type="text/css" rel="stylesheet" href="/static/css/book_list.css" />
<link type="text/css" rel="stylesheet" href="/static/css/book_panel.css" />
{% endblock %}
{% block extra_js %}
<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="{{ jquery_ui_home }}"></script>
<script type="text/javascript" src="/static/js/greenpanel.js"></script>
<script type="text/javascript" src="/static/js/import_books.js"></script>
<script type="text/javascript" src="/static/js/counter.js"></script>

{% ifequal supporter request.user %}
<!-- we only need to be able to toggle the profile edit area in this case -->
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function(){
        $j('#user-block-hide').hide();
        $j('#user-block1 span').click(function() {
                $j(this).toggleClass("active");
                $j("#user-block-hide").slideToggle(300);
        });
    });
</script>
{% endifequal %}

{% if works %}
<!-- when the user's wishlist is empty, views.py gives us works for a slideshow -->
<script src="/static/js/slides.min.jquery.js"></script>
<script src="/static/js/slideshow.js"></script>

<!-- toggle to panelview instead of listview default so slideshow will look right -->
<script type="text/javascript">
    var $j = jQuery.noConflict();
	$j(document).ready(function($) { 
        $('.listview').addClass("panelview").removeClass("listview");
    });    
</script>  
{% else %}
<!-- we only need these when there's stuff on the user's wishlist -->
<script type="text/javascript" src="/static/js/toggle.js"></script>
<script type="text/javascript" src="/static/js/tabs.js"></script>
{% endif %}

<!-- highlight LT/GR add functions when people click on import divs -->
<script type="text/javascript">
var $j = jQuery.noConflict();
function highlightTarget(targetdiv) {
	var target = $j(targetdiv);
    target.css({"background": "#8dc63f"}).animate(
        {backgroundColor: "white"}, 1500
    );
};
</script>
{% endblock %}

{% comment %}
To do:
create topsection file for inclusion in multiple contexts, if needed
figure out how to configure date display 
    decide if we're even including date joined in profile
Goodreads 
    be sure words display correctlydja
    do I need both add-wishlist and remove-wishlist classes? do they differ?
better alignment on I am ungluing & badges

make sure backed/backing/wishlist is the order we want the badges to be in
test code with other campaign statuses -- random_campaigns needs to set a variety of statuses!
why is there a status in regluit.payment.models.Transaction?  does it duplicate the status in regluit.core.models.Campaign?


there's no tab for seeing ALL my books, only the filters! huh.

{% endcomment %}

{% block topsection %}
<div id="locationhash">{{ activetab }}</div>
<div id="js-topsection">
    <div class="js-main">
        <div class="js-topnews">
            <div class="js-topnews1">
                <div class="js-topnews2">
                    <div class="js-topnews3">
                        <div class="user-block">
                            {% ifequal supporter request.user %}
                            <div id="user-block1">
                            <div class="block-inner">
                            <span class="my-setting">My Profile</span>
                            </div>
                            </div>
                            <div class="user-block2">
                            	{% if supporter.profile.pic_url %}
                                <img class="user-avatar" src="{{ supporter.profile.pic_url }}" height="50" width="50" alt="Picture of {{ supporter }}" title="{{ supporter }}" />
                           		{% else %}
                                <img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="Generic Ungluer Avatar" title="Ungluer" />
                                {% endif %}
                                <span class="user-name"><a href="#">{{ supporter.username|truncatechars:20 }}</a></span>
                                <span class="user-date">{{ date }}</span>
                                <span class="user-short-info">{{ supporter.profile.tagline }}</span>
                            </div>
                            {% else %}
                            <div id="user-block1">
                            <div class="block-inner">
                            	{% if supporter.profile.pic_url %}
                                <img class="user-avatar" src="{{ supporter.profile.pic_url }}" height="50" width="50" alt="Picture of {{ supporter }}" title="{{ supporter }}" />
                           		{% else %}
                                <img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="Generic Ungluer Avatar" title="Ungluer" />
                                {% endif %}
                                <span class="user-name"><a href="#">{{ supporter.username }}</a></span>
                                <span class="user-date">{{ date }}</span>
                            </div>
                            </div>
                            <div class="user-block2">
                                <span class="user-short-info">{% with supporter.profile.tagline as tagline %}{% if tagline %}{{ tagline }}{% else %}&nbsp;{% endif %}{% endwith %}</span>
                            </div>
                            {% endifequal %}
                            <div class="user-block3">
                                <div class="badges">
                                <span class="rounded"><span class="blue tabs1" {% ifequal request.user supporter %}title="I've unglued {{ backed }} {% if backed == 1 %}book{% else %}books{% endif %}."{% else %}title="{{ supporter }} has unglued {{ backed }} {% if backed == 1 %}book{% else %}books{% endif %}."{% endifequal %}><span class="hovertext">I've unglued&nbsp;</span>{{ backed }}</span></span>
                                <span class="rounded"><span class="orange tabs2" {% ifequal request.user supporter %}title="I'm supporting {{ backing }} {% if backing == 1 %}book{% else %}books{% endif %}."{% else %}title="{{ supporter }} is supporting {{ backing }} {% if backing == 1 %}book{% else %}books{% endif %}."{% endifequal %}><span class="hovertext">I'm ungluing&nbsp;</span>{{ backing }}</span></span>
                                <span class="rounded"><span class="grey tabs3" {% ifequal request.user supporter %}title="I'm wishing for {{ wished }} {% if wished == 1 %}book{% else %}books{% endif %}."{% else %}title="{{ supporter }} is wishing for {{ wished }} {% if wished == 1 %}book{% else %}books{% endif %}."{% endifequal %}><span class="hovertext">I'm wishing for&nbsp;</span>{{ wished }}</span></span>
                                </div>
                            </div>
                            <div class="user-block4">
                                <div class="social">
                                {% if supporter.profile.home_url %}
                                   <a href="{{ supporter.profile.home_url }}" class="nounderline">
                                       <img src="/static/images/supporter_icons/home_square.png" alt="{{ supporter }}'s homepage" title="{{ supporter }}'s Homepage"  />
                                   </a>
                                {% endif %}
                                {% if supporter.profile.facebook_id %}
									<a href="http://www.facebook.com/profile.php?id={{supporter.profile.facebook_id}}" class="nounderline">
										<img src="/static/images/supporter_icons/facebook_square.png" alt="{{ supporter }}'s Facebook" title="{{ supporter }}'s Facebook"  />
									</a>
                                {% endif %}
                                {% if supporter.profile.twitter_id %}
									<a href="https://twitter.com/#!/{{ supporter.profile.twitter_id }}" class="nounderline">
										<img src="/static/images/supporter_icons/twitter_square.png" alt="{{ supporter }}'s Twitter" title="{{ supporter }}'s Twitter"  />
									</a>
                                {% endif %}
                                {% if supporter.profile.goodreads_user_link %}
									<a href="{{supporter.profile.goodreads_user_link}}" class="nounderline">
										<img src="/static/images/supporter_icons/goodreads_square.png" alt="{{ supporter }}'s profile on GoodReads" title="{{ supporter }}'s page on GoodReads"  />
									</a>
                                {% endif %}
                                {% if supporter.profile.librarything_id %}
									<a href="http://www.librarything.com/profile/{{ supporter.profile.librarything_id }}" class="nounderline">
										<img src="/static/images/supporter_icons/librarything_square.png" alt="{{ supporter }}'s profile on LibraryThing" title="{{ supporter }}'s page on LibraryThing"  />
									</a>
                                 {% endif %}
                               </div>
                            </div>
                        </div>
                        {% ifequal supporter request.user %}
                        <div id="user-block-hide">
                        <form method="POST" action="#">
                            {% csrf_token %}
                            <div class="block block1">
                            <div class="block-inner">
                                <h3 class="title">Your Tagline</h3>
                                    {{ profile_form.tagline.errors }}
                                    {{ profile_form.tagline }}<br />
                                <span id="count_display">140</span> characters remaining<br /><br />

                            </div>
                                     <input class="profile-save" type="submit" name="submit" value="Update" id="submit">
                            </div>
                            
                             <div class="block block2">
                                <h3 class="title">Links</h3>
                                <div class="check-list">
                                   <label> {% if supporter.profile.home_url %}Change{% else %}Add{% endif %} your homepage URL:</label>
                                    {{ profile_form.home_url }}{{ profile_form.home_url.errors }}
                                </div>
                                <div class="check-list">
                                    {% if supporter.profile.twitter_id %}
                                    <a href="{% url socialauth_associate_begin backend='twitter' %}">Update your Twitter connection</a> <br /> or disconnect Twitter: {{ profile_form.clear_twitter }}                                 
                                    {% else %}
                                    <a href="{% url socialauth_associate_begin backend='twitter' %}">Connect your Twitter account</a> to Unglue.it 
                                    {% endif %} 
                                </div>
                                <div class="check-list">
                                    {% if supporter.profile.facebook_id %}
                                    <a href="{% url socialauth_associate_begin backend='facebook' %}">Update your Facebook connection</a>  <br /> or disconnect Facebook: {{ profile_form.clear_facebook }}
                                    {% else %}
                                    <a href="{% url socialauth_associate_begin backend='facebook' %}">Connect your Facebook account</a> to Unglue.it                                   
                                    {% endif %} 
                                </div>
                                <div class="check-list" id="connectgr">
                                    {% if user.profile.goodreads_user_id %}
                                    <a href="{{goodreads_auth_url}}">Update your GoodReads connection</a>  <br /> or disconnect GoodReads: {{ profile_form.clear_goodreads }}
                                    {% else %}
                                    <a href="{{goodreads_auth_url}}">Connect your GoodReads account</a> to Unglue.it                                   
                                    {% endif %} 
                                </div>
                                <div class="check-list" id="connectlt">
                                    <label>{% if supporter.profile.librarything_id %}Change{% else %}Add{% endif %} your LibraryThing User ID:</label>
                                    {{ profile_form.librarything_id }}{{ profile_form.librarything_id.errors }}
                                </div>
                            </div>
                            </form> 
                            <div class="block block3">
                                <h3 class="title">Import your books</h3>
                                {% if goodreads_id %}
                                <form id="load_shelf_form" method="post" action="#">
                                    {% csrf_token %}
                                    <div class="fieldWrapper">
                                        
                                        <div id="loadgr"><span><span id="goodreads_shelves"></span><input id="goodreads_input" type="submit" value="Select your GoodReads shelves" /></span>
                                        </div>
                                    </div>
                                </form>
                                {% else %}
                                <div id="loadgr" onclick="highlightTarget('#connectgr'); return false;"><div>Connect your GoodReads account to import from GoodReads.</div></div>
                                {% endif %}
                                {% if librarything_id %}
                                <form id="librarything_load" method="post" action="#">
                                    {% csrf_token %}
                                    <div id="loadlt"><input type="submit" id="librarything_input" value="Add your LibraryThing library" /></div>
                                </form>
                                {% else %}
                                <div id="loadlt" onclick="highlightTarget('#connectlt'); return false;"><div>Add your LibraryThing ID to import from LibraryThing.</div></div>
                                {% endif %}
                            </div>
                        </div>
                      {% endifequal %}
                    </div>
                </div>
            </div>
        </div>
       
    </div>
</div>

{% 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 wantto" id="tabs">
                    <ul class="tabs">
                        <li class="tabs1"><a href="#">Unglued</a></li>
                        <li class="tabs2"><a href="#">Active</a></li>
                        <li class="tabs3"><a href="#">Wishlisted</a></li>
                    </ul>
                    
                    <span id="rss"><a href="feed" title="RSS feed of {{ supporter }}'s latest wishbooks" ><img src="/static/images/feedicons-standard/feed-icon-14x14.png" alt="RSS feed of {{ supporter }}'s latest wishbooks" /><span>Subscribe</span></a></span>
                
                		{% if not works %}
                		{% comment %}
                		don't let people toggle views if we're doing the slideshow -- it'll look weird
                		{% endcomment %}
                        <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" alt="view list" title="view list" />
                                </a>
                            </li>
                            <li class="view-list">
                                <a href="#" id="toggle-panel">
                                <img src="/static/images/booklist/view-icon.png" alt="view icon" title="view icon" />
                                </a>
                            </li>
                        </ul>
                        {% endif %}
                </div>
                <div id="content-block-content">
                    {% ifequal wishlist.works.all.count 0 %}
                        {% ifequal request.user supporter %}
                        <div class="empty-wishlist">
                        
                        	<div>You haven't wishlisted anything yet.  Can we help?<br /><br /></div>
                        	
                		    <div id="js-slide">
 	   							<div class="js-main">
        							<div class="jsmodule">
            							<h3><span>{% if is_preview %}Most wishlisted{% else %}Top ungluing campaigns{% endif %}</span></h3>
            							<div class="jsmod-content">
                							<div id="js-slideshow">
                    							<div class="slides_container">
                        							<div class="slide-page slide-page1">
                        								{% for work in works %}
                        								<div class="spacer">
                        									{% include "book_panel.html" %}
                        								</div>
                        								{% endfor %}
                        							</div>
                        							<div class="slide-page slide-page2">
                        								{% for work in works2 %}
                        								<div class="spacer">
                        									{% include "book_panel.html" %}
                        								</div>
                        								{% endfor %}
                        							</div>
                    							</div>
                							</div>	
            							</div>
            						</div>
        						</div>
    						</div>

		                    <div id="js-maincontainer-bot-block">
        		                <div id="js-search">
                		        	<label>What book would you give to the world? </label>
				        		        <form action="{% url search %}" method="get">
                						    <input type="text" id="watermark" onfocus="imgfocus()" onblur="imgblur(0)" size="25" class="inputbox" name="q" value="{{ q }}">
                						    <input type="submit" class="greenbutton" value="Search">
               							</form>
                		        </div>
                		    </div>
                		    
                            <br /><br /><hr />We'd also love to hear your <a href="/feedback">feedback</a>.
                        </div>
                        {% else %}
                        <div class="empty-wishlist">
                            It looks like {{ supporter.username }} is just getting started, and hasn't added books just yet.<br /><br />
                        {% endifequal %}
                    {% else %}

                    {% lazy_paginate 20 works_unglued using "works_unglued" %}
                    {% for work in works_unglued %}
                    <div class="{% cycle 'row1' 'row2' %}">
                    {% with work.last_campaign_status as status %}
					{% with work.last_campaign.deadline as deadline %}
					{% with work.googlebooks_id as googlebooks_id %}					
                    {% include "book_panel.html" %}
                    {% endwith %}{% endwith %}{% endwith %}
                    </div>
                    {% endfor %}
                    <div class="pagination content-block-heading tabs-1">
                        {% get_pages %}
                        {% for page in pages %}
                        	<a href="{{ page.path }}#1" class="endless_page_link">{{ page.number }}</a>
                        {% endfor %}
                    </div>

                    {% lazy_paginate 20 works_active using "works_active" %}
                    {% for work in works_active %}
                    <div class="{% cycle 'row1' 'row2' %}">
                    {% with work.last_campaign_status as status %}
					{% with work.last_campaign.deadline as deadline %}
					{% with work.googlebooks_id as googlebooks_id %}					
                    {% include "book_panel.html" %}
                    {% endwith %}{% endwith %}{% endwith %}
                    </div>
                    {% endfor %}
                    <div class="pagination content-block-heading tabs-2">
                        {% get_pages %}
                        {% for page in pages %}
                        	<a href="{{ page.path }}#2" class="endless_page_link">{{ page.number }}</a>
                        {% endfor %}
                    </div>

                    {% lazy_paginate 20 works_wished using "works_wished" %}
                    {% for work in works_wished %}
                    <div class="{% cycle 'row1' 'row2' %}">
                    {% with work.last_campaign_status as status %}
					{% with work.last_campaign.deadline as deadline %}
					{% with work.googlebooks_id as googlebooks_id %}					
                    {% include "book_panel.html" %}
                    {% endwith %}{% endwith %}{% endwith %}
                    </div>
                    {% endfor %}
                    <div class="pagination content-block-heading tabs-3">
                        {% get_pages %}
                        {% for page in pages %}
                        	<a href="{{ page.path }}#3" class="endless_page_link">{{ page.number }}</a>
                        {% endfor %}
                    </div>

                    {% endifequal %}
                </div>
            </div>    
        </div>
        </div>
    </div>
    </div>

{% endblock %}