// Slide Show
$(function () {
    //<![CDATA[
    // holds preloaded images before they're added to the show
    var stack = [];

    // preload the images
    var temp = $('<div></div>').append(mainimageshtml);

    // add a second slide to the show to enable the slideshow
    temp.find('a:first').appendTo('.mainimagesliderwrap');

    temp.find('img').bind('load', function () {
        stack.push($(this).parent());
        // Make sure prev/next buttons are shown
        $('.mainimageprevbutton, .mainimagenextbutton').show();
    });

    temp.find('img').each(function () {
        var imgsrc = $(this).attr('src');
        $(this).attr('src', '');
        $(this).attr('src', imgsrc);
    });

    // add the pre/next overlays
    $('<a href="/our-work/view/196" class="mainimageprevbutton"><img style="width: 185px;" src="/images/blank.gif"></a><a href="/our-work/view/196" class="mainimagenextbutton"><img style="width: 185px;" src="/images/blank.gif"></a>').appendTo('.mainimagerelwrap');

    // Prevent prev/next buttons from getting focus
    $('.mainimageprevbutton, .mainimagenextbutton').focus(function () {
        this.blur();
    });

    $('.mainimagesliderwrap').cycle({
        timeout: 5000,
        prev: '.mainimageprevbutton',
        next: '.mainimagenextbutton',
        cleartype: false,
        before: onBefore,
        onPrevNextEvent: function () { $('.mainimagesliderwrap').cycle('pause'); }
    });

    // add images to slideshow 
    function onBefore(curr, next, opts) {
        if (opts.addSlide) // <-- important! 
            while (stack.length)
                opts.addSlide(stack.pop());
    };

    $('body').trigger('contentUpdated');
});