{% extends "base.html" %}

{% block title %} — {{ supporter.username }}{% endblock %}

{% block extra_head %}
<link type="text/css" rel="stylesheet" href="/static/css/supporter_layout.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" />

<script type="text/javascript" src="/static/js/wishlist.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function(){
        $j('.user-block-hide').hide();
        $j('.user-block1 a').click(
            function() {
                $j(this).toggleClass("active");
                $j(".user-block-hide").slideToggle(300);
            }
        );
        $j('.tabs1').click(function(){
            $j('.tabs').find('.active').removeClass('active');
            $j(this).addClass('active');
            $j('.content-block-content').find('.active').removeClass('active');
            $j('.tabs-1').addClass('active').show(300);
            $j('.tabs-2').hide(200);
            $j('.tabs-3').hide(200);
        });
        $j('.tabs2').click(function(){
            $j('.tabs').find('.active').removeClass('active');
            $j(this).addClass('active');
            $j('.content-block-content').find('.active').removeClass('active');
            $j('.tabs-2').addClass('active').show(300);
            $j('.tabs-1').hide(200);
            $j('.tabs-3').hide(200);
        });
        $j('.tabs3').click(function(){
            $j('.tabs').find('.active').removeClass('active');
            $j(this).addClass('active');
            $j('.content-block-content').find('.active').removeClass('active');
            $j('.tabs-3').addClass('active').show(300);
            $j('.tabs-2').hide(200);
            $j('.tabs-1').hide(200);
            });
        $j('.empty-wishlist span.bounce-search').click(function(){
            $j('div.js-search-inner').effect("bounce", 500, function() {
                $j('div.js-search-inner input[type="text"]').focus();
            });
        });
    });
</script>
<script type="text/javascript" src="static/js/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
	        $(document).ready(function(){
			      $('.image span').hide().css("opacity", 0);
				  
				  $('.image').bind("mouseenter", (function()
				  {
						$(this).children('span').animate({height: "300px", opacity: 1},300);
				  }));
				  
				  $('.image').bind("mouseleave", (function()
				  {
						$(this).children('span').animate({height: "0px", opacity: 0},200);
				  }));
				  
			});
</script>

<link rel="stylesheet" href="/static/css/book-panel-unimported.css">

{% endblock %}

/*
To do:
tidy: remove unnecessary divs copy-pasted over from standalone version
decide how many panels go in a row & space appropriately (do we have guidance from stefan?)
	I did 5 across by shaving one pixel off each (143-142) but don't like what it's done to white space
incorporate book panel css into other css & clean up

make this part of supporter page; figure out swap logic
remove unneeded view icon

make js work

how to handle overlong author/titles? Am using truncatewords; truncatechars is better but not available in my version of Django
	really want to limit the number of lines. but css with hidden overflow might be weird. show on hover?
	need these boxes to have fixed height anyway because it looks weird with status at different heights
*/

{% block topsection %}

<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 class="user-block1">
                            <div class="block-inner">
                            <a class="my-setting" href="#">My Settings</a>
                            </div>
                            </div>
                            {% endifequal %}
                            <div class="user-block2">
                                <img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="User avatar" title="User avatar" />
                                <span class="user-name"><a href="#">{{ supporter.username }}</a></span>
                                <span class="user-date">{{ date }}</span>
                                <span class="user-short-info">{{ supporter.profile.tagline }}</span>
                            </div>
                            <div class="user-block4">
                                <div class="social">
                                {% if supporter.profile.home_url %}
                               	<a href="{{ supporter.profile.home_url }}">
                               		<img src="/static/images/header/icon-home.png" alt="{{ supporter }}'s Homepage" title="{{ supporter }}'s Homepage"  />
                               	</a>
                                {% endif %}
                                <a href="#"><img src="/static/images/header/icon-facebook.png" alt="{{ supporter }}'s Facebook" title="{{ supporter }}'s Facebook"  /></a>
                                {% if supporter.profile.twitter_id %}
                                <a href="https://twitter.com/#!/{{ supporter.profile.twitter_id }}">
                                	<img src="/static/images/header/icon-twitter.png" alt="{{ supporter }}'s Twitter" title="{{ supporter }}'s Twitter"  />
                                </a>
                                {% endif %}
                                <a href="#"><img src="/static/images/header/icon-google.png" alt="google" title="google"  /></a>
                                <a href="#"><img src="/static/images/header/icon-group.png" alt="group" title="group"  /></a></div>
                            </div>
                            <div class="user-block3">
                                <div class="user-block">
                                <span class="rounded"><span class="blue">{{ backed }}</span></span>
                                <span class="rounded"><span class="orange">{{ backing }}</span></span>
                                <span class="rounded"><span class="grey">{{ wished }}</span></span>
                                </div>
                                <span class="user-status-title">I am ungluing</span>
                            </div>
                        </div>
						{% ifequal supporter request.user %}
                        <div class="user-block-hide">
						<form method="POST" action="">
							{% csrf_token %}
                            <div class="block block1">
                            <div class="block-inner">
                                <h3><a class="profile-edit" href="#">Your Tagline</a></h3>
									{{ profile_form.tagline }}

 									<input class="profile-save" type="submit" name="submit" value="Update" id="submit">
                            </div>
                            </div>
                            
                             <div class="block block2">
                                <h3 class="title">Links</h3>
                                <div class="check-list">
                                    <label>Your homepage URL:</label>
                                    {{ profile_form.home_url }}
                                </div>
                                <div class="check-list">
                                    <label>Your Twitter handle:</label>
                                    {{ profile_form.twitter_id }}
                                </div>
                            </div>
                            <div class="block block3">
                                <h3 class="title">Other Stuff</h3>
                                <div class="check-list">
                                    <label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
                                </div>
                                <div class="check-list">
                                    <input type="checkbox" />
                                    <label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
                                </div>
                            </div>
                               
 						</form>
                        </div>
                      {% endifequal %}
                    </div>
                </div>
            </div>
        </div>
       
    </div>
