var imagePath184x184 = '/images/products/184x184/';
var imagePath225x225 = '/images/products/225x225/';
var imagePath400x400 = '/images/products/400x400/';


/**
 * Seeks the specified product.
 * @param productId the id of the product to find.
 * @returns the found product; or false if no matching product was found.
 */
function findProduct (productId)
{
	var product = null;

	for (var i=0; i<products.length; i++)
	{
		if (products[i].id == productId)
		{
			return products[i];
		}
	}
	
	alert (i18cannotfindproduct + productId);
}

window.onresize = sizeOverlay;

/**
 * Initializes the overlay.
 * Required for the search result dialog, which is not ajax driven.
 */
Event.observe(window, 'load', sizeOverlay);

function sizeOverlay() {
	var mask = Ext.get('overlayinfo');
    mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
}


/**
 * Shows the dialog that is specified by given the container.
 * @param dialogContainerId the dialog container id.
 * @return void;
 */
function showDialog (dialogContainerId)
{
	// Hide the basket.
	if ($('basketopen').visible ())
	{
		toggleBasket ();
	}
		
	// Show the overlay.
	sizeOverlay();
	$('overlayinfo').show();

	var popupId = null;
	if (dialogContainerId == 'overlayinfocontainer')
	{
		popupId = 'productinfopopup';
	} else if (dialogContainerId == 'overlayordercontainer')
	{
		popupId = 'productorderpopup';
	} else if (dialogContainerId == 'overlayeditordercontainer')
	{
		popupId = 'editorderpopup';
	} else if (dialogContainerId == 'overlayfastordercontainer')
	{
		popupId = 'fastorderpopup';
	} else if (dialogContainerId == 'overlayordercompletedcontainer')
	{
		//popupId = 'orderFormPopup';
	} else if (dialogContainerId == 'overlaychooseordercontainer')
	{
		popupId = 'chooseorderpopup';
	} else if (dialogContainerId == 'overlaynoresultscontainer')
	{
		popupId = 'infopopup';
	} else if (dialogContainerId == 'overlaydeleteproductcontainer')
	{
		popupId = 'deleteorderpopup';
	}

	$(dialogContainerId).show ();
	if (popupId != null) {
		var popup = $(popupId);
		var dialogHeight = popup.getHeight();
		var position = document.viewport.getScrollOffsets();
		var overlayHeight = Ext.lib.Dom.getViewHeight(true);
		var top = (position.top + 80);
		
		if (top + dialogHeight > overlayHeight) {
			top = Math.max(0, overlayHeight - dialogHeight)
		}
		$(popupId).setStyle ('top: ' + top + 'px;');
	}
}

/**
 * Hides the dialog that is specified by the given container id.
 * @param dialogContainerId the dialog container id.
 * @return void;
 */
function hideDialog (dialogContainerId) {
	$(dialogContainerId).hide();
	$('overlayinfo').hide();
}

/**
 * Creates the HTML for a packaging options select box.
 * @param elementId		the element id.
 * @param packagingOptions	packaging options array.
 * @return the generated html.
 */
function createPackagingOptionSelectHtml (elementId, packagingOptions)
{
	var packageTypes = [];
	var index = 0;
	packageTypes[index++] = '<select id="' + elementId + '">';

	for (var i=0; i<packagingOptions.length; i++)
	{
		var box = packagingOptions[i];
		if (box == undefined)
		{
			// This may happen on IE.
			// Box arrays are automatically appended with a ',' separator and IE
			// expects another element and counts one element more than
			// FireFox.  
			continue;
		}
		
		var packageType = box.packageType;
		if (packageType == '')
		{
			// Skip empty elements.
			continue;
		}
		
		packageTypes[index++] = '<option value="';
		packageTypes[index++] = packageType;
		packageTypes[index++] = '">';
		packageTypes[index++] = packageType; 
		packageTypes[index++] = '</option>';
	}

	packageTypes[index++] = '</select>';
	return packageTypes.join ('');
}


