// Navigation Wheel Script...

// Define Namespace...

if (!WillCurson) var WillCurson = {};
if (!WillCurson.NavRibbon) WillCurson.NavRibbon = {};

//--------------------------------------------------------------------------------

WillCurson.NavRibbon = function()
{
    // Globals...

    // Animation Poller...
    this.animatePoll = null;

    // Data Array..
    this.data = [];

    // Total Animation Length In Milliseconds...
    this.ANIM_LENGTH = null;

    // Flags...
    // ----------

    // Browser Is Internet Explorer 8 Or Earlier...
    this.isIE8 = false;

    // ----------
};

//--------------------------------------------------------------------------------

WillCurson.NavRibbon.prototype.init = function(data, intervalArg)
{
    // Mouse Over...

    try
    {
        // Set Data Array...
        this.data = data;

        // Start Animation...
        this.animatePoll = setInterval(intervalArg, 20);
    }
    catch (e)
    {
        alert("NavRibbon.init Error: " + e.message);
    }
};

//--------------------------------------------------------------------------------

WillCurson.NavRibbon.prototype.mouseOver = function(node)
{
    // Mouse Over...

    try
    {
        // Get Nodes Data Array Index...
        var index = this.getNodeIndex(node.id);

        // Set Expanding...
        this.data[index][1] = true;

        // Set Start Time...
        this.data[index][8] = new Date().getTime();

        // Set Start Opacity...

        if (this.data[index][5] != null)
        {
            this.data[index][4] = parseFloat(document.getElementById(this.data[index][5]).style.opacity) * 100;
        }

        // Get The Nav Ribbon Links Current Width...

        var widthTokens = new Array();
        widthTokens = document.getElementById(this.data[index][7]).style.width.split("p");
        var nodeWidth = widthTokens[0];

        // Calculate The Time Taken To Move One Pixel...
        var timePerPixel = this.ANIM_LENGTH / (this.data[index][3] - this.data[index][2]);

        // Set Animation Length...
        this.data[index][9] = Math.round(timePerPixel * (this.data[index][3] - nodeWidth));

        // Set Starting Width...
        this.data[index][10] = nodeWidth;

        // Set Cursor...
        node.style.cursor = "pointer";
    }
    catch (e)
    {
        alert("NavRibbon.mouseOver Error: " + e.message);
    }
};

//--------------------------------------------------------------------------------

WillCurson.NavRibbon.prototype.mouseOut = function(node)
{
    // Mouse Out...

    try
    {
        // Get Nodes Data Array Index...
        var index = this.getNodeIndex(node.id);

        // Set Expanding...
        this.data[index][1] = false;

        // Set Start Time...
        this.data[index][8] = new Date().getTime();

        // Set Start Opacity...

        if (this.data[index][5] != null)
        {
            this.data[index][4] = parseFloat(document.getElementById(this.data[index][5]).style.opacity) * 100;
        }

        // Get The Nav Ribbon Links Current Width...

        var widthTokens = new Array();
        widthTokens = document.getElementById(this.data[index][7]).style.width.split("p");
        var nodeWidth = widthTokens[0];

        // Calculate The Time Taken To Move One Pixel...
        var timePerPixel = this.ANIM_LENGTH / (this.data[index][3] - this.data[index][2]);

        // Set Animation Length...
        this.data[index][9] = Math.round(timePerPixel * (nodeWidth - this.data[index][2]));

        // Set Starting Width...
        this.data[index][10] = nodeWidth;

        // Set Cursor...
        node.style.cursor = "default";
    }
    catch (e)
    {
        alert("NavRibbon.mouseOut Error: " + e.message);
    }
};

//--------------------------------------------------------------------------------

