/*
To use this you will need to ensure that your page has references to this file and Helper.js.
You can then instanciate the class using the required values.
If no alignmentControl parameter is passed in the pop up will be aligned to the bottom
right of the help icon. If an alignment control is passed in the pop up will be 
aligned with the top left corner of the alignmentControl.
*/

function ShowHelp(helpIcon, alignmentControl, helpPopUp, inPopUp, hasEvents, addBackground, offsetX, offsetY)
{
    var me = this;

    // Set up properties
    this.HelpIcon = null;
    if (helpIcon != null)
        this.HelpIcon = document.getElementById(helpIcon);
    this.AlignmentControl = null;
    
    if (alignmentControl != null)
        this.AlignmentControl = document.getElementById(alignmentControl);
        
    this.HelpPopUp = document.getElementById(helpPopUp);
    this.InPopUp = false;
    
    if (inPopUp != null)
        this.InPopUp = inPopUp
        
    this.HiddenSelectControls = null;
    this.HeightDiff = 0;
    this.CurrentOpacity = 0;
    this.HasEvents = hasEvents;
    
    // Lower number means quicker - 0 will display instantly
    this.PopUpSpeed = 5;
    
    this.AddBackground = false;
    if (addBackground != null)
        if (addBackground == true)
        {
            this.Background = null;
            this.AddBackground = addBackground;
            this.BackgroundAdded = false;
        }
    
    this.OffsetX = 0;
    this.OffsetY = 0;
    
    if (offsetX != null)
        this.OffsetX = offsetX;
        
    if (offsetY != null)
        this.OffsetY = offsetY;
        
    this.IsIE = null;
    
    this.HelpImage_OnMouseOver = function()
    {
	    // Display the help pop up
	    me.displayHelp();
    }
    
    this.HelpImage_OnMouseOut = function()
    {
	    // Simply hide the help pop up 
	    me.hideHelp();
    }
    
    this.fadeInPopUp = function()
    { 
        // If pop up speed is 0 set opacity to 100
        if (this.PopUpSpeed == 0)
            this.CurrentOpacity = 100;
            
        // Fade in the pop up by setting the opacity
        me.setPopUpOpacity()
    }

    this.setPopUpOpacity = function()
    {
        if (this.PopUpSpeed == 0)
            this.CurrentOpacity = 100;

        if (this.CurrentOpacity <= 100)
        {
            // Set opacity values to work in all browsers
            this.HelpPopUp.style.opacity = (this.CurrentOpacity / 100);
            this.HelpPopUp.style.MozOpacity = (this.CurrentOpacity / 100);
            this.HelpPopUp.style.KhtmlOpacity = (this.CurrentOpacity / 100);
            this.HelpPopUp.style.filter = 'alpha(opacity=' + this.CurrentOpacity + ')';

            this.CurrentOpacity = this.CurrentOpacity + 5;

            var me = this;
            setTimeout(function() { me.setPopUpOpacity() }, parseInt(this.PopUpSpeed));
        }
        else
            this.CurrentOpacity = 0;
    }
    
    this.Initialise = function()
    {
        // If opened manually may not want to set these
        if (this.HasEvents)
        {
            // Help icon events
            addEvent(this.HelpIcon, "mouseover", this.HelpImage_OnMouseOver);
            addEvent(this.HelpIcon, "mouseout", this.HelpImage_OnMouseOut);
        }
        
        // Work out browser type
        var agt = navigator.userAgent.toLowerCase();
        this.IsIE = ((agt.indexOf('msie') != -1) && (agt.indexOf('opera') == -1));
    }
    
    this.Initialised = this.Initialise();
}

ShowHelp.prototype.displayHelp = function()
{
    // Set up background if required
    if (this.AddBackground)
    {
        if (!this.BackgroundAdded)
        {
            this.Background = document.createElement('div');

            // Style background div element
            this.Background.style.position = 'absolute';
            this.Background.style.top = 0;
            this.Background.style.left = 0;
            this.Background.style.backgroundColor = '#FFFFFF';
            this.Background.style.filter = 'alpha(opacity=75)';
            this.Background.style.opacity = 0.75;
            this.Background.style.KhtmlOpacity = 0.75;
            this.Background.style.MozOpacity = 0.75;

            // Add element to DOM
            this.HelpPopUp.parentNode.appendChild(this.Background);
            this.BackgroundAdded = true;
        }

        // Determine height and width of background div element
        var clientWidth = this.getClientWidth();
        var clientHeight = this.getClientHeight();

        // Update background element size
        this.Background.style.width = Math.max(Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), clientWidth) + 'px';
        this.Background.style.height = Math.max(Math.max(document.documentElement.scrollHeight, document.body.scrollHeight), clientHeight) + 'px';
        this.Background.style.display = 'block';
    }

    // Display pop up
    if (this.PopUpSpeed != 0)
    {
        this.HelpPopUp.style.opacity = 0;
        this.HelpPopUp.style.MozOpacity = 0;
        this.HelpPopUp.style.KhtmlOpacity = 0;
        this.HelpPopUp.style.filter = 'alpha(opacity=0)';
    }
    
    this.HelpPopUp.style.zIndex = '999';
    this.HelpPopUp.style.position = 'absolute';
    this.HelpPopUp.style.display = 'block';

    // Work out position
    var xPos = 0;
    var yPos = 0;

    // Check where to align the pop up
    if (this.AlignmentControl == null)
    {
        xPos = getAscendingLefts(this.HelpIcon, this.InPopUp);
        yPos = getAscendingTops(this.HelpIcon, this.InPopUp);

        this.HelpPopUp.style.top = (yPos + (this.HelpIcon.offsetHeight + 3) + this.OffsetY) + 'px';
        this.HelpPopUp.style.left = (xPos + (this.HelpIcon.offsetHeight + 3) + this.OffsetX) + 'px';
    }
    else
    {
        xPos = getAscendingLefts(this.AlignmentControl, this.InPopUp);
        yPos = getAscendingTops(this.AlignmentControl, this.InPopUp);

        this.HelpPopUp.style.top = (yPos + this.OffsetY) + 'px';
        this.HelpPopUp.style.left = (xPos + this.OffsetX) + 'px';
    }

    if (this.scrollRequired())
    {
        var newTop = parseInt(this.HelpPopUp.style.top.substr(0, (this.HelpPopUp.style.top.length - 2))) - parseInt(this.HeightDiff) - 5;
        this.HelpPopUp.style.top = newTop + 'px';

        // Reset variable
        this.HeightDiff = 0;
    }

    // Hide selects overlapping pop up
    this.checkSelectOverlap();

    // Fade in pop up
    this.fadeInPopUp();
}

