// position the colour blocks
var LEFT = 8 ;
var DOWN = -5 ;
var DOWNTEXT = 49 ;



function colourgroup (divId,material) {
	
	this.selcell = null ;
	this.material = null ;
	this.id = divId ;
	this.material = material ;
	
	this.div = document.getElementById(this.id);
	
	var me = this;
	
	this.cells = new Array();

	this.build = function (top,left) {
		for (var i=0; i<this.cells.length; i++) {
			var cell = this.cells[i] 
			cell.el.className = 'colourcell';
			cell.el.style.top = top+'px' ;
			cell.el.style.left = left+'px';
			cell.el.style.backgroundColor = cell.hexcode ;

			cell.label.className = 'label';
			cell.label.style.left = left + "px"
			cell.label.style.top = (top+DOWNTEXT)+"px";
			
			left += 20 ;
		}
	}

	this.addCell = function (id, colourCode, colourName ) {

		var el = document.createElement('div');
		el.id = id ;

		var label = document.createElement('div');
		label.id = id+'_text' ;
		label.appendChild(document.createTextNode(colourName));

		this.div.appendChild(el);
		this.div.appendChild(label);
		
		var cell = new colourcell( el, label, colourCode, colourName ) ;
		this.cells[this.cells.length] = cell ;

		// cell.addEventListener('click',doSomething,false)

		if (!el) cell = null ;
		el.onmouseover = function() { 
			if (me.selcell) me.selcell.labelOff();
			cell.colourOn(); 
			cell.labelOn(); 
		}
		el.onclick = function() {
			if (me.selcell) {
				me.selcell.colourOff(); 
				me.selcell.labelOff(); 
			}
			me.selcell = cell ;
			cell.colourOn(); 
			cell.labelOn(); 
			
			vmpColourAnim ( cell.hexcode, me.material )
		}
		el.onmouseout = function() { 
			cell.colourOff(); 
			cell.labelOff(); 
			if (me.selcell) {
				me.selcell.colourOn();
				me.selcell.labelOn();
			}
		};
	}

	
}


function colourcell(elCell, elLabel, colourCode, colourName ) {

	this.el = elCell ;
	this.id = elCell.id
	this.label = elLabel ;
	this.name = colourName ;
	this.hexcode = colourCode;
	// this.el =  document.getElementById(this.id);
	
	this.colourOn = function () {
	
		var top = parseInt(this.el.style.top) ;
		var left = parseInt(this.el.style.left) ;

		// cell is already highlighted, do not move it
		if ( this.el.className != 'colourcellOn' ) {
			left -= LEFT; top -= DOWN;
			this.el.style.left = left + "px"
			this.el.style.top = top + "px"
			this.el.className = 'colourcellOn'
		}
	}


	this.colourOff = function () {

		// reset currently highlighted cell to default position
		if ( this.el.className == 'colourcell' ) return ;
		this.el.className = 'colourcell'

		var top = parseInt(this.el.style.top) ;
		var left = parseInt(this.el.style.left) ;
		left += LEFT; top += DOWN;

		this.el.style.left = left + "px"
		this.el.style.top = top + "px"

	}

	this.labelOn = function () {
		if (this.label) this.label.style.display = 'block' 
	}

	this.labelOff = function () {
		if (this.label) this.label.style.display = 'none' 
	}
	
}