cinematic DOM

<?PHP
$js = <<<EOF
jQuery(document).ready(function()
{
    var app = false;
    $('ul.showcase').tri4m().app().ui().cinematic({
        loader : {color : '#3b75af'},
        bioscoop : 'bio',
        callback :
        {
            thumbs :
            {
                ready : function(list)
                {
                    if(app == true) return;
                    app = true;
                    var img = ['s5', 's6', 's7', 's8', 's9', 's10'], a = [];
                    for(var i in img)
                        a[i] = '/dev:localhost/lib/ddl:image:file/themes!localhost!'+ img[i] + '.jpg';

                    list.trigger('tri4m.app.cinematic.container.appendItems', [a]);
                };
            }
        }
    });

    $('li.ctrl a.prev').click(function()
    {
        $('ul.showcase').trigger('tri4m.app.cinematic.container.prevItem');
    });
    $('li.ctrl a.next').click(function()
    {
        $('ul.showcase').trigger('tri4m.app.cinematic.container.nextItem');
    });
});
EOF;

$this->get_SubController('bridge')->resource()->js()->add($js);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html version="XHTML+RDFa 1.0" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<?php echo $this->get_Factory()->get_Title(); ?>
<meta name="robots" content="index, follow" />
<?php echo $this->get_Factory()->get_Styles(); ?>
<?php echo $this->get_Factory()->get_Scripts(); ?>
<?php echo $this->get_Factory()->get_InlineStyles(); ?>
<?php echo $this->get_Factory()->get_InlineScripts(); ?>
    </head>
    <body class="localhost">
        <div class="display m">
            <ul class="nav">
                <li class="ctrl">
                    <a class="prev">prev</a>
                    <a class="next">next</a>
                </li>
            </ul>
            <div class="bio i w_10" id="bio"></div>
        </div>
        <div class="bottom">
            <ul class="showcase">
                <li><a href="/dev:localhost/lib/ddl:image:file/themes!localhost!i2.jpg"></a>foo</li>
                <li><a href="/dev:localhost/lib/ddl:image:file/themes!localhost!s1.jpg"></a></li>
                <li><a href="/dev:localhost/lib/ddl:image:file/themes!localhost!s2.jpg"></a></li>
                <li><a href="/dev:localhost/lib/ddl:image:file/themes!localhost!s3.jpg"></a></li>
                <li><a href="http://www.youtube-nocookie.com/embed/IDr3YyIq_dM"></a></li>
            </ul>
        </div>
    </body>
</html>