properties.frames.board = 
{
	"tag":"div",
	"attributes":
	{
		"id":"frmBoard"
	},
	"styles":
	{
		"position":"absolute"
	}
};
function BoardFrame(id)
{
	this.frame = document.getElementById(id);
	var result = "";
    result += htmlGenerator.createTag(properties.images.backgroundImage);
    result += htmlGenerator.createImageArray("numberImages","images/jsconnect/0.png",properties.map.board.columns,properties.map.board.rows,0,0,properties.map.cell.width,properties.map.cell.height,true);
	result += htmlGenerator.createImageArray("verticalConnectorImages","images/jsconnect/blank.png",properties.map.board.columns,properties.map.board.rows-1,Math.floor((properties.map.cell.width - properties.map.connector.width)/2),properties.map.cell.height - Math.floor(properties.map.connector.height/2),properties.map.cell.width,properties.map.cell.height,false);
	result += htmlGenerator.createImageArray("horizontalConnectorImages","images/jsconnect/blank.png",properties.map.board.columns-1,properties.map.board.rows,properties.map.cell.width - Math.floor(properties.map.connector.width/2),Math.floor((properties.map.cell.height - properties.map.connector.height)/2),properties.map.cell.width,properties.map.cell.height,false);
	this.frame.innerHTML = result;
	this.backgroundImage = new BackgroundImage(properties.images.backgroundImage.attributes.id);
	this.update = function()
	{
		this.frame.style.width = String(properties.map.getWidth())+"px";
		this.frame.style.height= String(properties.map.getHeight())+"px";
		this.backgroundImage.update();
	}
}