/**
 *  change the opacity for different browsers
 */
function changeOpac(opacity, id) {
	 var element = $(id);
	 element.setOpacity(opacity/100);
}
 /**
  * 
  */
var blendcounter=0;
function blending(imageArrayLength) {
	blendingImageOld = 'blendingimage' + blendcounter;
	blendingImageNew = 'blendingimage' + (blendcounter+1)%imageArrayLength;
    blendingImageIn(blendingImageOld,blendingImageNew,1800);
    blendcounter = (blendcounter+1)%imageArrayLength;
}
/**
 * 
 * @return
 */
function timedBlending() {
    imageArrayLength = document.getElementsByClassName('blendingimage').length;
    window.setInterval("blending(imageArrayLength)",5000);
}
/**
 * makes a blending change from old image to new image in specified durration
 * @param oldimage
 * @param newimage
 * @param millisec
 * @return
 */
function blendingImageIn(oldimage, newimage, millisec) {
	var speed = Math.round(millisec / 100);
	var timer = 0;
	//set the new image op 0 and z-index 5
	changeOpac(0, newimage);
	$(newimage).setStyle({
		zIndex: 5
	});
	$(oldimage).setStyle({
		zIndex: 2
	});
	//fade in image
    for(i = 0; i <= 100; i=i+5) {
        setTimeout("changeOpac(" + i + ",'" + newimage + "')",(timer * speed));
        timer++;
    }
    setTimeout("resetZ('"+ oldimage + "')", 2*(timer * speed));
}
function resetZ(oldimage) {
	$(oldimage).setStyle({
		zIndex: 1
	});
}
function timedUserBlending() {
  imageArrayLength = document.getElementsByClassName('blendingimage').length;
  if(imageArrayLength > 1)
  window.setInterval("blending(imageArrayLength)",7000);
}