/**
 * Gets the product information via an Ajax call.
 */
function getProductInformation (basketItemId, productId, type, boxCount)
{
	new Ajax.Request 
	(
		'/catalog.web',
		{
			method: 'post',
			parameters: {'action': 'getproductinformation', 'productId': productId},
			onComplete: function (transport)
			{
				if (transport.status == 200)
				{
					// Parse JSON reply
					var json = transport.responseText.evalJSON();
					showEditBasketItem (basketItemId, productId, json.product.name, json.product.articleCode, json.product.packagingOptions, type, boxCount, json.product.has72dpiImage, json.product.publishedImage1Id);
				}					
			}
		}
	);
}

/**
 * This function is derived from the openOrderWindow implementation.
 * @param basketItemId	the basked item identifier.
 * @param productId		the product identifier.
 * @param name			the product name.
 * @param articleCode	the article code.
 * @param boxTypes		the packaging options.
 * @param type			the selected packaging option.
 * @param boxCount		the ordered boxes
 * @param has225x225image	true if the 225x225 image is available; otherwise false.
 * @return void
 */ 
function showEditBasketItem (basketItemId, productId, name, articleCode, boxTypes, type, boxCount, has225x225image, imageId)
{
	// Hide the basket.
	if ($('basketopen').visible ())
	{
		toggleBasket ();
	}

	$('order_editBasketItemId').value = basketItemId;
	$('order_editProductName').innerHTML = name;
	$('order_editArticleCode').innerHTML = articleCode;

	//var product = findProduct (productId);
	if (has225x225image == true)
	{
		// Load the image
		$('editorderpopupright').innerHTML = '<img src="' + imagePath225x225 + imageId + '.jpg" />';
	} else
	{
		$('editorderpopupright').innerHTML = '';
	}

	$('order_editBoxes').value = (!boxCount) ? 1 : boxCount;
		
	var packageTypes = [];
	var index = 0;
	var selectedIndex = 0;
	packageTypes[index++] = '<select id="order_editPackageTypeValue">';
	for (var i=0; i<boxTypes.length; i++)
	{
		var packageType = boxTypes[i].packageType;
		if (packageType == undefined || packageType == '')
		{
			// Skip empty elements.
			continue;
		}
		
		packageTypes[index++] = '<option value="';
		packageTypes[index++] = packageType;

		if (packageType == type)
		{
			selectedIndex = i;
		}
		
		packageTypes[index++] = '">';
		packageTypes[index++] = packageType; 
		packageTypes[index++] = '</option>';
	}

	packageTypes[index++] = '</select>';
	$('order_editPackageType').innerHTML = packageTypes.join ('');
	$('order_editPackageTypeValue').selectedIndex = selectedIndex;

	showDialog ('overlayeditordercontainer');
}

function showFastBasket ()
{
	// Hide the basket.
	if ($('basketopen').visible ())
	{
		toggleBasket ();
	}

	$('order_fastArticleCode').value = '';
	fastOrderEraseOrderDetails ();

	// TODO: Remove observer when the dialog closes
	Event.observe ('order_fastArticleCode', 'keypress', function (event) 
	{
		var keyCode = event.keyCode || event.which;
		if (keyCode == Event.KEY_RETURN)
		{
			fastOrderConfirmArticleCode ();
			return false;
		}
	});

	$('fastorderpopupalert').hide ();
	$('fastorderpopupleft').show ();
	$('fastorderpopupright').show ();

	showDialog ('overlayfastordercontainer');
}

/**
 * Closes the fast basket
 */
function hideFastBasket ()
{
	hideDialog ('overlayfastordercontainer');
}

/**
 * Validates the basket.
 * @param boxes			ordered boxes.
 * @param packageType	ordered box type.
 * @return true if successfully validated; otherwise false.
 */
