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 getPosX(e) {
  var mX;
  var Xoffset = 15;
  if (e.pageX) {
    mX = e.pageX;
  } else if (e.clientX) {
    mX = e.clientX + document.documentElement.scrollLeft;
  }
  var xPos = mX + Xoffset;
  return xPos;
}
function getPosY(e) {
  var mY;
  var Yoffset = 5;
  if (e.pageY) {
    mY = e.pageY;
  } else if (e.clientY) {
    mY = e.clientY + document.documentElement.scrollTop;
  }
  var yPos = mY + Yoffset;
  return yPos;
}

function generateLargeSwatch () {
	var swatch = document.createElement('dl');
	var swatchTitle = document.createElement('dt');
	var swatchDescription = document.createElement('dd');
	var swatchImage = document.createElement('img');
	swatchDescription.appendChild(document.createTextNode('Blah blah'));
		
	swatchTitle.appendChild(swatchImage);
	
	swatch.appendChild(swatchTitle);
	swatch.appendChild(swatchDescription)
	
	document.body.appendChild(swatch);
	
	swatch.id = 'enlarged-swatch';
	return swatch;
}

function applyRollOverEffects () {
	var largeSwatch = generateLargeSwatch();
	
	var swatches = getElementsByClass('swatch', document.getElementById('color-trend'));
	for (var i=0; i < swatches.length; i++) {
		var swatch = swatches[i];
		
		swatch.onmouseover = function () {
			largeSwatch.style.display = 'block';
			
			var imageLocation = this.getElementsByTagName('img')[0].getAttribute('src');
			largeSwatch.getElementsByTagName('img')[0].setAttribute('src', imageLocation);
			
			var name = this.getElementsByTagName('dd')[0].childNodes[0].nodeValue;
			largeSwatch.getElementsByTagName('dd')[0].childNodes[0].nodeValue = name;
			
		};
		
		swatch.onmousemove = function (e) {
			var ev = window.event ? window.event : e;
			largeSwatch.style.top = getPosY(ev) + 'px';
			largeSwatch.style.left = getPosX(ev) + 'px';
		};
		
		swatch.onmouseout = function () {
			largeSwatch.style.display = 'none';
		};
		
	};
}

addLoadEvent(applyRollOverEffects);