</div>

{% endblock %}

{% block content %}

    <div id="main-container">
    <div class="js-main">

{% include "explore.html" %}

        <div id="js-maincol-fr">
        <div class="js-maincol-inner">
            <div class="content-block">
                <div class="content-block-heading" id="tabs">
                    <ul class="tabs">
                        <li class="tabs1"><a href="#">Unglued</a></li>
                        <li class="tabs2"><a href="#">Being Unglued</a></li>
                        <li class="tabs3 active"><a href="#">Want to Unglue</a></li>
                    </ul>
    
                        <ul class="book-list-view">
                            <li>View As:</li>
                            <li class="view-list">
                                <a href="#view-list">
                                <img src="/static/images/booklist/view-list.png" align="view list" title="view list" height="21" width="24" />
                                </a>
                            </li>
                            <li class="view-list">
                                <a href="#view-icon">
                                <img src="/static/images/booklist/view-icon.png" align="view icon" title="view icon" height="22" width="22" />
                                </a>
                            </li>
                            <li class="view-list">
                            <a href="#view-icon-small">
                            <img src="/static/images/booklist/view-small-icon.png" align="view icon small" title="view icon small" height="22" width="22" />
                            </a>
                            </li>
                        </ul>
                </div>
                <div class="content-block-content">
                    {% ifequal wishlist.works.all.count 0 %}
                    {% ifequal request.user supporter %}
                    <div class="empty-wishlist">
                        Your wishlist is currently empty.<br><br>
                        Go ahead and <span class="bounce-search">find</span> some books to give to the world, and add them to your Wishlist!<br><br>
                        We double dog dare you...
                    </div>
                    {% else %}
                    <div class="empty-wishlist">
                        It looks like {{ supporter.username }} is just
                        getting started, and hasn't added anything to their
                        wishlist just yet.<br><br>
                        Nudge, nudge, say no more. 
                    {% endifequal %}
                    {% else %}
<div id="main-wrapper">
                    {% for work in wishlist.works.all %}
                       <!-- classify which tab depending on work.last_campaign_status -->
                       {% if work.last_campaign_status == 'SUCCESSFUL' %}
                            <div class="tabs tabs-1">
                       {% else %}{% if work.last_campaign_status == 'ACTIVE' %}
                            <div class="tabs tabs-2">
                       {% else %}
                            <div class="tabs tabs-3">
                       {% endif %}{% endif %}
  <div class="item_wrapper">
    <div class="panel_item">
      <div class="greenpanel">
        <div class="image">
          <img src="{{ work.cover_image_thumbnail }}" width="120" height="182"/> <b>{{ work.title|truncatewords:5 }}</b>
          <p>{{ work.author|truncatewords:3 }}</p>
          <p class="green"><b>Status:</b> {{ work.last_campaign_status }}</p>
          <div class="read">
            <img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" title="book list status" alt="book list status" />
            <p>100%</p>
            <p class="right_add"><img src="/static/images/book-panel/add_gray.png" border="0" /></p>
          </div>
          <span style="display: none; opacity: 0;">
		    <div class="greenpanel2">
				<div class="unglued_white"> <b>Unglued!</b>
				  <p>Sept 12 2011</p>
				  <p><b>Raised:</b> $12,000</p>
				</div> 
				<div class="read_itbutton"> <a href="#">Read it Now</a> </div>
                        {% ifequal supporter request.user %}
                        <div class="remove-wishlist">
                            <span id="{{ work.id }}">Remove from Wishlist</span>
                        </div>
                        {% else %}{% if work in shared_works %}
                        <div>
                            <span>On Your Wishlist!</span>
                        </div>
                        {% else %}{% if request.user.is_anonymous %}
                        <div class="create-account">
                            <span>Add to Wishlist</span>
                        </div>
                        {% else %}
                        <div class="add-wishlist">
                            <span id="{{ work.editions.all.0.googlebooks_id }}">Add to Wishlist</span>
                        </div>
                        {% endif %}{% endif %}{% endifequal %}

       			<div class="add_towish"> <a href="#">Add to Wishlist</a> </div>
				<div class="white_text"> <b><a href="#">{{ work.title }}</a></b>
				  <p><a href="#">{{ work.author }}</a></p>
				  <p><b>Status:</b> {{ work.last_campaign_status }}</p>
				</div>
				<div class="moreinfo"> <a href="#">More Info</a> </div>
		  </div>
          </span> </div>
      </div>
    </div>
  </div>
</div>
                    {% endfor %}
                    {% endifequal %}
                </div>
            </div>    
        </div>
        </div>
    </div>
    </div>

{% endblock %}