Pannello dei contenuti in evidenza JQUERY

[Iron83]

Ciao ragazzi ho scaricato questo esempio all'interno di html.it.

Funziona tutto a dovere, l'unica cosa che volevo fare (in aggiunta) è inserire al posto delle solite thumbnails dei cerchi colorati per ogni foto, esempio:

Ho 3 foto, foto1 - foto2 - foto3. Quando effettuo il refresh della pagina lo script si posiziona sulla prima foto, quindi vorrei che il primo cerchio sia blu e gli altri due bianchi. Quando effettua lo spostamento alla seconda immagine il primo cerchio diventa bianco, il secondo blu, il terzo bianco. Quando sono nella terza foto il cerchio diventa blu, il secondo bianco, il primo bianco. Spero di essere stato chiaro

<script type="text/javascript">
    
        var theInt = null;
        var $crosslink, $navthumb;
        var curclicked = 0;
        
        theInterval = function(cur){
            clearInterval(theInt);
            
            if( typeof cur != 'undefined' )
                curclicked = cur;
            
            $crosslink.removeClass("active-thumb");
            $navthumb.eq(curclicked).parent().addClass("active-thumb");
                $(".stripNav ul li a").eq(curclicked).trigger('click');
            
            theInt = setInterval(function(){
                $crosslink.removeClass("active-thumb");
                $navthumb.eq(curclicked).parent().addClass("active-thumb");
                $(".stripNav ul li a").eq(curclicked).trigger('click');
                curclicked++;
                if( 6 == curclicked )
                    curclicked = 0;
                
            }, 3000);
        };
        
        $(function(){
            
            $("#main-photo-slider").codaSlider();
            
            $navthumb = $(".nav-thumb");
            $crosslink = $(".cross-link");
            
            $navthumb
            .click(function() {
                var $this = $(this);
                theInterval($this.parent().attr('href').slice(1) - 1);
                return false;
            });
            
            theInterval();
        });
</script>


<div id="page-wrap">                                        
        <div class="slider-wrap">
            <div id="main-photo-slider" class="csw">
                <div class="panelContainer">

                    <div class="panel" title="FOTO 1">
                        <div class="wrapper">
                            [img]immagini/foto1.png[/img]
                            <div class="photo-meta-data">
                                FOTO 1
                            </div>
                        </div>
                    </div>
                    <div class="panel" title="FOTO 2">
                        <div class="wrapper">
                            [img]immagini/foto2.png[/img]
                            <div class="photo-meta-data">
                                                               FOTO 2
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ul style="display: inline;">
                <li style="display: inline;">[url="#1"][img]immagini/sfera_bianca.png[/img][/url]
                <li style="display: inline;">[url="#2"][img]immagini/sfera_bianca.png[/img][/url]
            [/list]
        </div>
    </div>