WillCurson.NavRibbon.prototype.animate = function()
{
    // Animate...

    try
    {
        // Cycle Through Data Array...

        var index = 0;

        /*
        
        Nav Ribbon Link Data Array Entry...
        
        data[index][0] -> Client ID...
        data[index][1] -> Is Expanding Boolean Flag...
        data[index][2] -> Width...
        data[index][3] -> Expanded Width...
        data[index][4] -> Starting Opacity...
        data[index][5] -> Alt Image Element ID...
        data[index][6] -> Image Child Element Client ID...
        data[index][7] -> Label Container Div Client ID...
        data[index][8] -> Animation Start Time...
        data[index][9] -> Animation Length...
        data[index][10] -> Starting Width...

        */

        for (index = 0; index < this.data.length; index++)
        {
            // Set Node To Nav Ribbon Link Div..
            var node = document.getElementById(this.data[index][0]);

            // Ensure Node Is Not Null...

            if (node != null)
            {
                // Get The Nav Ribbon Links Current Width...

                var widthTokens = new Array();
                widthTokens = document.getElementById(this.data[index][7]).style.width.split("p");
                var nodeWidth = widthTokens[0];

                if (this.data[index][1] && (parseInt(nodeWidth) < this.data[index][3]))
                {
                    // (Is Expanding And Node Width Is Less Than Expanded Width)...
                    // Expanding...

                    // Calculate Frequency...
                    var freq = Math.PI / (2 * this.ANIM_LENGTH);

                    // Elapsed Time...
                    var elapsedTime = new Date().getTime() - this.data[index][8];

                    // f Value...
                    var f = Math.abs(Math.sin(elapsedTime * freq));

                    // Mamimum Displacement Distance...
                    var disp = this.data[index][3] - this.data[index][10];

                    // Calculate Width...
                    var width = Math.round(f * disp + parseInt(this.data[index][10]))

                    // Set Width...
                    document.getElementById(this.data[index][7]).style.width = width + "px";

                    // Set Root Div Element Width...

                    var rootWidthTokens = new Array();
                    rootWidthTokens = document.getElementById(this.data[index][6]).style.width.split("p");
                    var rootWidth = rootWidthTokens[0];

                    if (width <= 0)
                    {
                        var container = document.getElementById(this.data[index][0]);

                        container.style.width = rootWidth + "px";
                        container.parentNode.style.width = rootWidth + "px";
                        container.parentNode.parentNode.style.width = rootWidth + "px";
                    }
                    else
                    {
                        var container = document.getElementById(this.data[index][0]);

                        var containerWidth = (Math.round(parseInt(rootWidth)) + width) + "px";

                        container.style.width = containerWidth;
                        container.parentNode.style.width = containerWidth;
                        container.parentNode.parentNode.style.width = containerWidth;
                    }


                    // Calculate Opacity...
                    var opacity = Math.round(f * disp + parseInt(this.data[index][4]));

                    if (this.data[index][5] != null)
                    {
                        // Set Alt Image Opacity...

                        document.getElementById(this.data[index][5]).style.opacity = (opacity / 100);

                        if (this.isIE8)
                        {
                            document.getElementById(this.data[index][5]).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + opacity + ")";
                        }
                    }
                    
                }
                else if (!this.data[index][1] && (parseInt(nodeWidth) > this.data[index][2]))
                {
                    // (Is Not Expanding And Node Width Is Greater Than Width)...
                    // Contracting...

                    // Calculate Frequency...
                    var freq = Math.PI / (2 * this.ANIM_LENGTH);

                    // Elapsed Time...
                    var elapsedTime = new Date().getTime() - this.data[index][8];

                    // f Value...
                    var f = Math.abs(Math.sin(elapsedTime * freq));

                    // Mamimum Displacement Distance...
                    var disp = this.data[index][2] - this.data[index][10];

                    // Calculate Width...
                    var width = Math.round(f * disp + parseInt(this.data[index][10]));

                    // Set Width...
                    document.getElementById(this.data[index][7]).style.width = width + "px";

                    // Set Root Div Element Width...

                    var rootWidthTokens = new Array();
                    rootWidthTokens = document.getElementById(this.data[index][6]).style.width.split("p");
                    var rootWidth = rootWidthTokens[0];

                    if (width <= 0)
                    {
                        var container = document.getElementById(this.data[index][0]);

                        container.style.width = rootWidth + "px";
                        container.parentNode.style.width = rootWidth + "px";
                        container.parentNode.parentNode.style.width = rootWidth + "px";
                    }
                    else
                    {
                        var container = document.getElementById(this.data[index][0]);

                        var containerWidth = (Math.round(parseInt(rootWidth)) + width) + "px";

                        container.style.width = containerWidth;
                        container.parentNode.style.width = containerWidth;
                        container.parentNode.parentNode.style.width = containerWidth;
                    }

                    // Calculate Opacity...
                    var opacity = Math.round(f * disp + parseInt(this.data[index][4]));

                    if (this.data[index][5] != null)
                    {
                        // Set Alt Image  Opacity...

                        document.getElementById(this.data[index][5]).style.opacity = (opacity / 100);

                        if (this.isIE8)
                        {
                            document.getElementById(this.data[index][5]).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + opacity + ")";
                        }
                    }
                }
            }
        }
    }
    catch (e)
    {
        alert("NavRibbon.animate Error: " + e.message);
    }
};

//--------------------------------------------------------------------------------

WillCurson.NavRibbon.prototype.getNodeIndex = function(nodeID)
{
    // Find Next Node ID Array Array...

    try
    {
        var index = 0;

        // Find The Index Which Corrisponds To The Node ID...

        for (index = 0; index < this.data.length; index++)
        {
            if (this.data[index][0] == nodeID)
            {
                return index;

                break;
            }
        }

        return null;
    }
    catch (e)
    {
        alert("NavRibbon.getNodeIndex Error: " + e.message);
    }
};

//--------------------------------------------------------------------------------