grep "MobileSafari|Web.app"

man grep | grep -C 2 " default"

ps x | egrep "MobileSafari|Web.app"
ps x | grep "MobileSafari\|Web.app"
ps x | grep -E "MobileSafari|Web.app"
ps x | grep --extended-regexp "MobileSafari|Web.app"

MobileSafari_PID=$(ps x | egrep "MobileSafari|Web.app" | grep -v grep | awk '{ print $1 }')
 
if [ "$MobileSafari_PID" == "" ]; then
  echo "Mobile Safari.app must be running in the Simulator to enable the remote inspector."
else
 
  cat <<EOM | gdb -quiet > /dev/null
  attach $MobileSafari_PID
  p (void *)[WebView _enableRemoteInspector]
  detach
EOM
 
fi

gmonkey.load(2,function(o){var i=o.getNavPaneElement(),r,l,c=o.getActiveViewElement(),d=c.ownerDocument,b=d.body,g,t=0,x,w,n,Q='querySelector',W='width',U='parentNode',P='px',S='style';while(c.compareDocumentPosition(i)&2)c=c[U];while(i[U]!=b)i=i[U];l=(n=c.childNodes)[0],r=n[1][S],n=l[Q]('[role^=n]'),g=i.appendChild(d.createElement('div'));r[U='cssText']+=n[Q]('[role]')[S][U];while(t+=n.offsetTop,n=n.offsetParent);g[S][U]=W+':4px;position:absolute;z-index:9;left:'+(l[o='offsetWidth']-5)+'px;top:'+t+ 'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';top[n='addEventListener']('resize',k=function(){r[W]=b[o]-l[o]+P},0);g[n]('mousedown',function(e){e.which==1&&(x=l[o]-e.pageX)},0);d[n]('mousemove',function(e){x&&(w=e.pageX+x,l[S][W]=w+P,g[S].left=w-5+P,k())},0);d[n]('mouseup',function(){x=0},0)})

gmonkey.load(2,function(o){
	var i=o.getNavPaneElement(),r,l,c=o.getActiveViewElement(),d=c.ownerDocument,b=d.body,g,t=0,x,w,n,Q='querySelector',W='width',U='parentNode',P='px',S='style';
	while(c.compareDocumentPosition(i)&2)c=c[U];while(i[U]!=b)i=i[U];
	l=(n=c.childNodes)[0],r=n[1][S],n=l[Q]('[role^=n]'),g=i.appendChild(d.createElement('div'));
	r[U='cssText']+=n[Q]('[role]')[S][U];while(t+=n.offsetTop,n=n.offsetParent);
	g[S][U]=W+':4px;position:absolute;z-index:9;left:'+(l[o='offsetWidth']-5)+'px;top:'+t+ 'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
	top[n='addEventListener']('resize',k=function(){r[W]=b[o]-l[o]+P},0);
	g[n]('mousedown',function(e){e.which==1&&(x=l[o]-e.pageX)},0);
	d[n]('mousemove',function(e){x&&(w=e.pageX+x,l[S][W]=w+P,g[S].left=w-5+P,k())},0);
	d[n]('mouseup',function(){x=0},0)
})

