var bannerNavigationDiv = 'div#teasernavigation';
var bannerPageNavigationDiv = 'div#teaserpagenavigation';
var bannerWrapperDiv = 'div#teaser';
var bannerDiv = 'div.standaardcontent';

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

//autoslide options
var doAutoSlide = true;
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"><img src="/images/teaser-navigation-previous.png" alt="Vorige" /></a>');
    
		if ( showNumbers )
		{
			//make links for all banners
			$(bannerWrapperDiv+' > '+bannerDiv).each(function(i) { 
				$(bannerPageNavigationDiv).append('<a href="javascript:void(0);" onclick="javascript:showBanner('+i+', this);" id="teaserpage'+i+'" class="teaserpagebutton"></a>');    
			});
		}
    
    //show a next button
    if ( showNext )
      $(bannerNavigationDiv).append('<a href="javascript:void(0);" onclick="javascript:nextBanner();" id="next" class="bannerlink next"><img src="/images/teaser-navigation-next.png" alt="Volgende" /></a>');
  }
  //show first banner
	$(bannerWrapperDiv+' > '+bannerDiv).each(function(i)
	{
		$(this).hide();
	});
  showBanner(currentIndex, true);
});

function showBanner(index, hidefade)
{
  if($.browser.msie)
  {
    hidefade = true;
    
  }
	//window.Status='showBanner('+index+')';
  $(bannerWrapperDiv+' > '+bannerDiv).each(function(i)
	{ 
    if ( i == currentIndex )
    {
      //dat gaat dus buggen in IE, nu hebben we een echte cleartypefade!
			//$(this).ClearTypeFadeIn({ speed: 0 }); 
			
			//$(this).show();
      //stop all current animations (stopping a running fadeIn)
      $(this).stop();
      //hide it
			//$(this).hide();
			if ( !hidefade )
				$(this).fadeOut(500);
			else 
				$(this).hide();
      $('#teaserpage' + i ).removeClass( 'active' );
    }
  });
   $(bannerWrapperDiv+' > '+bannerDiv).each(function(i)
	{ 
    if ( i == index )
    {
			if ( !hidefade )
				$(this).fadeIn(500);
			else
				$(this).show();
      //no double active, remove it first. (in case of a 2nd click)      
      $('#teaserpage'+i).removeClass('active');
      $('#teaserpage'+i).addClass('active');      
    }
  });
	//start/reset the slideshow	
	currentIndex = index;
	activateSlideShow();
}

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

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

// 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);
	}
}





//------------------------------------------------------------------------------------------------------- 
// ClearTypeFadeTo / ClearTypeFadeIn / ClearTypeFadeOut 
// 
// Custom fade in and fade out functions for jQuery that will work around 
// IE's bug with bold text in elements that have opacity filters set when 
// also using Window's ClearType text rendering. 
// 
// New Parameter: 
// bgColor    The color to set the background if none specified in the CSS (default is '#fff') 
// 
// Examples: 
// $('div').ClearTypeFadeIn({ speed: 1500 }); 
// $('div').ClearTypeFadeIn({ speed: 1500, bgColor: '#ff6666', callback: myCallback }); 
// $('div').ClearTypeFadeOut({ speed: 1500, callback: function() { alert('Fade Out complete') } }); 
// 
// Notes on the interaction of ClearType with DXTransforms in IE7 
// http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx 
(function($) { 
    $.fn.ClearTypeFadeTo = function(options) { 
        if (options) 
                $(this) 
                        .show() 
                        .each(function() { 
                                if (jQuery.browser.msie) { 
                                        // Save the original background color 
                                        $(this).attr('oBgColor', $(this).css('background-color')); 
                                        // Set the bgColor so that bold text renders correctly (bug with IE/ClearType/bold text) 
                                        $(this).css({ 'background-color': (options.bgColor ? options.bgColor : '#fff') }) 
                                } 
                        }) 
                        .fadeTo(options.speed, options.opacity, function() { 
                                if (jQuery.browser.msie) { 
                                        // ClearType can only be turned back on if this is a full fade in or 
                                        // fade out. Partial opacity will still have the problem because the 
                                        // filter style must remain. So, in the latter case, we will leave the 
                                        // background color and 'filter' style in place. 
                                        if (options.opacity == 0 || options.opacity == 1) { 
                                                // Reset the background color if we saved it previously 
                                                $(this).css({ 'background-color': $(this).attr('oBgColor') }).removeAttr('oBgColor'); 
                                                // Remove the 'filter' style to restore ClearType functionality. 
                                                $(this).get(0).style.removeAttribute('filter'); 
                                        } 
                                } 
                                if (options.callback != undefined) options.callback(); 
                        }); 
    }; 
 
    $.fn.ClearTypeFadeIn = function(options) { 
        if (options) 
                $(this) 
                        .css({ opacity: 0 }) 
                        .ClearTypeFadeTo({ speed: options.speed, opacity: 1, callback: options.callback }); 
    }; 
 
    $.fn.ClearTypeFadeOut = function(options) { 
        if (options) 
                $(this) 
                        .css({ opacity: 1 }) 
                        .ClearTypeFadeTo({ speed: options.speed, opacity: 0, callback: options.callback }); 
    }; 
})(jQuery);