// ©2009 Didier Berck

Event.observe(document, 'dom:loaded', resizeBackground);
Event.observe(window, 'resize', resizeBackground);
function resizeBackground(evt) {
	if(document.viewport.getDimensions().width / 800 > document.viewport.getDimensions().height / 536) {
		var w = document.viewport.getDimensions().width;
		var h = w / 800 * 536;
	} else {
		var h = document.viewport.getDimensions().height;
		var w = h / 536 * 800;
	}
	$('bg').writeAttribute('width', w);
	$('bg').writeAttribute('height', h);
	$('bg').setStyle({
		width: w +'px',
		height: h +'px'
	});
}

Event.observe(window, 'load', initNav);
function initNav(evt) {
	$$('#languages img').each(function(elt) {
		elt.writeAttribute('alt', elt.readAttribute('alt').substring(0, 2));
	});
	$$('div.block div').each(function(elt) {
		//elt.hide();
	});
	/*$$('div.block').each(function(elt) {
		if(elt.down('a')) {
			elt.replace('<div class="block" id="' + elt.readAttribute('id') + '"> \
					<div class="bg"><img src="images/bg-nav-block.png" alt="" \/><\/div> \
					<div class="cnt">' + elt.innerHTML + '<\/div> \
				<\/div>');
		}
	});*/
	$$('div.block').each(function(elt) {
		if(elt.down('a')) {
			/*elt.setStyle({
				width: '153px',
				height: '85px',
				padding: 0
			});*/
			Event.observe(elt, 'mouseover', function(evt) {
				var elt = Event.element(evt);
				var id = (elt.hasClassName('block')) ? elt.readAttribute('id') : elt.up('div.block').readAttribute('id');
				var queue = Effect.Queues.get(id);
				queue.each(function(eff) {
					eff.cancel();
				});
				/*new Effect.Parallel([
					new Effect.Morph($(id), {
						transition: Effect.Transitions.spring,
						style: 'height: 144px;'
					}), 
					new Effect.Fade($(id).down('div.bg').down(), {
						from: 1.0,
						to: 0.2,
						afterFinish: function(eff) {
							eff.element.hide();
							$(id).setStyle({
								height: '144px'
							});
						}
					}) 
				], { 
					queue: { position: 'end', scope: id },
					duration: 0.5,
					sync: true
				});*/
				
				new Effect.Morph($(id), {
					queue: { position: 'end', scope: id },
					duration: 0.5,
					transition: Effect.Transitions.spring,
					style: 'height: 134px;'
				});
			});
			Event.observe(elt, 'mouseout', function(evt) {
				var elt = Event.element(evt);
				var id = (elt.hasClassName('block')) ? elt.readAttribute('id') : elt.up('div.block').readAttribute('id');
				var queue = Effect.Queues.get(id);
				queue.each(function(eff) {
					eff.cancel();
				});
				/*new Effect.Parallel([
					new Effect.Morph($(id), {
						transition: Effect.Transitions.spring,
						style: 'height: 85px;'
					}), 
					new Effect.Appear($(id).down('div.bg').down(), {
						from: 0.2,
						to: 1.0,
						afterFinish: function(eff) {
							eff.element.show();
							$(id).setStyle({
								height: '85px'
							});
						}
					}) 
				], { 
					queue: { position: 'end', scope: id },
					duration: 0.5,
					sync: true
				});*/
				
				new Effect.Morph($(id), {
					queue: { position: 'end', scope: id },
					duration: 0.5,
					transition: Effect.Transitions.spring,
					style: 'height: 75px;'
				});
			});
		}
	});
}