function registerEventDetailEventHandlers()
{

/* ------------------------- eventDetail begin -------------------------*/
/*
Each eventDetail has a description displayed when a mouseover happens with the color combo name.
The object below creates eventDetail objects
*/

		eventDetail = Class.create();
		eventDetail.prototype = {
				initialize: function(cw_id,offsetY) {
						this.eventDetailActivator	= $("eventDetailActivator_" + cw_id);
						this.eventDetailDescription	= $("eventDetailDescription_" + cw_id);
						this.offsetY			= offsetY || 0;

						Event.observe(this.eventDetailActivator, 'mouseover', this.displayEventDetailDescription.bindAsEventListener(this), false);
						Event.observe(this.eventDetailActivator, 'mouseout', this.hideEventDetailDescription.bindAsEventListener(this), false);

				},
		
				displayEventDetailDescription: function(event) {
						var descLeft	= Event.pointerX(event) + 25;
						var descTop	= Event.pointerY(event) - 50 + this.offsetY;

						this.eventDetailDescription.style.left			= descLeft + 'px';
						this.eventDetailDescription.style.top			= descTop + 'px';
//alert('Event.pointerX=' + Event.pointerX(event) + ', Event.pointerY=' + Event.pointerY(event) + ', descLeft=' + descLeft + ', descTop =' + descTop);
						this.eventDetailDescription.style.visibility		= "visible";
						this.eventDetailDescription.style.display		= "inline";

				},

				hideEventDetailDescription: function(event) {
						this.eventDetailDescription.style.visibility		= "hidden";
						this.eventDetailDescription.style.display		= "none";
				}
		};

/* 
	//Instantiate the eventDetail objects elsewhere like so:
	//1001 & 1002 are colorWay ids
		var cwItem1001	= new eventDetail('1001');
		var cwItem1002	= new eventDetail('1002');
*/
/* ------------------------- eventDetail end -------------------------*/

}