// Use the Gmail GreaseMonkey API to reliably find the 2 main elements (left- and right-hand columns). You do not need GreaseMonkey installed to use the API.
// See http://code.google.com/p/gmail-greasemonkey/wiki/GmailGreasemonkey10API for more details (note: documentation is out of date)
//
// Load the API. It will run our callback function when loaded, passing a GmailAPI object
gmonkey.load(2, function(o) {
/*
	Set up variables. To keep the code size down, some are re-used. There is no global namespace pollution at all.
 
	i		this will end up pointing to the element that the grab bar is inserted into
	r		this points to the style object of the element that is resized in the right-hand column
	l		this will end up pointing to the element that is resized to change the left-hand column width
	c		this will end up pointing to the container that holds the left- and right- hand column elements l & r
	d		this points to the document in the frame we use
	b		this points to the body
	g		this points to the grab bar element
	t		this is used initially to calculate the top coordinate of the grab bar, but is re-used to point to the resize function
	x		this holds the initial x delta between mouse click and left-hand column width
	w		during dragging, this holds the new width of the left-hand column
	n		used for many things, most notably holding the string 'addEventListener'
	Q		this holds the string 'querySelector'
	W		this holds the string 'width'
	U		used for many things, most notably holding the strings 'parentNode' and 'cssText'
	P		this holds the string 'px'
	S		this holds the string 'style'
*/		
	var i=o.getNavPaneElement(), r, l, c=o.getActiveViewElement(), d=c.ownerDocument, b=d.body, g, t=0, x, w, n, Q='querySelector', W='width', U='parentNode', P='px', S='style';
 
	// Update c and i to point to their intended elements
	while(c.compareDocumentPosition(i)&2) c=c[U];
	while(i[U]!=b) i=i[U];
 
	// Update l, r, and n to point to their intended elements. Create grab bar, and insert into DOM
	l=(n=c.childNodes)[0], r=n[1][S], n=l[Q]('[role^=n]'), g=i.appendChild(d.createElement('div'));
 
	// Copy the browser-specific user-select style from the Compose button to the right-hand column in order to minimise text selection while dragging.
	// Copying the existing style seemed easier than adding from scratch... but as I didn't try, I can't say this with 100% certainty :-)
	r[U='cssText']+=n[Q]('[role]')[S][U];
 
	// Calculate the top position for the grab bar
	while(t+=n.offsetTop,n=n.offsetParent);
 
	// Style the grab bar
	g[S][U] = W + ':4px;position:absolute;z-index:9;left:' + (l[o='offsetWidth']-5) + 'px;top:' + t + 'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
 
	// Add a resize event to the window to update the size of the right-hand column as the window is sized
	// While Gmail does this anyway, it doesn't take into account any size change to the left-hand column
	top[n='addEventListener']('resize',k=function() {
		r[W]=b[o]-l[o]+P
	}, 0);
 
	// Add event listeners. mousedown is added to the grab bar, mousemove and mouseup to the document
	g[n]('mousedown', function(e) {
		// Only trigger with LMB on grab bar. Stores initial x coord and width of left-hand column
		e.which==1 && (x=l[o]-e.pageX)
	}, 0);
 
	d[n]('mousemove', function(e) {
		// If we have the mouse button pressed, work out the x delta, update the column widths and the grab bar position
		x && (w=e.pageX+x, l[S][W]=w+P, g[S].left=w-5+P, k())
	}, 0);
 
	d[n]('mouseup', function() {
		// Stop the mousemove code from running when LMB is released
		x=0
	}, 0)
})

gmonkey.load(2,function(o){var l=i=o.getNavPaneElement(),c=r=o.getActiveViewElement(),d=c.ownerDocument,p='px',t=sx=0,dx,lw,rw,n,s,q,g;while(c.compareDocumentPosition(l)&2)c=c[u='parentNode'];while(i[u]!=d.body)i=i[u];l=(n=c.childNodes)[0],r=n[1],n=l[q='querySelector']('[role=navigation]'),b=n[q]('[role]'),g=i.appendChild(d.createElement('div'));r[s='style'][u='cssText']+=b[s][u];while(t+=n.offsetTop,n=n.offsetParent);g[s][u]='position:absolute;z-index:9;left:'+(l[o='offsetWidth']-5)+'px;top:'+t+'px;bottom:0;width:4px;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';g[n='addEventListener']('mousedown',function(e){e.which==1&&(sx=e.pageX,lw=l[o],rw=r[o])},0);d[n]('mousemove',function(e){sx&&(dx=e.pageX-sx,g[s].left=lw+dx-5+p,l[s].width=lw+dx+p,r[s].width=rw-dx+p)},0);d[n]('mouseup',function(){sx=0},0)})

gmonkey.load(2,function(o){
	var l=i=o.getNavPaneElement(),c=r=o.getActiveViewElement(),d=c.ownerDocument,p='px',t=sx=0,dx,lw,rw,n,s,q,g;
	while(c.compareDocumentPosition(l)&2)c=c[u='parentNode'];while(i[u]!=d.body)i=i[u];
	l=(n=c.childNodes)[0],r=n[1],n=l[q='querySelector']('[role=navigation]'),b=n[q]('[role]'),g=i.appendChild(d.createElement('div'));
	r[s='style'][u='cssText']+=b[s][u];
	while(t+=n.offsetTop,n=n.offsetParent);
 
g[s][u]='position:absolute;z-index:9;left:'+(l[o='offsetWidth']-5)+'px;top:'+t+'px;bottom:0;width:4px;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
	g[n='addEventListener']('mousedown',function(e){e.which==1&&(sx=e.pageX,lw=l[o],rw=r[o])},0);
	d[n]('mousemove',function(e){sx&&(dx=e.pageX-sx,g[s].left=lw+dx-5+p,l[s].width=lw+dx+p,r[s].width=rw-dx+p)},0);
	d[n]('mouseup',function(){sx=0},0)
})

