//Get version internet explorer
var Browser = {
    Version: function()
    {
        var version = 999; // we assume a sane browser
        if (navigator.appVersion.indexOf("MSIE") != -1)
        // bah, IE again, lets downgrade version number
            version = parseFloat(navigator.appVersion.split("MSIE")[1]);
        return version;
    }
}

//Declare the variables that will store the coordinates  
var xMousePos = 0; //abscissa  
var yMousePos = 0; //ordinate

var toolTipWindow

bindEventMousePosition();

function showToolTip(senderID, parentID, title, description, showImages)
{
    bindEventMousePosition();

    var element = document.getElementById(senderID);
    if (element != null)
        element.onmousemove = onMouseMove;

    toolTipWindow = new msgWin(senderID, title, description, showImages, parentID);

}

function closeToolTip(senderID)
{
    if (toolTipWindow)
    {
        var element = document.getElementById(senderID);
        if (element != null)
            element.onmousemove = null; 
    
        toolTipWindow.close();
        toolTipWindow = null;
    }
}

function onMouseMove()
{
    if (toolTipWindow != null)
    {
        toolTipWindow.left = xMousePos + 5;
        toolTipWindow.top = yMousePos + 5;
        toolTipWindow.move();
    }
}

/*Creating ToolTip window*/

function msgWin(id, title, msg, showImages, parent)
{
    this.id = 'CMSToolTipElement'; //ID of the html element (div) that will contain our window. This is used within the object, and can also be used for some custom changes outside the object   
    this.title = title; //Title of the window  
    this.msg = msg; //Message that will be displayed within the window  
    this.parent = parent; //Parent element. This is the id of the HTML element to which we want the window to be attached. If it's left blank, the window will be attached to the body of the page
    this.left = xMousePos + 5; //Abscissa (property left) in pixels of the window. If this is not set the window will be positioned in the center of the screen
    this.top = yMousePos + 5; //Ordinate (property top) in pixels of the window
    this.showImages = showImages; //Showing images in description

    //The fallowing are used within the object to handle moving of the window on the page  
    this.moving = 0;
    this.offsetLeft = 0;

    this.create(); //Constructor of the object.
}

msgWin.prototype.create = function()
{
    //Create the main element that will contain the window.  
    var w = document.createElement('div');
    w.id = this.id;
    w.className = 'CMSToolTipSelfPanel';

    if (!this.left) //If we haven't set coordinates for the object, the window will be centered in the middle of the page   
    {
        w.style.left = '50%';
        w.style.top = '50%';
        w.style.marginLeft = '-200px';
        w.style.marginTop = '-50px';
    }
    else //We have set coordinates, we shall position the element according to them  
    {
        w.style.left = this.left + 'px';
        w.style.top = this.top + 'px';
    }

    //Create the window title. The essential thing here is that we set an id and some event hanlers that will allow us to update the content and movement of the window  
    var t = document.createElement('div');
    t.id = this.id + '_title';
    t.className = 'CMSToolTipTitlePanel';
    t.innerHTML = this.title;
    t.onmouseover = function() { this.style.cursor = 'move'; };

    w.appendChild(t); //Append the title to the window.  

    //Create the window content element. The only interesting thing here is that we set an ID so we can update the content later.
    var c = document.createElement('div');
    c.id = this.id + '_content';

    if (this.showImages == true)
        c.className = 'CMSToolTipDescriptionPanel CMSToolTipDescriptionWithImgPanel';
    else
        c.className = 'CMSToolTipDescriptionPanel CMSToolTipDescriptionWithoutImgPanel';

    c.innerHTML = this.msg;

    w.appendChild(c);

    if (this.parent) //If we have set a parent element to contain the window - append the window to it
    {
        var element = document.getElementById(this.parent);
        if (element != null)
            document.getElementById(this.parent).appendChild(w);
        else
            document.body.appendChild(w);
    }
    else //otherwise - append it to the body of our page  
        document.body.appendChild(w);

    return;
}

msgWin.prototype.move = function()
{
    var el = document.getElementById(this.id);

    //Unset any margins set to the element and move it to it's new location, minding the offset of the mouse from it's left border  
    el.style.margin = '0';
    el.style.left = (xMousePos) + 5 + "px"; //Use the mouse offset that we calculated within startMove, to position the window properly on it's new place  
    el.style.top = (yMousePos) + 5 + "px"; //We need to set element's ordinate a bit above the mouse position, cause otherwise the mouse will always be outside the window and it will be impossible to stop window's movent.  

    return;
}

msgWin.prototype.close = function()
{
    var element = document.getElementById('CMSToolTipElement');
    element.style.display = 'none';
    var parent = element.parentNode;
    parent.removeChild(element);
}

//Capture the position, again depending on client's browser  
function captureMousePosition(e)
{
    if (document.layers)
    {
        xMousePos = e.pageX;
        yMousePos = e.pageY;
    }
    else if ((document.documentElement) && (Browser.Version() < 8))
    {
        xMousePos = window.event.x + document.documentElement.scrollLeft;
        yMousePos = window.event.y + document.documentElement.scrollTop;
    }
    else if ((document.all) && (Browser.Version() >= 8))
    {
        xMousePos = window.event.x + document.body.scrollLeft;
        yMousePos = window.event.y + document.body.scrollTop;
    }
    else if (document.getElementById)
    {
        xMousePos = e.pageX;
        yMousePos = e.pageY;
    }
}

/*Binding events for read coordinate cursor mouse*/
function bindEventMousePosition()
{
    //Add an event listener for mouse move, depending on client browser.   
    if (document.layers)
    {
        document.captureEvents(Event.MOUSEMOVE);
        document.onmousemove = captureMousePosition;
    }
    else if (document.all)
        document.onmousemove = captureMousePosition;
    else if (document.getElementById)
        document.onmousemove = captureMousePosition;
}