/**
 * Preloader constructor.
 * @param files array of file URIs to be loaded
 * @param statusContainer progress bar HTMLElement ID (should be in page DOM already)
 * @param onComplete method to run when all files are loaded
 * @return
 */
function Preloader(files, statusContainer, onComplete) {
	var that = this;
	this.onComplete = onComplete;
	this.statusContainer = statusContainer;
	/* this.getCache() = [{'imgObj': ..., 'origWidth': ..., 'origHeight': ...}] */
	this.cache = [];
	if (files == null || files.length == 0) {
		return null;
	}
	this.container = document.createElement('div');
	statusContainer.appendChild(this.container);
	this.container.style.visibility = 'hidden';
	if (IPHONE ||  IPAD) {
		//this.container.style.display = 'none';
	}
	for (var i = 0; i < files.length; i++) {
		var imgObj = MSIE ? new Image() : document.createElement('img');
		imgObj.src = files[i];
		var cacheObject = {'img': imgObj, 'origWidth': 0, 'origHeight': 0}; 
		this.cache.push(cacheObject);
		this.container.appendChild(imgObj);
	}
	this.opacity = 1;
	this.styleSelector = 'semitransparent';
	this.loaded = 0;
	if (!this.checkLoaded()) {
		this.interval = setInterval(function() { that.checkLoaded(); }, 20);
	}
}

Preloader.prototype.getCache = function() {
	return this.cache;
};

Preloader.prototype.getOpacity = function() {
	return this.opacity;
};

Preloader.prototype.setOpacity = function(pct) {
	this.opacity = pct;
};

Preloader.prototype.fadeOut = function() {
	var that = this;
	this.fadeInterval = setInterval(function() { that.lowerOpacity(); }, 10);
};

Preloader.prototype.lowerOpacity = function() {
	var pct = this.getOpacity(); 
	if (this.statusWrapper != null) {
		if (this.statusWrapper.style.opacity != null) {
			this.statusWrapper.style.opacity = pct;
		} else {
			this.statusWrapper.style.filter = 'alpha(opacity=' + Math.round(pct * 100) + ')';
		}
	}
	this.setOpacity(pct*0.9);
	if (pct <= 0.05) {
		clearInterval(this.fadeInterval);
		if (this.statusWrapper != null) {
			this.statusWrapper.style.display = 'none';
		}
		if (this.onComplete != null) {
			this.onComplete();
		}
	}
};

Preloader.prototype.checkLoaded = function() {
	var c = 0;
	for (var i = 0; i < this.cache.length; i++) {
		if (this.cache[i].img.complete == true || this.cache[i].img.complete == "complete") {
			c++;
			this.cache[i].origWidth = this.cache[i].img.width;
			this.cache[i].origHeight = this.cache[i].img.height;
		}
	}
	if (c > this.loaded) {
		this.loaded = c;
		var pct = ((c)/files.length)*100;
		this.statusCallback(pct);
	}
	if (c == files.length) {
		clearInterval(this.interval);
		this.container.style.display = 'none';
		this.fadeOut();
		return true;
	}
	return false;
};

Preloader.prototype.statusCallback = function(pct) {
	var width = 200;
	var height = 20;
	if (this.statusWrapper == null) {
		var statusWrapper = document.createElement('div');
		statusWrapper.style.width = width + 'px'; 
		statusWrapper.style.top = Math.round(document.body.clientHeight/2) + 'px';
		statusWrapper.style.left = Math.round(document.body.clientWidth/2 - width/2) + 'px';
		statusWrapper.style.border = '1px solid #007700';
		statusWrapper.style.height = height + 'px';
		this.statusWrapper = statusWrapper;
		statusWrapper.style.position = 'absolute';
		this.statusContainer.appendChild(statusWrapper);
		
		var statusText = document.createElement('div');
		statusText.style.width = (width - 8) + 'px';
		statusText.style.top = '4px';
		statusText.style.height = (height - 8) + 'px';
		statusText.style.left = '4px';
		statusText.style.textAlign = 'center';
		statusText.style.verticalAlign = 'middle';
		statusText.style.color = '#00dd00';
		statusText.style.backgroundColor = '#004400';
		statusText.style.position = 'absolute';
		statusText.style.fontSize = '9px';
		setElemOpacity(statusText, 0.6);
		this.statusText = statusText;
		
		var bar = document.createElement('div');
		this.statusBar = bar;
		bar.style.backgroundColor = "#00ff00";
		bar.style.color = "#007700";
		bar.style.height = (height - 4) + 'px';
		bar.style.position = 'absolute';
		bar.style.top = '2px';
		bar.style.left = '2px';
		
		statusWrapper.appendChild(bar);
		statusWrapper.appendChild(statusText);
	}
	this.statusBar.style.width = (Math.round(pct*width/100) - 4) + 'px';
	this.statusText.innerHTML = Math.round(pct) + "%";
};