cast (chars/VAs) on anime view page

there isn't yet a views/anime/cast.html.php for non-JS, but the
controller is set up for it

controllers/AnimeController.php

@@ -5,7 +5,7 @@ namespace app\controllers;
 use app\models\Anime;
 
 class AnimeController extends \lithium\action\Controller {
-	public $publicActions = array('index', 'view');
+	public $publicActions = array('index', 'view', 'cast');
 
 	public function index()
 	{
@@ -34,6 +34,13 @@ class AnimeController extends \lithium\action\Controller {
 		{
 			return $this->redirect(array('controller' => 'search','q' => array('search' => $id)));
 		}
-	
+	}
+
+	public function cast($id = null)
+	{
+		if (is_numeric($id))
+		{
+			return Anime::search($id, null, 'special_id');
+		}
 	}
 }

views/anime/view.html.php

@@ -10,7 +10,7 @@ $this->styles($this->html->style('view'));
 <img src="<?=$anime->image ?>" alt="<?= $anime->title ?>">
 </aside>
 
-<section><p>
+<section id="info"><p>
 <?php if(isset($anime->foreign_titles)):
 	$str = 'Foreign titles:';
 	for ($i = 0; $i < count($anime->foreign_titles); $i++) {
@@ -44,12 +44,13 @@ Genres: <?php
 $str = '';
 for ($i = 0; $i < count($anime->genres); $i++) {
 	if ($i > 0) $str .= ',';
-	$str .= ' <a href="/producer/view/' . $anime->genres[$i] . '">' . $anime->genres[$i] . '</a>';
+	$str .= ' <a href="/genre/view/' . $anime->genres[$i] . '">' . $anime->genres[$i] . '</a>';
 } ?><?= $str ?><br>
 Duration: <?= $anime->episode_duration ?><br>
 Rating: <?= $anime->rated ?><br>
 Related: <?= $related ?>
-</p></section>
+</p>
+</section>
 
 <aside id="malstats">
 <h2>MAL Stats</h2>
@@ -61,27 +62,37 @@ Popularity: <?= $anime->mal_popularity ?><br>
 Members: <?= $anime->mal_score ?>
 </p>
 </aside>
-<br class="cl">
-
-<h2 class="ribbon">Synopsis</h2>
-<div class="triangle-ribbon"></div>
-<br class="cl">
-<p><?= $anime->synopsis ?></p>
 
-<h2 class="ribbon">Characters and VA's</h2>
-<div class="triangle-ribbon"></div>
-<br class="cl">
+<section id="cast">
+<p>
+<a href="/anime/cast/<?= $anime->special_id ?>" onclick="return toggleCast()">Cast &#x2193;</a>
+</p>
+<p><table>
 <?php foreach($anime->cast as $char): ?>
-<?= $char->character ?>
-<?= $char->role ?>
-Played by:
+	<tr>
+		<td colspan="3">
+			<?= $char->character ?>
+		</td>
+	</tr>
 	<?php if (isset($char->people)): ?>
 		<?php foreach($char->people as $actor): ?>
-		<?= $actor->name ?>
-		<?= $actor->language ?>
+			<tr>
+				<td></td>
+				<td><?= $actor->name ?></td>
+				<td><?= $actor->language ?></td>
+			</tr>
 		<?php endforeach; ?>
 	<?php endif; ?>
 <?php endforeach; ?>
-</div>
-<br class="cl"/>
-</div>
+</table></p>
+<p id="castlink">
+<a href="" onclick="return toggleCast()">Cast &#x2191;</a>
+</p>
+</section>
+
+<br class="cl">
+
+<h2 class="ribbon">Synopsis</h2>
+<div class="triangle-ribbon"></div>
+<br class="cl">
+<p><?= $anime->synopsis ?></p>

webroot/css/view.css

@@ -6,11 +6,38 @@ aside#img {
 	width: 225px;
 }
 
-section {
+section#info {
 	float: left;
 	width: 470px;
 }
 
+section#cast {
+	float: left;
+	width: 620px;
+}
+section#cast p {
+	margin: 0;
+}
+section#cast table {
+	table-layout: fixed;
+	display: none;
+}
+section#cast td {
+	padding: 3px;
+}
+section#cast td:nth-child(1) {
+	width: 60px;
+}
+section#cast td:nth-child(2) {
+	width: 250px;
+}
+section#cast td:nth-child(3) {
+	width: 200px;
+}
+section#cast #castlink {
+	display: none;
+}
+
 aside#malstats {
 	float: right;
 	width: 150px;

webroot/js/functions.js

@@ -10,8 +10,22 @@ jQuery(document).ready(function($) {
 	$('form [title]').tipsy({fade: true, trigger: 'focus', gravity: 'w'});
 
 	setTimeout(function() {
-		$(".flash-message").fadeOut("slow", function () {
-			$(".flash-message").remove();
+		$('.flash-message').fadeOut('slow', function () {
+			$('.flash-message').remove();
 		});
 	}, 2000);
 });
+
+function toggleCast() {
+	var table = $('#cast table');
+	if (table.css('display') == 'inline') {
+		table.css('display', 'none');
+		$('#cast > p > a').text('Cast ↓');
+		$('#castlink').css('display', 'none');
+	} else {
+		table.css('display', 'inline');
+		$('#cast > p > a').text('Cast ↑');
+		$('#castlink').css('display', 'inline');
+	}
+	return false;
+}