$(document).ready(function() {
  $('#home_photo_slider').cycle({
    fx:      'fade',
    speed:   'slow',
    timeout: 5000,
    after: changeImage,
    pager:  '.photo_slider_navigation',
    pagerAnchorBuilder: function(idx, slide) {
        // return selector string for existing anchor
        return '.photo_slider_navigation li:eq(' + idx + ') ';
    } 
  });

  $('.photo_slider_navigation li').click(function() {
    nextImage = $('#'+this.id+' a').html();
    manualOverride = true;
    $('#home_photo_slider').cycle('pause');
    changeImage(true);
    if (activateCycleAgain != null)
    {
      window.clearTimeout(activateCycleAgain);
    }
    activateCycleAgain = window.setTimeout("activateCycle()",10000)

  });

  //$('#pb1').progressBar();
});


var currentImage = 0; // vars used and managed by changeImage
var nextImage = 0; // vars used by changeImage, can be altered within your own code
var manualOverride = false; // when nextImage is altered, set this var to True
var activateCycleAgain = null; // here comes a pointer to a window.setTimeOut event

function activateCycle() {
  activateCycleAgain = null; // erase the event pointer
  manualOverride = false; // we are not in Manual Override modus anymore
  $('#home_photo_slider').cycle('resume'); // let the cycler do it's job again
}

function changeImage() {
  manual = false;
  if (arguments[0] == true) { manual = true; } // if we call this function with a parameter, we retrieve it with arguments[0]. the callback from the cycler can not add the parameters we want
  if (!(manual) && manualOverride) return false; // if the user has manually overridden the slide proces, ignore the callback from the cycler that was (maybe) in the queue... Oehh some high safe-fail-over technique
  if (currentImage > 0)
  {
    // set the old navigation back to it's normal state. You can also assign a class to it
    $('#photo_link'+currentImage+' div').css('background-color','#2b1760');
    $('#photo_link'+currentImage).css('border-color','#2b1760');
  }

  if (!manual) nextImage++; // if the cycler calls this function, manual is false and we advance to the next image

  if (nextImage > 4) nextImage = 1; // we can't advance to an image that doesn't exist
  $('#photo_link'+nextImage+' div').css('background-color','red');
  $('#photo_link'+nextImage).css('border-color','red');
  currentImage = nextImage; // all done, our currentImage is now the nextImage.
}