/**
 * Index/Landing page
 * 
 * The major function of this script is to run the product slideshow at the top
 * of the page. First a jQuery plugin is created (productRotator), then invoked.
 */

// Create productRotator plugin.
(function($) {

	$.fn.productRotator = function(images, options) {
		var el = $(this);
		var currentBanner = null;
		var currentProduct = null;
		var settings = {
			productLayer: false,
			fadeSpeed: 1000,
			delay: 1000,
			productX: 0,
			productY: 0,
			productDistance: 50
		};
		
		function getNextBanner() {
			var next = currentBanner ? currentBanner.nextAll('div.banner:first') : null;
			return (next && next.length) ? next : el.find('> div.banner:first');
		}
		
		function getNextProduct() {
			var next = currentProduct ? currentProduct.nextAll('img.product:first') : null;
			return (next && next.length) ? next : el.find('> img.product:first');		
		}
		
		function next() {
			var previous = currentBanner;
			if (previous) {
				previous.css({zIndex: 0});
			}
			currentBanner = getNextBanner().css({zIndex: 1}).fadeIn(settings.fadeSpeed, function() {
				if (previous) {
					previous.hide();
				}
			});
			
			if (settings.productLayer) {
				var showNextProduct = function() { currentProduct = getNextProduct().css({display: 'block', left: settings.productX + settings.productDistance, opacity: 0}).animate({left: settings.productX, opacity: 1}); };
			
				if (currentProduct) {
					currentProduct.animate({left: settings.productX - settings.productDistance, opacity: 0}, function() {
						currentProduct.hide();
						showNextProduct();
					});
				} else {
					showNextProduct();
				}
			}
			
		}
		
		function loop() {
			next();
			setTimeout(loop, settings.delay + settings.fadeSpeed);
		}
		
		function init() {
			if (options) {
				$.extend(settings, options);
			}
			el.css({position: 'relative'});
			
			for (var i = 0; i < images.length; i++) {
				$(document.createElement('div')).
					attr({
						'class': 'banner'
					}).
					css({
						position: 'absolute',
						display: 'none',
						width: el.innerWidth(),
						height: el.innerHeight(),
						backgroundImage: 'url("' + images[i][0] + '")',
						backgroundPosition: 'top left',
						backgroundRepeat: 'no-repeat'
					}).
					appendTo(el);
				
				if (settings.productLayer) {
					var img = $(document.createElement('img')).
						attr({
							'class': 'product',
							src: images[i][1]
						}).
						css({
							position: 'absolute',
							display: 'none',
							zIndex: 2,
							left: settings.productX,
							top: settings.productY
						}).
						appendTo(el);
				}
			}
			
			loop();
		}
		
		init();
		return this;
	}

})(jQuery);

if ($.browser.msie) {
	var images = [
		['/media/img/banners-ie/public-safety.jpg'],
		['/media/img/banners-ie/field-service.jpg'],
		['/media/img/banners-ie/point-of-sale.jpg'],
		['/media/img/banners-ie/supply-chain.jpg'],
		['/media/img/banners-ie/transactions.jpg'],
		['/media/img/banners-ie/logistics.jpg']
	];
} else {
	var images = [
		['/media/img/banners/public-safety.jpg', '/media/img/banner-printers/public-safety.png'],
		['/media/img/banners/field-service.jpg', '/media/img/banner-printers/field-service.png'],
		['/media/img/banners/point-of-sale.jpg', '/media/img/banner-printers/point-of-sale.png'],
		['/media/img/banners/supply-chain.jpg', '/media/img/banner-printers/supply-chain.png'],
		['/media/img/banners/transactions.jpg', '/media/img/banner-printers/transactions.png'],
		['/media/img/banners/logistics.jpg', '/media/img/banner-printers/logistics.png']
	];
}

	// Invoke the rotator.
	$('#banner').productRotator(images, {
		// IE doesn't support opacity changes on images with transparency, so disable the product overlay for it.
		productLayer: !$.browser.msie,
		delay: 4000,
		// Product positioning. Could move this to a css class.
		productX: 750 - 107,
		productY: 254 - 50
	});