// JavaScript Document
var rangeButton;
var rangeMenu;
var expertButton;
var expertMenu;
var timeoutRangeID;
var timeoutExpertID;

window.addEvent('domready', function() {
	rangeButton = $(document.body).getElement('.range-expand');
	rangeMenu = $('products_drop');
	var pos = rangeButton.getPosition('wrapper_inner');
	rangeMenu.setPosition({x: pos.x, y: 27});
	rangeButton.addEvents({
			mouseover: enableRangeMenu,
			mouseout: disableRangeMenu
	});
	rangeMenu.addEvents({
			mouseover: enableRangeMenu,
			mouseout: disableRangeMenu
	});
	
	expertButton = $(document.body).getElement('.expertcare-expand');
	expertMenu = $('expert_drop');
	var pos = expertButton.getPosition('wrapper_inner');
	expertMenu.setPosition({x: pos.x, y: 27});
	expertButton.addEvents({
			mouseover: enableExpertMenu,
			mouseout: disableExpertMenu
	});
	expertMenu.addEvents({
			mouseover: enableExpertMenu,
			mouseout: disableExpertMenu
	});
	
	var myImage = Asset.image('/images/main/shared/50-percent-grey.png', {
			id: '50-percent-grey',
			title: '50-percent-grey'
	});
});

var enableRangeMenu = function() {
	rangeButton.addClass('grey_bg');
	rangeMenu.removeClass('hidden');
	clearTimeout(timeoutRangeID);
}

var disableRangeMenu = function() {
	timeoutRangeID = setTimeout("removeRangeMenu()", 100);
}

function removeRangeMenu () {
	rangeButton.removeClass('grey_bg');
	rangeMenu.addClass('hidden');
}

var enableExpertMenu = function() {
	expertButton.addClass('grey_bg');
	expertMenu.removeClass('hidden');
	clearTimeout(timeoutExpertID);
}

var disableExpertMenu = function() {
	timeoutExpertID = setTimeout("removeExpertMenu()", 100);
}

function removeExpertMenu () {
	expertButton.removeClass('grey_bg');
	expertMenu.addClass('hidden');
}