function getElementsByClass (searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}
function addLoadEvent (func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

function applyVisualTransformation () {
	// Step 1: apply visual transformation by adding a new class to pick up on 
	//         predefined css rules.
	var palette = cssQuery('#color-family dd.palette')[0];
	palette.className += ' dynamic-palette';
	
	
	// Step 2: Generate the DOM structure for the dynamic chip label:
	//	<p class="chip-name">
	//		<strong>Color:</strong> <span>9-26 Ivory Stuff</span>
	//	</p>
	var label = document.createElement('p');
	var colorLabel = document.createElement('strong');
	var chipName = document.createElement('span');
	var colorLabelText = document.createTextNode('Color:');
	var spaceText = document.createTextNode(' ');
	var labelText = document.createTextNode('');
	
	label.className = 'chip-name';
	label.appendChild(colorLabel);
	label.appendChild(spaceText);
	label.appendChild(chipName);
	colorLabel.appendChild(colorLabelText);
	chipName.appendChild(labelText);
	palette.appendChild(label);
	
	
	// Step 3: apply mouse-over effect to display the chip name.
	var chips = cssQuery('#color-family dl.family-group dd.chips dl.chip');
	for (var i=0; i < chips.length; i++) {
		var chip = chips[i];
		chip.onmouseover = function () {
			var name = this.getElementsByTagName('dd')[0].childNodes[0].nodeValue;
			labelText.nodeValue = name;
		};
		chip.onmouseout = function () {
			labelText.nodeValue = '';
		};
	};
}

addLoadEvent(applyVisualTransformation);