var slideshow;
var inners;
var mainslide_paused = false;

jQuery(document).ready(function(){
    // init and stop the inner slideshows
    inners = jQuery('.child-pages').cycle().cycle('stop');
    
    //this is the main slideshow
    slideshow = jQuery('#page-banner-ul').cycle({
        allowPagerClickBubble: true,
        slideExpr: '.parent-page',
        fx: 'fade',
        speed: '50',
        timeout: 0,
        pagerEvent: 'mouseover', 
        pager:  '#outside-tabs',
        pagerAnchorBuilder: function(idx, slide) { 
            var link = jQuery('#' + slide.id + ' h3 a').attr("href");
            return '<li class="parent-slides"><a href="' + link + '">' + slide.title + '</a></li>';
        },
        before: function(){
            inners = createSlide(jQuery(this));
        }
    });
    
    // for the main slider we want to make sure the children keep animating 
    // while we are hovered over
    jQuery('#outside-tabs li a').live('mouseover mouseout', function(event){
        slideshow.cycle('toggle');
        if(mainslide_paused)
        {
            mainslide_paused = false;
        }
        else
        {
            mainslide_paused = true;
        }
    });
    
    //here we toggle the slideshow when hovering over child pagers
    //we stop both the child and the parent
    jQuery('#inside-tabs li a').live('mouseover mouseout click', function(event){
        slideshow.cycle('toggle');
        inners.cycle('toggle');    
    });   
});

function createSlide(jthis)
{
    inners.cycle('stop');
    jQuery("#inside-tabs").html("");
    var slide = jthis.cycle({
        allowPagerClickBubble: true,
        slideExpr: 'li',
        fx: 'fade',
        timeout: 8000,
        autostop: true,
        pagerEvent: 'mouseover', 
        pager:  '#inside-tabs',
        pagerAnchorBuilder: function(idx, slide){
            var link = jQuery('#' + slide.id + ' h4 a').attr("href");
            return '<li class="child-slides"><a href="'+ link +'">' + slide.title + '</a></li>'; 
        },
        end: function(){
            // when inner slideshow ends, advance the outer slideshow
            // if the mainslide is paused we want to go back to beginning if the current slider
            if(!mainslide_paused)
            {
                slideshow.cycle('next');
            }
            else
            {
                inners = createSlide(jthis);
            }
        }
    });
    
    return slide;
}