/**
 * Use tweening to display banner images
 */
var bannerRotate = function(arrBanners) {
	var t;	// variable to store currently executing tween
	var currBanner = 1;
	var banners = arrBanners;

	// pre load images
	var images = [];
	for (var i=0; i < banners.length; i++) {
		images[i] = new Image();
		images[i].src = 'images/' + banners[i];
	}
	
	// handle clicking of thumbnail 1
	function _rotateBanner() {
		if (t) t.stop(); // stop animation if it's playing
		
		if (++currBanner >= banners.length) {
			currBanner = 0;
		}
		
		// after old image is removed, star new image
		var cont = document.getElementById('banner');
		cont.innerHTML = '<img class="nd" width="760" height="200" alt="Banner" src="images/' + banners[currBanner] + '">';
		
		// Bounce the new image in from the left
		cont.style.position = "relative";
		//t = new Tween(cont.style, 'left', Tween.elasticEaseOut, -50, 0, 1, 'px');
		t = new OpacityTween(cont, Tween.easeOut, 0, 100, 1);
		t.start();			
	}
	
	setInterval(_rotateBanner, 5000);
};

// we need our utils.js file for this function
registerOnLoad(function() {
	bannerRotate(banners);
}); // wait till DOM is ready