var bg_red=136;
var bg_green=136;
var bg_blue=136;
var color_period=200;
var color_timeout=10000;
var f_int;

function $(id){
        return document.getElementById(id);
}

function hex(i){
i=i/16+1;
if(i<1)return 0;
if(i<2)return 1;
if(i<3)return 2;
if(i<4)return 3;
if(i<5)return 4;
if(i<6)return 5;
if(i<7)return 6;
if(i<8)return 7;
if(i<9)return 8;
if(i<10)return 9;
if(i<11)return 'a';
if(i<12)return 'b';
if(i<13)return 'c';
if(i<14)return 'd';
if(i<15)return 'e';
return 'f';
}
function start_colorize(){
        var color_div=$('color');
        var x=makecolor();
        bg_red=x.red;
        bg_green=x.green;
        bg_blue=x.blue;
        color_div.style.backgroundColor='#'+hex(bg_red)+hex(bg_green)+hex(bg_blue);
        setInterval('makecolor()',color_timeout);
        $('gradient').style.minHeight=$('color').style.minHeight = Viewport().pageY_windowY + "px";
}

function makecolor(){
        clearInterval(f_int);
        var red=Math.random()*16;
        var blue=14-red*0.7;
        var green=Math.random()*16-blue/6;
        red+=4;
        green+=2;
        red=red*17;
        blue=blue*17;
        green=green*17;
        var refr=color_timeout/color_period;
        f_int=setInterval('fadebackground('+((red-bg_red)/refr)+','+((green-bg_green)/refr)+','+((blue-bg_blue)/refr)+');',color_period);
        var a=$('color');
//        document.title=red+' '+green+' '+blue;
        return {'red':red,'green':green,'blue':blue};
}

function fadebackground(d_r,d_g,d_b){
        a=$('color');
        bg_red+=d_r;
        bg_green+=d_g;
        bg_blue+=d_b;
        if(bg_red>255)bg_red=255;
        if(bg_green>255)bg_green=255;
        if(bg_blue>255)bg_blue=255;
        a.style.backgroundColor='#'+hex(bg_red)+hex(bg_green)+hex(bg_blue);
//        document.title=a.style.backgroundColor;
}


function Viewport(){
        this.windowX = (document.documentElement && document.documentElement.clientWidth) || window.innerWidth || self.innerWidth || document.body.clientWidth;
        this.windowY = (document.documentElement && document.documentElement.clientHeight) || window.innerHeight || self.innerHeight || document.body.clientHeight;
        this.scrollX = (document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft;
        this.scrollY = (document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop;
        this.pageX = (document.documentElement && document.documentElement.scrollWidth) ? document.documentElement.scrollWidth : 0;
        this.pageX = (this.pageX > document.body.offsetWidth) ? this.pageX : document.body.offsetWidth;
        this.pageX = (document.body.scrollWidth > this.pageX) ? document.body.scrollWidth : this.pageX;
        //this.pageY = (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight;
        this.pageY = (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : 0;
        this.pageY = (this.pageY>document.body.offsetHeight)?this.pageY:document.body.offsetHeight;
        this.pageY = (this.pageY>document.body.scrollHeight)?this.pageY : document.body.scrollHeight;
        this.pageY_windowY=(this.pageY>this.windowY)?this.pageY:this.windowY;
        return this;
}