function validateBasketItem (boxes, packageType)
{
	if (boxes < 1 || boxes > 100000)
	{
		alert (i18BoxesError);
		return false;
	}

	if (packageType == false)
	{
		alert (i18PackagingOptionsError);
		return false;
	}
	
	return true;
}

 /**
  *
  */
 function fill (json, jsonGrowerId)
 {
	var html = [];
	var index = 0;
	 
	var orderItems = json[jsonGrowerId];
	var orderSize = orderItems.length;
	for (var i=0; i<orderSize; i++)
	{
		var orderItem = orderItems[i];
		html[index++] = '<tr>';

		html[index++] = '<td>';
		html[index++] = orderItem.name;
		html[index++] = '</td>';

		html[index++] = '<td>';
		html[index++] = orderItem.articleCode;
		html[index++] = '</td>';

		html[index++] = '<td>';
		html[index++] = orderItem.type;
		html[index++] = '</td>';			

		html[index++] = '<td>';
		html[index++] = orderItem.boxEntities;
		html[index++] = '&nbsp;' + i18Pieces + '</td>';

		html[index++] = '<td>';
		html[index++] = orderItem.number;
		html[index++] = '</td>';

		html[index++] = '<td><a href="#" onclick="getProductInformation(';
		html[index++] = orderItem.id;
		html[index++] = ',';
		html[index++] = orderItem.productId;
		html[index++] = ',';
		html[index++] = "'";
		html[index++] = orderItem.type;
		html[index++] = "'";
		html[index++] = ',';
		html[index++] = orderItem.number;
		html[index++] = ');return false;"><img src="/images/btn_order_edit.gif" width="15" height="15" alt="edit" /></a></td>';
		html[index++] = '<td><a href="#" onclick="removeFromBasket(';
		html[index++] = orderItem.id;
		html[index++] = ');return false;"><img src="/images/btn_order_delete.gif" width="15" height="15" alt="delete" /></a></td>';

		html[index++] = '</tr>';			
	}		

	return html.join ('');
 }

 function createBasketTable (divId, json, jsonGrowerId)
 {
	var html = [];
	var index = 0;
			 
 	html[index++]='<table class="baskettable">';
 	html[index++]='<col width="130px" />';
 	html[index++]='<col width="90px" />';
 	html[index++]='<col width="90px" />';
 	html[index++]='<col width="90px" />';
 	html[index++]='<col align="center" />';
 	html[index++]='<tr>';
 	html[index++]='<td><strong>'+i18ProductName+'</strong></td>';
 	html[index++]='<td><strong>'+i18ArticleCode+'</strong></td>';
 	html[index++]='<td><strong>'+i18Type+'</strong></td>';
 	html[index++]='<td><strong>'+i18UnitsPerPackage+'</strong></td>';
 	html[index++]='<td><strong>'+i18Count+'</strong></td>';
 	html[index++]='<td>&nbsp;</td>';
 	html[index++]='<td>&nbsp;</td>';
 	html[index++]='</tr>';

	html[index++]=fill(json, jsonGrowerId);
 	
 	html[index++]='</table>';

 	$(divId).innerHTML = html.join ('');
}	 

/**
 * Updates the basket.
 * @param json the json response which was returned by the controller.
 * @return void
 */
