var margin = 10;
window.addEvent('domready', function(){
	data.each(function(rel) {
		var per = (100/rel.row.length) / 100;
		var el = rel.row;
		var oh = ((((window.getSize().x - margin - margin) * per) * rel.h) / rel.w );
		var div = new Element('div',{ 
										'text':'', 
										'class':'row',
										'w':rel.w,
										'h':rel.h,
										'per':per,
										'oh':oh,
										'style':'height: ' + oh + 'px; overflow: hidden; margin-bottom: 10px;' + rel.style
									});
		
		el.each(function(kid) {
			var per = (100/el.length) / 100;
			var kid_div = new Element('div',{ 
												'class':'left',
												'style':'width: ' + (100/el.length) + '%; height: 100%; overflow: hidden;'
											});
			if(kid.type == 'image') {
				var img = new Element('div', { 'class':'image', 'style':'width: 100%; height: 100%; margin-bottom: 0px;' });
				img.set('source',kid.img);
				var ref = img;
				if(kid.link) {
					ref = new Element('a', { 'href': kid.link });
					ref.adopt(img);
				}
				kid_div.adopt(ref);
			}else {
				kid_div.adopt(new Element('div',{ 'html':kid.text, 'style':'padding: 10px; height: 100%;' + kid.style + ';' }));
			}
			div.adopt(kid_div);
		});
		div.adopt(new Element('div',{ 'class':'clear'}));
		$('body_container').adopt(div);
	});
	checkImages();
});

window.addEvent('scroll', function() {
	checkImages();
});

window.addEvent('resize', function() {
	$$('.row').each(function(el) {
		var oh = ((((window.getSize().x - margin - margin) * el.get('per')) * el.get('h')) / el.get('w') );
		el.setStyle('height',oh+'px');
	});
});

function checkImages() {
	$$('.image').each(function(el){
		if(el.getPosition().y < window.getScroll().y + window.getSize().y) {
			el.adopt(new Element('img', { 'src':el.get('source'), 'style': 'width: 100%; height: 100%;' }));
			el.removeClass('image');
		}else{
			return;
		}
	});
}