/**
 * A basic image rotator. There's 2 methods for doing this - background image or image element
 *
 * For background images, simply call $('#DivContainer').rotateBanners({images: "#SelectorForImages img"});
 * with html such as
 *
 * <div id="LeaderBoard"></div><div id="LeaderImages"><img src=""/><img src="other" title="text to appear" /></div>,
 *
 * you would call
 *
 * $('#LeaderBoard').rotateBanners({images: '#LeaderImages img'});
 *
 * Alternatively, you could call
 *
 * $('#LeaderBoard').rotateBanners({images: '#LeaderImages img', rotateBackground: false});
 *
 * which will instead insert images directly into the HTML with a url pointing at whatever is in the 'title'
 * attribute
 *
 */
(function($) {
	$.fn.rotateBanners = function (options) {
		return this.each(function () {
			options = $.extend({rotateTime: 10000, rotateBackground: true}, options);
			var bannerImages = $(options.images);

			var currentImage = 0;

			var $this = $(this);

			var rotateFunc = function () {
				if (currentImage >= bannerImages.length) {
					currentImage = 0;
				}

				var transitionImage = bannerImages[currentImage];

				if (transitionImage != null) {
					if (bannerImages.length > 1)
					{
					$this
						.animate({'opacity': "0.0"}, 700, "linear", function() {
							// okay, if we're doing a background animation, just swap the background text
							if (options.rotateBackground) {
								$this.css('background-image', "url('"+transitionImage.src+"')");
								// if this is the homepage leaderboard, we also want to change the title text to be
								// that of the image's title text. Otherwise, we leave it as is
								$this.parent().find('h2').html(transitionImage.title);
							} else {
								// otherwise, we're swapping an image + url
								$this.empty();
								$this.html('<a target="_blank" href="'+transitionImage.title+'"><img src="'+transitionImage.src+'" /></a>');
							}
						})
						
						.animate({'opacity': "1.0"}, 700);
					}
					else
					{
					$this
						.animate({'opacity': "1.0"}, 0, "linear", function() {
							// okay, if we're doing a background animation, just swap the background text
							//if (options.rotateBackground) {
							//	$this.css('background-image', "url('"+transitionImage.src+"')");
								// if this is the homepage leaderboard, we also want to change the title text to be
								// that of the image's title text. Otherwise, we leave it as is
							//	$this.parent().find('h2').html(transitionImage.title);
							//} else {
								// otherwise, we're swapping an image + url
								$this.empty();
								$this.css('background-image', "url('"+transitionImage.src+"')");
								$this.html('<a target="_blank" href="'+transitionImage.title+'"><img src="/themes/gbc/images/1x1.gif" width="1024px" height="300px" /></a>');
							//}
						})
						.animate({'opacity': "1.0"}, 0);
				
					}
				}

				currentImage++;

			};

			rotateFunc();

			setInterval(rotateFunc, options.rotateTime);
		});
	}
})(jQuery);