var catName = 'All';
var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=5 //Customize y offset of tooltip

var offsetdivfrompointerX=-2 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=5 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).
//using document.write to display the tool tip. And set such that when user mouse over the area, set the display of the area to Block.
//We only generate the tip when user mouse over the object.
//but there will always be one tooltip area (dhtmltooltip), and everytime we will just add in the tool tip content 
document.write('<div id="dhtmltooltip" class="dhtmltooltip"></div>') //write out tooltip DIV
document.write('<iframe id="frametooltip" class="frametooltip"></iframe>') // fix show tooltip in ie6 browser ()
document.write('<img id="dhtmlpointer" src="images/pop.gif">') //write out pointer image

var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
{
    var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
    var frameobj=document.all? document.all["frametooltip"] : document.getElementById? document.getElementById("frametooltip") : ""
}

//var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""

function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

/***************************************
    created date: 07/09/2008
    last modified:07/09/2008
    user: LinhNM
    description: Set position of tooltip object
***************************************/
//check position to show tooltip, to make sure it display right next to the mouse area
function positiontip(e){
    if (enabletip)
    {
        var nondefaultpos=false
        var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
        var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
        //Find out how close the mouse is to the corner of the window
        var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20;
        var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20;

        var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX;
        var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY;

        var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000;

        //if the horizontal distance isn't enough to accomodate the width of the context menu
        if (rightedge<tipobj.offsetWidth)
        {
            //move the horizontal position of the menu to the left by it's width
            tipobj.style.left=curX-tipobj.offsetWidth+"px";
            frameobj.style.left=curX-tipobj.offsetWidth+"px";
            nondefaultpos=true;
        }   
        else if (curX<leftedge)
        {
            tipobj.style.left="5px";
            frameobj.style.left="5px";
        }
        else{
            //position the horizontal position of the menu where the mouse is positioned
            tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px";
            frameobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px";
            //pointerobj.style.left=curX+offsetfromcursorX+"px";
        }

        //same concept with the vertical position
        if (bottomedge<tipobj.offsetHeight)
        {
            tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px";
            frameobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px";
            nondefaultpos=true;
        }
        else{
            tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px";
            frameobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px";
            //pointerobj.style.top=curY+offsetfromcursorY+"px";
        }
        tipobj.style.visibility="visible";
        frameobj.style.visibility="visible";
//        if (!nondefaultpos)
//            pointerobj.style.visibility="visible";
//        else
//            pointerobj.style.visibility="hidden";
    }
}


/***************************************
    created date: 07/09/2008
    last modified:07/09/2008
    user: LinhNM
    description: Hide tooltip object when mouse out over object
***************************************/
function hideToolTip(){
    if (ns6||ie)
    {
        enabletip=false;
        tipobj.style.visibility="hidden";
        //pointerobj.style.visibility="hidden";
        tipobj.style.left="-1000px";
        tipobj.style.backgroundColor="";
        tipobj.style.width="";
        
        frameobj.style.visibility="hidden";
        frameobj.style.left="-1000px";
        frameobj.style.backgroundColor="";
        frameobj.style.width="";
    }
}

