/**
     * Sets the modal contents and location, figuring out how to display the modal arrow.
     * @param e          event reference.
     * @param element    element the hover event is for.
     * @param product    product id.
     */
    function setModal(event, element, title, image, text)  
    {     
	$("#modal").show();
	var modal = $("#modal");
	var html_str = "";

	html_str = "<b>" + title + "</b><br/><img src=\"" + image + "\" width=\"225\"><p>" + text + "</p>";


	$("#modal_inner_content").html(html_str);
	
	// figure out the location of the modal and the modal arrow 
	var arrow_top_y_adjustment = -12;
	var arrow_middle_y_adjustment = -27;
	var arrow_bottom_y_adjustment = -40;
	var arrow_left_x_adjustment = -32; // half of the arrow icon size
	var arrow_right_x_adjustment = 329; // half of the arrow icon size + modal size
	var point_y = (element.offset().top + (element.height()/2));
	if (event.pageX === undefined) {
	    point_x = event.clientX;
	} else {
	    point_x = event.pageX;
	}
	
	var viewport_top = $(window).scrollTop();
	var viewport_bottom = viewport_top + $(window).height();
	var shadow = 10;
	var modal_top_from_center = (point_y - $("#modal").height() / 2);
	var modal_bottom_from_center = (point_y + $("#modal").height() / 2);
	var modal_top_from_bottom = (viewport_bottom - $("#modal").height() + shadow + 8);
	var modal_top_from_top = viewport_top - shadow;
	
	var arrow_class = "arrow_middle_left";
	var x_adjustment = arrow_left_x_adjustment;
	var y_adjustment = arrow_middle_y_adjustment;
	
	var side = "left";
	x_adjustment = arrow_left_x_adjustment;
	if (point_x < $(window).width()/2) {
	    side = "left";
	    x_adjustment = arrow_left_x_adjustment;
	    point_x += 40; // add a little space between cursor and modal arrow
	} else {
	    side = "right";
	    x_adjustment = arrow_right_x_adjustment;
	    point_x = element.offset().left;
	    point_x -= 380;
	}
	
	var modal_top = 0;
	if ((modal_top_from_center > (viewport_top + shadow)) && 
	    (modal_bottom_from_center < (viewport_bottom - shadow))) {
	    modal_top = modal_top_from_center;
	    arrow_class = "arrow_middle_" + side;
	    y_adjustment = arrow_middle_y_adjustment;
	} else if (modal_top_from_center <= (viewport_top + shadow)) {
	    modal_top = modal_top_from_top;
	    arrow_class = "arrow_top_" + side;
	    y_adjustment = arrow_top_y_adjustment;
	} else {
	    if (modal_top_from_bottom <= (viewport_top + shadow))  {
		modal_top = modal_top_from_top;         
		arrow_class = "arrow_top_" + side;
		y_adjustment = arrow_top_y_adjustment;
	    } else {
		modal_top = modal_top_from_bottom;         
		arrow_class = "arrow_bottom_" + side;
		y_adjustment = arrow_bottom_y_adjustment;
	    }
	}
	var modal_left = point_x;
	modal.offset({top: modal_top, left: point_x});
	$("#modal_arrow").show();
	$("#modal_arrow").attr("class","arrow " + arrow_class);
	$("#modal_arrow").offset({top: (point_y + y_adjustment), left: (point_x + x_adjustment)}); 
	
    }