if (!self.lox) self.lox = {}

/**
 * LOXAM Header Header
 * Not to be included manually. See LoxamHeader.php for usage. 
 * Requires mootools.
 *
 * @author Lennart Pegel <lep@justlep.net> 
 * @version $Revision: 1.4 $
 *          $Date: 2008/12/15 19:08:21 $
 */
lox.Header = {

	START_INDEX: 0,
	currentIndex: 0,
	div: {
		top: null,
		txt: null,
		bg: null
	},
	preloadFull: [],
	preloadOver: [],
	imagesToLoad: 0,
	firstRun: 1,

	/**
	 * To be loaded BEFORE DOM load, i.e. inline
	 */
	preInit: function() {
		if (!lox.config || !lox.config.images.length) return;
		this.currentIndex = (Date.parse(new Date())/1000) % lox.config.images.length;
		document.write('<style type="text/css">#keyvisual {background-image:url('+lox.config.imageURL+lox.config.images[this.currentIndex].filename+');}#keyvisual img {display:none}</style>');
		window.addEvent('load', function() {lox.Header.preload();});
	},

	/**
	 * Preloads the images and starts the animation app when finished.
	 */
	preload: function() {
		this.imagesToLoad = lox.config.images.length * 2;
		var loadCallback = function() {	
			if (! --lox.Header.imagesToLoad) lox.Header.init();
		};

		// add missing Array::push() function for IE5.0 
		if (![].push) {
			Array.prototype.push = function(elem) {this[this.length]=elem;};
		}

		// preload images..
		for (var i=0; i<lox.config.images.length; i++) {
			var img = new Image(),
				img2 = new Image();
			this.preloadFull.push(img);
			this.preloadOver.push(img2);
			$(img).addEvent('load', loadCallback);
			img.src = lox.config.imageURL + lox.config.images[i].filename;
			$(img2).addEvent('load', loadCallback);
			img2.src = lox.config.cacheURL + lox.config.images[i].overlay;
		}
	},

	/**
	 * Initializes the Header.
	 * Called onLoad by ::preload().
	 */
	init: function() {
		this.START_INDEX = this.currentIndex;

		var loxHead = document.createElement('div');
		loxHead.id = 'loxHead';
		loxHead.innerHTML = '<div id="lhTxt"></div><div></div>';
		this.div.bg = $('keyvisual');
		$(loxHead).inject(this.div.bg);

		this.div.txt = loxHead.childNodes[0];
		this.div.top = loxHead.childNodes[1];

		// overlay fade effect..
		this.div.txt.fadeFX = new Fx.Style(this.div.txt, 'opacity', {
				duration: lox.config.textFadeTime,
				onComplete: function(){lox.Header.timeNextImage()}
		});
		this.div.txt.fadeIn = function() {
			lox.Header.div.bg.style.backgroundImage = lox.Header.div.top.style.backgroundImage;
			lox.Header.div.top.fadeFX.set(0);
			lox.Header.div.txt.fadeFX.start(1);
		}

		// top div fade effect..
		this.div.top.fadeFX = new Fx.Style(this.div.top, 'opacity', {
				duration: lox.config.bannerFadeTime,
				onComplete: function() {
					var img = lox.config.images[lox.Header.currentIndex]
					lox.Header.div.txt.fadeFX.set(0);
					lox.Header.div.txt.setStyles({
						'background-image': 'url('+ lox.Header.preloadOver[lox.Header.currentIndex].src +')',
						left: img.x + 'px',
						top: img.y + 'px'
						//width: img.w + 'px',
						//height: img.h + 'px'
					});
					lox.Header.div.txt.title = img.text;
					// console.log('timing text-fade in %i ms', lox.config.preTextDelay);
					setTimeout(lox.Header.div.txt.fadeIn, lox.config.preTextDelay);
				}
		});
		this.div.top.fadeIn = function() {
			lox.Header.div.top.fadeFX.start(1);
		}
		
		this.div.top.style.backgroundImage = this.div.bg.style.backgroundImage;
		this.div.top.fadeIn();
	},

	/**
	 * Times the switch to the next image.
	 */
	timeNextImage: function() {
		this.currentIndex = (this.currentIndex+1) % lox.config.images.length;
		var delay = lox.config.nextBannerDelay + ((this.currentIndex==this.START_INDEX)? lox.config.extraReloopDelay : 0);
		if (this.firstRun) {
			delay += lox.config.extraFirstDelay;
			this.firstRun = 0;
		}
		this.div.top.style.backgroundImage = 'url('+ this.preloadFull[this.currentIndex].src +')';
		// console.log('timeNext -> %i', delay);
		setTimeout(this.div.top.fadeIn, delay);
	}

}


// inline call within <head/>
if (typeof MooTools != 'undefined' ) lox.Header.preInit();