function hoverOn(element)
{
    if(
		(element.style.backgroundImage.length < 1)
		||
		(element.style.backgroundImage == 'none')
		)
	{
		if(element.id.match('right'))
		{
			element.style.backgroundImage = 'url(images/cc_main_bg_right_hover.jpg)';
		}
		else if(element.id.match('left'))
		{
			element.style.backgroundImage = 'url(images/cc_main_bg_left_hover.jpg)';
		}
	}
	element.delayedOffRunning = false;
}

function hoverOff(element)
{
    element.style.backgroundImage = 'none';
}
function attachHovers()
{
    idArrayLength = idNamesArr.length;
	for (var i=0; i<4; i++)
    {
        elName = getId(i);
		if(obj = document.getElementById(elName))
		{
            obj.attachEvent('onmouseover', hoverOnHandler)
            obj.attachEvent('onmouseout', hoverOffHandler)
        }
    }

}
function getId(i)
{
    if (i % 2 == 0) { side = 'left'; } else { side = 'right'; }
	elName = idNamesArr[i] + '-box-' + side;
	return elName;
}
function hoverOnHandler()
{
    var el = event.srcElement;
    el = findDiv(el);
    hoverOn(el);
}
function hoverOffHandler()
{
    var el = event.srcElement;
    
    el = findDiv(el);
    delayedHoverOff(el);
    
}

var delay = 100;

function delayedHoverOff(el)
{
    el.delayedOffRunning = true;

    setTimeout('reallyOff("' + el.id + '");', delay);
    
}
function reallyOff(objId)
{
    var el = document.getElementById(objId);
    if (el.delayedOffRunning)
    {
        hoverOff(el);
    }
}
function isDiv(el)
{
    for(i=0;i<idArrayLength;i++) {
		var id = getId(i);
		if (el.id && el.id == id)
		{
			return true;
		}
	}
	return false;
}
function findDiv(el)
{
    if (isDiv(el))
    {
        return el;
    }
    else 
    {
        return findDiv (el.parentElement);
    }

}

window.onload = attachHovers;