/***************************************
    created date: 07/09/2008
    last modified: 07/09/2008
    user: LinhNM
    description: Show tooltip when mouse move over facility
***************************************/
function showToolTipFacility(FacilityName,Area,Capacity,Description,OperatingHour){
    var theText = '<table cellpadding="1" cellspacing="1" class="cssTableTooltip">';

    theText +='<tr>';
    theText +='<td class="cssTooltipLeftFacility">';
    theText +='<asp:Label runat="Server" ID="Label61">Facility Name:</asp:Label>';
    theText +='</td>';
    theText +='<td class="cssTooltipRightFacility">';
    theText +='&nbsp;<asp:Label runat="Server" ID="Label101">' + FacilityName +'</asp:Label>';
    theText +='</td>';
    theText +='</tr>';
    
    theText +='<tr>';
    theText +='<td class="cssTooltipLeftFacility">';
    theText +='<asp:Label runat="Server" ID="Label61">Area:</asp:Label>';
    theText +='</td>';
    theText +='<td class="cssTooltipRightFacility">';
    theText +='&nbsp;<asp:Label runat="Server" ID="Label101">' + Area +'</asp:Label>';
    theText +='</td>';
    theText +='</tr>';
    
    theText +='<tr>';
    theText +='<td class="cssTooltipLeftFacility">';
    theText +='<asp:Label runat="Server" ID="Label61">Capacity:</asp:Label>';
    theText +='</td>';
    theText +='<td class="cssTooltipRightFacility">';
    theText +='&nbsp;<asp:Label runat="Server" ID="Label101">' + Capacity +'</asp:Label>';
    theText +='</td>';
    theText +='</tr>';
    
    theText +='<tr>';
    theText +='<td class="cssTooltipLeftFacility">';
    theText +='<asp:Label runat="Server" ID="Label61">Description:</asp:Label>';
    theText +='</td>';
    theText +='<td class="cssTooltipRightFacility">';
    theText +='&nbsp;<asp:Label runat="Server" ID="Label101">' + Description +'</asp:Label>';
    theText +='</td>';
    theText +='</tr>';
    
    theText +='<tr>';
    theText +='<td class="cssTooltipLeftFacility">';
    theText +='<asp:Label runat="Server" ID="Label61">Operating Hour:</asp:Label>';
    theText +='</td>';
    theText +='<td class="cssTooltipRightFacility">';
    theText +='&nbsp;<asp:Label runat="Server" ID="Label101">' + OperatingHour +'</asp:Label>';
    theText +='</td>';
    theText +='</tr>';
    
    theText +='</table>';
    
    // check broswer's version
    if (ns6||ie){
        tipobj.style.width="300px";
        tipobj.style.backgroundColor="#FF6600";
        tipobj.innerHTML=theText;
        
        frameobj.style.height=tipobj.offsetHeight;
        frameobj.style.width=tipobj.offsetWidth;
        
        enabletip=true;
        return false;
    }
}

