function banner(){};
 banner.prototype = {
	init:function(bannerVarName, bannerWrapperDiv, bannerNavigationDiv)
	{
		this.bannerVarName = bannerVarName;
		this.bannerWrapperDiv = bannerWrapperDiv;
		this.bannerNavigationDiv = bannerNavigationDiv;
		this.bannerDiv = 'div.standaardcontent';

		this.showPrevious = true;
		this.showNext = true;
		this.showNumbers = false;
		this.currentIndex = 0;

		//autoslide options
		this.doAutoSlide = true;
		this.slideTime = 5000; // 5 secs
		this.fadeTime = 500;
		this.myTimer;
		
		//this.start();
	},
	
	start:function()
	{
		//the amount of banners we have
		var bannerAmount = $(this.bannerWrapperDiv+' > '+this.bannerDiv).length;
		
		//no use making anything with only 1 banner.
		if ( bannerAmount > 1 )
		{
			//show a previous button
			if ( this.showPrevious )
				$(this.bannerNavigationDiv).append('<a href="javascript:void(0);" onclick="javascript:'+this.bannerVarName+'.previousBanner();" id="previous" class="bannerlink previous"><img src="/images/icons/banner-previous.png" alt="Vorige" /></a>');
			
			if ( this.showNumbers )
			{
				//make links for all banners
				$(this.bannerWrapperDiv+' > '+this.bannerDiv).each(function(i) { 
					$(this.bannerNavigationDiv).append('<a href="javascript:void(0);" onclick="javascript:'+this.bannerVarName+'.showBanner('+i+', this);" id="bannerlink'+i+'" class="bannerlink">'+(i+1)+'</a>');    
				});
			}
			
			//show a next button
			if ( this.showNext )
				$(this.bannerNavigationDiv).append('<a href="javascript:void(0);" onclick="javascript:'+this.bannerVarName+'.nextBanner();" id="next" class="bannerlink next"><img src="/images/icons/banner-next.png" alt="Volgende" /></a>');
		}
		
		//show first banner
		this.showBanner(this.currentIndex, this.fadeTime);
	},
	
	previousBanner:function()
	{
		this.currentIndex--;
		
		if ( this.currentIndex < 0 )
		{
			this.currentIndex = $(this.bannerWrapperDiv+' > '+this.bannerDiv).length -1;
		}
		
		this.showBanner(this.currentIndex, this.fadeTime);
	},
	
	showBanner:function(index, fadeTime)
	{
		//window.Status='showBanner('+index+')';
		this.currentIndex = index;
		$(this.bannerWrapperDiv+' > '+this.bannerDiv).each(function(i){ 
			if ( i == index )
			{
				//no double active, remove it first. (in case of a 2nd click)      
				$('#bannerlink'+i).removeClass('active');
				$('#bannerlink'+i).addClass('active'); 
				$(this).hide();
				$(this).fadeIn(fadeTime);
			}
			else
			{
				//multi-click-bug prevention:
				//make it 100% visible, reset all opacity.
				
				//$(this).fadeTo(0,1);
				//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();
				$('#bannerlink'+i).removeClass('active');
			}
		});
		//start/reset the slideshow
		this.activateSlideShow();
	},
	
	nextBanner:function()
	{
		this.currentIndex++;
  
		if ( this.currentIndex == $(this.bannerWrapperDiv+' > '+this.bannerDiv).length )
		{
			this.currentIndex = 0;
		}
		
		this.showBanner(this.currentIndex, this.fadeTime);
	},
	
	// 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.
	activateSlideShow:function()
	{
		//window.Status='ActivateSlideShow('+doAutoSlide+' , '+slideTime+')';
		if ( this.doAutoSlide )
		{
			clearTimeout(this.myTimer);
			var context = this;
			this.myTimer = setTimeout(function(){context.nextBanner();}, this.slideTime);
		}
	}
	
};


var banner1;
var banner2;
$(document).ready(function() {   
	banner1 = new banner();
	banner1.init('banner1', 'div#banner', 'div#bannernavigation');
	banner1.start();
	
	banner2 = new banner();
	banner2.init('banner2', 'div#hoofdsponsor', '');
	banner2.showPrevious = false;
	banner2.showNext = false;
	banner2.slideTime = 7000;
	banner2.fadeTime = 1500;
	banner2.start();
});


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