// JavaScript Document

    <!--

        // do not call this function directly - use createGradientV or createGradientH instead
        function createGradient(direction, args) {
            var bandSets = args.length / 4;
            var startPos = 0;

            for (var bandSetLoop=0; bandSetLoop<bandSets; bandSetLoop++) {
                fadeFromColour = args[bandSetLoop * 4];
                fadeToColour = args[bandSetLoop * 4 + 1];
                bandSize = args[bandSetLoop * 4 + 2];
                fadeSteps = args[bandSetLoop * 4 + 3];

                // calculate stepped colour values for each band
                var colourSteps = [fadeFromColour.concat()];                // ensure first colour is the start colour
                for (var bandLoop=1; bandLoop<fadeSteps; bandLoop++) {
                    colourSteps[bandLoop] = [];
                    for (var rgbLoop=0; rgbLoop<3; rgbLoop++) {
                        colourSteps[bandLoop][rgbLoop] = Math.round(colourSteps[bandLoop-1][rgbLoop] + ((fadeToColour[rgbLoop] - colourSteps[bandLoop-1][rgbLoop]) / (fadeSteps - bandLoop)));
                    }
                }

                // now draw each band
                if (direction == 'V') {
                    for (var bandLoop=0; bandLoop<fadeSteps; bandLoop++) {
                        document.getElementById('fadeBandsV').appendChild(aDiv = document.createElement('div'));
                        aDiv.style.height = bandSize + 'px';
                        aDiv.style.top = startPos + (bandSize * bandLoop) + 'px';
                        aDiv.style.backgroundColor = 'rgb(' + colourSteps[bandLoop][0] + ',' + colourSteps[bandLoop][1] + ',' + colourSteps[bandLoop][2] + ')';
                    }
                } else {
                    for (var bandLoop=0; bandLoop<fadeSteps; bandLoop++) {
                        document.getElementById('fadeBandsH').appendChild(aDiv = document.createElement('div'));
                        aDiv.style.width = bandSize + 'px';
                        aDiv.style.left = startPos + (bandSize * bandLoop) + 'px';
                        aDiv.style.backgroundColor = 'rgb(' + colourSteps[bandLoop][0] + ',' + colourSteps[bandLoop][1] + ',' + colourSteps[bandLoop][2] + ')';
                    }
                }
                startPos += fadeSteps * bandSize;
            }
        }

        // createGradientV - creates a vertical gradient (North to South)
        // Parameters: createGradientV takes a single set, or multiple sets of, 4 arguments:
        //         argument 1: fadeFromColour = an array of R,G,B colours to fade from (for example, [0, 0, 255] == #0000FF)
        //         argument 2: fadeToColour = an array of R,G,B colours to fade to (for example, [0, 204, 255] == #00CCFF)
        //         argument 3: bandHeight = height of each colour band
        //         argument 4: fadeSteps = number of colour bands used for the gradient (should be at least 2)
        function createGradientV() {
            if (arguments.length < 1 || arguments.length % 4 != 0) {
                alert('Incorrect usage. Number of parameters must be a multiple of 4!');
                return;
            }
            createGradient('V', arguments);
        }

        // createGradientH - creates a horizontal gradient (West to East)
        // Parameters: createGradientH takes a single set, or multiple sets of, 4 arguments:
        //         argument 1: fadeFromColour = an array of R,G,B colours to fade from (for example, [0, 0, 255] == #0000FF)
        //         argument 2: fadeToColour = an array of R,G,B colours to fade to (for example, [0, 204, 255] == #00CCFF)
        //         argument 3: bandHeight = height of each colour band
        //         argument 4: fadeSteps = number of colour bands used for the gradient (should be at least 2)
        function createGradientH() {
            if (arguments.length < 1 || arguments.length % 4 != 0) {
                alert('Incorrect usage. Number of parameters must be a multiple of 4!');
                return;
            }
            createGradient('H', arguments);
        }

        function drawGradient() {
            createGradientV([255, 255, 255], [255, 255,255], 3, 3, [255, 255, 255], [255, 255, 255], 3, 50, [255, 255, 255], [255, 255, 0], 3, 50);
            createGradientH([255, 0, 0], [255, 255, 255], 3, 50, [255, 255, 255], [0, 0, 255], 3, 50);
        }

    //-->