// height of the scrolling text
var scrllTextSizeRatio = 0.2;
// size of the steps the scrolling text takes
var scrllStepSize = 0.1;
// initial order of the layers (from down to up)
var layerOrder = ['about', 'customers', 'consulting', 'general'];
// position of the left side of the lowest sheet
var layerLeftStart = 20;
// offset for the next sheets
var layerLeftStep = 5;
// position of the top site of the lowest sheet
var layerTopStart = 5;
// offset for the next sheets
var layerTopStep = 10;

// no need to edit here below
var scrllHorPos, scrllEl, textArray, moveInterval, topEl, updateSize;
var scrllInitiate, nextText, setOnClick, initialOrder, reOrder, oneMove;

window.onload = function() {
			initialOrder();
			setOnClick();
			scrllInitiate(
				document.getElementById('scrollme'),
				document.getElementById('scrolllines'));
		};

window.onresize = function() {updateSize(document.getElementById('scrollme'));};

function getWindowHeight() {
  var height = 0;
  if( typeof( window.innerHeight ) == 'number' ) {
    //Non-IE
    height = window.innerHeight;
  } else if( document.documentElement && document.documentElement.clientHeight ) {
    //IE 6+ in 'standards compliant mode'
    height = document.documentElement.clientHeight;
  } else if( document.body && document.body.clientHeight ) {
    //IE 4 compatible
    height = document.body.clientHeight;
  }
  return height;
}

function updateSize(el) {
	el.style.fontSize = (getWindowHeight() * scrllTextSizeRatio)+"px";
}

function scrllInitiate(el, texts) {
	// clear empty lines from texts
  if (texts.innerText) {
    textArray = texts.innerText.split('#');
  } else {
    textArray = texts.textContent.split('#');
  }
  for (var i=0;i<textArray.length;i++) {
		if (textArray[i] === "") {
			textArray.splice(i, 1);
		}
	}
	updateSize(el);
	//start scroll
  nextText(el);
	scrllEl = el;
	setInterval("scrollStep(scrllEl)", 10);
}

function scrollStep(el) {
	//calc and do step
	if(scrllHorPos < -100) {
    nextText(el);
	}
	el.style.left = scrllHorPos.toFixed(1) + "%";
	scrllHorPos = scrllHorPos - 0.1;
}

function nextText(el) {
	scrllHorPos = 100;
  el.innerHTML=textArray[Math.floor(Math.random() * textArray.length)];
	el.style.top = Math.ceil(Math.random() * (1 - scrllTextSizeRatio) * 100) + "%";
	el.style.zIndex = Math.floor(Math.random() * layerOrder.length)*2+1;
}

function setOnClick() {
	for (var i = 0; i < layerOrder.length; i++) {
		var el = document.getElementById(layerOrder[i]);
		el.onclick = function() {reOrder(this);};
	}
}

function initialOrder() {
	for (var i = 0; i < layerOrder.length; i++) {
		var el = document.getElementById(layerOrder[i]);
		el.setAttribute("class", "contentLayer");
		el.setAttribute("className", "contentLayer");
		el.style.left = (layerLeftStart+i*layerLeftStep)+"%";
		el.style.top = (layerTopStart+i*layerTopStep)+"%";
		el.style.zIndex = 2*i+2;
	}
}


function reOrder(el) {
	topEl = el;
	moveInterval = setInterval("reOrderStep()", 11);
}

function reOrderStep() {
	// calculate new position for topEl
	var l = layerOrder.length-1;
	var lt = layerLeftStart+l*layerLeftStep;
	var tt = layerTopStart+l*layerTopStep;
  var zt;
	if (layerOrder[layerOrder.length-1] != topEl.id) {
		// move new topEl top position and a bit more up:
		zt = 2*(l+1)+1;
		if (oneMove(topEl, lt, tt, zt)) {
			return;
		}
		for (var i = 0; i < layerOrder.length; i++) {
			// sort the other elements to the right position
			if (layerOrder[i] == topEl.id && i < layerOrder.length-1) {
				var el = document.getElementById(layerOrder[parseInt(i, 10)+1]);
				var leftTarget = layerLeftStart+i*layerLeftStep;
				var topTarget = layerTopStart+i*layerTopStep;
				var zTarget = 2*parseInt(i, 10)+2;
				if (oneMove(el, leftTarget, topTarget, zTarget)) {
					return;
				}
				layerOrder[i] = layerOrder[parseInt(i, 10)+1];
				layerOrder[parseInt(i, 10)+1] = topEl.id;
			}
		}
	}
	// we are now sorted, move topEl back to correct z-index:
	zt = 2*(l+1);
	if (oneMove(topEl, lt, tt, zt)) {
		return;
	}
	// we are done, clean up the interval
	clearInterval(moveInterval);
}

function oneMove(el, leftTarget, topTarget, zTarget) {
	var leftNow = parseInt(el.style.left.replace("%", ""), 10);
	var topNow = parseInt(el.style.top.replace("%", ""), 10);
	var zNow = parseInt(el.style.zIndex, 10);
	var leftSteps = leftTarget-leftNow;
	var topSteps = topTarget-topNow;
	var zSteps = zTarget-zNow;
	var steps = Math.max(Math.abs(leftSteps), Math.abs(topSteps), Math.abs(zSteps));
	if (steps > 0.99) {
		var leftStep = leftSteps/steps;
		var topStep = topSteps/steps;
		var zStep = zSteps/steps;
		leftNow = leftNow+leftStep;
		topNow = topNow+topStep;
		zNow = zNow+zStep;
		el.style.left = Math.round(leftNow)+"%";
		el.style.top = Math.round(topNow)+"%";
		el.style.zIndex = Math.round(zNow);
		return true;
	}
	return false;
}