var state = 1; 

$(function() {
  $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    $(pager).find('img').removeClass('active')
      .filter('img:eq(' + (currSlideIndex + 1) + ')').addClass('active');
  };

  $('#slideshow').cycle({
    fx: 'fade',
    timeout: 7000, // milliseconds between slide transitions (0 to disable auto advance)
    speed:   3000, // speed of the transition (any valid fx speed value)
    pause: 1,
    pager: '#slideNav',
    pagerAnchorBuilder: function(idx, slide) {
        $('#controller').show();
        return '<img src="/images/pageindex/' + (idx + 1) + '.png" width="20" height="21" />'; 
    } 
   });

  $('#controller').click(function() {
    if (state == 1) {
      $('#slideshow').cycle('pause');
      state = 0;
      $('#controller').attr('alt','Play').attr('title', 'Play').attr('src', '/images/pageindex/play.png');
    }
    else {
      $('#').cycle('resume', true);
      state = 1;
      $('#controller').attr('alt', 'Pause').attr('title', 'Pause').attr('src', '/images/pageindex/pause.png');
    }
  }); 
});