function updateBasket (json)
{
	if (json.numberOfArticles > 0)
	{
		$('openBasketDiv').setStyle ('display: block;');
	} else
	{
		$('openBasketDiv').setStyle ('display: none;');
	}
	
	// Update the counters.
	$('numberOfArticles').innerHTML = json.numberOfArticles;
	$('numberOfBoxes').innerHTML = json.numberOfBoxes;

	if (theme == 'rc')
	{
		createBasketTable ('basket_rc_oo', json, 'ordersOrient');
		createBasketTable ('basket_rc_po', json, 'ordersPrins');
		createBasketTable ('basket_rc_ao', json, 'ordersAphrodite');

		if (json['ordersPrins'].length > json['ordersOrient'].length && json['ordersPrins'].length > json['ordersAphrodite'].length) {
			$('order_orient').setStyle ('display: none');
			$('order_prins').setStyle ('display: block');
			$('order_aphrodite').setStyle ('display: none');
		} else if (json['ordersAphrodite'].length > json['ordersOrient'].length && json['ordersAphrodite'].length > json['ordersPrins'].length) {
			$('order_orient').setStyle ('display: none');
			$('order_prins').setStyle ('display: none');
			$('order_aphrodite').setStyle('display: block');
		} else {
			$('order_orient').setStyle ('display: block');
			$('order_prins').setStyle ('display: none');
			$('order_aphrodite').setStyle('display: none');
		}
	} else if (theme == 'oo') {
		createBasketTable ('order_orient', json, 'ordersOrient');
	} else if (theme == 'po') {
		createBasketTable ('order_prins', json, 'ordersPrins');
	}
}

 /**
  * Adds the basket items to the order form.
  * @param json				a json object which contains the basket items.
  * @param jsonGrowerId		the grower id used in the json object.
  * @return String			the created HTML.
  */
 function orderFormFill (json, jsonGrowerId)
 {
	var html = [];
	var index = 0;
	 
	var orderItems = json[jsonGrowerId];
	var orderSize = orderItems.length;
	for (var i=0; i<orderSize; i++)
	{
		var orderItem = orderItems[i];
		html[index++] = '<tr>';

		html[index++] = '<td class="tr_nr">';
		html[index++] = orderItem.articleCode;
		html[index++] = '</td>';
		
		html[index++] = '<td class="tr_list">';
		html[index++] = orderItem.number;
		html[index++] = '</td>';
		
		html[index++] = '<td class="tr_product">';
		html[index++] = orderItem.name;
		html[index++] = '</td>';

		html[index++] = '<td class="tr_list">';
		html[index++] = orderItem.type;
		html[index++] = '</td>';			

		html[index++] = '<td class="tr_list">';
		html[index++] = orderItem.boxEntities;
		html[index++] = '&nbsp;'+i18Pieces+'</td>';

		html[index++] = '<td class="tr_list"><a href="#" onclick="getProductInformation(';
		html[index++] = orderItem.id;
		html[index++] = ',';
		html[index++] = orderItem.productId;
		html[index++] = ',';
		html[index++] = "'";
		html[index++] = orderItem.type;
		html[index++] = "'";
		html[index++] = ',';
		html[index++] = orderItem.number;
		html[index++] = ');return false;"><img src="/images/btn_order_edit.gif" width="15" height="15" alt="edit" /></a></td>';
		html[index++] = '<td class="tr_list"><a href="#" onclick="removeFromBasket(';
		html[index++] = orderItem.id;
		html[index++] = ');return false;"><img src="/images/btn_order_delete.gif" width="15" height="15" alt="delete" /></a></td>';

		html[index++] = '</tr>';			
	}

	return html.join ('');
 }


function createOrderFormTable (divId, json, jsonGrowerId, logoId)
{
	var html = [];
	var index = 0;

	var orderItems = json[jsonGrowerId];
	var orderSize = orderItems.length;
	if (orderSize == 0)
	{
		return;
	}
	
	html[index++]='<p><img src="/images/order_logo_' + logoId + '.gif" alt="" width="67" height="14" style="padding-top: 10px; padding-bottom:10px;" /></p>';
	html[index++]='<table class="orderFormTable2" width="760" border="0" cellspacing="0" cellpadding="0">';
	html[index++]='<tr>';
	html[index++]='<td class="tr_title" width="64">'+i18Number+':</td>';
	html[index++]='<td class="tr_title" width="70">'+i18Count+':</td>';
	html[index++]='<td class="tr_title" width="250">'+i18Product+':</td>';
	html[index++]='<td class="tr_title" width="156">'+i18Type+':</td>';
	html[index++]='<td class="tr_title" width="160">'+i18UnitsPerPackage+':</td>';
	html[index++]='<td class="tr_title" width="30">&nbsp;</td>';
	html[index++]='<td class="tr_title" width="30">&nbsp;</td>';
	html[index++]='</tr>';

	var data = orderFormFill (json, jsonGrowerId);
	html[index++]=data;
	
	html[index++]='</table>';

	$(divId).innerHTML = html.join ('');
}