// Use the Gmail GreaseMonkey API to reliably find the 2 main elements (left- and right-hand columns). You do not need GreaseMonkey installed to use the API.
// See http://code.google.com/p/gmail-greasemonkey/wiki/GmailGreasemonkey10API for more details (note: documentation is out of date)
 
// Load the API. It will run our callback function when loaded, passing a GmailAPI object
gmonkey.load(2, function(o) {
 
	/*
		Set up variables. To keep the code size down, I re-use some of these until they hold their final value.
 
		l		this will end up pointing to the element that is resized to change the left-hand column width
		i		this will end up pointing to the element that the grab bar is inserted into
		c		this will end up pointing to the container that holds the left- and right- hand column elements l & r
		r		this will end up pointing to the element that is resized to change the right-hand column width
		d		this points to the document in the frame we use
		b		this points to the 'Compose' button
		p		this holds the string 'px'
		t		this is used to calculate the top coordinate of the grab bar
		sx		this holds the x coordinate of the mouse when dragging starts
		dx		when dragging, this holds the difference between the start x coordinate and the current one
		lw		this holds the initial width of the left-hand column (updated at the start of each drag)
		rw		this holds the initial width of the right-hand column (updated at the start of each drag)
		n		used for many things, most notably holding the string 'addEventListener'
		s		this holds the string 'style'
		q		this holds the string 'querySelector'
		g		this points to the grab bar element
		u		used for many things, most notably holding the strings 'parentNode' and 'cssText'
	*/		
	var l=i=o.getNavPaneElement(), c=r=o.getActiveViewElement(), d=c.ownerDocument, p='px', t=sx=0, dx, lw, rw, n, s, q, g;
 
	// Update c and i to point to their intended elements
	while(c.compareDocumentPosition(l)&2) c=c[u='parentNode'];
	while(i[u]!=d.body) i=i[u];
 
	// Update l, r, and b to point to their intended elements. Create grab bar, and insert into DOM
	l=(n=c.childNodes)[0], r=n[1], n=l[q='querySelector']('[role=navigation]'), b=n[q]('[role]'), g=i.appendChild(d.createElement('div'));
 
	// Copy whatever x-user-select style is on the Compose button and add it to the RH column to minimise text selection while dragging.
	// Copying the existing style seemed easier than adding from scratch... but as I didn't try, I can't say this with 100% certainty :-)
	r[s='style'][u='cssText'] += b[s][u];
 
	// Calculate the cumulative offsetTop of for the top of the grab bar
	while(t+=n.offsetTop,n=n.offsetParent);
 
	// Style the grab bar
	g[s][u] = 'position:absolute;z-index:9;left:' + (l[o='offsetWidth']-5) + 'px;top:' + t + 'px;bottom:0;width:4px;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
 
	// Add event listeners. mousedown is added to the grab bar, mousemove and mouseup to the document
	g[n='addEventListener']('mousedown', function(e) {
		// Only trigger with LMB on grab bar. Stores initial x coord, and widths of left- and right- hand columns
		e.which==1 && (sx=e.pageX, lw=l[o], rw=r[o])
	}, 0);
 
	d[n]('mousemove', function(e) {
		// If we have the mouse button pressed, work out the x delta, update the column widths and the grab bar position
		sx && (dx=e.pageX-sx, g[s].left=lw+dx-5+p, l[s].width=lw+dx+p, r[s].width=rw-dx+p)
	}, 0);
 
	d[n]('mouseup', function() {
		// Stop the mousemove code from running when LMB is released
		sx=0
	}, 0)
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Orientation test</title>
    <script type="text/javascript">
        function updateOrientation() {
            var displayStr = 'Orientation: ';
 
            switch(window.orientation) {
                case 0:
                    displayStr += 'Portrait';
                    break;
 
                case -90:
                    displayStr += 'Landscape (right, screen turned clockwise)';
                    break;
 
                case 90:
                    displayStr += 'Landscape (left, screen turned counterclockwise)';
                    break;
 
                case 180:
                    displayStr += 'Portrait (upside-down portrait)';
                    break;
            }
 
            document.getElementById('output').innerHTML = displayStr;
        }
    </script>
</head>
 
<body onorientationchange="updateOrientation();">
    <div id="output"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Orientation test</title>
    <script type="text/javascript">
        window.addEventListener('orientationchange', function() {
            document.getElementById('output').innerHTML = 'Orientation: ' + ['Portrait',,'Landscape'][window.orientation & 2];
        }, false);
    </script>
</head>
 
<body>
    <div id="output"></div>
</body>
</html>

Decimal    Binary
 
   0       0000000000000000
  90       0000000001011010
 180       0000000010110100
 -90       1111111110100110
   2       0000000000000010

                   Portrait           Landscape            Portrait           Landscape
 
(Decimal)                 0                  90                 180                 -90
Binary     0000000000000000    0000000001011010    0000000010110100    1111111110100110
& 2        0000000000000010    0000000000000010    0000000000000010    0000000000000010
Result     0000000000000000    0000000000000010    0000000000000000    0000000000000010
(Decimal)                 0                   2                   0                   2

  0 & 2 == 0
180 & 2 == 0
 90 & 2 == 2
-90 & 2 == 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Orientation test</title>
    <script type="text/javascript">
        window.addEventListener('orientationchange', function() {
 
            // You can test like this (on the values 0 and 2):
 
            if (window.orientation & 2) {
                // Do something if in landscape mode
            } else {
                // Do something if in portrait mode
            }
 
 
            // Or, if you really need to have boolean values, then logical NOT the result of the bitwise AND twice
            // The first NOT converts it to a boolean of the opposite state, the second restores its state
 
            if (!!(window.orientation & 2)) {
                // Do something if in landscape mode
            } else {
                // Do something if in portrait mode
            }
 
        }, false);
    </script>
</head>
 
<body>
</body>
</html>

var arr = ['Portrait',,'Landscape'];
alert(arr[0]);         // 'Portrait'
alert(arr[1]);         // undefined
alert(arr[2]);         // 'Landscape'
alert(arr.length);     // 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <meta charset="utf-8" />
    <title>Orientation test</title>
    <script type="text/javascript">
        function updateOrientation() {
            document.body.setAttribute('orient', ['portrait',,'landscape'][window.orientation & 2]);
            window.scrollTo(0, 0);
        };
        window.addEventListener('orientationchange', updateOrientation, false);
        window.addEventListener('load', updateOrientation, false);
    </script>
 
    <style type="text/css">
        html, body {
            margin: 0px;
            padding: 0px;
        }
        body {
            text-align: center;
        }
        body[orient="landscape"] {}
        body[orient="landscape"] img {
            width: 890px;
            height: 690px;
        }
        body[orient="portrait"] img {
            -webkit-transform: rotate3d(0, 0, 1, -90deg) translate3d(-90px, -22px, 0px);
            width: 890px;
            height: 690px;
        }
    </style>
</head>
 
<body>
    <img src="http://oi39.tinypic.com/2l97b41.jpg" />
</body>
</html>

alert(6..toString(2));            // '110'
alert(42..toString(2));           // '101010'
alert(parseInt('110', 2));        // 6
alert(parseInt('101010', 2));     // 42

The -90 I used (16-bit)    1111111110100110
The -90 I used (8-bit)             10100110
-90..toString(2)                   -1011010

var bitCount = 8;                                                        // 8 bit version
var negativeNum = -90;                                                   // Negative number to use
var combosForBitCount = Math.pow(2, bitCount);                           // 2 ** 8 == 256
// Here's the conversion to binary and back to decimal
var negativeBinary = (combosForBitCount + negativeNum).toString(2);      // 10100110
var negativeDecimal = parseInt(negativeBinary, 2) - combosForBitCount;   // -90
 
var bitCount = 16;                                                       // 16 bit version
var negativeNum = -90;                                                   // Negative number to use
var combosForBitCount = Math.pow(2, bitCount);                           // 2 ** 16 == 65536
// Here's the conversion to binary and back to decimal
var negativeBinary = (combosForBitCount + negativeNum).toString(2);      // 1111111110100110
var negativeDecimal = parseInt(negativeBinary, 2) - combosForBitCount;   // -90

var urlToFetch = 'whatever.php?randNum=' + new Date().getTime();

response.addHeader "Cache-Control", "max-age=0,no-cache,no-store"

response.addHeader "Cache-Control", "max-age=0,no-cache,no-store,post-check=0,pre-check=0";
response.addHeader "Expires", "Mon, 26 Jul 1997 05:00:00 GMT"

initialize: function() {
	Event.observe(someEl, 'click',
		this.doSomething.bindAsEventListener(this)
	);
}

init: function() {
	var self = this;
	$(someEl).bind('click', function(eventData) {
		self.doSomething(eventData, self);
	});
}

init: function() {
	jQuery(someEl).bind('click', {thisContext:this}, function(eventData) {
		eventData.data.thisContext.doSomething(eventData);
	});
}

javascript:void(document.designMode='on');

<input type="text" size="50" spellcheck="true">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="en" />
	<title>Disappearing caret bug - workaround</title>
 
	<style type="text/css">
		#fixedDiv {
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
			background: url(caretBugBg.gif);
			position: fixed;
		}
 
		#contentDiv {
			position: relative;
		}
	</style>
 
	<script type="text/javascript">
		function fixCaretBug() {
			document.getElementById('fixedDiv').style.zIndex = -1;
			setTimeout(fixCaretBugPartTwo, 0);
		}
 
		function fixCaretBugPartTwo() {
			document.getElementById('fixedDiv').style.zIndex = 0;
		}
	</script>
