// JavaScript Document
document.observe("dom:loaded", function() {
	$$(".hp-highlight").each(function(element){
		// Reset background-color
		var bgColor = element.getStyle('background-color');
		element.setStyle({backgroundColor: '#eee'});
		
		// Set gray image
		element.siblings().each(function(sib){
			var overlayAry = sib.select('div.hpImgOverlay');
			
			if (overlayAry.length > 0)
			{
				var bgImg = overlayAry[0].up().getStyle('background-image');
				var imgName = bgImg.substring(bgImg.lastIndexOf('/')+1);
				imgName = imgName.substring(0, imgName.lastIndexOf('.'));
				new Ajax.Request('style/noirEtBlanc.php?name=' + imgName, {
					method: 'get'
				});
				
				var imgUrl = 'url(files/nb' + imgName + '.jpg)';
				overlayAry[0].setStyle({
					backgroundImage: imgUrl
				});
			}
		});
		
		// If there is only one link within the element, then all the block is cliquable
		var withinLinks = element.select('a');
		if (withinLinks.length == 1)
		{
			element.setStyle({cursor: 'pointer'});
			element.observe('click', function(event) {
				window.location.href = withinLinks[0].href;
			});
		}
		// Else we add the program specific picture
//		else
//		{
//			var currentHref = '';
//			var currentId = '';
//			for (i=1; i < withinLinks.length; i++)
//			{
//				currentHref = withinLinks[i].readAttribute('href');
//				currentId = currentHref.substring(currentHref.lastIndexOf('-')+1);
//				element.previous().insert('<div id="progPix-'+currentId+'" class="hpProgOverlay" style="background-image:url(style/imgspe/prog'+currentId+'.jpg);"></div>');
//				$('progPix-'+currentId).hide();
//			}
//		}
		
		// Mouseover behaviour:
		// + colorize the text block
		// + turn the picture from gray to color by hidding the overlay
		element.up().observe('mouseover', function (event) {
			var dad = element.up();
			var relatedTarget = $(event.relatedTarget || event.fromElement);
			var target = Event.element(event);
			
			if ((target == dad || Element.descendantOf(target, dad)) && !((relatedTarget == dad) || Element.descendantOf(relatedTarget, dad)))
			{
				// Image
				element.siblings().each(function(sib){
					var overlayAry = sib.select('div.hpImgOverlay');
					
					if (overlayAry.length > 0)
					{
						overlayAry[0].hide();
						throw $break;
					}
				});
				
				element.setStyle({
					background: bgColor,
					color: '#fff'
				});
				
				$$('a').each(function(linkEl){
					if (linkEl.descendantOf(element))
					{
						linkEl.setStyle('color: #fff;');
					}
				});
			}
			
			// Program specific picture
//			element.siblings().each(function(sib){
//				// Hide all prog pictures
//				sib.select('div.hpProgOverlay').invoke('hide');
//				
//				// Prog specific picture
//				if (target.match('a'))
//				{
//					var progHref = target.readAttribute('href');
//					var progId = progHref.substring(progHref.lastIndexOf('-')+1);
//					var progAry = sib.select('div#progPix-'+progId);
//					
//					if (progAry.length > 0)
//					{
//						progAry[0].show();
//						throw $break;
//					}
//				}
//			});
		});
		
		// Mouseout behaviour:
		// + uncolorize the text block (back to gray #777
		// + reseet gray picture by showing the overlay
		element.up().observe('mouseout', function (event) {
			var dad = element.up();
			var relatedTarget = $(event.relatedTarget || event.fromElement);
			var target = Event.element(event);
			if ((target == dad || Element.descendantOf(target, dad)) && !((relatedTarget == dad) || Element.descendantOf(relatedTarget, dad)))
			{
				// Image
				element.siblings().each(function(sib){
					sib.select('div.hpProgOverlay').invoke('hide');
					
					var overlayAry = sib.select('div.hpImgOverlay');
					
					if (overlayAry.length > 0)
					{
						overlayAry[0].show();
						throw $break;
					}
				});
				
				element.setStyle({
					background: '#eee',
					color: '#777'
				});
				
				$$('a').each(function(linkEl){
					if (linkEl.descendantOf(element))
					{
						linkEl.setStyle('color: #777');
					}
				});
			}
		});
	});
});