function updateOrderForm (json)
{
	// Check if the order form is visible.
	if ($('orderform_orient') == null)
	{
		// The oder form is not visible
		return;
	}
	
	if (json.numberOfArticles == 0)
	{
		$('orderform_orient').innerHTML = i18BasketEmpty;
		$('orderform_prins').innerHTML = '';
		$('orderform_aphrodite').innerHTML = '';
	} else
	{
		createOrderFormTable ('orderform_orient', json, 'ordersOrient', 'orient');
		createOrderFormTable ('orderform_prins', json, 'ordersPrins', 'prins');
		createOrderFormTable ('orderform_aphrodite', json, 'ordersAphrodite', 'aphro');
	}
}

/**
 * Adds the specified product to the shopping basket.
 * @param productId the product id.
 * @param packageType the selected packaging option.
 * @param boxes the number of boxes.
 * @param callback an optional callback, which can be used for various objectives.
 * @return void
 */
function addToBasket (productId, packageType, boxes, callback)
{
	if (!validateBasketItem (boxes, packageType))
	{
		return;
	}
	
	new Ajax.Request 
	(
		'/order.web',
		{
			method: 'post',
			parameters: {action: 'addToBasket', id: productId, type: packageType, number: boxes},
			onComplete: function (transport)
			{
				if (transport.status == 200)
				{
					var json = transport.responseText.evalJSON();
					
					if (json.result == -1)
					{
						alert ("Er is een onbekende fout opgetreden.Controlleer uw winkelmandje.");
						window.location.reload (true);
					} else
					{
						updateBasket (json);
					}
				} else
				{
					alert (i18HttpError + transport.status);
				}

				if (callback != undefined)
				{
					callback (transport.status);
				}
			} // onComplete
		}
	);
}

/**
 *
 */
function editBasketItem ()
{
	var basketItemId = $('order_editBasketItemId').value;
	var boxes = $('order_editBoxes').value;		
	var packageType = $('order_editPackageTypeValue').value;
	
	
	if (!validateBasketItem (boxes, packageType))
	{
		return;
	}
	 
	new Ajax.Request 
	(
		'/order.web',
		{
			method: 'post',
			parameters: {action: 'editBasketItem', id: basketItemId, packageType: packageType, boxes: boxes},
			onComplete: function (transport)
			{
				if (transport.status == 200)
				{
					hideDialog ('overlayeditordercontainer');
					
					var json = transport.responseText.evalJSON();
					updateBasket (json);
					updateOrderForm (json);
				} else
				{
					alert (i18HttpError + transport.status);
				}
			}
		}
	);
}

/**
 * Removes the specified basket item from the basket.
 * @param basketItemId the basket item identifier.
 * @return void
 */
function removeFromBasket (basketItemId)
{
	$('basketItemToDelete').value = basketItemId;
	showDialog ('overlaydeleteproductcontainer');
}

function doRemoveFromBasket ()
{
	var basketItemId = $('basketItemToDelete').value;

	new Ajax.Request 
	(
		'/order.web',
		{
			method: 'post',
			parameters: {action: 'removeFromBasket', id: basketItemId, theme: theme},
			onComplete: function (transport)
			{
				if (transport.status == 200)
				{
					var json = transport.responseText.evalJSON();
					updateBasket (json);
					updateOrderForm (json);
				} else
				{
					alert (i18HttpError + transport.status);
				}
			}
		}
	);
}

/**
 * Shows or hides, as applicable, the basket.
 * @return void
 */
function toggleBasket ()
{
	$('basketopen').toggle();
	$('basketopen_top').toggle();
}

/**
 * Shows the basket.
 * @return void
 */
function showBasket ()
{
	new Ajax.Request 
	(
		'/order.web',
		{
			method: 'post',
			parameters: {action: 'getBasketContent', theme: theme},
			onComplete: function (transport)
			{
				var json = transport.responseText.evalJSON();
				updateBasket (json);
				
				toggleBasket ();
					
				if (transport.status == 200)
				{

				} else
				{
					alert (i18HttpError + transport.status);
				}
			}
		}
	);
}

