/*
 * Copyright Pierre de Soyres.
 *
 * Display larger images with fading effect.
 */

YAHOO.util.Event.onDOMReady(init);

// some GUI adjustments constants
var PADDING_TOP = 2;
var PADDING_LEFT = 2;
var IMAGE_HEIGHT = 360;

if (Prototype.Browser.IE) {
	PADDING_TOP = 0;
	PADDING_LEFT = 2;
} else if (Prototype.Browser.Opera) {
	PADDING_TOP = 0;
	PADDING_LEFT = 1;
} else if (navigator.appName == "Netscape") {
	PADDING_TOP = 0;
	PADDING_LEFT = 0;
}

// the state. null means no current image displayed
var currentImagePanel = null;

/**
 * useful method for initializing display.
 */
function init() {
	initImageBox($("leftImagesBox"));
	initImageBox($("rightImagesBox"));
}

function initImageBox(imagesContainer) {
	if (!imagesContainer) return;
	var images = imagesContainer.childElements();
	var len = images.length;
	for (var i = 0 ; i < len ; i++) {
		var img = images[i];
		img.addClassName("pointed");
		if (i < len-1) img.addClassName("padded-bottom");
		img.observe('click', onImageClick);
		img.writeAttribute("title", "Cliquez pour agrandir");
	}
}

/**
 * Displays (or switch, depending on the current state) the large image display.
 *
 * @param element the clicked element.
 */
function onImageClick(event) {
	var element = Event.element(event);

	// big image source
	var srcAttribute = $(element).readAttribute("src");
	srcAttribute = srcAttribute.replace("/small/", "/big/");
	//srcAttribute = srcAttribute.replace(".jpg", "_resize.jpg");

	// the center element on which we base the image panel positioning.
	var centerWrapperElement = $("page-center");
	var centerElement = $("center");
	var pageElement = $("page");

	// compute position and size.
	var pos = centerElement.positionedOffset();
	var width = centerElement.getWidth() - 1;

	var availableHeight = centerWrapperElement.getHeight();
	var posY = Math.max((availableHeight - IMAGE_HEIGHT)/2 + pos[1] + PADDING_TOP, pos[1] + PADDING_TOP)


	// create image panel
	var imagePanel = createImagePanel(srcAttribute, pos[0] + PADDING_LEFT, posY, width, IMAGE_HEIGHT);
	pageElement.appendChild(imagePanel);

	// apply effect
	if (currentImagePanel == null) {
		new Effect.Appear(imagePanel, { duration: 0.5 });
	} else {
		new Effect.Parallel([
			new Effect.Appear(imagePanel, { duration: 0.5 }),
			new Effect.Fade(currentImagePanel, { duration: 0.5 })
		]);
	}

	// hide  center element
	centerElement.setStyle({visibility:'hidden'});

	// update state
	currentImagePanel = imagePanel;
}

/**
 * Hides the current image
 */
function hideImage() {
	if (currentImagePanel != null) {
		// set center visible
		$("center").setStyle({visibility:'visible'});

		// apply hide effect on current image panel
		new Effect.Fade(currentImagePanel, { duration: 0.5 });

		// reset state
		currentImagePanel = null;
	}
}

/**
 * Creates an image panel (<div> element) with a nested <img>. panel is settled absolutly, using the given
 * dimension properties.
 *
 * @param imageSource the url of the image to display. (should be a large image URL)
 * @param x the x position
 * @param y the y pos
 * @param width the width
 * @param height the height
 *
 * @return a <div> DOM element.
 */
function createImagePanel(imageSource, x, y, width, height) {
	// create image panel
	var imagePanel = new Element('div');
	imagePanel.setStyle(
	{
		display:'none',
		position:'absolute',
		left: x + 'px',
		top: y + 'px',
		width:width + 'px',
		height:height + 'px',
		zIndex: 1000
	});
	// set some properties again for Firefox
	imagePanel.style.position = 'absolute';
	imagePanel.className = "imagePanel";
	// add click event
	imagePanel.observe('click', hideImage);
	// create <img> element
	var imgElement = new Element('img', {src: imageSource});
	// layout
	imagePanel.appendChild(imgElement);

	return imagePanel;
}