var isMinNS4   = document.layers
var colors     = [123,242,215,185,246,232, 99,240,172,  2,149, 78,  6,249,132,235,249,  6,226,235, 88,248,251,196,242,247,155,240,177,202,251, 14,109,248,210,225, 23, 18,241,  9,  5,175, 61, 59,180, 77, 11,168,220,198,249,131,228,249,156,230,246, 20,208,248, 41,211,248, 15,111,  2, 28,168,  9,172,245,162,  3,111, 92,248,206, 39,248,165,  4,193,223,194,  0, 81,126,139,237, 57,255,239, 68,255,255,255,185,102,161,240,173, 55,239,124, 48,166,242,244, 51,167,200, 19,106, 54,244,166,244,255,251,210, 37, 53, 24,249,190,151,189,116, 67,231,225, 71,247,240, 42,249,244,105,233,231,180,211,210,189,144,247,236, 50,129,121, 12,215,193, 42,245,224, 98,211,244, 39,204,252,135,222,247, 12,105,153, 23,131,186,  8,167,250, 74,182,237, 44, 86,108,125, 66,246,172,132,253, 99, 74,150, 93, 81,117,204,188,236,157,142,188,110, 46, 12,142, 67, 65,151, 14, 11,242, 46, 42,249, 90, 86,244,141,139,247,198,197,245,166,164,254,164,253];
var pastell    = [224,242,252,249,222,175,253,185,244,223,171,253,189,248,160,147,249,250,177,205,249,244,249,177,244,245,228,249,229,151,185,249,235,150,250,228,245,240,110,253,253,247,255,255,255];
var pastell2   = [  0,  0,  0,255,255,255,225,251,  3, 41,211,248, 52, 54,124,248,143, 41,248, 51, 41,118, 13, 25,132,243,250,251,150,197,251,150,224,237,250,130];
var areaColor  = [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
var areaHeight = [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1000000];

function getWindowWidth () {
  if (window.innerWidth)
    return window.innerWidth;
  else if (document.documentElement && document.documentElement.clientWidth)
    return document.documentElement.clientWidth;
  else if (document.body)
    return document.body.clientWidth;
  else
    return 0;
}

function nextColor() {
	var idx = Math.floor(Math.random() * colors.length / 3);
	for (i=0;i<areaColor.length;i++)
		if (idx == areaColor[i])
		  return nextColor();
	return idx;
}

function next9Color() {
	var idx = Math.floor(Math.random() * pastell2.length / 3);
  if (idx == areaColor[9])
		return nextTopColor();
	return idx;
}

function nextTopColor() {
	var idx = Math.floor(Math.random() * pastell.length / 3);
  if (idx == topColor)
		return nextTopColor();
	return idx;
}

function nextChangeIndex() {
	var idx = Math.floor(Math.random() * (areaColor.length-1));
	if (idx == changingBoxIdx)
		return nextChangeIndex();
	if (idx == 9)
		return nextChangeIndex();
	return idx;
}

Viewer.prototype.setColor = function(h, b) {
	if (b == 9)
  	areaColor[b] = next9Color();
  else
  	areaColor[b] = nextColor();

	areaHeight[b] = h;
}

Viewer.prototype.resetAll = function() {
	this.setColor( 27, 0);
	this.setColor(  6, 1);
  this.setColor(115, 2);
  this.setColor(  2, 3);
  this.setColor( 12, 4);
	this.setColor( 22, 5);
	this.setColor( 72, 6);
	this.setColor( 23, 7);
	this.setColor(  4, 8);
	this.setColor(170, 9);
	this.setColor(  9,10);

  resetter = 50;
  topChange = 2;
  topColor = nextTopColor();
}

function toHex(dec) {
  var hexCharacters = "0123456789ABCDEF";
  if (dec < 0)
     return "00";
  if (dec > 255)
     return "FF";
  return hexCharacters.charAt(Math.floor(dec / 16)) + hexCharacters.charAt(dec % 16)
}

function mkColor(idx,arr) {
	return "#"+toHex(arr[idx*3])+toHex(arr[idx*3+1])+toHex(arr[idx*3+2]);
}

Viewer.prototype.drawAll = function() {
	var t = 300;
	var elementStyle = document.getElementById("boxA").style;

	if (topChangeNow == 1)
     elementStyle.background = mkColor(1,NowColor);
  else
     elementStyle.background = mkColor(topColor,pastell);

  document.getElementById("bodde").src = "rotis/nicholasbodde" + pastell[topColor*3] + pastell[topColor*3+1] + pastell[topColor*3+2] + ".gif";
  
  elementStyle.width = getWindowWidth()+"px";
	elementStyle.height = t+"px";
	elementStyle.top = "0px";

	for (b=0;b<areaColor.length;b++) {
		var thisHeight = Math.round(areaHeight[b]);

		elementStyle=document.getElementById("box"+b).style;
		if (b==changingBoxIdx) {
		  elementStyle.background = mkColor(0,NowColor);
  		elementStyle.height = thisHeight+"px";
	  } else {
	  	if (b == 9)
	  	  if (topChangeNow == 1)
	  	    elementStyle.background = mkColor(2,NowColor);
	  	  else
		      elementStyle.background = mkColor(areaColor[b],pastell2);
		  else
		    elementStyle.background = mkColor(areaColor[b],colors);
		  if (b==(changingBoxIdx+1)) {
		  	var delta = thisHeight + Math.round(areaHeight[b-1]) - hBoth;
		  	if (delta != 0) {
		  		elementStyle.height = (thisHeight-delta)+"px";
    		} else
    			elementStyle.height = thisHeight+"px";
  		} else
  		  elementStyle.height = areaHeight[b]+"px";
	  }
	  elementStyle.width = getWindowWidth()+"px";
		elementStyle.top = t+"px";
	  t = t + thisHeight;
	}

	elementStyle=document.getElementById("boxZ").style;

  var tc;

	if (topChangeNow == 1)
     tc = mkColor(1,NowColor);
  else
     tc = mkColor(topColor,pastell);
     
  elementStyle.background = tc;
	elementStyle.width = getWindowWidth()+"px";
	elementStyle.height = "50px";
	elementStyle.top = t+"px";
}

var topColor = -1;
var topChangeNow = 0;
var topChange = 2;
var resetter = 0;
var flickerCount = 1;
var changingBoxIdx = -222;
var hChange = 0;
var hBoth = 0;
var h0 = 0;
var h1 = 0;
var smoothIntervall = 40;

var IncColor = [0,0,0,0,0,0,0,0,0];
var NowColor = [0,0,0,0,0,0,0,0,0];
var NewColor = [0,0,0];

Viewer.prototype.flicker = function() {
	areaHeight[changingBoxIdx] += hChange;
	areaHeight[changingBoxIdx+1] -= hChange;
	for (b=0;b<NowColor.length;b++)
    NowColor[b] += IncColor[b];

	flickerCount++;

	if (flickerCount == smoothIntervall) {
		areaColor[changingBoxIdx] = NewColor[0];
		areaHeight[changingBoxIdx] = h0;
  	areaHeight[changingBoxIdx+1] = h1;
		changingBoxIdx = -222;
		flickerCount = 1;
		var me = this;
		clearInterval(this.interval);
    this.interval = setInterval(function() { me.next() }, 5000);
    topChange--;
    if (topChange == 0) {
    	topChange = 2;
    	topColor = NewColor[1];
    	areaColor[9] = NewColor[2];
    	topChangeNow = 0;
    }
  }

  this.drawAll();
}

function calcIncColor(nc,oldI,newI,arr) {
	NowColor[nc  ] = arr[oldI*3  ];
	NowColor[nc+1] = arr[oldI*3+1];
	NowColor[nc+2] = arr[oldI*3+2];

	IncColor[nc  ] = (arr[newI*3  ]-NowColor[nc  ])/smoothIntervall;
	IncColor[nc+1] = (arr[newI*3+1]-NowColor[nc+1])/smoothIntervall;
	IncColor[nc+2] = (arr[newI*3+2]-NowColor[nc+2])/smoothIntervall;
}

Viewer.prototype.next = function() {
	resetter--;
	if (resetter == 0)
		this.resetAll();

	changingBoxIdx = nextChangeIndex();
	NewColor[0] = nextColor();
	calcIncColor(0,areaColor[changingBoxIdx],NewColor[0],colors);

	if (topChange == 1) {
		topChangeNow = 1;
 	  NewColor[1] = nextTopColor();
	  calcIncColor(3,topColor,NewColor[1],pastell);
	  NewColor[2] = next9Color();
	  calcIncColor(6,areaColor[9],NewColor[2],pastell2);
  }

	hChange = Math.floor(Math.random() * 20);
	if (Math.random() > 0.5)
		hChange = -hChange;

  if ((areaHeight[changingBoxIdx+1]-hChange) < 3)
  	hChange = areaHeight[changingBoxIdx+1]-3;

  if ((areaHeight[changingBoxIdx]+hChange) < 3)
  	hChange = -(areaHeight[changingBoxIdx]-3);

  h0 = areaHeight[changingBoxIdx];
  h1 = areaHeight[changingBoxIdx+1];

  hBoth = h0 + h1;
  h0 += hChange;
  h1 -= hChange;
  hChange = hChange/smoothIntervall;

  var me = this;
  clearInterval(this.interval);
  this.interval = setInterval(function() { me.flicker() }, 20);
	this.drawAll();
}

function Viewer() {
  this.interval = null;
  this.resetAll();
  this.drawAll();
  var me = this;
  this.interval = setInterval(function() { me.next() }, 5000);
}

function pageWidth() {return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ?       document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;}
function pageHeight() {return  window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?  document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;}
function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset :document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;}
function posTop() {return typeof window.pageYOffset != 'undefined' ?  window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;}
function posRight() {return posLeft()+pageWidth();} function posBottom() {return posTop()+pageHeight();}

function PositionScroller() {
	var elementStyle = document.getElementById("simply-scroll-id").style;
	elementStyle.top = (posTop()+pageHeight()-40) + "px";
}

var viewer = null;

function main() {	
  viewer = new Viewer();
  PositionScroller();
}

window.onload = main;
window.onresize = resize;
window.onscroll = PositionScroller;
PositionScroller();

function resize() {
	PositionScroller();	
	if (isMinNS4 && origWidth == window.innerWidth && origHeight == window.innerHeight) {
		return;
	}
	
	if (viewer) {
		viewer.drawAll();
	}  
}