$j=jQuery.noConflict();
$j(document).ready(function() {

    $j('.project').each(function() {

         // add pagination markup
         $j(this).find('.slideshow').before('\
         <div class="pager">\
               <img alt="Previous" src="/wp-content/themes/sandbox/images/left.gif" class="previous">\
               <div class="pages"></div>\
               <img alt="Previous" src="/wp-content/themes/sandbox/images/right.gif" class="next">\
             </div>\
         ');
         
        // objects for cycle plugin
        var previous = $j(this).find('img.previous');
        var next = $j(this).find('img.next');
        var pages =  $j(this).find('div.pages');

        $j(this).find('.slideshow').cycle({
            fx:     'fade', 
            speed:  'fast', 
            timeout: 0, 
            next:   next, 
            prev:   previous,
            pager: pages,
            pagerAnchorBuilder: paginate
        });
    });
    
    // mouseover and mouseout for pagination
    $j(function() {
        $j(".pager img")
            .mouseover(function() { 
                var src = $j(this).attr("src").replace(".gif", "_over.gif");
                $j(this).attr("src", src);
            })
            .mouseout(function() {
                var src = $j(this).attr("src").replace("_over.gif", ".gif");
                $j(this).attr("src", src);
            });
    });

});

function paginate(ind, el) {
    return "<img src='/wp-content/themes/sandbox/images/page.gif' />";
}