// JavaScript Document

square = new Object();
square.backgroundImage = null;
square.title = null;

square.CreateSquare = function(backgroundImage, title){
	this.backgroundImage = backgroundImage;
	this.title = title;
	//alert(this.title);
	//this.writeSquare();
}
square.CreateSquare.prototype = {
	writeSquare:function(){
		this.squareString = "<div style=\"float:left;background-image:url(" + this.backgroundImage + ");background-repeat:no-repeat;width:122px;height:123px;border-right:1px solid #ffffff; border-bottom:1px solid #ffffff;\">";
		if(this.title != null && this.title != "null"){
			this.squareString += "<div style=\"color:#ffffff;font-size:16px;font-weight:bold;text-align:center;margin-top:45px;\">" + this.title + "</div>";
		}
		this.squareString += "</div>";
		
		return this.squareString;
	}
}


/**
* function renderPage collects all components of page and renders it
**/
function renderPage(){
	var contentContainer = document.getElementById("maincontents");
	var mainString = "";
	var contentArray = new Array();
	
	for(i = 0; i<squareArray.length;i++){
		contentArray[i] = new square.CreateSquare(squareArray[i][0], squareArray[i][1]);
		if(i == 8){
			mainString += "<div style=\"clear:both;\"></div>";	
		}
		mainString += contentArray[i].writeSquare();		
	}
	
	contentContainer.innerHTML = mainString;
	
}