</head>
 
<body>
	<div id="fixedDiv"></div>
 
	<div id="contentDiv">
		<form>
			<input type="text" size="50" value="You cannot see the caret in this text input field..." />
			<br />
			<input type="button" value="Click me to fix that!" onclick="fixCaretBug();" />
		</form>
 
		<p>This text...</p>
		<br /><br /><br /><br />
 
		<p>is used...</p>
		<br /><br /><br /><br />
 
		<p>to produce a vertical scrollbar.</p>
		<br /><br /><br /><br />
 
		<p>If you cannot see a vertical scrollbar,</p>
		<br /><br /><br /><br />
 
		<p>reduce the size of your browser window.</p>
		<br /><br /><br /><br />
	</div>
 
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="content-language" content="en" />
    <title>Gradient Background</title>
 
    <style type="text/css">
        body {
            padding: 0px;
            margin: 20px;
            background-color: #00CCFF;
        }
 
        #fadeBandsV {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 80px;
            z-index: 1;
        }
 
        #fadeBandsH {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            z-index: 1;
        }
 
        #fadeBandsV div {
            overflow: hidden;
            position: absolute;
            width: 100%;
        }
 
        #fadeBandsH div {
            overflow: hidden;
            position: absolute;
            height: 200px;
        }
 
        #pageContent {
            position: relative;
            z-index: 2;
        }
    </style>
 
    <script type="text/javascript">
    <!--
 
        // 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, 0, 0], [255, 255, 0], 3, 50, [255, 255, 0], [0, 0, 255], 3, 50, [0, 0, 255], [0, 204, 255], 3, 50);
            createGradientH([255, 0, 0], [255, 255, 255], 3, 50, [255, 255, 255], [0, 0, 255], 3, 50);
        }
 
    //-->
    </script>