function fastOrderConfirmArticleCode ()
{
	var selectGrowerElement = $('order_fastSelectGrower');
	var articleCodeElement = $('order_fastArticleCode');

	var articleCode = articleCodeElement.value.trim ();
	if (articleCode == '')
	{
		alert (i18ArticleCodeError);
		return;
	}

	new Ajax.Request 
	(
		'/catalog.web',
		{
			method: 'post',
			parameters: {action: 'getfastproductinformation', grower: selectGrowerElement.value, articleCode: articleCode},
			onComplete: function (transport)
			{
				if (transport.status == 200)
				{
					// Parse JSON reply
					var json = transport.responseText.evalJSON();

					if (json.result == -1)
					{
						// Error
						fastOrderEraseOrderDetails ();
						alert (json.errorMessage);
						return;
					}

					// Create UI elements.
					$('order_fastBasketProductId').value = json.product.id;
					$('order_fastProductName').innerHTML = json.product.name;
					$('order_fastPackageType').innerHTML = createPackagingOptionSelectHtml ('fastorderPackagingOption', json.product.packagingOptions);
					$('order_fastBoxesTD').innerHTML = '<input id="order_fastBoxes" type="text" class="order" style="width: 40px;" maxlength="5" />';
					$('fastorderpopupright').innerHTML = '<img src="' + imagePath225x225 + json.product.publishedImage1Id + '.jpg" />';
					$('fastorder_add').show ();
				} else
				{
					alert ("Error: transport.status=" + transport.status);
				}
			}
		}
	);
}

/**
 * Erases the order details.
 */
function fastOrderEraseOrderDetails ()
{
	$('order_fastProductName').innerHTML = '';
	$('order_fastPackageType').innerHTML = '';
	$('order_fastBoxesTD').innerHTML = '';
	$('fastorderpopupright').innerHTML = '';
	$('fastorder_add').hide ();
}

/**
 * Adds the order to the basket.
 */
function fastBasketItem ()
{
	addToBasket ($('order_fastBasketProductId').value, $('fastorderPackagingOption').value, $('order_fastBoxes').value, fastItemAddedCallback);
}

/**
 * Continues the application flow when the preceding Ajax call is finished.
 */
function fastItemAddedCallback ()
{
	var articleCode = $('order_fastArticleCode').value;
	
	$('fastarticle1').innerHTML = articleCode;
	$('fastarticle2').innerHTML = articleCode;

	$('fastorderpopupleft').hide ();
	$('fastorderpopupright').hide ();
	$('fastorderpopupalert').show ();
}

/**
 * Prepares the next order entry.
 * The user may choose to enter a compelely new order or an order that
 * is based on an the previous article.
 * @param sameArticle a boolean that indicates if the same product will be ordered again (true); or a new product will be ordered (false).
 */
function fastItemNextOrder (sameArticle)
{
	if (!sameArticle)
	{
		$('order_fastArticleCode').value = '';
		$('order_fastProductName').innerHTML = '';
		$('order_fastPackageType').innerHTML = '';
		$('order_fastBoxesTD').innerHTML = '';
		$('fastorderpopupright').innerHTML = '';
	} else
	{
		$('order_fastBoxes').value = '';
		$('order_fastPackageType').focus ();
	}
	
	$('fastorderpopupalert').hide ();
	$('fastorderpopupleft').show ();
	$('fastorderpopupright').show ();
	
	$('order_fastArticleCode').focus ();
}


