
<?php

$img_root = '../../images/cincinnati/';

$dir = array_diff(scandir($img_root), array('..', '.'));

$images = '';
foreach ($dir as $key => $file_name) {
    if (strpos($file_name, '_thumb') === false) {
        continue;
    }
    
    $images .= <<<EOT
                <li style="width: 100px; height: 100px;"><img src="{$img_root}$file_name" style="width: 100px; height: 100px;"></li>\n
EOT;
}

$images2 = $images . <<<EOT
                <li style="width: 100px; height: 100px;">Place holder</li>\n
EOT;

echo <<<EOT
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>IsCircular</title>
    
    <style type="text/css">
        /*margin and padding on body element
          can introduce errors in determining
          element position and are not recommended;
          we turn them off as a foundation for YUI
          CSS treatments. */
        body {
            margin:0;
            padding:0;
        }
    </style>
    
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/carousel/assets/skins/sam/carousel.css" />
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/carousel/carousel-min.js"></script>
    
    
    <script>
    YAHOO.util.Event.onContentReady('container', function (e) {
        var myCarousel = new YAHOO.widget.Carousel('container', {
            isCircular: true,
            numVisible: 3 
        });
        myCarousel.render();
        myCarousel.show();
    });
    YAHOO.util.Event.onContentReady('container2', function (e) {
        var myCarousel2 = new YAHOO.widget.Carousel('container2', {
            isCircular: true,
            numVisible: 3 
        });
        myCarousel2.render();
        myCarousel2.show();
    });
    </script>
    
    <style>
    #content {
        width: 600px;
        margin: 0 auto;
    }
    </style>
    
</head>
<body class=" yui-skin-sam">
    <div id="content">
        <h1>IsCircular</h1>
        <div id="container">
            <ol id="carousel">
$images
            </ol>
        </div>
        <div id="container2">
            <ol id="carousel2">
$images2
            </ol>
        </div>
    </div>
</body>
</html>
EOT;
?>