</head>
 
<body onload="drawGradient();">
    <div id="fadeBandsV"></div>
    <div id="fadeBandsH"></div>
    <div id="pageContent">
        <h1>A test heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lorem. Proin laoreet fringilla sem. Pellentesque malesuada, urna tristique ornare feugiat, turpis wisi ultrices nisl, ac vulputate dolor justo non sapien. Sed fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nulla. Maecenas tortor nulla, adipiscing eget, auctor sed, cursus id, quam. Suspendisse at sem nonummy orci lobortis ultrices. Proin odio est, dictum id, dictum nec, ullamcorper sit amet, sem. Proin ullamcorper lacus vitae risus. Nulla feugiat posuere erat. In nec est ac eros lacinia congue. Suspendisse potenti. In a ipsum rhoncus ipsum volutpat consectetuer.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lorem. Proin laoreet fringilla sem. Pellentesque malesuada, urna tristique ornare feugiat, turpis wisi ultrices nisl, ac vulputate dolor justo non sapien. Sed fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nulla. Maecenas tortor nulla, adipiscing eget, auctor sed, cursus id, quam. Suspendisse at sem nonummy orci lobortis ultrices. Proin odio est, dictum id, dictum nec, ullamcorper sit amet, sem. Proin ullamcorper lacus vitae risus. Nulla feugiat posuere erat. In nec est ac eros lacinia congue. Suspendisse potenti. In a ipsum rhoncus ipsum volutpat consectetuer.</p>
    </div>
</body>
</html>