var bannerNavigationDiv = 'div#portfolionavigation';
var bannerWrapperDiv = 'div#portfolio';
var bannerDiv = 'div.portfolioblock';

var showPrevious = true;
var showNext = true;
var currentIndex = 0;

//autoslide options
var doAutoSlide = false;
var slideTime = 5000; // 5 secs
var myTimer;


//eerst alleen de eerste banner tonen.
$(document).ready(function() {   
  
  //the amount of banners we have
  var bannerAmount = $(bannerWrapperDiv+' > '+bannerDiv).length;
  
  //no use making anything with only 1 banner.
  if ( bannerAmount > 1 )
  {
    //show a previous button
    /*
		if ( showPrevious )
      $(bannerNavigationDiv).append('<a href="javascript:void(0);" onclick="javascript:previousBanner();" id="previous" class="bannerlink previous"></a>');
    */
    //make links for all banners
    /*
		$(bannerWrapperDiv+' > '+bannerDiv).each(function(i) { 
      $(bannerNavigationDiv).append('<a href="javascript:void(0);" onclick="javascript:showBanner('+i+', this);" id="bannerlink'+i+'" class="bannerlink">'+(i+1)+'</a>');    
    });
    */
    //show a next button
    if ( showNext )
      $(bannerNavigationDiv).append('<a href="javascript:void(0);" onclick="javascript:nextBanner();" id="next" class="bannerlink next"></a>');
  }
  //show first banner
  showBanner(currentIndex);
});
  
function showBanner(index)
{
	window.Status='showBanner('+index+')';
  currentIndex = index;
  $(bannerWrapperDiv+' > '+bannerDiv).each(function(i){ 
    if ( i == index )
    {
      $(this).fadeIn(1000);
      //no double active, remove it first. (in case of a 2nd click)      
      $('#bannerlink'+i).removeClass('active');
      $('#bannerlink'+i).addClass('active');      
    }
    else
    {
      //multi-click-bug prevention:
      //make it 100% visible, reset all opacity.
      $(this).fadeTo(0,1);
      //stop all current animations (stopping a running fadeIn)
      $(this).stop();
      //hide it
      $(this).hide();
      $('#bannerlink'+i).removeClass('active');
    }
  });
	//start/reset the slideshow
	activateSlideShow();
}

function previousBanner()
{
  currentIndex--;
  
  if ( currentIndex < 0 )
  {
    currentIndex = $(bannerWrapperDiv+' > '+bannerDiv).length -1;
  }
  
  showBanner(currentIndex);
}

function nextBanner()
{
  currentIndex++;
  
  if ( currentIndex == $(bannerWrapperDiv+' > '+bannerDiv).length )
  {
    currentIndex = 0;
  }
  
  showBanner(currentIndex);
}

// this function starts the autoslide of the banner, and resets the slides whenever the user clicks on anything.
// after a user click, the timer should reset any old running timers, and start a new one.
function activateSlideShow()
{
	window.Status='ActivateSlideShow('+doAutoSlide+' , '+slideTime+')';
	if ( doAutoSlide )
	{
		clearTimeout(myTimer);
		myTimer = setTimeout(nextBanner, slideTime);
	}
}