/*
 * hyCMS
 * Copyright(C)2008 by Friedrich Gräter
 * Published under the terms of the Lesser GNU General Public License v2
 *
 * Base contentView: Image gallery, runtime helpers
 *
 * Requires WidgetKit: buttons, container, frame, dialog, image
 * Requires AnimationKit: controller, opacity
 *
 */

/*
 * gallery_showImage(imageListName, idx, uuid, maxWidth, maxHeight)
 *
 * Shows the image at position "idx" of an image list, that is named
 * as "imageListName" identified by the given uuid. If no dialog is existing,
 * a new dialog will be created.
 *
 * The dialog should have the given maximum size constraints.
 *
 */
function gallery_showImage(imageListName, idx, uuid, maxWidth, maxHeight)
{
	var imageList = document.getElementById(imageListName);

	// Create dialog
	if (imageList.__dialog == null)
		gallery_createDialog(imageList, uuid, maxWidth, maxHeight);
	
	// Setup image
	gallery_setImage(imageList, idx, uuid);
}

/*
 * gallery_createDialog(imageList, uuid)
 *
 * Creates and display a dialog box, that is associated with the
 * given gallery. The view has a given maximum height and width.
 *
 */
function gallery_createDialog(imageList, uuid, maxWidth, maxHeight)
{
	var leftButton, closeButton, rightButton;
	var buttons, dialog, container, image;

	// Create buttons
	leftButton = wk_createButton("imageGallery_leftButton_"+uuid, "left", "", document);
	closeButton = wk_createButton("imageGallery_closeButton_"+uuid, "close", "", document);
	rightButton = wk_createButton("imageGallery_rightButton_"+uuid, "right", "", document);

	leftButton.disable();
	rightButton.disable();

	buttons = [leftButton, closeButton, rightButton];

	// Setup container
	container = wk_createView("imageGallery_container_"+uuid, maxHeight + Config.Gallery.dialogInnerHeightOffset, maxWidth + Config.Gallery.dialogInnerWidthOffset, document);

	container.style.lineHeight = "320px";
	container.style.verticalAlign = "middle";
	container.style.textAlign = "center";
	container.style.overflow = "hidden";
	container.style.whiteSpace = "pre";

	// Setup dialog
	dialog = wk_createDialog("imageGallery_dialog_"+uuid, buttons, container, -1, -1, "center", "center", document)

	document.body.appendChild(dialog);
	ak_applyAnimation("opacity", dialog, {destOpacity: 1, srcOpacity:0}, 150); 

	// Store links
	imageList.__dialog = dialog;
	imageList.__leftButton = leftButton;
	imageList.__rightButton = rightButton;
	imageList.__closeButton = closeButton;
	imageList.__container = container;
	imageList.__uuid = uuid;
	imageList.__maxWidth = maxWidth;
	imageList.__maxHeight = maxHeight;

	dialog.__imageList = imageList;
	leftButton.__imageList = imageList;
	closeButton.__imageList = imageList;
	rightButton.__imageList = imageList;
	
	// Connect buttons to handlers
	leftButton.events.action.push( gallery_leftImage );
	rightButton.events.action.push( gallery_rightImage );
	closeButton.events.action.push( gallery_closeDialog);
}

/*
 * gallery_setImage(imageList, idx, uuid)
 *
 * Sets the given image as the currently shown image of the dialog
 *
 */
function gallery_setImage(imageList, idx, uuid)
{
	var maxHeight = imageList.__maxHeight;
	var maxWidth = imageList.__maxWidth;

	var image, imageBlock;
	var container = imageList.__container;
	var oldImage = imageList.__image;
	var animate = false;
	var lastImageBlock;

	// Hide old image
	if (imageList.__imageBlock != null) {
		var lastImageBlock = imageList.__imageBlock;

		imageList.__imageBlock = null;
		imageList.__image = null;
		animate = true;
	}

	// Display new image
	imageBlock = imageList.__container.ownerDocument.createElement("div");

	imageBlock.style.position = "absolute";
	imageBlock.style.top = "0px";
	imageBlock.style.left = "0px";
	imageBlock.style.height = maxHeight + "px";
	imageBlock.style.width = maxWidth + "px"; 
	imageBlock.style.verticalAlign = "middle";
	imageBlock.style.textAlign = "center";
	imageBlock.style.opacity = "0";
	
	image =  wk_createScaledImage("imageGallery_image_"+uuid, imageList.childNodes[idx].src, maxHeight, maxWidth, document)
	image.style.verticalAlign = "middle";
	
	imageList.__imageBlock = imageBlock;
	imageList.__image = image;
	imageList.__idx = idx;

	// Positioning image	
	imageBlock.appendChild(image);
	container.appendChild(imageBlock);

	// Animate, if image loaded
	image.events.imageLoaded.push( 
		function() {
			if (lastImageBlock != null) {
				function __destroyAfterAnimation() {
					lastImageBlock.parentNode.removeChild(lastImageBlock);
				}
	
				ak_applyAnimation("opacity", lastImageBlock, {destOpacity: 0, srcOpacity: 1, srcZIndex: 1}, 200, false, null, null, __destroyAfterAnimation);
			}

			ak_applyAnimation("opacity", imageBlock, {destOpacity: 1, srcOpacity: 0, srcZIndex: 2}, 200);
		}
	);
	
	// Update buttons
	if (idx == 0)
		imageList.__leftButton.disable();
	else
		imageList.__leftButton.enable();
		
	if (idx == (imageList.childNodes.length -1))
		imageList.__rightButton.disable();
	else
		imageList.__rightButton.enable();

}

/*
 * gallery_closeDialog
 *
 */
function gallery_closeDialog(eventName, view, event)
{
	var imageList = view.__imageList;
	var dialog = imageList.__dialog;
	
	ak_applyAnimation("opacity", dialog, {destOpacity: 0}, 150, false, null, null, __removeOnFinish); 

	function __removeOnFinish() {
		dialog.parentNode.removeChild(dialog);
	}
	
	imageList.__dialog = null;
	imageList.__leftButton = null;
	imageList.__rightButton = null;
	imageList.__closeButton = null;
	imageList.__container = null;

	imageList.__image = null;	
	imageList.__idx = 0;	
}

/*
 * gallery_leftImage
 *
 */
function gallery_leftImage(eventName, view, event)
{
	var imageList = view.__imageList;

	gallery_setImage(imageList, imageList.__idx - 1, imageList.uuid);
}

/*
 * gallery_rightImage
 *
 */
function gallery_rightImage(eventName, view, event)
{
	var imageList = view.__imageList;

	gallery_setImage(imageList, imageList.__idx + 1, imageList.uuid);
}