ShowHelp.prototype.hideHelp = function()
{
    // Hide the help pop up
    this.HelpPopUp.style.display = 'none';
    this.HelpPopUp.style.opacity = 0; 
    this.HelpPopUp.style.MozOpacity = 0; 
    this.HelpPopUp.style.KhtmlOpacity = 0; 
    this.HelpPopUp.style.filter = 'alpha(opacity=0)'; 
    
    // Show all select controls
    this.showSelectControls();
    
    // Hide background if we have one
    if (this.Background)
        this.Background.style.display = 'none';
}

// Determine if the pop up will display all in view
ShowHelp.prototype.scrollRequired = function()
{
    var screenHeight = 0;
    var scrollPos = new scrollPosition();
    
    if ( document.all )
       screenHeight = document.documentElement.offsetHeight;
    else
       screenHeight = window.innerHeight;
       
    var bottomPos = getAscendingTops(this.HelpPopUp, this.InPopUp);
      
    var bottomPos = parseInt(this.HelpPopUp.style.top.substr(0, (this.HelpPopUp.style.top.length - 2))) + parseInt(this.HelpPopUp.offsetHeight);
    var totalHeight = parseInt(scrollPos.scrollY) + parseInt(screenHeight);
    
    if ( bottomPos > totalHeight )
    {
        this.HeightDiff = parseInt(bottomPos) - parseInt(totalHeight);
        return true;
    }
    else
        return false;
}

// Check if the pop up control will overlap any select elements & hide them
ShowHelp.prototype.checkSelectOverlap = function()
{
	this.HiddenSelectControls = new Array();
    var selectControls = new Array();
    selectControls = document.getElementsByTagName('select');
    
    var popUpxPos = getAscendingLefts(this.HelpPopUp, this.InPopUp);
    var popUpyPos = getAscendingTops(this.HelpPopUp, this.InPopUp);

    for ( var x = 0; x < selectControls.length; x++ ) 
    {
        var selectControl = selectControls[x];
        
        var selectxPos = getAscendingLefts(selectControl, this.InPopUp);
		var selectyPos = getAscendingTops(selectControl, this.InPopUp);
		
		var selectxPosMax = selectxPos + selectControl.offsetWidth;
		var selectyPosMax = selectyPos + selectControl.offsetHeight;
        
        // Work out if select control sits within the dimensions of the pop up and hide if it does
        if ( (selectxPos >= popUpxPos && selectxPos <= (popUpxPos + this.HelpPopUp.offsetWidth)) ||
             (selectxPosMax >= popUpxPos && selectxPosMax <= (popUpxPos + this.HelpPopUp.offsetWidth)) ) 
        {
            if ( (selectyPos >= popUpyPos && selectyPos <= (popUpyPos + this.HelpPopUp.offsetHeight)) || 
                 (selectyPosMax >= popUpyPos && selectyPosMax <= (popUpyPos + this.HelpPopUp.offsetHeight)) ) 
            {
                //Within a pop up, any selects that would overlap the pop up would already have been hidden so ignore those.
                if (selectControl.style.visibility != 'hidden')
                {
                    selectControl.style.visibility = 'hidden';
                    this.HiddenSelectControls[this.HiddenSelectControls.length] = selectControl;
                }
            }
        }
    }
}

// Show any hidden select elements in the control array
ShowHelp.prototype.showSelectControls = function()
{
    
	if ((this.HiddenSelectControls != null && this.HiddenSelectControls.length != 0) || this.InPopUp)
	{
		// Show all select controls as they may have been hidden
		for ( var x = 0; x < this.HiddenSelectControls.length; x++ ) {
			this.HiddenSelectControls[x].style.visibility = 'visible';
		}
		
		this.HiddenSelectControls.length = 0;
    }
    else
    {
		// Need to do this for when pop up is not closed using onmouseout
		var selects = new Array();
		selects = document.getElementsByTagName('SELECT');
		
		// Show all select controls as they may have been hidden
		for ( var x = 0; x < selects.length; x++ ) {
			selects[x].style.visibility = 'visible';
		}
    } 
}

ShowHelp.prototype.getClientWidth = function()
{
	if (this.IsIE)
		return document.documentElement.clientWidth;
	else
		return Math.min(window.innerWidth, document.documentElement.clientWidth);
}

ShowHelp.prototype.getClientHeight = function()
{
	if (this.IsIE)
		return document.documentElement.clientHeight;
	else
		return Math.min(window.innerHeight, document.documentElement.clientHeight);
}