swap backstretch image when changing active div
<p>I'm using backstretch jQuery plugin <a href="http://srobbin.com/blog/jquery-plugins/jquery-backstretch/" rel="nofollow">http://srobbin.com/blog/jquery-plugins/jquery-backstretch/</a> to create full screen background images, but have a 1 page scrolling website and would like to change the background image depending on whichever content div is active.</p>

<p>There are multiple ways to scroll to each panel on the site, including directional buttons, clicking on the panel, and selecting link from nab menu, so would need to be able to call this function in different places.</p>

<p>Currently the site adds a class 'active' to whichever div has been selected for CSS styling, and then scrolls to that location. Effectively, I would need to change the path to $.backstretch("http://lchclearnetgraduates.com/newsite/wp-content/themes/lch_custom/images/LCH-city-1.jpg"); when the active panel changes. I would like to run a function along with that to swap the background image to specific path for some panels, else to select a random image from a small array when not one of the specific panels.</p>

<p>My instinct would be to use a switch statement, but need to request help.</p>

<p>This is the site in progress: <a href="http://lchclearnetgraduates.com/newsite/" rel="nofollow">http://lchclearnetgraduates.com/newsite/</a></p>

<p>It is a WordPress site and the panels are output dynamically, so I cannot hard code this is; it needs to work in relation the id and hash tags in the same way as the active panel selection is currently working.</p>

<p>My JS code, as it currently stands, is below. I'm not very competent with JS so I appreciate there are probably more efficient ways to arrange this code, but my current skill level with it limits me there.</p>

<p>Many thanks for any help you can offer.</p>

<pre><code>jQuery(function( $ ){ 
                $.easing.elasout = function (x, t, b, c, d) {
                    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
                };

                $.backstretch("http://lchclearnetgraduates.com/newsite/wp-content/themes/lch_custom/images/LCH-city-1.jpg");

                $('#content').scrollTo( 0 );
                $.scrollTo( 0 );

                $('.menu a').click(function(e){
                    e.preventDefault();
                    var link = e.target;
                    link.blur();
                    if( link.title )
                        $(this).parent().find('span.message').text(link.title);
                });

                // clicking from menu   
                $('.menu a').click(function(){
                        $target = $(this.hash); 
                    $.scrollTo( $target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');           
                    return false;
                });

                //clicking on a panel
                $('.panel').click(function(){
                        $target = $(this); 
                    $.scrollTo( $target, 1000, { easing:'elasout', offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                    $target.addClass('active');
                    return false;
                });

                // click on up button
                $('#verticals a.up').click(function(){
                    if ( $('div.panel.active').prev('div.panel').length){
                        $target = $('div.panel.active').prev();
                        $.scrollTo( $target, 500, {offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');
                        return false;
                    }
                    else {
                        return false;
                    }
                });

                // click on down button
                $('#verticals a.down').click(function(){
                    if ( $('div.panel.active').next('div.panel').length){
                        $target = $('div.panel.active').next();
                        $.scrollTo( $target, 500, {offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');
                        return false;
                    }
                    else {
                        return false;
                    }
                });

                // click on right button
                $('#horizontals a.right').click(function(){
                    if ( $('div.panel.active').parent().next('div.col').length){
                        $target = $('div.panel.active').parent().next('div.col').children('div:nth-child(1)');
                        $.scrollTo( $target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');
                        return false;
                    }
                    else {
                        return false;
                    }
                });

                // click on left button
                $('#horizontals a.left').click(function(){
                    if ( $('div.panel.active').parent().prev('div.col').length){
                        $target = $('div.panel.active').parent().prev('div.col').children('div:nth-child(1)');
                        $.scrollTo( $target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');
                        return false;
                    }
                    else {
                        return false;
                    }
                });

                $(document).ready(function(){

                    $('.menu li').hover(
                        function () {
                            $('ul', this).slideDown(200);
                            $('ul', this).parent().addClass('active');
                        }, 
                        function () {
                            $('ul', this).slideUp(200);
                            $('ul', this).parent().removeClass('active');      
                        }
                    );

                    $('.panel').tinyscrollbar();

                    $("#key-facts").fadeTransition();

                });

            });
</code></pre>
