$(document).ready(function() {

     // apply cycle
     $('#p1') 
       .before('<div class="dots clearfix">') 
       .cycle({ 
		  fx:     'fade', 
          timeout: 0, 
          pause:   0,
		  pager:  '.dots', 
		  next:   '.next', 
          prev:   '.prev' ,
		  before:onBefore
		  
     });
	 
	 // center dots
     function onBefore(curr, next, opts, fwd) {
		var width = (opts.slideCount*20)+20 ;
		$('.dots').css({ 'width' : width});
		
		// change height
		var index = opts.nextSlide;
        var $ht = $(this).height();
        $(this).parent().animate({height: $ht});
     }


});