jQuery Cycle Plugin - Change Pager Anchors to Weekdays

Question

I want to create a menu that sorts by days. Everything works except the pager won't output weekdays. My code is as follows:

 var days = new Array("Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday" ); 
$('#main') 
.before('<div id="nav">') 
.cycle({ 
    fx:     'toss', 
    timeout: 0, 
    pager:  '#nav',
    options:    {
        pagerAnchorBuilder: function(i,el) {
            return '<a href="#">'+document.write(days[i+1])+'</a>';
        }
    }
});

It still defaults to numbers, however. Can someone point me in the right direction?

Answer 1

You have three errors. First, don't use document.write inline, second, you are nesting an extra options element. The whole thing passed to the cycle call are the options. Third, both idx and your array are zero indexed, so no need for the + 1 :

var days = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]; 
$('#main') 
  .before('<div id="nav">') 
  .cycle({ 
      fx:     'toss', 
      timeout: 0, 
      pager:  '#nav',
      pagerAnchorBuilder: function(i,el) {
          return '<a href="#">'+days[i]+'</a>';
      }
  });

Answer 2

I have another question that is along the same lines to this sort of.

How would you remove the numbers all together for the pager function and replace with css background images?