function squares(id) {		// call this function from form of html 
	fld = document.getElementById(id);
	children = fld.childNodes;
	number = children.length;
	numberSqrt = Math.ceil(Math.sqrt(20*number));
	if (numberSqrt<25) { numberSqrt = 25; }
	gridX = Math.floor(parseInt(fld.style.width) / numberSqrt);
	gridY = Math.floor(parseInt(fld.style.height) / numberSqrt);	
	fld.style.width=Math.floor(numberSqrt*gridX) + 'px';
	fld.style.height=Math.floor(numberSqrt*gridY) + 'px';
	
	for (i=0;i<number;i++) {
		if ( children[i].tagName == undefined ) { continue; }
		square = children[i];
		square.setAttribute('id',i);
		square.className='square';
		square.style.position='absolute';
		square.style.left=Math.floor(Math.random()*numberSqrt)*gridX + 'px';
		square.style.top=Math.floor(Math.random()*numberSqrt)*gridY + 'px';
		square.style.width=Math.floor(gridX-border) + 'px';
		square.style.height=Math.floor(gridY-border) + 'px';
		square.style.backgroundColor='black';
		square.style.borderColor='white';						
		square.style.borderWidth=border+'px';
		square.style.zIndex = 10;
		square.name = 'square';
		square.src = square.getAttribute('src');
			
		fill(square,square.src,'hidden',100,'stretch');
	}
}