updateProgress();

function PageRenderer() {

	this.render = render;
	this.update = update;
	this.setStepId = setStepId;
		
	var stepId = "";
	
	var loadedFiles = 0;
	var filesToLoad = 0;
		
	function setStepId(id) {
	    stepId = id;
	}
	
	function update() {
		var step = database.getStepById(stepId);
		var contents = step.getContents();
	    for (var i = 0; i < contents.length; i++) {
	    	contents[i].update();
	    }
	}
	
	// this function renders the page indicated by stepId
	function render() {
		var step = database.getStepById(stepId);
		var contents = step.getMediaContents(stepId);
		var preload = false; // preload does not work with firefox yet
		
		if (contents.length == 0 || !preload) {
			renderHTML();
		}
		else {
			preloadMedia(contents);
		}
	}
	
	function preloadMedia(contents) {
		filesToLoad = contents.length;
		loadedFiles = 0;
		var files = new Array();
		var fileLoaders = new Array();
		for (var i = 0; i < filesToLoad; i++) {
			fileLoaders[i] = utils.getFileLoader(true);
			fileLoaders[i].onreadystatechange = function() {
				if (fileLoaders[i].readyState == 4) {
					fileLoaded();
				}
			};
			try {
		    	fileLoaders[i].load(contents[i].value);
			}
			catch (e) {}
		}
		
	}
	
	
	function fileLoaded() {
		loadedFiles++;
		alert(loadedFiles + " of " + filesToLoad);
		if (loadedFiles == filesToLoad) {
			renderHTML();
			alert(loadedFiles);
		}
	}
	
	
	
	function renderHTML() {
	    var html = new StringBuffer();
	    var step = database.getStepById(stepId);
	    	    
		engine.setAudio(null);
		
		if (step.isAnExercise() && step.mixAnswers) {
			exercisemanager.mixAnswers(step);	
		}
		
	    var contents = step.getContents();
	    for (var i = 0; i < contents.length; i++) {
	    	html.append(contents[i].draw());
	    }
	    
	    contentlayer.innerHTML = html.toString();
			    
	    // step-background
	    var background = step.getBackground();
	    if (background) {
		    contentlayer.style.backgroundImage = "url(" + background.image + ")";
		    if (background.type == "Centered") {
		        contentlayer.style.backgroundPosition = "center";
		        contentlayer.style.backgroundRepeat = "repeat";
		    }
		    else if (background.type == "Tiled") {
		        contentlayer.style.backgroundPosition = "top left";
		        contentlayer.style.backgroundRepeat = "repeat";
		    }
		    
		}
		
	    update();
	    
		
	}
	
}