Da Slide Prev e Next a slide con bullet

[Fabrizio Cannatelli]

Ciao a tutti,
mi hanno fornito uno script con slider cosi strutturato

<Prev (1/3) Next>

vorrei sostituire questo risultato con l'immagine dei tre pallini grey_bullet.png (cioè tanti quanti sono le immagini da scorrere)... e invece di cliccare su PROX o >, cliccare sull'immagine grey_bullet.png ... è complicato???

questo è codice.. nelle parti in rosso ho evidenziato la parte che secondo me andrebbe modificata..

Mi aiutate? Grazie mille!

CatGroupSlider = function(slider) {        
    this.allSlides = [];    
    this.currSlide = 0;
    this.lastIndex = 0;
    this.counterNode = null;    
    this.start(slider);    
};

CatGroupSlider.prototype.start = function(slider) {        
    var thisSlider = document.getElementById(slider);
    if(thisSlider == null) {
        return;
    }
    //Items are hidden of screen, allow hidden links to receive focus and show item.
    var itemLinks = thisSlider.getElementsByTagName("a");
    for (var il = 0; il < itemLinks.length; il++)
    {
        itemLinks[il].onfocus = this.focusListener;
        itemLinks[il].slideNumber = il;        
        itemLinks[il].mySlider = this;                        
    }            
        
    var allChildren = thisSlider.childNodes;    
    for (var i = 0, j = allChildren.length; i < j; i++) {
            if (allChildren[i].nodeType === 1) { //These are the slides, should be block level elements.
            CatGroupSlider.addClass(allChildren[i], CatGroupSlider.offScreenClass);
            this.allSlides[this.allSlides.length] = allChildren[i];                
        }
    }
    CatGroupSlider.removeClass(this.allSlides[this.currSlide], CatGroupSlider.offScreenClass);
    this.lastIndex = this.allSlides.length - 1;    
    
   [COLOR="#FF0000"] if(this.allSlides.length > 1) {
        //Create nav control.
        var counterTxt = document.createElement("span");
        counterTxt.className = "counterTxt";
        var counterNode = document.createTextNode(this.setCounterText());
        this.counterNode = counterNode;            
        counterTxt.appendChild(counterNode);            
            
        var prevBtn = document.createElement("a");
        prevBtn.innerHTML = "<span class='slidePrev'>&lt;</span> Prev";        
        prevBtn.setAttribute("href", "#");        
        prevBtn.className = "btnPrev";
        prevBtn.mySlider = this;            
        prevBtn.onclick = this.prev;        
                
        var nextBtn = document.createElement("a");
        nextBtn.innerHTML = "Next <span class='slideNext'>&gt;</span>";            
        nextBtn.setAttribute("href", "#");        
        nextBtn.className = "btnNext";
        nextBtn.mySlider = this;            
        nextBtn.onclick = this.next;        
                        
        var slideCtrl = document.createElement("DIV");        
        slideCtrl.appendChild(prevBtn);
        slideCtrl.appendChild(counterTxt);        
        slideCtrl.appendChild(nextBtn);        
        slideCtrl.className = "slideControls";
        thisSlider.parentNode.appendChild(slideCtrl);
    }
};[/COLOR]

CatGroupSlider.prototype.next = function() {    
    var thisSlider = this.mySlider;
    CatGroupSlider.addClass(thisSlider.allSlides[thisSlider.currSlide], CatGroupSlider.offScreenClass);
    if (thisSlider.currSlide < thisSlider.lastIndex) {            
            CatGroupSlider.removeClass(thisSlider.allSlides[++thisSlider.currSlide], CatGroupSlider.offScreenClass);
    } else {            
            thisSlider.currSlide = 0;            
            CatGroupSlider.removeClass(thisSlider.allSlides[0], CatGroupSlider.offScreenClass);
    }
    thisSlider.counterNode.nodeValue = thisSlider.setCounterText();
    return false;
};

CatGroupSlider.prototype.prev = function() {
    var thisSlider = this.mySlider;
    CatGroupSlider.addClass(thisSlider.allSlides[thisSlider.currSlide], CatGroupSlider.offScreenClass);
    if (thisSlider.currSlide > 0) {            
            CatGroupSlider.removeClass(thisSlider.allSlides[--thisSlider.currSlide], CatGroupSlider.offScreenClass);
    } else {            
            thisSlider.currSlide = thisSlider.lastIndex;
            CatGroupSlider.removeClass(thisSlider.allSlides[thisSlider.lastIndex], CatGroupSlider.offScreenClass);    
    }
    thisSlider.counterNode.nodeValue = thisSlider.setCounterText();
    return false;
};

CatGroupSlider.prototype.setCounterText = function() {    
    return " (" + (this.currSlide + 1) + " / " + (this.allSlides.length) + ") ";
};

//Make links within widget respond to tabbing.
CatGroupSlider.prototype.focusListener = function() {    
    //slideNumber should always be in range.
    if(this.slideNumber != this.mySlider.currSlide)    {
        CatGroupSlider.removeClass(this.mySlider.allSlides[this.slideNumber], CatGroupSlider.offScreenClass);
        CatGroupSlider.addClass(this.mySlider.allSlides[this.mySlider.currSlide], CatGroupSlider.offScreenClass);
        this.mySlider.currSlide = this.slideNumber;
        this.mySlider.counterNode.nodeValue = this.mySlider.setCounterText();    
    }
};

//Following two methods specific to this function for sake of speed, not for general use.
CatGroupSlider.addClass = function(theElement, theClassName) {    
  if(theElement.className === "") {
        theElement.className = theClassName;
    } else if (theElement.className.indexOf(theClassName) == -1) {
        theElement.className += " " + theClassName;    
    }
};

CatGroupSlider.removeClass = function(theElement, theClassName) {    
    var newClassName = theElement.className;
    theElement.className = newClassName.replace(theClassName, "").replace(/\s+$/g,"");  
};

CatGroupSlider.offScreenClass = "off-screen";