// --- functions -- //
	
// this lets us add event listeners to elements 
// instead of using inline javascript
function addListener(element, type, callBack) {
	
	// for real browsers
	if(window.addEventListener)	{
		element.addEventListener(type, callBack, false);

	// for IE
	} else if(window.attachEvent) {
		element.attachEvent('on' + type, callBack);
	}

}

// this will change bgcolor and reveal hidden div
// assuming it is the first child of the button div
function show() {
	this.children[0].style.display = 'block';
}

// this will change bgcolor back and hide unhidden div
// assuming it is the first child of the button div
function hide() {
	this.children[0].style.display = 'none';
} 

// initialize: hide all the divs where class = hidden
// add mouseover and mouseout event listeners to button divs
function init() {

	// get array of all divs
	var divArray = document.getElementsByTagName('div'); 

	for (i=0;i<divArray.length;i++) {

		// set hidden divs to none
		if (divArray[i].getAttribute('class') === 'hidden_product') {
			divArray[i].style.display = 'none';
		}

		// add event listeners to button divs
		if (divArray[i].getAttribute('class') === 'slide') {
			addListener(divArray[i], 'mouseover', show);
			addListener(divArray[i], 'mouseout', hide);
		}

	}

} 

// let's get ready to rumble!
addListener(window, 'load', init);