//Returns the browser height
function browserHeight() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    //myWidth = window.innerWidth;
    myHeight = window.innerHeight-20;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    //myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight -20;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    //myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}


// 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([0, 0, 0], [130, 130, 130], 1, 50);
}


// 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];
        //You need to get the height of teh broweser to determin how many fadeSteps.  The height of each div is 1 pixel 
        fadeSteps = browserHeight();

        // 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('background').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);
}