var postingOrder = false;
function postOrder ()
{
	if (postingOrder)
	{
		// prevent double clicks.
		return;
	}
	postingOrder = true;
	
	// post the order form
	$('orderForm').request (
	{
		onComplete: function (transport)
		{
			var jsonResult = transport.responseText.evalJSON();
			//alert (transport.responseText);
			if (jsonResult.result == -1)
			{
				showDialog ('overlayordercompletedcontainer');

				var message = "";
				for (var i=0; i<jsonResult.errors.length; i++)
				{
					message += '<li>' + jsonResult.errors[i] + '</li>'; 
				}

				$('orderConfirmationStatusDialog').innerHTML = '<ul>' + message + '</ul>';		
			} else
			{
				// Redirect to the home page.
				window.location = '/site/';
			}

		}
	});
}

function chooseCatalogFastOrder (catalogUrl)
{
	showDialog ('overlaychooseordercontainer');
}


// begin from catalog

/**
 * Opens the product information window.
 * @param productId		the product id.
 * @param rootPath		the root path to load the icon images from.
 * @param imageId		the image id.
 * @param renderDialogCallback	code that renders the dialog.
 * @return void
 */
function openInfoWindow (productId, rootPath, imageId, renderDialogCallback)
{
	
	// Hide the basket.
	if ($('basketopen').visible ())
	{
		toggleBasket ();
	}

	var product = findProduct (productId);

	//renderDialogCallback ();
	
	var html = [];
	var index = 0;
	html[index++] = '<h3>'+i18Title+'</h3>';
	html[index++] = '<table><col width="160px" /><col />';
	// Article number
	html[index++] = '<tr><td class="element">'+i18ArticleCode+'</td><td>';
	html[index++] = product.articleCode;
	html[index++] = '</td></tr>';
	// Product name
	html[index++] = '<tr><td class="element">'+i18ProductName+'</td><td>';
	html[index++] = product.name;
	html[index++] = '</td></tr>';
	// Grower name
	html[index++] = '<tr><td class="element">'+i18GrowerName+'</td><td>';
	html[index++] = product.growerName;
	html[index++] = '</td></tr>';
	// Units per package
	html[index++] = '<tr><td class="element">'+i18NumberOfFlowers+'</td><td>';
	html[index++] = product.flowers;
	html[index++] = '</td></tr>';
	// Eurodoos dimensions
	if (product.hasEuroBox)
	{
		html[index++] = '<tr><td class="element">'+i18DimensionsEuroBox+'</td><td>';
		html[index++] = product.euroBoxDimensions;
		html[index++] = ' cm';
		html[index++] = '</td></tr>';
	}
	
	// Display all packaging options
	for (var i=0; i<product.packagingOptions.length; i++)
	{
		html[index++] = '<tr><td class="element">';
		html[index++] = product.packagingOptions[i].packageType;
		html[index++] = '</td><td>';
		html[index++] = product.packagingOptions[i].count;
		html[index++] = ' ' + i18Pieces;
		if (product.packagingOptions[i].weight > 0)
		{
			html[index++] = ' (';
			html[index++] = product.packagingOptions[i].weight;
			html[index++] = ' kg)';
		}
		html[index++] = '</td></tr>';
	}

	// Mantis #1046
	var showLoadCarriers = product.hasEuroBox;

	if (showLoadCarriers)
	{
		for (var i=0; i<product.packagesPerLayer.length; i++)
		{
			if (product.packagesPerLayer[i].loadCarrierId == '999')
			{
				showLoadCarriers = false;
				break;
			}
		}
	}
	
	if (showLoadCarriers)
	{		
		// Packages per layer (Eurodoos)
		html[index++] = '<tr><td><br/><strong>'+i18PackagesPerLayer+'</strong></td><td></td></tr>';
		// Load carriers (Eurodoos)
		for (var i=0; i<product.packagesPerLayer.length; i++)
		{
			html[index++] = '<tr><td class="element">';
			html[index++] = product.packagesPerLayer[i].loadCarrierName;
			html[index++] = '</td><td>'; 
			html[index++] = product.packagesPerLayer[i].packagesPerLayer;
			html[index++] = '</td></tr>';
		}
	}
	html[index++] = '</table>';
	// Close link
	html[index++] = '<div class="infopopupleftfooter"><h4 style="float:left"><a href="#" onclick="hideDialog(\'overlayinfocontainer\'); return false;"><img src="/'+selectedGrowerVar+'/categories/'+defaultCategoryCodeVar+'/btn_cancel_'+defaultCategoryCodeVar+'.gif" style="vertical-align: bottom; padding-right:10px;"/>'+i18CloseWindow+'</a></h4>';
	// Order product link
	if (!product.soldOut)
	{
		html[index++] = '<h4 style="float:right"><a href="#" onclick="hideDialog(\'overlayinfocontainer\'); openOrderWindow (';
		html[index++] =	product.id;
		html[index++] = ", '"; 
		html[index++] = imageId;
		html[index++] = '\'); return false;"><img src="/'+selectedGrowerVar+'/categories/'+defaultCategoryCodeVar+'/btn_cart_'+defaultCategoryCodeVar+'.gif" style="vertical-align: bottom; padding-right:10px;"/>'+i18OrderWindow+'</a></h4>';
	}
	
	$('infopopupleft').innerHTML = html.join ('');
	
	// Create the download picture links.
	var path72dpi = '/download.web?id=' + productId + '&dpi=72';
	var path300dpi = '/download.web?id=' + productId + '&dpi=300';
	var html = "";

	// The 72dpi images has two purposes: it can be downloaded; and we
	// use it as product image in the product information screen.
	if (product.has72dpiImage)
	{
		// Create the 72dpi download link
		html += '<a href="' + path72dpi + '"><img src="'+rootPath+'/btn_dl_web.gif" alt=""/></a>&nbsp;';

		// Load the image
		$('infopopupimg').innerHTML = '<img src="' + imagePath400x400 + imageId + '.jpg" />';
	} else
	{
		$('infopopupimg').innerHTML = '';
	}
	if (product.has300dpiImage)
	{
		html += '&nbsp;<a href="' + path300dpi + '"><img src="'+rootPath+'/btn_dl_print.gif" alt=""/></a>';
	}
	
	$('infopopuprightfooter').innerHTML = html;

	// Enable or disable, as applicable, the sold out banner
	var soldoutinfo = $('soldoutinfo');
	if (product.soldOut)
	{
		soldoutinfo.addClassName ('soldoutinfo');
	} else
	{
		soldoutinfo.removeClassName ('soldoutinfo');
	}
	
	showDialog ('overlayinfocontainer');
} 

