jQuery(document).ready(function() {
   // var idx = Math.floor(Math.random()*(jQuery('#slides').children().length-1));

	jQuery('#slides').cycle({
        fx: 'fade',
		timeout: 40000,
		speed: 1000,
        before: onBefore,
        after: onAfter,
        pager: '#buttonbar .btngrp',
		pagerClick:onClick,
        pagerAnchorBuilder: function(idx, slide) {
            idxNUM = idx + 1;
            return '<div id="btn' + idxNUM + '" class="btnoff">' + idxNUM + '</div>';
        }
    });
	
	jQuery('#btn1').addClass('btnon');
});

function onBefore(param) {
	var idx = jQuery(this).attr('ID').replace(/slide/,'');
	jQuery('.btnon').removeClass('btnon');
	jQuery('#btn'+idx).addClass('btnon');	
	if (jQuery(this).height() > jQuery('#slides').height()) jQuery('#slides').height(jQuery(this).height()+20);
}

function onAfter(param) {
	if (jQuery(this).height() < jQuery('#slides').height()) jQuery('#slides').height(jQuery(this).height()+20);
		jQuery('#avances ul').height(jQuery(this).height()).css('overflow-y','scroll');
		jQuery('#avances').height('auto');	
}

function onClick(idx){
idxNUM = idx + 1;
	jQuery('#slides').height(jQuery('#slide'+idxNUM).height()+20);
		jQuery('#avances ul').height(jQuery('#slide'+idxNUM).height()).css('overflow-y','scroll');
		jQuery('#avances').height('auto');
	
	jQuery('#slides').cycle('stop');
	jQuery('#buttonbar .btngrp').html('');
	jQuery('#slides').cycle({
        fx: 'fade',
		timeout: 40000,
		speed: 1000,
        before: onBefore,
        after: onAfter,        
        pager: '#buttonbar .btngrp',
		startingSlide: idx,
		pagerClick:onClick,
        pagerAnchorBuilder: function(idx, slide) {
            idxNUM = idx + 1;
            return '<div id="btn' + idxNUM + '" class="btnoff">' + idxNUM + '</div>';
        }
    });
	
	idx++;
	jQuery('#btn'+idx).addClass('btnon');
}