Basic "shiny" link mouseover script produces non-fatal errors.

[moltendorf]

Hey everyone, as I have been by far pleased with some of the top helpers on this forum, I have decided to send another one your way.

Even though I am personally having minimal issues with this script I have developed, I am wondering if someone could fix my little bug with it.

This script runs perfectly fine, except once in a while, the color changing will "pause" because (according to Mozilla Firefox 3's error console) it is putting out invalid color codes. It only does a short burst of 8 invalid color codes (on average) and then gets back in a normal range.

I feel I'm missing something, maybe a fresh pair of eyes can spot it out.

Live Demo Here

// JavaScript Document
 
var shinylink = (false);
var custom_ids = (0);
 
var maximum = (64); // This is the maximum any color value can reach.
var minimum = (0); // This is the minimum any color value can reach.
 
var objects = (0);
var active_object = (false);
var active_color = (false);
 
var using_objects = new Array ();
var restore_objects = new Array ();
var object_references = new Array ();
 
function d2h(d)
    {
        var h = d.toString(16);
        if(h.length == (1))
            {
                h = "0"+h;
            }
        return (h);
    }
function h2d(h)
    {
        var d = parseInt(h, (16));
        return (d);
    }
function split_color (color)
    {
        var acceptable = '0123456789abcdefABCDEF';
        var string = '';
 
 
        for (var i = (0); i < color.length; i++)
            {
                if (acceptable.indexOf (color.charAt (i)) > (-1))
                    {
                        string += color.charAt (i);
                    }
            }
 
        var red = string.charAt (0) + string.charAt (1);
        var green = string.charAt (2) + string.charAt (3);
        var blue = string.charAt (4) + string.charAt (5);
 
        return (Array (h2d (red), h2d (green), h2d (blue)));
    }
 
function shinylink_initiate (object, color)
    {
        if (window.shinylink == (false))
            {
                var links = document.getElementsByTagName ('a');
                for (var i = (0); i < links.length; i++)
                    {
                        if (links[window.custom_ids++].id == '')
                            {
                                links[i].id = 'shinylink_' + window.custom_ids;
                            }
                    }
            }
        if (object.id == '')
            {
                object.id = 'shinylink_' + window.custom_ids++;
            }
        var number = window.objects++;
        var color_array = split_color (color);
 
        if (typeof (window.using_objects[number]) == 'undefined')
            {
                window.using_objects[number] = (false);
                window.object_references[number] = object.id;
            }
 
        object.onmouseover = function ()
            {
                shinylink_mouseover (number, color_array);
            }
        object.onmouseout = function ()
            {
                shinylink_mouseout (number, color_array);
            }
 
        window.shinylink = (true);
 
        shinylink_mouseover (number, color_array);
    }
function shinylink_mouseover (id, color)
    {
        window.active_object = id;
        window.active_color = (false);
 
        shinylink_scan (id, color);
    }
function shinylink_mouseout (id, color)
    {
        if (window.active_object == id)
            {
                window.active_object = (false);
                window.active_color = (false);
            }
 
        shinylink_restore (id, color);
    }
function shinylink_scan (id, color)
    {
        var input_color = Array (
            Math.round ((color[0] + (1)) / (4)),
            Math.round ((color[1] + (1)) / (4)),
            Math.round ((color[2] + (1)) / (4))
        );
 
        if (window.active_object === id)
            {
                var current = window.using_objects[id] != (false) ? window.using_objects[id] : input_color;
 
                if ((current[0] == window.active_color[0] && current[1] == window.active_color[1] && current[2] == window.active_color[2]) || window.active_color == (false))
                    {
                        if (window.active_color == (false))
                            {
                                window.active_color = new Array ();
                            }
 
                        // Pick a random color.
 
                        // Pick which colors will change.
                        var change_red = Math.round (Math.random ());
                        var change_green = Math.round (Math.random ());
                        var change_blue = Math.round (Math.random ());
 
                        if (change_red == (0) && change_green == (0) && change_blue == (0))
                            {
                                var change_rgb = Math.round (Math.random () * (2));
 
                                change_red = change_rgb == (0) ? (1) : (0);
                                change_green = change_rgb == (1) ? (1) : (0);
                                change_blue = change_rgb == (2) ? (1) : (0);
                            }
 
                        if (change_red == (1))
                            {
                                var direction_red = current[0] <= window.minimum ? (1) : current[0] >= window.maximum ? (0) : Math.round (Math.random ());
 
                                var maximum_distance_red = direction_red == (0) ? current[0] : (window.maximum - current[0]);
 
                                // Increase chances of picking the highest number possible.
                                // Decrease chances of picking the smallest number possible.
                                var random_distance_chance_red = (maximum_distance_red * maximum_distance_red);
                                var random_distance_pick_red = Math.round (Math.random () * random_distance_chance_red);
 
                                var i_red = (1);
                                while (random_distance_pick_red >= (i_red * i_red))
                                    {
                                        i_red++;
                                    }
                                var distance_red = (i_red - (1));
 
                                window.active_color[0] = direction_red == (0) ? (current[0] - distance_red) : (current[0] + distance_red);
                            }
                        else
                            {
                                window.active_color[0] = current[0];
                            }
 
                        if (change_green == (1))
                            {
                                var direction_green = current[1] <= window.minimum ? (1) : current[1] >= window.maximum ? (0) : Math.round (Math.random ());
 
                                var maximum_distance_green = direction_green == (0) ? current[1] : (window.maximum - current[1]);
 
                                // Increase chances of picking the highest number possible.
                                // Decrease chances of picking the smallest number possible.
                                var random_distance_chance_green = (maximum_distance_green * maximum_distance_green);
                                var random_distance_pick_green = Math.round (Math.random () * random_distance_chance_green);
 
                                var i_green = (1);
                                while (random_distance_pick_green >= (i_green * i_green))
                                    {
                                        i_green++;
                                    }
                                var distance_green = (i_green - (1));
 
                                window.active_color[1] = direction_green == (0) ? (current[1] - distance_green) : (current[1] + distance_green);
                            }
                        else
                            {
                                window.active_color[1] = current[1];
                            }
 
                        if (change_blue == (1))
                            {
                                var direction_blue = current[2] <= window.minimum ? (1) : current[2] >= window.maximum ? (0) : Math.round (Math.random ());
 
                                var maximum_distance_blue = direction_blue == (0) ? current[2] : (window.maximum - current[2]);
 
                                // Increase chances of picking the highest number possible.
                                // Decrease chances of picking the smallest number possible.
                                var random_distance_chance_blue = (maximum_distance_blue * maximum_distance_blue);
                                var random_distance_pick_blue = Math.round (Math.random () * random_distance_chance_blue);
 
                                var i_blue = (1);
                                while (random_distance_pick_blue >= (i_blue * i_blue))
                                    {
                                        i_blue++;
                                    }
                                var distance_blue = (i_blue - (1));
 
                                window.active_color[2] = direction_blue == (0) ? (current[2] - distance_blue) : (current[2] + distance_blue);
                            }
                        else
                            {
                                window.active_color[2] = current[2];
                            }
                    }
 
                // Transition one color maximum per channel.
                var new_color = new Array ();
                var color_string = '#';
                for (var i = (0); i < window.active_color.length; i++)
                    {
                        new_color[i] = current[i] < window.active_color[i] ? (current[i] + (1)) : current[i] > window.active_color[i] ? (current[i] - (1)) : current[i];
                        color_string += d2h (new_color[i] != (0) ? ((new_color[i] * (4)) - (1)) : (0));
                    }
 
                window.using_objects[id] = new_color;
                window.restore_objects[id] = Array (
                    ((new_color[0] * (4)) - (1)),
                    ((new_color[1] * (4)) - (1)),
                    ((new_color[2] * (4)) - (1))
                );
 
                document.getElementById(window.object_references[id]).style.color = color_string;
 
                setTimeout ('shinylink_scan (' + id + ', ' + color + '); ', (5));
            }
    }
function shinylink_restore (id, color)
    {
        var current = window.using_objects[id] != (false) ? window.restore_objects[id] : color;
        if ((current[0] != color[0] || current[1] != color[1] || current[2] != color[2]) && window.active_object !== id)
            {
                // Transition one color maximum per channel.
                var new_color = new Array ();
                var color_string = '#';
                for (var i = (0); i < color.length; i++)
                    {
                        new_color[i] = current[i] < color[i] ? (current[i] + (1)) : current[i] > color[i] ? (current[i] - (1)) : current[i];
                        color_string += d2h (new_color[i]);
                    }
                window.restore_objects[id] = new_color;
                window.using_objects[id] = Array (
                    ((new_color[0] + (1)) / (4)),
                    ((new_color[1] + (1)) / (4)),
                    ((new_color[2] + (1)) / (4))
                );
 
                document.getElementById(window.object_references[id]).style.color = color_string;
 
                setTimeout ('shinylink_restore (' + id + ', Array (' + color[0] + ', ' + color[1] + ', ' + color[2] + ')); ', (5));
            }
    }

[moltendorf]

I just realized I had an old thread going for this same script, but that was with a completely different beginner issue (I was still learning how to assign an object in the page an event function on the fly, which I accomplished in this), this is much more advanced, and complete version of the code, which is having one little issue that I think is related to some addition or multiplication that I forgot to apply to the numbers somewhere in the code. I thought I figured it out in my head last night while I was away from the computer, (and yet again) came back to it only to realize I didn't know what I was thinking about.

This is the original:
http://bytes.com/forum/thread748828.html

[acoder]

I don't know if you've modified it since, but I don't see any errors.

[moltendorf]

There is no "error" I guess I should say, but the problem is that it comes up with an incorrect color code. I feel my math is off somewhere... It works, but just mouseover the link on the page, keep the JavaScript error console up (in Mozilla or Opera seem to have good ones), and just wait, eventually you will see a burst of invalid color codes produced by this script.

I guess they are more of warnings then errors, but I'm trying to rid my script of all bugs.

This is the slightly modified code I made after I finished the page demo I provided to you. I only really fixed the spelling errors in the names of the functions, and then stuck it in a .js file so I could easily use it on my forums.

Anyone willing to put a bit of effort into checking this out has my gratitude. :)

Oh, and acoder, thank you for your help in some of my previous questions.

[acoder]

Can you post the warning/error messages that you see and which line no. it points to.

[moltendorf]

document.getEle mentById(window .object_referen ces[id]).style.color = color_string;

On line 235.

It has nothing to do with that line having the actual error, the error is within the shinylink_scan function.

Because it is setting color_string to an invalid color code which again, is probably because I messed up on my addition somehow.

I'm just wondering if anyone here wants to take the time to sit down and really look at the function to point out where I may have a calculation that can cause the number that is converted into hex code to be over 255, or under 0.

[moltendorf]

I could put in a simple check system that reduces it to that maximum or minimum value, but I'd prefer the numbers come out correct in the first place.

[acoder]

Have you tried using a debugger? A useful one is Firebug for Firefox.

[FLEB]

Not a solution, but a possible strategy: Instead of mucking around with hex conversions, it might just be simpler to have it give the object its color in "rgb(r,g,b) " format. It's (IIRC) cross-browser friendly, and the r,g, and b values are just decimals from 0 to 255.

[moltendorf]

Thanks for the tip, acoder, and FLEB. I didn't think about using the rgb CSS value initially since I have been so used to using #RRGGBB format.I will give it a try, see if they help me get the numbers I want.