var products = true;

cry_pos = new Array();
cry_pos[2] = new Array([6,211],[179,9]);
cry_pos[3] = new Array([10,239],[74,46],[287,13]);
cry_pos[4] = new Array([4,231],[26,90],[151,12],[307,17]);
cry_pos[5] = new Array([26,311],[5,164],[76,37],[221,10],[370,28]);
cry_pos[6] = new Array([28,313],[8,195],[37,77],[137,13],[263,9],[384,33]);

crystal = new Image();
crystal.src = 'images/crystal.png';
crystal_hover = new Image();
crystal_hover.src = 'images/crystal_hover.png';
panel = new Image();
panel.src = 'images/panel.png';

crystals = new Array();
titles = new Array();
texts = new Array();
panel = false;

function products_onload() {
	elems = document.getElementsByTagName('div');
	i = 0;
	j = 0;
	while (elems.item(i)) {
		if (elems.item(i).className == 'info_pair') {
			crystals[j] = elems.item(i);
			j++;
		}
		else if (elems.item(i).className == 'box' && !panel) {
			panel = document.createElement('div');
			panel.id = 'panel';
			panel.innerHTML = '<p class="center">Move your cursor over a button to view details...</p>';
			elems.item(i).appendChild(panel);
		}
		i++;
	}
	crystal_count = crystals.length;
	i = 0;
	while(i<crystal_count) {
		crystals[i].className = 'info_pair_holder';
		crystals[i].style.left = cry_pos[crystal_count][i][0] + 'px';
		crystals[i].style.top = cry_pos[crystal_count][i][1] + 'px';
		crystals[i].id = 'crystal_' + i;
		textelem = crystals[i].getElementsByTagName('div').item(0);
		texts[i] = textelem.innerHTML;
		titleelem = crystals[i].getElementsByTagName('h5').item(0);
		titles[i] = titleelem.innerHTML;
		crystals[i].onmouseover = function () {
			crystal_over(this);
		}
		i++;
	}
}

function crystal_over(elem) {
	i = 0;
	while(crystals[i]) {
		crystals[i].style.backgroundImage = 'url(' + crystal.src + ')';
		i++;
	}
	elem.style.backgroundImage = 'url(' + crystal_hover.src + ')';
	panel.innerHTML = '<h5>' + titles[elem.id.charAt(8)] + '</h5><p>' + texts[elem.id.charAt(8)] + '</p>';
}