/**
 * Opens the order product window for the specified product id.
 * The order window enables the user to add the selected product to his or her basket.
 * @param productId		the product id.
 * @param imageId		the image id.
 * @return void
 */
function openOrderWindow (productId, imageId)
{			
	// Hide the basket.
	if ($('basketopen').visible ())
	{
		toggleBasket ();
	}

	var product = findProduct (productId);

	$('order_productId').value = productId;
	
	$('order_productName').innerHTML = product.name;
	$('order_articleCode').innerHTML = product.articleCode;
	// Load the image
	$('orderpopupright').innerHTML = (product.has72dpiImage) ? '<img src="' + imagePath225x225 + imageId + '.jpg" />' : '';			
	$('order_boxes').value = 1;		
	
	var packageTypes = [];
	var index = 0;
	packageTypes[index++] = '<select id="order_packageTypeValue">';
	
	for (var i=0; i<product.packagingOptions.length; i++)
	{
		var box = product.packagingOptions[i];
		if (box == undefined)
		{
			// This may happen on IE.
			// Box arrays are lazily appended with a ',' separator and IE
			// expects another element and counts one element more than
			// FireFox.  
			continue;
		}
		
		var packageType = box.packageType;
		if (packageType == '')
		{
			// Skip empty elements.
			continue;
		}
		
		packageTypes[index++] = '<option value="';
		packageTypes[index++] = packageType;
		packageTypes[index++] = '">';
		packageTypes[index++] = packageType; 
		packageTypes[index++] = '</option>';
	}

	packageTypes[index++] = '</select>';
	$('order_packageType').innerHTML = packageTypes.join ('');

	showDialog ('overlayordercontainer');
}