function drawGradient(startColor, endColor){
    try{
        // get window size
        var iWidth = 0, iHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            iWidth = window.innerWidth;
            iHeight = window.innerHeight;
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            iWidth = document.documentElement.clientWidth;
            iHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            iWidth = document.body.clientWidth;
            iHeight = document.body.clientHeight;
        }

        // set the gradiant background
        if (document.all && !window.opera) {
            // for IE use DXImageTransform
            document.body.style.filter="progid:DXImageTransform.Microsoft.Gradient(startColorStr='" + startColor + "', endColorStr='" + endColor + "', gradientType='0')";
        } else {

            // set document margin/pading
            document.body.style.overflow = 'hidden';
            document.body.style.padding  = '0px';
            document.body.style.margin   = '0px';

            // create DIV that will be used for the canvas and background Image
            var oDiv = document.createElement("DIV");
            oDiv.style.position    = 'absolute';
            oDiv.style.top         = '0px';
            oDiv.style.left        = '0px';
            oDiv.style.height      = '100%';
            oDiv.style.width       = '100%';
            oDiv.style.overflow    = 'hidden';
            oDiv.style.zIndex=1;
            oDiv.setAttribute("id","canvasDiv");

            // create DIV that will contain the whole document
            var oDocDiv = document.createElement("DIV");
            oDocDiv.style.position    = 'absolute';
            oDocDiv.style.top         = '0px';
            oDocDiv.style.left        = '0px';
            oDocDiv.style.height      = '100%';
            oDocDiv.style.width       = '100%';
            oDocDiv.style.overflow    = 'hidden';
            oDocDiv.style.zIndex=2;
            oDocDiv.setAttribute("id","canvasDiv");
            oDocDiv.innerHTML = document.body.innerHTML;
            //document.body.innerHTML ="";
            document.body.appendChild(oDiv);
            oDiv.appendChild(oDocDiv);

            // create canvas
            var c = document.createElement("canvas");
            c.setAttribute("width",iWidth);
            c.setAttribute("height",iHeight);
            c.setAttribute("top",0);
            c.setAttribute("left",0);
            c.setAttribute("id","cl");
            oDiv.appendChild(c);
            var ctx = c.getContext("2d");

            // create the gradient
            var gradient= ctx.createLinearGradient(0,0,0,iHeight)
            gradient.addColorStop(0, startColor)
            gradient.addColorStop(1, endColor);
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0,iWidth,iHeight);

            // copy the canvas into a image object
            var img = document.createElement("img");
            img.style.position    = 'absolute';
            img.setAttribute("width","100%");
            img.setAttribute("height","100%");
            img.setAttribute("top",0);
            img.setAttribute("left",0);
            img.setAttribute("id","bkgImage");
            img.setAttribute("border",0);
            img.style.zIndex=1;
            oDiv.appendChild(img);
            var imgData = c.toDataURL();
            img.src = imgData;
            img.style.zIndex=0;
            oDiv.style.zIndex=0;

            // remove the canvas
            oDiv.removeChild(c);
        }
    } catch(e){
            //alert(e);
    }
}