window.screenMode = '';
window.isLoaded = false;


window.savedOnload = window.onload; //alert(window.onload);
window.onload = function() {
  if (savedOnload!==null) savedOnload();
  window.isLoaded = true;
  ResizeScreen(window.screenMode);
}

document.addEvent('domready', function() {
  SetOnResize();
});

function SetOnResize() {
  var timeOut;
  window.onresize = function(){
    clearTimeout(timeOut);
    timeOut = setTimeout(SetScreenMode, 150);
  };
  return SetScreenMode();
};

function SetScreenMode() {
  var sMode = '';                      // var will contain calculated new screenMode
  var switchWidth = 980;               // < flowScreen and >=fullScreen
  var urlStr = window.location.href;   // get urlstring to search for urlparam ?fullscreen or ?flowscreen

  // *** Calculate new screenMode ***
  // conform sMode to given urlparams
  if (urlStr.search(/\?fullscreen/)!=-1) {
    sMode = 'full';
  } else if (urlStr.search(/\?flowscreen/)!=-1) {
    sMode = 'flow';
  } else if (urlStr.search(/\?noscreen/)!=-1) {
    sMode = 'none'; // for testing purposes. At startup when no param is given, body#id is 'none' to prevent flickering screen when css selection happens
  } else {
    // autoAdjust if no urlparam is given
    sMode = (window.viewport().w >= switchWidth) ? 'full' : 'flow';
  }

  // *** Determine if resizeAction is needed ***
  // if sMode and screenMode are set, no need to continue
  if (window.isLoaded && window.screenMode==sMode) return sMode;

  // *** do the resize action ***
  ResizeScreen(sMode);
  return sMode;
}

function ResizeScreen(sMode) {
  // set the body#id for the css switches
  document.documentElement.id = sMode;
  // load all images with class .fullonly
  var fixedHeight = (sMode=='full');

  SetImgSrc('.switchimg', fixedHeight);

  // set the height of the divs in fullscreen mode to fixed or auto.
  if (window.isLoaded) {
    SetBlockSize('.block', fixedHeight);
    SetBlockSize('.menu', fixedHeight);
    EqualHeight(".service", "#content", fixedHeight);
  }
  // *** and do the bookkeeping ***
  // finally, store the determined screenMode in window.screenMode and return
  window.screenMode = sMode;
  return window.screenMode;
};



function SetImgSrc(_class,_load) {
  // ***
  // function can load and unload images.
  // it loads on strings that are stored in a html ref tag.
  // unloading saves the src string to the html ref tag.
  // ***
  
  // error out if _class not filled
  if (_class === undefined ) return 'error in SetImgSrc';
  var els = $$(_class);   // get all elements that contain _class in class
  // return if no elements were found.
  if (!els) return false;

  var el, getAtt, isSrc, getSrc; // loop vars declarations
  // run through the elements list
  for (var i=0;i<els.length;i++) {
    el = els[i]; // per element
    //get the actual src string
    isSrc = el.src; //el.getAttribute("src"); //get the src attribute from the el
    // attribute to load or to unload?
    getAtt = (_load) ? "data-fullSrc" : "data-flowSrc";
    // get the attribute string
    getSrc = el.getAttribute(getAtt); //get the data-fullScr attribute
    // correct src if getSrc is empty (empty src does not validate)
    if (String(getSrc).length <= 3) getSrc = "pixel.png";
    //if is already loaded, next loop
    if (!getSrc || isSrc == getSrc) continue;
    //implement
    el.setAttribute('src',getSrc);
  }
  // done
  return true;
}

function SetBlockSize(_class,_fixed) {
  if (_class === undefined ) return;

  var els = $$(_class);
  if (!els) {alert('elements to resize not found.'); return false;}

  for (var i=0;i<els.length;i++) {
    var el = els[i];
    el.setStyle('height', 'auto');
    if (!_fixed) continue;

    var blockHeight = el.getStyle('min-height').toInt();
    var heightInClass = el.className.indexOf('h');
    if (heightInClass != -1) blockHeight = blockHeight * el.className.substr(heightInClass+1,1);
    var blockMarginB = el.getStyle('margin-bottom').toInt();
    var blockHTotal = blockHeight + blockMarginB;
    var sizey = el.getSize().y;
    var sizeyExtra = sizey - blockHeight;

    if (sizeyExtra<=1 || _class!=".block") {
      var newHeight = blockHeight; //don't create extra block if size is 1 over
    } else {
      var newHeight = blockHeight + blockHTotal + (( sizeyExtra - (sizeyExtra % blockHTotal) ) )
    };
    el.setStyle('height', newHeight);
    // el.innerHTML = '-' + newWidth + '-' + el.innerHTML;
  }
  return true;
}

function EqualHeight(_set,_source,_fixed) {
  var follow = $$(_set);
  if (!_fixed) {
    follow.setStyle("height", "auto");
    return true;
  }
  var lead = $$(_source);
  var leadHeight = lead.getStyle("height");
  var newFollowHeight = (leadHeight);//.toInt() % plaatjeHeight.toInt()) + 1;
  follow.setStyle("height",newFollowHeight);
  return newFollowHeight;
}

window.viewport = function() {
//-- returns the inner measures of the browser screen --
  var height = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
  var width = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
  return {w:width,h:height};
}

window.center = function() {
	var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
	var offsetX = 0;
	var offsetY = 0;
	//IE
	if(!window.pageYOffset) {
		//strict mode
		if(!(document.documentElement.scrollTop == 0))	{
			offsetY = document.documentElement.scrollTop;
			offsetX = document.documentElement.scrollLeft;
		}
		//quirks mode
		else {
			offsetY = document.body.scrollTop;
			offsetX = document.body.scrollLeft;
		}
	}
	//w3c
	else {
		offsetX = window.pageXOffset;
		offsetY = window.pageYOffset;
	}
	var _x = ((this.size().width-hWnd.width)/2)+offsetX;
	var _y = ((this.size().height-hWnd.height)/2)+offsetY;
	return{x:_x,y:_y};
}

function showCenter(point) {
  var div = document.createElement("div");
  div.style.background = "#dedede";
  div.style.position = "absolute";
  div.style.top = point.y + "px";
  div.style.left = point.x + "px";
  div.style.width = "100px";
  div.style.height = "100px";
  document.body.appendChild(div);
}