// 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], [216, 221, 240], 5, 80); 
		//createGradientH([255, 0, 0], [255, 255, 255], 3, 50, [255, 255, 255], [0, 0, 255], 3, 50);        
	}    //--> 
	
	function drawGradientS() {            
		createGradientV([255, 255, 255], [216, 221, 240], 5, 60); 
		//createGradientH([255, 0, 0], [255, 255, 255], 3, 50, [255, 255, 255], [0, 0, 255], 3, 50);        
	}