bgimage -> Require

bgimage.js

/**
 *		JS module:
 *			bgimage.js
 *
 *		desc:
 *
 *
 *		requires:
 *			jQuery
 *			util
 *			mediator
 */

define(["jQuery", "util", "mediator"], function  ($, util, mediator) {

   "use strict";

	var _name = 'BgImage',
		_initialized = null,
		_debug_enable = true,
		debug = null,
		$backgrounds = null,
		_interval = null,
		_bg_advance_delay = 5 * 1000,
		_last_zindex = 1
	;

	function init() {

		if ( _initialized ) return false;

		debug = ( _debug_enable ) ? util.debug : function(){};

		debug( _name + ': Initialized.' );

		$backgrounds = $('ul.bg_container');

		if ($backgrounds.length < 1) return false;

		_initialized = true;

		_subscribe();
		_setup();

	}

	function _setup() {

		_load_img($backgrounds.find('.bg_image').first());

		setTimeout(function() {
			_advance_bg();
		}, 300);

		restart();

	}

	function restart() {

		clearInterval(_interval);
		_interval = setInterval( _advance_bg, _bg_advance_delay);

	}

	function _advance_bg() {

		var $active = $backgrounds.find('.bg_image.active'),
			$next_bg = null
		;

		if ($active.length < 1) {
			$backgrounds.find('.bg_image').last().addClass('active');
			$active = $backgrounds.find('.bg_image.active');
		}

		if ($active.next().length < 1) {
			$next_bg = $backgrounds.find('.bg_image').first();
		} else {
			$next_bg = $active.next();
		}

		if (!$next_bg.hasClass('initialized')) _load_img( $next_bg );

		$backgrounds.find('.bg_image').removeClass('active');

		$next_bg
			.stop()
			.addClass('active')
			.css({
				'opacity':0,
				'z-index' : _last_zindex + 1
			})
			.animate({
				'opacity' : 1
			},{
				'duration' : 1200,
				'easing' : 'easeInOutQuad'
			})
		;

		_last_zindex++;

		if ($next_bg.next().length > 0) {
			_load_img($next_bg.next());
		}

	}

	function _load_img( $bg ) {

		var bg_width = $backgrounds.width();

		if (bg_width < 600) bg_width = 600;

		$bg.addClass('initialized');
		$bg.css('background-image', 'url('+ $bg.data('src') +'?format='+ bg_width +'w)');

	}

	function _subscribe() {

		mediator.add( _name, function() {

			return {

				name: _name,

				onBgImageStart: function() {

					// debug( this.name + ": start." );

				},

				onLoadBgImage: function() {

					// debug( this.name + ": load bg image" );

				}

			};

		}());

	}

	return {
		init : init,
		restart : restart
	};

});