var detailpage=0;

$(document).ready( function() {

  $('.pagelinks a').click( 
    function( evt ) { 
//	  $('#portfolio-detail-content').cycle('next');
      var pleaseshow = $(evt.target).attr('id').replace('pd-tdot-','').replace('pd-bdot-','');
	  pleaseshow-=1;
	  showImage( pleaseshow );
	  evt.preventDefault();
    }
  );

  // give the cursor the pointer finger thingie.
  // but only if there's mmore than one detail image.
  if ( $('.detail-image').length > 1 ) {
	$('.detail-image').css({cursor:'pointer',position:'absolute'});
  }

  $('.detail-image').click(
	function( evt ) {
		// get all the list of the detail images
		var pleaseshow = detailpage+1;
		return showImage( pleaseshow );
	});

  /*
	$('#portfolio-detail-content').cycle({
		fx: 'fade',
		timeout: 0,
		next: '.detail-image',
		before: flexHeight,
		pager:'#pagelinknums',
		activePagerClass:'active',
		
	});
	*/
});


function flexHeight(one,two,three){
		if ( two.height > 0 ) {
			$('#portfolio-detail-content').css({height:two.height+'px'});
		}
}

function showImage( showid ) {
		var images=$('.detail-image');
		if ( images.length <= 1 ) return false;
		if ( showid >= images.length ) { showid=0; }

		// highlight the correct page in the pages.
		var dotid = showid+1;
		$('.pagelinks a').removeClass('active');
		$('#pd-tdot-'+dotid).addClass('active');
		$('#pd-bdot-'+dotid).addClass('active');
		// handle the images.
		var newImg = images[showid];
		var oldImg = images[detailpage];
		$.scrollTo('#content', 500);
//		$(oldImg).fadeOut('fast', function() { $(newImg).fadeIn( 'fast'); });
		$(newImg).fadeIn('slow', function() { $(oldImg).fadeOut( 'slow'); var foo=$(newImg).height(); $('#portfolio-detail-content').css({height:foo+'px'}); });
		detailpage=showid;
		return true;
}