function Menu()
{	
	this.init();
}

Menu.prototype = 
{
	container: null,
	
	foregroundColor: null,
	backgroundColor: null,
	
	selector: null,
	save: null,
	clear: null,
	//about: null,
	
	init: function()
	{
		var option, space, separator, color_width = 15, color_height = 15;

		this.container = document.createElement("div");
		this.container.className = 'gui';
		this.container.style.position = 'absolute';
		this.container.style.top = '0px';
		
		this.foregroundColor = document.createElement("canvas");
		this.foregroundColor.style.marginBottom = '-3px';
		this.foregroundColor.style.cursor = 'pointer';
		this.foregroundColor.width = color_width;
		this.foregroundColor.height = color_height;
		this.container.appendChild(this.foregroundColor);
		
		this.setForegroundColor( COLOR );
		
		space = document.createTextNode(" ");
		this.container.appendChild(space);

		this.backgroundColor = document.createElement("canvas");
		this.backgroundColor.style.marginBottom = '-3px';
		this.backgroundColor.style.cursor = 'pointer';
		this.backgroundColor.width = color_width;
		this.backgroundColor.height = color_height;
		this.container.appendChild(this.backgroundColor);

		this.setBackgroundColor( BACKGROUND_COLOR );
		
		space = document.createTextNode(" ");
		this.container.appendChild(space);		
		
		this.selector = document.createElement("select");

		for (i = 0; i < BRUSHES.length; i++)
		{
			option = document.createElement("option");
			option.id = i;
			option.innerHTML = BRUSHES_NAME_EN[i].toUpperCase();
			this.selector.appendChild(option);

		}

		this.container.appendChild(this.selector);
		
		// XEU POINTSIZE
		this.pointsize = document.createElement("select");

		for (i = 1; i <= 10; i++)
		{
			option = document.createElement("option");
			option.id = i;
			option.innerHTML = i;
			this.pointsize.appendChild(option);

		}

		this.container.appendChild(this.pointsize);
		// / XEU
		
//		space = document.createElement(" ");
//		this.container.appendChild(space);
		
		//		
		this.centered = document.createElement("center");
		this.container.appendChild(this.centered);

		
		this.save = document.createElement("span"); //getElementById('save');
		this.save.className = 'button';
		this.save.innerHTML = 'Save';
		this.centered.appendChild(this.save);
		
		space = document.createTextNode(" ");
		this.centered.appendChild(space);
		
		this.clear = document.createElement("Clear");
		this.clear.className = 'button';
		this.clear.innerHTML = 'Start again';
		this.centered.appendChild(this.clear);
/*
		separator = document.createTextNode(" | ");
		this.container.appendChild(separator);

		
		this.about = document.createElement("About");
		this.about.className = 'button';
		this.about.innerHTML = 'About';
		this.container.appendChild(this.about);
		*/
	},
	
	setForegroundColor: function( color )
	{
		var context = this.foregroundColor.getContext("2d");
		context.fillStyle = 'rgb(' + color[0] + ', ' + color[1] +', ' + color[2] + ')';
		context.fillRect(0, 0, this.foregroundColor.width, this.foregroundColor.height);
		context.fillStyle = 'rgba(0, 0, 0, 0.1)';
		context.fillRect(0, 0, this.foregroundColor.width, 1);
	},
	
	setBackgroundColor: function( color )
	{
		var context = this.backgroundColor.getContext("2d");
		context.fillStyle = 'rgb(' + color[0] + ', ' + color[1] +', ' + color[2] + ')';
		context.fillRect(0, 0, this.backgroundColor.width, this.backgroundColor.height);
		context.fillStyle = 'rgba(0, 0, 0, 0.1)';
		context.fillRect(0, 0, this.backgroundColor.width, 1);		
	}
}