function setImages(){
	//var offsetwidth = $('footer').down().getWidth();
	//var offsetwidth = $$('#footer li.csc-textpic-image')[0].up(3).getWidth();
	var offsetwidth = $('c3').getWidth();
	var images = $$('#footer li.csc-textpic-image');
	var imageWidth = 0;
	var imageWidthArray = new Array();
	var imageMarginRight = 0;
	images.each(function(value,index){
		imageWidthArray.push(parseInt(value.getWidth()));
		return imageWidth += value.getWidth();
	});
	images.each(function(value,index){
		return imageMarginRight += parseInt(value.getStyle("marginRight"));
	});

	//get the max imagewidth
	var maxImageWidth = 0; //größte Zahl
	for(var i = 0; i < imageWidthArray.length; i++) {
   		if(imageWidthArray[i] > maxImageWidth) {
      			maxImageWidth = imageWidthArray[i];
   		}
	}

	var paddingValue = parseInt(((offsetwidth - (imageWidth+imageMarginRight)) / imageWidthArray.length) / 2); 

	for(var i=0 ; i < images.length; i++){
		width = maxImageWidth - parseInt(images[i].getStyle('width')) + paddingValue;
		  images[i].setStyle({
 				paddingLeft: width+'px',
			});
	}

}

Event.observe(window, 'load', function() {
  //setImages();
  setImgs('c3');
});

function setImgs(id){
	if($(id) !== null){
		//clean style of surrounding li's (which are generated by typo3)
		var listItems=$(id).getElementsByTagName('LI');
		for(var i = 0 ; i < listItems.length ; i++){
			listItems[i].style.width="";
		}	
		//get the usable space (width minus padding)
		var totalwidth = $(id).getWidth() - $(id).getStyle('paddingRight').replace(/px/,'') - $(id).getStyle('paddingLeft').replace(/px/,'');
		//get all images inside id
		var images = $(id).getElementsByTagName('IMG');
		//determine max imagewidth
		var maxImgWidth = 0;
		for(var i = 0 ; i < images.length ; i++){
			if(images[i].getWidth() > maxImgWidth) maxImgWidth = images[i].getWidth();
		}
		//calculate the margin for each element and side
		var singleMargin = Math.floor(((totalwidth - (images.length * maxImgWidth)) / images.length)/2);
		//single steps of calculation:
		//var totalImgWidth = images.length * maxImgWidth;
		//var availableWidth = totalwidth - totalImgWidth;
		//var marginLeftRight = availableWidth / images.length;
		//var singleMargin = Math.floor(marginLeftRight/2);
	
		//set the margin for each image
		for(var i = 0 ; i < images.length ; i++){
			images[i].style.marginLeft = singleMargin + "px";
			images[i].style.marginRight = singleMargin + "px";
		}	
	}
}

