<div style="padding:15px 0 15px 20px; font-size: 14px;">
		BookGadget Found <b>${total }</b> Books, below are <b>${(page - 1) * 10 + 1}</b> - <b>${(page - 1) * 10 + bookList.length}</b>
	</div>
	{for book in bookList}
		<table width="100%">
			<tr>
			<td width="10"></td>
			<td width="130" valign="top" style="padding-right:10px; height:125px">
				<a class="book-detail-small" href="${book.link}" title="${book.name }" target="_blank">
					<img class="image120" src="${getImageByMax(book,120)}" alt="${book.name }" />
				</a>
			</td>
			<td valign="top">
				<div class="m">
					<a class="book-detail-small" href="${book.link}" title="${book.name }" target="_blank">${book.name }</a>
				</div>
				<p class="pl">
					${book.authors} / ${book.pubdate } / ${book.publisher} / ${book.formattedListPrice } / ${book.isbn10 }
				</p>
				<div style="padding:18px 0 0 0; margin-left:-5px">
					<span name="relation_${book.id }_2" onclick="setUserBookRelation('${book.id }',2);" class="act">I'm reading</span>
					<span name="relation_${book.id }_1" onclick="setUserBookRelation('${book.id }',1);" class="act">I've read it</span>
					<span name="relation_${book.id }_3" onclick="setUserBookRelation('${book.id }',3);" class="act">I want to read</span>
					<span name="relation_${book.id }_0" onclick="setUserBookRelation('${book.id }',0);" class="actFocus">X</span>
				</div>
			</td>
			</tr>
		</table>
		<p class="ul"></p>
	{/for}

<table style="margin:10px 0 0 10px">
		<tr>
			<td>
				<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=${focusUid }" target="_blank">
					<img style="border:1px solid #CCC" src="${person.getField('thumbnailUrl') }" height="35" />
				</a>
			</td>
			<td style="padding-left:10px">
				<b>${person.getDisplayName() }</b>
			</td>
			<td style="padding-left:20px">
				<a href="" onclick="showUserRelatedBooks(2, 1, ${focusUid }); return false;">Reading Recently (${readingTotal })</a> · 
				<a href="" onclick="showUserRelatedBooks(3, 1, ${focusUid }); return false;">Want To Read (${wishReadTotal })</a> · 
				<a href="" onclick="showUserRelatedBooks(1, 1, ${focusUid }); return false;">Already Read (${alreadyReadTotal })</a> 
			</td>
		</tr>
	</table>
	
	<h2>Reading Recently...</h2>
	{for book in readingList}
		<a class="book-detail" title="${book.name }" href="${book.link }"><img alt="${book.name }" class="climg" src="${getImageByWidth(book, 75)}" /></a>
	{forelse}
		<div class="hint">No books added. Search books at the top of the page, then click the red button "I'm reading", the book will been there.</div>
	{/for}

{if readingList.length > 6}
		<p class="pl" >> <a href="" onclick="showUserRelatedBooks(2, 1, ${focusUid }); return false;">Browse all books that you are reading recently (${readingTotal })</a></p>
	{/if}

<h2>Want To Read...</h2>
	{for book in wishReadList}
		<a class="book-detail" title="${book.name }" href="${book.link }" target="_blank"><img alt="${book.name }" class="climg" src="${getImageByWidth(book, 75)}" /></a>
	{forelse}
		<div class="hint">No books added. </div>
	{/for}

{if wishReadList.length > 6}
		<p class="pl" >> <a href="" onclick="showUserRelatedBooks(3, 1, ${focusUid }); return false;">Browse all books that you want to read (${wishReadTotal })</a></p>
	{/if}

<h2>Already Read...</h2>
	{for book in alreadyReadList}
		<a class="book-detail" title="${book.name }" href="${book.link }" target="_blank"><img alt="${book.name }" class="climg" src="${getImageByWidth(book, 75)}" /></a>
	{forelse}
		<div class="hint">No books added. </div>
	{/for}

{if alreadyReadList.length > 6}
		<p class="pl" >> <a href="" onclick="showUserRelatedBooks(1, 1, ${focusUid }); return false;">Browse all books that you have already read (${alreadyReadTotal })</a></p>
	{/if}

<h2>Your friends are reading recently...</h2>
	<div style="height:10px"></div>
	<table width="99%">
	<tr>
	{for book in readingList}
	<td>
		<table>
		<tr>
			<td align="center">
				<a href="" onclick="showUserBooks(${book.uid }); return false;">
					${jGadget.latinSubstr(jGadget.getPersonByUid(book.uid).getDisplayName(),15) }
				</a>
			</td>
		</tr>
		<tr>
			<td>
				<a class="book-detail" title="${book.name }" href="${book.link }">
					<img alt="${book.name }" class="border1px" src="${getImageByHeight(book, 100)}" /></a>
			</td>
		</tr>
		</table>
	</td>
	{forelse}
		<td>
			<div class="hint">
				No books added by your friends. Please 
				<a href="" onclick="inviteFriends(); return false;">invite your friends to use BookGadget</a>.
			</div>
		</td>
	{/for}
	</tr>
	</table>
	
	{if readingList.length > 6}
		<p class="pl" >> <a href="" onclick="showFriendsRelatedBooks(2, 1); return false;">See more...</a></p>
	{/if}

<h2>Your friends want to read...</h2>
	<div style="height:10px"></div>
	<table width="99%">
	<tr>
	{for book in wishReadList}
	<td>
		<table>
		<tr>
			<td align="center">
				<a href="" onclick="showUserBooks(${book.uid }); return false;">
					${jGadget.latinSubstr(jGadget.getPersonByUid(book.uid).getDisplayName(),15) }
				</a>				
			</td>
		</tr>
		<tr>
			<td>
				<a class="book-detail" title="${book.name }" href="${book.link }">
					<img alt="${book.name }" class="border1px" src="${getImageByHeight(book, 100)}" /></a>
			</td>
		</tr>
		</table>
	</td>
	{forelse}
		<td>
			<div class="hint">
				No books added by your friends. Please 
				<a href="" onclick="inviteFriends(); return false;">invite your friends to use BookGadget</a>.
			</div>
		</td>
	{/for}
	</tr>
	</table>
	
	{if wishReadList.length > 6}
		<p class="pl" >> <a href="" onclick="showFriendsRelatedBooks(3, 1); return false;">See more...</a></p>
	{/if}

<h2>Your friends already read...</h2>
	<div style="height:10px"></div>
	<table width="99%">
	<tr>
	{for book in alreadyReadList}
	<td>
		<table>
		<tr>
			<td align="center">
				<a href="" onclick="showUserBooks(${book.uid }); return false;">
					${jGadget.latinSubstr(jGadget.getPersonByUid(book.uid).getDisplayName(),15) }
				</a>				
			</td>
		</tr>
		<tr>
			<td>
				<a class="book-detail" title="${book.name }" href="${book.link }">
					<img alt="${book.name }" class="border1px" src="${getImageByHeight(book, 100)}" /></a>
			</td>
		</tr>
		</table>
	</td>
	{forelse}
		<td>
			<div class="hint">
				No books added by your friends. Please 
				<a href="" onclick="inviteFriends(); return false;">invite your friends to use BookGadget</a>.
			</div>
		</td>
	{/for}
	</tr>
	</table>
	
	{if alreadyReadList.length > 6}
		<p class="pl" >> <a href="" onclick="showFriendsRelatedBooks(1, 1); return false;">See more...</a></p>
	{/if}