if (typeof(AC) == 'undefined') { AC = {}; }

AC.backgroundSwap = Class.create();
Object.extend(AC.backgroundSwap.prototype, Event.Listener);
Object.extend(AC.backgroundSwap.prototype, {
	options: {
		initial: 0, // Index position of first image (changes if random == true)
		random: false, // Shuffle display order of images
		duration: 1, // Cross-fade transition time (in seconds)
		loadWait: .25, // Wait time before re-checking if image is loaded (in seconds)
		time: 5 // Time between crossfades (in seconds)
	},

	initialize: function(bgs, options) {
		// Clear timer while overlay is popped
		this.listenForEvent(AC.OverlayPanel.overlay, 'afterPop', false, function(e){window.clearTimeout(this._timer);}.bind(this));
		
		// Reset timer after overlay is closed
		this.listenForEvent(AC.OverlayPanel.overlay, 'afterClose', false, function(e){this._timer = this.swap.bind(this).delay(this.options.time);}.bind(this));

		this._i = 0;
		this._loaded = [];
		this._bgs = bgs;

		this.options._bottom = document.body;
		this.options._top = new Element('div',{'style':'width: 100%; background-position: 50% 0%; background-repeat: no-repeat; position: absolute; top: 0; left: 0; z-index: -1;','id':'background-swap'});
		this.options._loadStage = new Element('div',{'style':'width: 0; height: 0; position: absolute; top: 0; left: 0; overflow: hidden;','id':'background-load-stage'});

		if(!options) options = {};
		Object.extend(this.options,options);

		if(this.options.random) this._bgs = this.shuffle(this._bgs);
		this.setInit(this.options.initial);
		
		this.options._bottomheight = $('main')? $('main').cumulativeOffset()[1] + 300 : this.options._bottom.getHeight();
		this.options._top.setStyle({'height': this.options._bottomheight+'px'});

		// Inject divs into DOM
		this.options._bottom.insert({'top': this.options._loadStage});
		this.options._bottom.insert({'top': this.options._top});

		// Preload all images in bg swap array
		this._load();

		//Set initial timer
		this._timer = this.swap.bind(this).delay(this.options.time);
	},

	swap: function(){
		var i = this._i+1;
		if ((i == this._bgs.length) && AC.Detector.isIE()) this.skipLoadCheck = true;
		if (i >= this._bgs.length) i = 0;

		if(this._loaded[i].isLoaded || this.skipLoadCheck){
			this.options._top.setStyle({'backgroundImage':'url(\''+this._bgs[this._i]+'\')','display':'block'});

			this._i++; // set current index position plus one.
			if (this._i >= this._bgs.length) this._i = 0;

			this.options._bottom.setStyle({'backgroundImage':'url(\''+this._bgs[this._i]+'\')'});

			this.options._top.fade({ duration: this.options.duration });

			// Set timer for next fade
			this._timer = this.swap.bind(this).delay(this.options.time);
		} else {
			// Check if image is loaded every n seconds
			this._timer = this.swap.bind(this).delay(this.options.loadWait);
		}
	},

	shuffle: function(o){
		for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
		return o;
	},

	setInit: function(i){
		this.options._bottom.setStyle({'backgroundImage':'url(\''+this._bgs[i]+'\')'});
	},

	_load: function(){
		for (i=0; i<this._bgs.length; i++){
			this._loaded[i] = new Element('img',{'src':this._bgs[i]});
			this.options._loadStage.insert({'top': this._loaded[i]});

			this._loaded[i].observe('load', function(e){
				e.target.isLoaded = true;
				//try { console.log(e.target.getAttribute('src') + ' is loaded'); } catch(e){};
			}.bind(this));
		}
	}
});