//fixme: the images the preloader loads should be based partially on this


var themes = new Array();


function Theme (bg, fg, title) {

	this.title = title;
	this.background = bg;
	this.foreground = fg;

}


function Background (image, width, height, direction, speed) {
	this.image = image;
	this.width = width;
	this.height = height;
	this.direction = direction; //-1, 0, or 1
	this.speed = speed;
	this.getJS = getBackgroundJS;
}


function Foreground (image, height) {
	this.image = image;
	this.height = height;
	this.getHTML = getForegroundHTML;
}


function addTheme (bg, fg, title) {
	themes[themes.length] = new Theme(bg, fg, title);
}


function randomDirection () {
	if (Math.random() < .5) return -1;
	else return 1;
}


function randomTheme () {
	var index = Math.floor(Math.random() * themes.length);
	//alert("Using environment " + index);
	return themes[index];
}


function getForegroundHTML() {
	var html = "";
	html+= "<div id='foreground' style='position: absolute; padding: 0px; margin: 0px; z-index: 6; top: " + (480 - this.height) + "px; left: 0px; width: 100%; visibility: hidden;'>";
	html+= "<table width='100%' height='" + this.height + "' border='0' cellpadding='0' cellspacing='0'>";
	html+= "<tr><td background='" + this.image + "'></td></tr>";
	html+= "</table>";
	html+= "</div>";
	//alert(html);
	return html;
}


function getBackgroundJS () {
	var js =  "buildBackground('" + this.image + "'," + this.width + "," + this.height + "," + this.direction + ", " + this.speed + ", 'left: 0px; top: 0px; z-index: 1; position: absolute; padding: 0px; visibility: hidden;')";
	//alert(js);
	return js;
}


var sunny = new Background("images/sunny.jpg", 798, 480, randomDirection(), 50);
var stormy = new Background("images/stormy.jpg", 475, 480, randomDirection(), 50);
var cloudy = new Background("images/cloudy.jpg", 497, 480, randomDirection(), 50);
//var starry = new Background("images/starry.jpg", 478, 480, randomDirection(), 100);
var sunset = new Background("images/sunset.jpg", 700, 480, randomDirection(), 50);

var blank = new Foreground("images/spacer.gif", 1);
var pinetrees = new Foreground("images/treetops.gif", 105);
var mountains = new Foreground("images/mountains.gif", 84);
var buildings = new Foreground("images/buildings.gif", 100);

addTheme(sunny, pinetrees, "Calm forest");
addTheme(sunny, mountains, "Calm mountains");
addTheme(sunny, buildings, "Sunny cityscape");
addTheme(stormy, pinetrees, "Stormy woods");
addTheme(stormy, buildings, "Stormy city");
addTheme(sunset, pinetrees, "Sunset in the forest");
addTheme(sunset, mountains, "Sunset in the mountains");
addTheme(sunset, buildings, "Sunset in the city");
addTheme(cloudy, pinetrees, "Cloudy forest");
addTheme(cloudy, mountains, "Cloudy mountains");
addTheme(cloudy, buildings, "Cloudy city");




//addTheme(starry, blank, "font-weight: bold; font-family: Arial; font-size: 24pt; color: #ffffff", "font-weight: bold; font-family: Arial; font-size: 24pt; color: #ffffff");