/// <reference path="jquery-1.2.3-intellisense.js" /> 

var OuterDivId = 'outer';
var HelpDivId = 'helpDiv';
var ArrowDivId = 'helpArrow';

$(document).ready(function(){
 $('.tip').each(function(index, item) {
 var field = $('#' + (this.id));
 field.focus(function(){
 ShowHelpMessage(item.id);
 });
 
 field.blur(function(){
 HideHelpMessage(item.id);
 });
 });
});


function ShowHelpMessage(elementId) 
{
 var outer = $('#' + OuterDivId);
 if (outer.length == 0) 
 CreateHelpDiv();
 var element = $('#' + elementId);
 var divHelp = $('#' + HelpDivId);
 var divOuter = $('#' + OuterDivId);
 var divArrow = $('#' + ArrowDivId);

 var marginLeft = element.x() + element.width() + 10;
 var marginTop = element.y();
 
 if ($.browser.msie){ 
 marginLeft = marginLeft + 10;
 marginTop = marginTop + 15;
 }

 /*if ($.browser.msie){ 
 marginLeft = Position.cumulativeOffset(element)[0] + element.clientWidth + 10;
 marginTop = Position.cumulativeOffset(element)[1] - 15;
 }*/
 

 divHelp.addClass("helpBox");
 divArrow.addClass("helpArrow");
 
 divHelp.html(element.attr('title'));
 
 divOuter.css({
 left: (marginLeft + 'px'),
 top: (marginTop + 'px'),
 position: 'absolute'
 });

 divOuter.show();

 divArrow.css({
 height: (divHelp.height() + 10) + 'px'
 });
 
 /* divOuter.css({
 borderColor: "#ADC6D6 #ADC6D6 #ADC6D6 -moz-use-text-color"
 });*/
 
 element.addClass('focusedField'); 
}
 
function HideHelpMessage(elementId)
{
 var el = $('#' + HelpDivId)
 if (el){
 el.innerHTML = '';
 el.removeClass('helpBox');
 }
 
 var arrow = $('#' + ArrowDivId);
 
 if (arrow){
 arrow.html('');
 arrow.removeClass('helpArrow');
 }
 
 var element = $('#' + elementId);
 if (element != undefined){
 element.removeClass('focusedField');
 }

 var divOuter = $('#' + OuterDivId);
 if (divOuter) 
 divOuter.hide();
}

function CreateHelpDiv() 
{
 var divModFields = "<div id=" + HelpDivId + "></div>";
 var divArrow = "<div id=" + ArrowDivId + ">&nbsp;</div>";
 var divOuter = "<div Id=" + OuterDivId + ">" + divArrow + divModFields + "</div>";

 $(divOuter).css({
 'position': 'absolute', 
 'top': '15px', 
 'left': '10px', 
 'width': '260px'
 });

 $(divOuter).appendTo(document.body);
}