/***************************************
    created date: 07/09/2008
    last modified: 07/09/2008
    user: LinhNM
    description: Show tooltip when mouse move over object
***************************************/
function showToolTip(iTooltip,StatusID,Date,Time,PrimaryUser,Email, Contact, BookingStatus,Organisation,UsageCategory,Purpose,Resources,Associative,FacilityName,StatusRemarks){
    var theText = '<table cellpadding="1" cellspacing="1" class="cssTableTooltip">';
    // status: 1
    if(iTooltip==1)
    {
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label61">Slot Status:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label101">' + getStatusName(StatusID) +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
        
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label61">Status Remarks:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label101">' + StatusRemarks +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
    }
    // status: 0
    else if (iTooltip==0) 
    {
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label61">Slot Status:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label101">' + getStatusName(StatusID) +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
        
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label61">Date:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label101">' + Date +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
        
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label62">Time:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label102">'+ Time +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
        
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label61">Facility:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label101">' + FacilityName +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
    }
    else
    {
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label61">Slot Status:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label101">' + getStatusName(StatusID) +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
        
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label61">Date:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label101">' + Date +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
        
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label62">Time:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label102">'+ Time +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
        
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label63">Primary user:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label103">'+ PrimaryUser +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
        
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label64">Email:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label104">'+ Email +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
        
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label64">Contact No.:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label104">'+ Contact +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
            
        theText +='<tr>';
        theText +='<td class="cssTooltipLeft">';
        theText +='<asp:Label runat="Server" ID="Label66">Org Unit:</asp:Label>';
        theText +='</td>';
        theText +='<td class="cssTooltipRight">';
        theText +='&nbsp;<asp:Label runat="Server" ID="Label106">'+ Organisation +'</asp:Label>';
        theText +='</td>';
        theText +='</tr>';
        
        // other status
        if(iTooltip==3) 
        {
            theText +='<tr>';
            theText +='<td class="cssTooltipLeft">';
            theText +='<asp:Label runat="Server" ID="Label68">Usage:</asp:Label>';
            theText +='</td>';
            theText +='<td class="cssTooltipRight">';
            theText +='&nbsp;<asp:Label runat="Server" ID="Label108">'+ UsageCategory +'</asp:Label>';
            theText +='</td>';
            theText +='</tr>';
            
            theText +='<tr>';
            theText +='<td class="cssTooltipLeft">';
            theText +='<asp:Label runat="Server" ID="Label69">Purpose:</asp:Label>';
            theText +='</td>';
            theText +='<td class="cssTooltipRight">';
            theText +='&nbsp;<asp:Label runat="Server" ID="Label109">'+ Purpose +'</asp:Label>';
            theText +='</td>';
            theText +='</tr>';
            
            theText +='<tr>';
            theText +='<td class="cssTooltipLeft">';
            theText +='<asp:Label runat="Server" ID="Label69">Booking Status:</asp:Label>';
            theText +='</td>';
            theText +='<td class="cssTooltipRight">';
            theText +='&nbsp;<asp:Label runat="Server" ID="Label109">'+ BookingStatus +'</asp:Label>';
            theText +='</td>';
            theText +='</tr>';
        }
        // status equal 2 or 3
        else 
        {
            theText +='<tr>';
            theText +='<td class="cssTooltipLeft">';
            theText +='<asp:Label runat="Server" ID="Label68">Booking Status:</asp:Label>';
            theText +='</td>';
            theText +='<td class="cssTooltipRight">';
            theText +='&nbsp;<asp:Label runat="Server" ID="Label108">'+ BookingStatus +'</asp:Label>';
            theText +='</td>';
            theText +='</tr>';
            
            theText +='<tr>';
            theText +='<td class="cssTooltipLeft">';
            theText +='<asp:Label runat="Server" ID="Label66">Resources:</asp:Label>';
            theText +='</td>';
            theText +='<td class="cssTooltipRight">';
            theText +='&nbsp;<asp:Label runat="Server" ID="Label106">'+ Resources +'</asp:Label>';
            theText +='</td>';
            theText +='</tr>';
            
            theText +='<tr>';
            theText +='<td class="cssTooltipLeft">';
            theText +='<asp:Label runat="Server" ID="Label67">Associative:</asp:Label>';
            theText +='</td>';
            theText +='<td class="cssTooltipRight">';
            theText +='&nbsp;<asp:Label runat="Server" ID="Label107">'+ Associative +'</asp:Label>';
            theText +='</td>';
            theText +='</tr>';
            
            theText +='<tr>';
            theText +='<td class="cssTooltipLeft">';
            theText +='<asp:Label runat="Server" ID="Label67">Facility:</asp:Label>';
            theText +='</td>';
            theText +='<td class="cssTooltipRight">';
            theText +='&nbsp;<asp:Label runat="Server" ID="Label107">'+ FacilityName +'</asp:Label>';
            theText +='</td>';
            theText +='</tr>';
        }
    }
    theText +='</table>';
    
    // check browser's version
    if (ns6||ie){
        tipobj.style.width="220px";
        tipobj.style.backgroundColor="#FF6600";
        //We set innerHTML of the tip, so that it will display in correct HTML format
        tipobj.innerHTML=theText;
        
        frameobj.style.height=tipobj.offsetHeight;
        frameobj.style.width=tipobj.offsetWidth;
        
        //enable tip so that user mouse over tool tip will appear
        enabletip=true;
        return false;
    }
}

// set style sheet for each status
function getStatusName(iStatusID)
{
    var strStatus ="";
    switch(iStatusID)
    {
        case "0": strStatus = "Available"; break;
        case "1": strStatus = "Viewable"; break;
        case "2": strStatus = "New Booking Confirmed"; break;
        case "3": strStatus = "New Booking Reserved"; break;
        case "4": strStatus = "Cancelling"; break;
        case "5": strStatus = "Closed"; break;
        case "6": strStatus = "Occupied By Current User"; break;
        case "7": strStatus = "Occupied By Other User"; break;
        case "8": strStatus = "Occupied By Related Facility"; break;
        default: strStatus = "Disable"; break;
    }
    return strStatus;
}
//we keep repositioning the tool tip so that it will always attached to the mouse
document.onmousemove=positiontip	
