var PaintConsole = new Class(
{
	initialize: function()
	{
		this.globals = {
			paint:{
				class:'paint',
				style:{
					'position':'absolute',
					'z-index':98,
					'background-color':'black',
					'width':'20px',
					'height':'20px',
					'-moz-border-radius':'20px',
					'-webkit-border-radius':'20px'
				}
			},
			canvas:{
				style:{
					'position':'absolute',
					'top':0,
					'left':0,
					'right':0,
					'z-index':97,
					'bottom':'50px',
		//			'background-color':'#ff0'
				}
			},
			toolbar:{
				id:'toolbar'
			},
			colorpanel:{
				id:'colorpanel'
			}
		};
			
		this.mode = 'off';
		this.canvas = new Element('div',{'styles':this.globals.canvas.style});
		this.paint = new Element('div',{'class':this.globals.paint.class,'styles':this.globals.paint.style});
		this.paintEvent = this.addPaint.bind(this);
		this.eraseEvent = this.erasePaint.bind(this);
		this.color = 'black';
		
		// TEST
		//this.setMode('paint');
	},
	toggleColorPanel: function()
	{
		if ($$('#colorpanel').getStyle('visibility') == 'visible') {
			$$('#colorpanel').setStyle('visibility', 'hidden');
		} else {
			$$('#colorpanel').setStyle('visibility', 'visible');
		}
	},
	toggleConsole: function()
	{
//		console.log('toggle console...');
		return (this.mode == 'off') ? this.setMode('paint') : this.setMode('off');
	},
	toggleErase: function()
	{
		if (this.mode == 'paint') {
			this.setMode('erase');
		} else if (this.mode == 'erase') {
			this.setMode('paint');
		}
	},
	addPaint: function(event)
	{
		event.stop();
		this.paint.set({'styles':{'top':event.client.y-12,'left':event.client.x-10}});
		this.canvas.adopt(this.paint.clone());
	},
	erasePaint: function(event)
	{
		$(event.target).dispose();
	},
	setColor: function(event)
	{
		var color = $(event.target).getStyle('background-color');
		$$('#colorpanel').setStyle('visibility', 'hidden');
		$$('#paintCan').setStyle('background-color', color);
		this.paint.setStyle('background-color', color);
		this.setMode('paint');
	},
	setMode: function(mode)
	{
		if(mode != this.mode) {
//			console.log('moving from current mode: '+this.mode);
			//	REMOVE OLD EVENTS
			switch(this.mode)
			{
				case 'paint':
//					console.log('deactivate paint mode...');
					this.canvas.removeEvent('mousedownmove',this.paintEvent);		
					$$('#colorpanel').setStyle('visibility', 'hidden');
					break;
				case 'erase':
//					console.log('deactivate erase mode...');
					$$('.paint').removeEvent('mouseover',this.eraseEvent);
					break;
				case 'off':
//					console.log('deactivate off mode...');
					$(document.body).setStyle('overflow','hidden');
					$(document.body).adopt(this.canvas);
					$$('#toolbar').setStyle('visibility', 'visible');
			};
//			console.log('moving to new mode: '+mode);
			switch(mode)
			{
				case 'paint':
//					console.log('activate paint mode...');
					this.canvas.addEvent('mousedownmove',this.paintEvent);
					$$('#paintTip').set('html', 'Paint Mode: Click and drag your mouse on the screen to paint.');
					break;
				case 'erase':
//					console.log('activate erase mode...');
					$$('.paint').addEvent('mouseover',this.eraseEvent);
					$$('#colorpanel').setStyle('visibility', 'hidden');
					$$('#paintTip').set('html', 'Erase Mode: Move your mouse over the paint to erase it.');
					break;
				case 'off':
//					console.log('activate off mode...');
					$$('#toolbar').setStyle('visibility', 'hidden');
					$(document.body).setStyle('overflow','auto');
					this.canvas.dispose();
					$$(this.globals.paint.class).dispose();
			};
			this.mode = mode;
		}
	},
});