var sideBannerImageNames = new Array( {
	src : "screwAugerFallsGulfHagas.jpg",
	height : 559
}, {
	src : "lakesOfTheClouds.jpg",
	height : 559
}, {
	src : "autumnGorgeTrail.jpg",
	height : 559
}, {
	src : "rockTrail.jpg",
	height : 559
}, {
	src : "palmTree.jpg",
	height : 240
}, {
	src : "thirdVaultFalls.jpg",
	height : 559
}, {
	src : "birchTreeTrunk.jpg",
	height : 729
}, {
	src : "novaScotiaSunset.jpg",
	height : 559
});

var imageNamesIndex = 0;

function addDivGradient(newDiv, color) {

	var jImg = newDiv;
	var jDiv = null;
	var intStep = 0;
	var NUMSTEPS = 30;
	var STEPSIZE = 2;
	var delta = 1.0 / NUMSTEPS;

	if (color === "transparent" || color === null) {
		color = newDiv.parent().css("background-color");
		if (color === "transparent" || color === null) {
			color = "black";
		}
	}

	/*
	 * Make sure the div has its position relatively so that the gradient steps
	 * can be positioned absolutely within it.
	 */
	jImg.css("position", "relative").width(jImg.width()).height(jImg.height());

	for (intStep = 0; intStep <= NUMSTEPS; intStep++) {

		if (newDiv.hasClass("gradient2")) {

			// Create a fade level for the
			// top.
			jDiv = $("<div style='z-index: -1;'></div>");

			// Set the properties on the
			// fade level.
			jDiv.css( {
				backgroundColor : color,
				opacity : (1 - (intStep * delta)),
				top : ((intStep * STEPSIZE) + "px"),
				left : "0px",
				position : "absolute"
			}).width(jImg.width()).height(STEPSIZE);

			// Add the fade level to the
			// containing parent.
			jImg.append(jDiv);

		}

		// Create a fade level for the
		// bottom.
		jDiv = $("<div style='z-index: -1;'></div>");

		// Set the properties on the fade
		// level.
		jDiv.css( {
			backgroundColor : color,
			opacity : (1 - intStep * delta),
			bottom : ((intStep * STEPSIZE) + "px"),
			left : "0px",
			position : "absolute"
		}).width(jImg.width()).height(STEPSIZE);

		// Add the fade level to the
		// containing parent.
		jImg.append(jDiv);

	}
}

function addImage() {

	var image = sideBannerImageNames[imageNamesIndex];
	var fileName = image.src;

	var newDiv = $("<div class=\"gradient gradient2\"></div>");

	newDiv.css("background-image", "url('images/" + fileName + "')");
	newDiv.css("height", image.height);

	$("#sideBanner").append(newDiv);

	addDivGradient(newDiv, "black");

	// Update the index of the image to place next
	imageNamesIndex = (imageNamesIndex + 1) % sideBannerImageNames.length;

	return image.height;
}

function addImagesToSideBanner() {

	var totalHeight = 0;

	var cHeight = $("#content").height();

	$("#sideBanner > .gradient").each(function() {
		totalHeight = totalHeight += $(this).height();
	});

	if (totalHeight < cHeight) {
		while (totalHeight < cHeight) {
			totalHeight += addImage();
		}
	}
}

/*
 * Apply a white gradient to elements that are marked as being in the "gradient"
 * class.
 * 
 * This technique is based on code from
 * 
 * http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm
 * 
 */
$(document).ready(function() {

	var sideBanner = $("#sideBanner");
	var totalHeight = $(sideBanner).css("height");

	sideBanner.removeClass("repeatedLakes");

	sideBanner.addClass("gradient gradient2");
	
	addImagesToSideBanner();
});