<?php
// this is a variable that will hold the JavaScript code created by the script below
$js = "";
 g
// create a wp object with posts
$rotatingPosts = new WP_Query();
$rotatingPosts->query('showposts=5&tag=Featured');
$count = 0;

// loop through each post and grab the data
while ($rotatingPosts->have_posts()) : $rotatingPosts->the_post();
   $title = $post->post_title;
   $teaser = $post->post_excerpt;
   $link = get_permalink();
   ob_start();
   echo wp_smart_image('type=url');
   $imagelink = ob_get_contents();
   ob_end_clean();
   $js .= "promos[".$count."] = new Array(4);\n";
   $js .= "promos[".$count."][0] = \"" . addslashes($title) . "\";\n";
   $js .= "promos[".$count."][1] = \"". addslashes($teaser) ."\";\n";
   $js .= "promos[".$count."][2] = \"". $link ."\";\n";
   $js .= "promos[".$count."][3] = \"". $imagelink ."\";\n";
   $count++;
endwhile;
?>

<!-- This is where the JavaScript array gets loaded -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/promoWidget.js"></script>
<script type="text/javascript">
var promos = new Array(5);
<?php echo $js; ?>
</script>
<!-- The HTML for the widget.  There are a lot of style references in here that come from skin.css, which also contains a lot of other style definitions
so probably the best bet would be to take out everything from skin.css that does not apply to this widget, or copy everything that does apply to this widget
into the theme CSS file and not use skin.css at all.  -->
<div id="promoWidget">
    <div id="photo"><img id="promoimg" src=""/></div>
    <div id="adContainer" style="height:220px;">
        <div id="title">Promos Go Here</div>
        <div id="teaser">&nbsp;Teaser goes in here</div>

    </div>

</div>

<div id="promonav">
        <span id="pager">Page <span id="page">1</span> of 5 &nbsp;</span>
        <div id="buttons">
            <a href="javascript:void(0);" onClick="loadPromo(getPromoIndex('down'), false);promoStop();"><img src="<?php bloginfo('template_directory'); ?>/images/promo_left_arrow.jpg" border="0"/></a>
            <a href="javascript:void(0);" onClick="promoStop();"><img src="<?php bloginfo('template_directory'); ?>/images/promo_pause.jpg" border="0"/></a>
            <a href="javascript:void(0);" onClick="loadPromo(getPromoIndex('up'), false);promoStop();"><img src="<?php bloginfo('template_directory'); ?>/images/promo_right_arrow.jpg" border="0"/></a>
        </div>
        <div id="readmore"><a id="link" href="">Read More</a></div>
    </div>

<script type="text/javascript">
promoCount = 0;
loadPromo(promoCount, true);
</script>