// Function to get the amount of pixels scrolled
//    Copied from the Internet
function getScrollXY() {
   var scrOfX = 0, scrOfY = 0;
   if( typeof( window.pageYOffset ) == 'number' ) {
     //Netscape compliant
     scrOfY = window.pageYOffset;
     scrOfX = window.pageXOffset;
   } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
     //DOM compliant
     scrOfY = document.body.scrollTop;
     scrOfX = document.body.scrollLeft;
   } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
     //IE6 standards compliant mode
     scrOfY = document.documentElement.scrollTop;
     scrOfX = document.documentElement.scrollLeft;
   }
   return [ scrOfX, scrOfY ];
}

// Function to get the Elements with class "fixed"
//    It is the same as most function "getElementsByClass" found on the net
//    The only difference is that it does not accept parameters,
//    they are hard-coded instead

function getFixedElements(){
   var classElements = new Array();
   var node = document;
   var els = node.getElementsByTagName('*');
   var pattern = new RegExp("(^|\\s)"+"fixed"+"(\\s|$)");
   for (i = 0, j = 0; i < els.length; i++) {
     if (pattern.test(els[i].className) ) {
       classElements[j] = els[i];
       j++;
     }
   }
   return classElements;
}

// The function which scrolls the elements
// to their initial position (relative to the window borders)
// after the page has been scrolled

var fix_first = false;
var old_top = 0;

function maintainFixing(){
	
   var Elements = getFixedElements();
   var Scrolling= getScrollXY();
	
	var colorTileContainer = document.getElementById('colorTileContainer');
	if (colorTileContainer) {
		var pos = getElementPosition(colorTileContainer);
		var fixed = (pos[1]-Scrolling[1] < 50);
	}
	
	var triade = document.getElementById('triade');
	
	
	if (!fix_first) {
	   fix_first = true;
	   triade.style.top = colorTileContainer.offsetTop + 'px';
	   old_top = triade.offsetTop;
	   //window.setTimeout(maintainFixing,200);
   }
   
	
   for(ei=0;ei<Elements.length;ei++){
      // Fix the Elements to the y axis
      //Elements[ei].style.top = Elements[ei].initialPositionTop + Scrolling[1];
	  Elements[ei].style.top = fixed ? (-100 + Scrolling[1]) + 'px' : old_top + 'px';
      // Use if you want to fix the elements to the x axis as well
      //Elements[ei].style.left= Elements[ei].initialPositionLeft+ Scrolling[0];
   }
   
}

// The function to get the absolute position of an element
// Styling the elements with position:... wont interfere

function getElementPosition(obj){
	var curleft = curtop = 0;

   if (obj.offsetParent) {
      do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
      }while(obj = obj.offsetParent);
   }
   return [curleft,curtop];
}

// Get the elements and store their initial position

var Elements = getFixedElements();
for(ei=0;ei<Elements.length;ei++){
   var initPos = getElementPosition(Elements[ei]);
   Elements[ei].initialPositionTop = initPos[1];
   Elements[ei].initialPositionLeft= initPos[0];
}


// Add the event handler to the 'onscroll' event
//    This can be avoided by adding onscroll="maintainFixing()"
//    to the body tag in your HTML

if(typeof window.attachEvent != 'undefined') {
   window.attachEvent("onscroll", maintainFixing);
   window.attachEvent("onload", maintainFixing);
}
else if(typeof document.addEventListener != 'undefined') {
   document.addEventListener('scroll', maintainFixing, false);
   document.addEventListener('load', maintainFixing);
}
else {
   window.onscroll = maintainFixing;
   window.onload = maintainFixing;
}