Index: ps/trunk/binaries/data/mods/public/gui/session/hotkeys/misc.xml
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/hotkeys/misc.xml
+++ ps/trunk/binaries/data/mods/public/gui/session/hotkeys/misc.xml
@@ -72,18 +72,6 @@
 		<action on="Release">updateSelectionDetails();</action>
 	</object>
 
-	<object hotkey="session.massbarter">
-		<action on="Press">
-			updateSelectionDetails();
-			updateBarterButtons();
-		</action>
-
-		<action on="Release">
-			updateSelectionDetails();
-			updateBarterButtons();
-		</action>
-	</object>
-
 	<!-- Find idle warrior - TODO: Potentially move this to own UI button? -->
 	<object hotkey="selection.idlewarrior">
 		<action on="Press">findIdleUnit(g_MilitaryTypes);</action>
Index: ps/trunk/binaries/data/mods/public/gui/session/menu.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/menu.js
+++ ps/trunk/binaries/data/mods/public/gui/session/menu.js
@@ -19,12 +19,6 @@
 // Number of pixels per millisecond to move
 var MENU_SPEED = 1.2;
 
-// Trade menu: step for probability changes
-var STEP = 5;
-
-// Shown in the trade dialog.
-var g_IdleTraderTextColor = "orange";
-
 /**
  * Store civilization code and page (structree or history) opened in civilization info.
  */
@@ -33,30 +27,8 @@
 	"page": "page_structree.xml"
 };
 
-/**
- * The barter constants should match with the simulation
- * Quantity of goods to sell per click.
- */
-const g_BarterResourceSellQuantity = 100;
-
-/**
- * Multiplier to be applied when holding the massbarter hotkey.
- */
-const g_BarterMultiplier = 5;
-
-/**
- * Barter actions, as mapped to the names of GUI Buttons.
- */
-const g_BarterActions = ["Buy", "Sell"];
-
-/**
- * Currently selected resource type to sell in the barter GUI.
- */
-var g_BarterSell;
-
 var g_IsMenuOpen = false;
 
-var g_IsTradeOpen = false;
 var g_IsObjectivesOpen = false;
 
 /**
@@ -237,407 +209,6 @@
 		});
 }
 
-function resizeTradeDialog()
-{
-	let dialog = Engine.GetGUIObjectByName("tradeDialogPanel");
-	let size = dialog.size;
-	let width = size.right - size.left;
-
-	let resTradCodesLength = g_ResourceData.GetTradableCodes().length;
-	Engine.GetGUIObjectByName("tradeDialogPanelTrade").hidden = !resTradCodesLength;
-
-	let resBarterCodesLength = g_ResourceData.GetBarterableCodes().length;
-	Engine.GetGUIObjectByName("tradeDialogPanelBarter").hidden = !resBarterCodesLength;
-
-	let tradeSize = Engine.GetGUIObjectByName("tradeResource[0]").size;
-	let length = Math.max(resTradCodesLength, resBarterCodesLength);
-	width += length * (tradeSize.right - tradeSize.left);
-
-	size.left = -width / 2;
-	size.right = width / 2;
-	dialog.size = size;
-}
-
-function openTrade()
-{
-	closeOpenDialogs();
-
-	if (g_ViewedPlayer < 1)
-		return;
-
-	g_IsTradeOpen = true;
-
-	let proba = Engine.GuiInterfaceCall("GetTradingGoods", g_ViewedPlayer);
-	let button = {};
-	let resTradeCodes = g_ResourceData.GetTradableCodes();
-	let resBarterCodes = g_ResourceData.GetBarterableCodes();
-	let currTradeSelection = resTradeCodes[0];
-
-	let updateTradeButtons = function()
-	{
-		for (let res in button)
-		{
-			button[res].label.caption = proba[res] + "%";
-
-			button[res].sel.hidden = !controlsPlayer(g_ViewedPlayer) || res != currTradeSelection;
-			button[res].up.hidden = !controlsPlayer(g_ViewedPlayer) || res == currTradeSelection || proba[res] == 100 || proba[currTradeSelection] == 0;
-			button[res].dn.hidden = !controlsPlayer(g_ViewedPlayer) || res == currTradeSelection || proba[res] == 0 || proba[currTradeSelection] == 100;
-		}
-	};
-
-	hideRemaining("tradeResources", resTradeCodes.length);
-	Engine.GetGUIObjectByName("tradeHelp").hidden = false;
-
-
-	for (let i = 0; i < resBarterCodes.length; ++i)
-	{
-		let resBarterCode = resBarterCodes[i];
-
-		let barterResource = Engine.GetGUIObjectByName("barterResource[" + i + "]");
-		if (!barterResource)
-		{
-			 warn("Current GUI limits prevent displaying more than " + i + " resources in the barter dialog!");
-			 break;
-		}
-
-		barterOpenCommon(resBarterCode, i, "barter");
-		setPanelObjectPosition(barterResource, i, i + 1);
-	}
-
-	for (let i = 0; i < resTradeCodes.length; ++i)
-	{
-		let resTradeCode = resTradeCodes[i];
-
-		let tradeResource = Engine.GetGUIObjectByName("tradeResource[" + i + "]");
-		if (!tradeResource)
-		{
-			 warn("Current GUI limits prevent displaying more than " + i + " resources in the trading goods selection dialog!");
-			 break;
-		}
-
-		setPanelObjectPosition(tradeResource, i, i + 1);
-
-		let icon = Engine.GetGUIObjectByName("tradeResourceIcon[" + i + "]");
-		icon.sprite = "stretched:session/icons/resources/" + resTradeCode + ".png";
-
-		let buttonUp = Engine.GetGUIObjectByName("tradeArrowUp[" + i + "]");
-		let buttonDn = Engine.GetGUIObjectByName("tradeArrowDn[" + i + "]");
-
-		button[resTradeCode] = {
-			"up": buttonUp,
-			"dn": buttonDn,
-			"label": Engine.GetGUIObjectByName("tradeResourceText[" + i + "]"),
-			"sel": Engine.GetGUIObjectByName("tradeResourceSelection[" + i + "]")
-		};
-
-		proba[resTradeCode] = proba[resTradeCode] || 0;
-
-		let buttonResource = Engine.GetGUIObjectByName("tradeResourceButton[" + i + "]");
-		buttonResource.enabled = controlsPlayer(g_ViewedPlayer);
-		buttonResource.onPress = (resource => {
-			return () => {
-				if (Engine.HotkeyIsPressed("session.fulltradeswap"))
-				{
-					for (let res of resTradeCodes)
-						proba[res] = 0;
-					proba[resource] = 100;
-					Engine.PostNetworkCommand({ "type": "set-trading-goods", "tradingGoods": proba });
-				}
-				currTradeSelection = resource;
-				updateTradeButtons();
-			};
-		})(resTradeCode);
-
-		buttonUp.enabled = controlsPlayer(g_ViewedPlayer);
-		buttonUp.onPress = (resource => {
-			return () => {
-				proba[resource] += Math.min(STEP, proba[currTradeSelection]);
-				proba[currTradeSelection] -= Math.min(STEP, proba[currTradeSelection]);
-				Engine.PostNetworkCommand({ "type": "set-trading-goods", "tradingGoods": proba });
-				updateTradeButtons();
-			};
-		})(resTradeCode);
-
-		buttonDn.enabled = controlsPlayer(g_ViewedPlayer);
-		buttonDn.onPress = (resource => {
-			return () => {
-				proba[currTradeSelection] += Math.min(STEP, proba[resource]);
-				proba[resource] -= Math.min(STEP, proba[resource]);
-				Engine.PostNetworkCommand({ "type": "set-trading-goods", "tradingGoods": proba });
-				updateTradeButtons();
-			};
-		})(resTradeCode);
-	}
-
-	updateTradeButtons();
-	updateTraderTexts();
-
-	Engine.GetGUIObjectByName("tradeDialogPanel").hidden = false;
-}
-
-function updateTraderTexts()
-{
-	let traderNumber = Engine.GuiInterfaceCall("GetTraderNumber", g_ViewedPlayer);
-	Engine.GetGUIObjectByName("traderCountText").caption = getIdleLandTradersText(traderNumber) + "\n\n" + getIdleShipTradersText(traderNumber);
-}
-
-function initBarterButtons()
-{
-	let resBartCodes = g_ResourceData.GetBarterableCodes();
-	g_BarterSell = resBartCodes.length ? resBartCodes[0] : undefined;
-}
-
-/**
- * Code common to both the Barter Panel and the Trade/Barter Dialog, that
- * only needs to be run when the panel or dialog is opened by the player.
- *
- * @param {string} resourceCode
- * @param {number} idx - Element index within its set
- * @param {string} prefix - Common prefix of the gui elements to be worked upon
- */
-function barterOpenCommon(resourceCode, idx, prefix)
-{
-	let barterButton = {};
-	for (let action of g_BarterActions)
-		barterButton[action] = Engine.GetGUIObjectByName(prefix + action + "Button[" + idx + "]");
-
-	let resource = resourceNameWithinSentence(resourceCode);
-	barterButton.Buy.tooltip = sprintf(translate("Buy %(resource)s"), { "resource": resource });
-	barterButton.Sell.tooltip = sprintf(translate("Sell %(resource)s"), { "resource": resource });
-
-	barterButton.Sell.onPress = function() {
-		g_BarterSell = resourceCode;
-		updateSelectionDetails();
-		updateBarterButtons();
-	};
-}
-
-/**
- * Code common to both the Barter Panel and the Trade/Barter Dialog, that
- * needs to be run on simulation update and when relevant hotkeys
- * (i.e. massbarter) are pressed.
- *
- * @param {string} resourceCode
- * @param {number} idx - Element index within its set
- * @param {string} prefix - Common prefix of the gui elements to be worked upon
- * @param {number} player
- */
-function barterUpdateCommon(resourceCode, idx, prefix, player)
-{
-	let barterButton = {};
-	let barterIcon = {};
-	let barterAmount = {};
-	for (let action of g_BarterActions)
-	{
-		barterButton[action] = Engine.GetGUIObjectByName(prefix + action + "Button[" + idx + "]");
-		barterIcon[action] = Engine.GetGUIObjectByName(prefix + action + "Icon[" + idx + "]");
-		barterAmount[action] = Engine.GetGUIObjectByName(prefix + action + "Amount[" + idx + "]");
-	}
-	let selectionIcon = Engine.GetGUIObjectByName(prefix + "SellSelection[" + idx + "]");
-
-	let amountToSell = g_BarterResourceSellQuantity;
-	if (Engine.HotkeyIsPressed("session.massbarter"))
-		amountToSell *= g_BarterMultiplier;
-
-	let isSelected = resourceCode == g_BarterSell;
-	let grayscale = isSelected ? "color:0 0 0 100:grayscale:" : "";
-
-	// Select color of the sell button
-	let neededRes = {};
-	neededRes[resourceCode] = amountToSell;
-	let canSellCurrent = Engine.GuiInterfaceCall("GetNeededResources", {
-		"cost": neededRes,
-		"player": player
-	}) ? "color:255 0 0 80:" : "";
-
-	// Select color of the buy button
-	neededRes = {};
-	neededRes[g_BarterSell] = amountToSell;
-	let canBuyAny = Engine.GuiInterfaceCall("GetNeededResources", {
-		"cost": neededRes,
-		"player": player
-	}) ? "color:255 0 0 80:" : "";
-
-	barterIcon.Sell.sprite = canSellCurrent + "stretched:" + grayscale + "session/icons/resources/" + resourceCode + ".png";
-	barterIcon.Buy.sprite = canBuyAny + "stretched:" + grayscale + "session/icons/resources/" + resourceCode + ".png";
-
-	barterAmount.Sell.caption = "-" + amountToSell;
-	let prices = GetSimState().players[player].barterPrices;
-	barterAmount.Buy.caption = "+" + Math.round(prices.sell[g_BarterSell] / prices.buy[resourceCode] * amountToSell);
-
-	barterButton.Buy.onPress = function() {
-		Engine.PostNetworkCommand({
-			"type": "barter",
-			"sell": g_BarterSell,
-			"buy": resourceCode,
-			"amount": amountToSell
-		});
-	};
-
-	barterButton.Buy.hidden = isSelected;
-	barterButton.Buy.enabled = controlsPlayer(player);
-	barterButton.Sell.hidden = false;
-	selectionIcon.hidden = !isSelected;
-}
-
-function updateBarterButtons()
-{
-	let playerState = GetSimState().players[g_ViewedPlayer];
-	if (!playerState)
-		return;
-
-	let canBarter = playerState.canBarter;
-	Engine.GetGUIObjectByName("barterNoMarketsMessage").hidden = canBarter;
-	Engine.GetGUIObjectByName("barterResources").hidden = !canBarter;
-	Engine.GetGUIObjectByName("barterHelp").hidden = !canBarter;
-
-	if (canBarter)
-		g_ResourceData.GetBarterableCodes().forEach((resCode, i) => {
-			barterUpdateCommon(resCode, i, "barter", g_ViewedPlayer);
-		});
-}
-
-function getIdleLandTradersText(traderNumber)
-{
-	let active = traderNumber.landTrader.trading;
-	let garrisoned = traderNumber.landTrader.garrisoned;
-	let inactive = traderNumber.landTrader.total - active - garrisoned;
-
-	let messageTypes = {
-		"active": {
-			"garrisoned": {
-				"no-inactive": translate("%(openingTradingString)s, and %(garrisonedString)s."),
-				"inactive": translate("%(openingTradingString)s, %(garrisonedString)s, and %(inactiveString)s.")
-			},
-			"no-garrisoned": {
-				"no-inactive": translate("%(openingTradingString)s."),
-				"inactive": translate("%(openingTradingString)s, and %(inactiveString)s.")
-			}
-		},
-		"no-active": {
-			"garrisoned": {
-				"no-inactive": translate("%(openingGarrisonedString)s."),
-				"inactive": translate("%(openingGarrisonedString)s, and %(inactiveString)s.")
-			},
-			"no-garrisoned": {
-				"inactive": translatePlural("There is %(inactiveString)s.", "There are %(inactiveString)s.", inactive),
-				"no-inactive": translate("There are no land traders.")
-			}
-		}
-	};
-
-	let message = messageTypes[active ? "active" : "no-active"][garrisoned ? "garrisoned" : "no-garrisoned"][inactive ? "inactive" : "no-inactive"];
-
-	let activeString = sprintf(
-		translatePlural(
-			"There is %(numberTrading)s land trader trading",
-			"There are %(numberTrading)s land traders trading",
-			active
-		),
-		{ "numberTrading": active }
-	);
-
-	let inactiveString = sprintf(
-		active || garrisoned ?
-			translatePlural(
-				"%(numberOfLandTraders)s inactive",
-				"%(numberOfLandTraders)s inactive",
-				inactive
-			) :
-			translatePlural(
-				"%(numberOfLandTraders)s land trader inactive",
-				"%(numberOfLandTraders)s land traders inactive",
-				inactive
-			),
-		{ "numberOfLandTraders": inactive }
-	);
-
-	let garrisonedString = sprintf(
-		active || inactive ?
-			translatePlural(
-				"%(numberGarrisoned)s garrisoned on a trading merchant ship",
-				"%(numberGarrisoned)s garrisoned on a trading merchant ship",
-				garrisoned
-			) :
-			translatePlural(
-				"There is %(numberGarrisoned)s land trader garrisoned on a trading merchant ship",
-				"There are %(numberGarrisoned)s land traders garrisoned on a trading merchant ship",
-				garrisoned
-			),
-		{ "numberGarrisoned": garrisoned }
-	);
-
-	return sprintf(message, {
-		"openingTradingString": activeString,
-		"openingGarrisonedString": garrisonedString,
-		"garrisonedString": garrisonedString,
-		"inactiveString": coloredText(inactiveString, g_IdleTraderTextColor)
-	});
-}
-
-function getIdleShipTradersText(traderNumber)
-{
-	let active = traderNumber.shipTrader.trading;
-	let inactive = traderNumber.shipTrader.total - active;
-
-	let messageTypes = {
-		"active": {
-			"inactive": translate("%(openingTradingString)s, and %(inactiveString)s."),
-			"no-inactive": translate("%(openingTradingString)s.")
-		},
-		"no-active": {
-			"inactive": translatePlural("There is %(inactiveString)s.", "There are %(inactiveString)s.", inactive),
-			"no-inactive": translate("There are no merchant ships.")
-		}
-	};
-
-	let message = messageTypes[active ? "active" : "no-active"][inactive ? "inactive" : "no-inactive"];
-
-	let activeString = sprintf(
-		translatePlural(
-			"There is %(numberTrading)s merchant ship trading",
-			"There are %(numberTrading)s merchant ships trading",
-			active
-		),
-		{ "numberTrading": active }
-	);
-
-	let inactiveString = sprintf(
-		active ?
-			translatePlural(
-				"%(numberOfShipTraders)s inactive",
-				"%(numberOfShipTraders)s inactive",
-				inactive
-			) :
-			translatePlural(
-				"%(numberOfShipTraders)s merchant ship inactive",
-				"%(numberOfShipTraders)s merchant ships inactive",
-				inactive
-			),
-		{ "numberOfShipTraders": inactive }
-	);
-
-	return sprintf(message, {
-		"openingTradingString": activeString,
-		"inactiveString": coloredText(inactiveString, g_IdleTraderTextColor)
-	});
-}
-
-function closeTrade()
-{
-	g_IsTradeOpen = false;
-	Engine.GetGUIObjectByName("tradeDialogPanel").hidden = true;
-}
-
-function toggleTrade()
-{
-	let open = g_IsTradeOpen;
-	closeOpenDialogs();
-
-	if (!open)
-		openTrade();
-}
-
 function toggleTutorial()
 {
 	let tutorialPanel = Engine.GetGUIObjectByName("tutorialPanel");
@@ -863,9 +434,9 @@
 function closeOpenDialogs()
 {
 	closeMenu();
-	closeTrade();
 	closeObjectives();
 
 	g_Chat.closePage();
 	g_DiplomacyDialog.close();
+	g_TradeDialog.close();
 }
Index: ps/trunk/binaries/data/mods/public/gui/session/selection_panels.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/selection_panels.js
+++ ps/trunk/binaries/data/mods/public/gui/session/selection_panels.js
@@ -28,10 +28,12 @@
 
 // Cache some formation info
 // Available formations per player
-let g_AvailableFormations = new Map();
-let g_FormationsInfo = new Map();
+var g_AvailableFormations = new Map();
+var g_FormationsInfo = new Map();
 
-let g_SelectionPanels = {};
+var g_SelectionPanels = {};
+
+var g_SelectionPanelBarterButtonManager;
 
 g_SelectionPanels.Alert = {
 	"getMaxNumberOfItems": function()
@@ -90,15 +92,11 @@
 	},
 	"setupButton": function(data)
 	{
-		barterOpenCommon(data.item, data.i, "unitBarter");
-		barterUpdateCommon(data.item, data.i, "unitBarter", data.player);
-
-		let button = {};
-		for (let action of g_BarterActions)
-			button[action] = Engine.GetGUIObjectByName("unitBarter" + action + "Button[" + data.i + "]");
-
-		setPanelObjectPosition(button.Sell, data.i, data.rowLength);
-		setPanelObjectPosition(button.Buy, data.i + data.rowLength, data.rowLength);
+		if (g_SelectionPanelBarterButtonManager)
+		{
+			g_SelectionPanelBarterButtonManager.setViewedPlayer(data.player);
+			g_SelectionPanelBarterButtonManager.update();
+		}
 		return true;
 	}
 };
@@ -1131,6 +1129,14 @@
 	}
 };
 
+function initSelectionPanels()
+{
+
+	let unitBarterPanel = Engine.GetGUIObjectByName("unitBarterPanel");
+	if (BarterButtonManager.IsAvailable(unitBarterPanel))
+		g_SelectionPanelBarterButtonManager = new BarterButtonManager(unitBarterPanel);
+}
+
 /**
  * Pauses game and opens the template details viewer for a selected entity or technology.
  *
Index: ps/trunk/binaries/data/mods/public/gui/session/selection_panels_left/barter_panel.xml
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/selection_panels_left/barter_panel.xml
+++ ps/trunk/binaries/data/mods/public/gui/session/selection_panels_left/barter_panel.xml
@@ -1,23 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
-<object name="unitBarterPanel"
-	size="12 12 100% 100%"
-	hidden="true"
->
-	<repeat count="4">
-
-		<!-- Sell -->
-		<object name="unitBarterSellButton[n]" style="iconButton" type="button" size="0 0 42 42" tooltip_style="sessionToolTipBottomBold" hidden="true">
-			<object name="unitBarterSellIcon[n]" type="image" ghost="true" size="3 3 100%-3 100%-3"/>
-			<object name="unitBarterSellAmount[n]" ghost="true" style="resourceText" type="text" size="0 0 100% 50%"/>
-			<object name="unitBarterSellSelection[n]" hidden="true" type="image" ghost="true" size="3 3 100%-3 100%-3" sprite="stretched:session/icons/corners.png"/>
-		</object>
+<object name="unitBarterPanel" size="12 12 100% 100%" hidden="true" hotkey="session.massbarter">
 
-		<!-- Buy -->
-		<object name="unitBarterBuyButton[n]" style="iconButton" type="button" size="0 0 42 42" tooltip_style="sessionToolTipBottomBold" hidden="true">
-			<object name="unitBarterBuyIcon[n]" type="image" ghost="true" size="3 3 100%-3 100%-3"/>
-			<object name="unitBarterBuyAmount[n]" ghost="true" style="resourceText" type="text" size="0 0 100% 50%"/>
+	<repeat count="4">
+		<object size="0 0 42 42">
+			<include file="gui/session/trade/BarterButton.xml"/>
 		</object>
-
 	</repeat>
 
 </object>
Index: ps/trunk/binaries/data/mods/public/gui/session/session.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/session.js
+++ ps/trunk/binaries/data/mods/public/gui/session/session.js
@@ -15,6 +15,8 @@
 var g_DiplomacyColors;
 var g_DiplomacyDialog;
 var g_MiniMapPanel;
+var g_TradeDialog;
+var g_TradeDialogButton;
 
 var g_GameSpeeds;
 
@@ -271,7 +273,10 @@
 	g_DiplomacyDialog = new DiplomacyDialog(g_DiplomacyColors);
 	g_DiplomacyButton = new DiplomacyButton(g_DiplomacyDialog);
 	g_MiniMapPanel = new MiniMapPanel(g_DiplomacyColors, g_WorkerTypes);
+	g_TradeDialog = new TradeDialog();
+	g_TradeDialogButton = new TradeDialogButton(g_TradeDialog);
 
+	initSelectionPanels();
 	LoadModificationTemplates();
 	updatePlayerData();
 	initializeMusic(); // before changing the perspective
@@ -293,8 +298,7 @@
 {
 	initMenu();
 	updateGameSpeedControl();
-	resizeTradeDialog();
-	initBarterButtons();
+	g_TradeDialog.resize();
 	initPanelEntities();
 	g_DiplomacyColors.onPlayerInit();
 	initViewedPlayerDropdown();
@@ -365,21 +369,6 @@
  */
 function updateHotkeyTooltips()
 {
-	Engine.GetGUIObjectByName("tradeButton").tooltip =
-		colorizeHotkey("%(hotkey)s" + " ", "session.gui.barter.toggle") +
-		translate("Barter & Trade");
-
-	Engine.GetGUIObjectByName("tradeHelp").tooltip = colorizeHotkey(
-		translate("Select one type of goods you want to modify by clicking on it, and then use the arrows of the other types to modify their shares. You can also press %(hotkey)s while selecting one type of goods to bring its share to 100%%."),
-		"session.fulltradeswap");
-
-	Engine.GetGUIObjectByName("barterHelp").tooltip = sprintf(
-		translate("Start by selecting the resource you wish to sell from the upper row. For each time the lower buttons are pressed, %(quantity)s of the upper resource will be sold for the displayed quantity of the lower. Press and hold %(hotkey)s to temporarily multiply the traded amount by %(multiplier)s."), {
-			"quantity": g_BarterResourceSellQuantity,
-			"hotkey": colorizeHotkey("%(hotkey)s", "session.massbarter"),
-			"multiplier": g_BarterMultiplier
-		});
-
 	Engine.GetGUIObjectByName("objectivesButton").tooltip =
 		colorizeHotkey("%(hotkey)s" + " ", "session.gui.objectives.toggle") +
 		translate("Objectives");
@@ -487,9 +476,7 @@
 	onSimulationUpdate();
 
 	g_DiplomacyDialog.update();
-
-	if (g_IsTradeOpen)
-		openTrade();
+	g_TradeDialog.update();
 }
 
 /**
@@ -612,9 +599,8 @@
 
 	Engine.GetGUIObjectByName("population").hidden = !isPlayer;
 	g_DiplomacyButton.update();
+	g_TradeDialogButton.update();
 
-	Engine.GetGUIObjectByName("tradeButton").hidden = !isPlayer ||
-		(!g_ResourceData.GetTradableCodes().length && !g_ResourceData.GetBarterableCodes().length);
 	Engine.GetGUIObjectByName("observerText").hidden = isPlayer;
 
 	let alphaLabel = Engine.GetGUIObjectByName("alphaLabel");
@@ -863,12 +849,6 @@
 	updateBuildingPlacementPreview();
 	updateTimeNotifications();
 
-	if (g_IsTradeOpen)
-	{
-		updateTraderTexts();
-		updateBarterButtons();
-	}
-
 	if (g_ViewedPlayer > 0)
 	{
 		let playerState = GetSimState().players[g_ViewedPlayer];
@@ -887,6 +867,7 @@
 	g_DeveloperOverlay.update();
 	g_DiplomacyDialog.update();
 	g_MiniMapPanel.update();
+	g_TradeDialog.update();
 }
 
 function saveResPopTooltipSort()
Index: ps/trunk/binaries/data/mods/public/gui/session/session.xml
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/session.xml
+++ ps/trunk/binaries/data/mods/public/gui/session/session.xml
@@ -9,6 +9,7 @@
 <script directory="gui/session/diplomacy/playercontrols/"/>
 <script directory="gui/session/minimap/"/>
 <script directory="gui/session/top_panel/"/>
+<script directory="gui/session/trade/"/>
 
 <object name="session">
 
@@ -105,7 +106,7 @@
 	<include file="gui/session/developer_overlay.xml"/>
 	<include file="gui/session/objectives_window.xml"/>
 	<include file="gui/session/top_panel.xml"/>
-	<include file="gui/session/trade_window.xml"/>
+	<include file="gui/session/trade/TradeDialog.xml"/>
 	<include file="gui/session/tutorial_panel.xml"/>
 	<include file="gui/session/menu.xml"/>
 
Index: ps/trunk/binaries/data/mods/public/gui/session/top_panel/TradeDialogButton.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/top_panel/TradeDialogButton.js
+++ ps/trunk/binaries/data/mods/public/gui/session/top_panel/TradeDialogButton.js
@@ -0,0 +1,23 @@
+/**
+ * This class handles the button which opens the diplomacy dialog.
+ */
+class TradeDialogButton
+{
+	constructor(tradeDialog)
+	{
+		this.tradeButton = Engine.GetGUIObjectByName("tradeButton");
+		this.tradeButton.onPress = tradeDialog.toggle.bind(tradeDialog);
+		this.isAvailable = g_ResourceData.GetTradableCodes().length || g_ResourceData.GetBarterableCodes().length;
+	}
+
+	update()
+	{
+		this.tradeButton.hidden = g_ViewedPlayer < 1 || !this.isAvailable;
+
+		this.tradeButton.tooltip =
+			colorizeHotkey("%(hotkey)s" + " ", "session.gui.barter.toggle") +
+			translate(this.Tooltip);
+	}
+}
+
+TradeDialogButton.prototype.Tooltip = markForTranslation("Barter & Trade");
Index: ps/trunk/binaries/data/mods/public/gui/session/top_panel/button_trade.xml
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/top_panel/button_trade.xml
+++ ps/trunk/binaries/data/mods/public/gui/session/top_panel/button_trade.xml
@@ -7,7 +7,4 @@
 	hotkey="session.gui.barter.toggle"
 >
 	<object name="tradeButtonImage" type="image" sprite="stretched:session/icons/economics.png" ghost="true"/>
-	<action on="Press">
-		toggleTrade();
-	</action>
 </object>
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/BarterButton.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/BarterButton.js
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/BarterButton.js
@@ -0,0 +1,119 @@
+/**
+ * This class manages a buy and sell button for one resource.
+ * The sell button selects the resource to be sold.
+ * The buy button selects the resource to be bought and performs the sale.
+ */
+class BarterButton
+{
+	constructor(barterButtonManager, resourceCode, i, panel)
+	{
+		this.barterButtonManager = barterButtonManager;
+		this.resourceCode = resourceCode;
+		this.amountToSell = 0;
+
+		this.sellButton = panel.children[i].children[0].children[0];
+		this.sellIcon = this.sellButton.children[0];
+		this.sellAmount = this.sellButton.children[1];
+		this.sellSelection = this.sellButton.children[2];
+
+		this.buyButton = panel.children[i].children[0].children[1];
+		this.buyIcon= this.buyButton.children[0];
+		this.buyAmount = this.buyButton.children[1];
+
+		let resourceName = { "resource": resourceNameWithinSentence(resourceCode) };
+
+		this.sellButton.tooltip = sprintf(this.SellTooltip, resourceName);
+		this.sellButton.onPress = () => { barterButtonManager.setSelectedResource(this.resourceCode); };
+		this.sellButton.hidden = false;
+
+		this.buyButton.tooltip = sprintf(this.BuyTooltip, resourceName);
+		this.buyButton.onPress = () => { this.buy(); };
+
+		this.iconPath = this.ResourceIconPath + resourceCode + ".png";
+
+		setPanelObjectPosition(panel.children[i], i, Infinity);
+	}
+
+	buy()
+	{
+		Engine.PostNetworkCommand({
+			"type": "barter",
+			"sell": this.barterButtonManager.selectedResource,
+			"buy": this.resourceCode,
+			"amount": this.amountToSell
+		});
+	}
+
+	/**
+	 * The viewed player might be the owner of the selected market.
+	 */
+	update(viewedPlayer)
+	{
+		this.amountToSell = this.BarterResourceSellQuantity;
+
+		if (Engine.HotkeyIsPressed("session.massbarter"))
+			this.amountToSell *= this.Multiplier;
+
+		let neededResourcesSell = Engine.GuiInterfaceCall("GetNeededResources", {
+			"cost": {
+				[this.resourceCode]: this.amountToSell
+			},
+			"player": viewedPlayer
+		});
+
+		let neededResourcesBuy = Engine.GuiInterfaceCall("GetNeededResources", {
+			"cost": {
+				[this.barterButtonManager.selectedResource]: this.amountToSell
+			},
+			"player": viewedPlayer
+		});
+
+		let isSelected = this.resourceCode == this.barterButtonManager.selectedResource;
+		let icon = "stretched:" +  (isSelected ? this.SelectedModifier : "") + this.iconPath;
+		this.sellIcon.sprite = (neededResourcesSell ? this.DisabledModifier : "") + icon;
+		this.buyIcon.sprite = (neededResourcesBuy ? this.DisabledModifier : "") + icon;
+
+		this.sellAmount.caption = sprintf(translateWithContext("sell action", this.SellCaption), {
+			"amount": this.amountToSell
+		});
+
+		let prices = GetSimState().players[viewedPlayer].barterPrices;
+
+		this.buyAmount.caption = sprintf(translateWithContext("buy action", this.BuyCaption), {
+			"amount": Math.round(
+				prices.sell[this.barterButtonManager.selectedResource] /
+				prices.buy[this.resourceCode] * this.amountToSell)
+		});
+
+		this.buyButton.hidden = isSelected;
+		this.buyButton.enabled = controlsPlayer(viewedPlayer);
+		this.sellSelection.hidden = !isSelected;
+	}
+}
+
+BarterButton.getWidth = function(panel)
+{
+	let size = panel.children[0].size;
+	return size.right - size.left;
+};
+
+BarterButton.prototype.BuyTooltip = markForTranslation("Buy %(resource)s");
+BarterButton.prototype.SellTooltip = markForTranslation("Sell %(resource)s");
+BarterButton.prototype.BuyCaption = markForTranslationWithContext("buy action", "+%(amount)s");
+BarterButton.prototype.SellCaption = markForTranslationWithContext("sell action", "-%(amount)s");
+
+/**
+ * The barter constants should match with the simulation Quantity of goods to sell per click.
+ */
+BarterButton.prototype.BarterResourceSellQuantity = 100;
+
+/**
+ * Multiplier to be applied when holding the massbarter hotkey.
+ */
+BarterButton.prototype.Multiplier = 5;
+
+BarterButton.prototype.SelectedModifier = "color:0 0 0 100:grayscale:";
+
+BarterButton.prototype.DisabledModifier = "color:255 0 0 80:";
+
+BarterButton.prototype.ResourceIconPath = "session/icons/resources/";
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/BarterButton.xml
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/BarterButton.xml
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/BarterButton.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<object>
+
+	<!-- Sell -->
+	<object style="iconButton" type="button" size="0 0 42 42" tooltip_style="sessionToolTipBottomBold" hidden="true">
+		<object type="image" ghost="true" size="3 3 100%-3 100%-3"/>
+		<object type="text" ghost="true" style="resourceText" size="0 0 100% 50%"/>
+		<object type="image" ghost="true" hidden="true" size="3 3 100%-3 100%-3" sprite="stretched:session/icons/corners.png"/>
+	</object>
+
+	<!-- Buy -->
+	<object style="iconButton" type="button" size="0 43 42 85" tooltip_style="sessionToolTipBottomBold" hidden="true">
+		<object type="image" ghost="true" size="3 3 100%-3 100%-3"/>
+		<object ghost="true" style="resourceText" type="text" size="0 0 100% 50%"/>
+	</object>
+
+</object>
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/BarterButtonManager.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/BarterButtonManager.js
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/BarterButtonManager.js
@@ -0,0 +1,47 @@
+/**
+ * This class provides barter buttons.
+ * This is instantiated once for the selection panels and once for the trade dialog.
+ */
+class BarterButtonManager
+{
+	constructor(panel)
+	{
+		if (!BarterButtonManager.IsAvailable(panel))
+			throw "BarterButtonManager instantiated with no barterable resources or too few buttons!";
+
+		// The player may be the owner of the selected market
+		this.viewedPlayer = -1;
+
+		let resourceCodes = g_ResourceData.GetBarterableCodes();
+		this.selectedResource = resourceCodes[0];
+		this.buttons = resourceCodes.map((resourceCode, i) =>
+			new BarterButton(this, resourceCode, i, panel));
+
+		panel.onPress = this.update.bind(this);
+		panel.onRelease = this.update.bind(this);
+	}
+
+	setViewedPlayer(viewedPlayer)
+	{
+		this.viewedPlayer = viewedPlayer;
+	}
+
+	setSelectedResource(resourceCode)
+	{
+		this.selectedResource = resourceCode;
+		this.update();
+	}
+
+	update()
+	{
+		if (this.viewedPlayer >= 1)
+			for (let button of this.buttons)
+				button.update(this.viewedPlayer);
+	}
+}
+
+BarterButtonManager.IsAvailable = function(panel)
+{
+	let resourceCount = g_ResourceData.GetBarterableCodes().length;
+	return resourceCount && resourceCount <= panel.children.length;
+};
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/BarterPanel.xml
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/BarterPanel.xml
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/BarterPanel.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<object name="tradeDialogPanelBarter">
+
+	<object type="text" size="8 0 100% 32" style="ModernLeftLabelText">
+		<translatableAttribute id="caption">Barter</translatableAttribute>
+	</object>
+
+	<object type="image" size="0 28 100% 29" sprite="ModernGoldLine"/>
+
+	<object size="0 38 100% 122">
+
+		<object type="text" size="0 0 60 41" style="ModernRightLabelText">
+			<translatableAttribute id="caption">Sell:</translatableAttribute>
+		</object>
+
+		<object type="text" size="0 100%-41 60 100%" style="ModernRightLabelText">
+			<translatableAttribute id="caption">Buy:</translatableAttribute>
+		</object>
+
+		<object name="barterNoMarketsMessage" type="text" size="72 0 100% 100%" style="ModernLabelText">
+			<translatableAttribute id="caption">No Markets Available</translatableAttribute>
+		</object>
+
+		<object name="barterResources" size="72 0 100% 100%" hotkey="session.massbarter">
+			<repeat count="10">
+				<object size="0 0 58 100%">
+					<include file="gui/session/trade/BarterButton.xml"/>
+				</object>
+			</repeat>
+		</object>
+
+		<object name="barterHelp" type="button" size="100%-24 50%-12 100% 50%+12" style="StoneButton" tooltip_style="sessionToolTipBold" enabled="false">
+			<object type="image" size="20% 15% 80% 75%" sprite="iconInfoWhite" ghost="true"/>
+		</object>
+
+	</object>
+</object>
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/TradeButton.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/TradeButton.js
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/TradeButton.js
@@ -0,0 +1,69 @@
+/**
+ * This class manages a button of the trading goods selection,
+ * where the user can determine the amounts of resource tpes that the trade carts shall transport.
+ */
+class TradeButton
+{
+	constructor(tradeButtonManager, resourceCode, i)
+	{
+		this.tradeButtonManager = tradeButtonManager;
+		this.resourceCode = resourceCode;
+
+		let id = "[" + i + "]";
+
+		this.tradeArrowUp = Engine.GetGUIObjectByName("tradeArrowUp" + id);
+		this.tradeArrowDn = Engine.GetGUIObjectByName("tradeArrowDn" + id);
+		this.tradeResource = Engine.GetGUIObjectByName("tradeResource" + id);
+		this.tradeResourceText = Engine.GetGUIObjectByName("tradeResourceText" + id);
+		this.tradeResourceButton = Engine.GetGUIObjectByName("tradeResourceButton" + id);
+		this.tradeResourceSelection = Engine.GetGUIObjectByName("tradeResourceSelection" + id);
+
+		Engine.GetGUIObjectByName("tradeResourceIcon" + id).sprite =
+			"stretched:" + this.ResourceIconPath + resourceCode + ".png";
+
+		this.tradeResourceButton.onPress = () => { tradeButtonManager.selectResource(resourceCode); };
+
+		this.tradeArrowUp.onPress = () => {
+			tradeButtonManager.changeResourceAmount(resourceCode, +Math.min(this.AmountStep, tradeButtonManager.tradingGoods[tradeButtonManager.selectedResource]));
+		};
+
+		this.tradeArrowDn.onPress = () => {
+			tradeButtonManager.changeResourceAmount(resourceCode, -Math.min(this.AmountStep, tradeButtonManager.tradingGoods[resourceCode]));
+		};
+
+		setPanelObjectPosition(this.tradeResource, i, i + 1);
+	}
+
+	update(enabled)
+	{
+		let isSelected = this.tradeButtonManager.selectedResource == this.resourceCode;
+		let currentAmount = this.tradeButtonManager.tradingGoods[this.resourceCode];
+		let selectedAmount = this.tradeButtonManager.tradingGoods[this.tradeButtonManager.selectedResource];
+
+		this.tradeResourceText.caption = sprintf(translateWithContext("trading good ratio", this.AmountRatioCaption), {
+			"amount": currentAmount
+		});
+		this.tradeResourceButton.enabled = enabled;
+		this.tradeResourceSelection.hidden = !enabled || !isSelected;
+
+		this.tradeArrowUp.enabled = enabled;
+		this.tradeArrowDn.enabled = enabled;
+		this.tradeArrowUp.hidden = !enabled || isSelected || currentAmount == 100 || selectedAmount == 0;
+		this.tradeArrowDn.hidden = !enabled || isSelected || currentAmount == 0 || selectedAmount == 100;
+	}
+}
+
+TradeButton.prototype.AmountRatioCaption = markForTranslationWithContext("trading good ratio", "%(amount)s%%");
+
+TradeButton.getWidth = function()
+{
+	let size = Engine.GetGUIObjectByName("tradeResource[0]").size;
+	return size.right - size.left;
+};
+
+TradeButton.prototype.ResourceIconPath = "session/icons/resources/";
+
+/**
+ * Percent of trading good selection to change per click.
+ */
+TradeButton.prototype.AmountStep = 5;
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/TradeButtonManager.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/TradeButtonManager.js
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/TradeButtonManager.js
@@ -0,0 +1,76 @@
+/**
+ * This class handles the buttons used to determine selection of goods carried by traders.
+ */
+class TradeButtonManager
+{
+	constructor()
+	{
+		if (!TradeButtonManager.IsAvailable())
+			throw "TradeButtonManager instantiated with no tradeable resources or too few buttons!";
+
+		// Assume that the simulation state will always follow the GUI
+		this.tradingGoods = Engine.GuiInterfaceCall("GetTradingGoods", g_ViewedPlayer);
+
+		let resourceCodes = g_ResourceData.GetTradableCodes();
+		this.selectedResource = resourceCodes[0];
+		this.buttons = resourceCodes.map((resCode, i) => new TradeButton(this, resCode, i));
+
+		hideRemaining("tradeResources", resourceCodes.length);
+
+		this.tradeHelp = Engine.GetGUIObjectByName("tradeHelp");
+		this.tradeHelp.hidden = false;
+	}
+
+	update()
+	{
+		this.tradeHelp.tooltip = colorizeHotkey(translate(this.TradeSwapTooltip), "session.fulltradeswap");
+
+		let enabled = controlsPlayer(g_ViewedPlayer);
+		for (let button of this.buttons)
+			button.update(enabled, this.selectedResource, this.tradingGoods);
+	}
+
+	selectResource(resourceCode)
+	{
+		if (Engine.HotkeyIsPressed("session.fulltradeswap"))
+			this.fullTradeSwap(resourceCode);
+
+		this.selectedResource = resourceCode;
+		this.update();
+	}
+
+	fullTradeSwap(resourceCode)
+	{
+		for (let resCode in this.tradingGoods)
+			this.tradingGoods[resCode] = 0;
+
+		this.tradingGoods[resourceCode] = 100;
+		this.setTradingGoods();
+	}
+
+	changeResourceAmount(resourceCode, amount)
+	{
+		this.tradingGoods[this.selectedResource] -= amount;
+		this.tradingGoods[resourceCode] += amount;
+
+		this.setTradingGoods();
+		this.update();
+	}
+
+	setTradingGoods()
+	{
+		Engine.PostNetworkCommand({
+			"type": "set-trading-goods",
+			"tradingGoods": this.tradingGoods
+		});
+	}
+}
+
+TradeButtonManager.IsAvailable = function()
+{
+	let resourceCount = g_ResourceData.GetTradableCodes().length;
+	return resourceCount && resourceCount <= Engine.GetGUIObjectByName("tradeResources").children.length;
+};
+
+TradeButtonManager.prototype.TradeSwapTooltip =
+	markForTranslation("Select one type of goods you want to modify by clicking on it, and then use the arrows of the other types to modify their shares. You can also press %(hotkey)s while selecting one type of goods to bring its share to 100%%.");
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/TradeDialog.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/TradeDialog.js
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/TradeDialog.js
@@ -0,0 +1,72 @@
+/**
+ * This class manages the trading good selection, idle trader information and barter panel.
+ */
+class TradeDialog
+{
+	constructor()
+	{
+		this.tradePanel = new this.TradePanel();
+		this.barterPanel = new this.BarterPanel();
+
+		this.tradeDialogPanel = Engine.GetGUIObjectByName("tradeDialogPanel");
+
+		Engine.GetGUIObjectByName("closeTrade").onPress = this.close.bind(this);
+	}
+
+	open()
+	{
+		closeOpenDialogs();
+
+		if (g_ViewedPlayer < 1)
+			return;
+
+		this.updatePanels();
+		this.tradeDialogPanel.hidden = false;
+	}
+
+	close()
+	{
+		this.tradeDialogPanel.hidden = true;
+	}
+
+	isOpen()
+	{
+		return !this.tradeDialogPanel.hidden;
+	}
+
+	toggle()
+	{
+		let open = this.isOpen();
+		closeOpenDialogs();
+
+		if (!open)
+			this.open();
+	}
+
+	update()
+	{
+		if (!this.isOpen())
+			return;
+
+		this.updatePanels();
+	}
+
+	updatePanels()
+	{
+		this.barterPanel.update();
+		this.tradePanel.update();
+	}
+
+	resize()
+	{
+		let size = this.tradeDialogPanel.size;
+
+		let width = 1/2 * Math.max(
+			TradeDialog.prototype.BarterPanel.getWidthOffset(),
+			TradeDialog.prototype.TradePanel.getWidthOffset());
+
+		size.left -= width;
+		size.right += width;
+		this.tradeDialogPanel.size = size;
+	}
+}
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/TradeDialog.xml
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/TradeDialog.xml
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/TradeDialog.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<object name="tradeDialogPanel"
+	size="50%-80 50%-270 50%+80 50%+130"
+	type="image"
+	hidden="true"
+	sprite="ModernDialog"
+>
+	<object type="text" size="50%-96 -16 50%+96 16" style="TitleText">
+		<translatableAttribute id="caption">Barter &amp; Trade Goods</translatableAttribute>
+	</object>
+
+	<object size="24 24 100%-24 33%">
+		<include file="gui/session/trade/BarterPanel.xml"/>
+	</object>
+
+	<!-- Trading goods -->
+	<object size="24 33%+32 100%-24 100%-64">
+		<include file="gui/session/trade/TradePanel.xml"/>
+	</object>
+
+	<object type="button" name="closeTrade" size="50%-64 100%-50 50%+64 100%-22" style="StoneButton">
+		<translatableAttribute id="caption">Close</translatableAttribute>
+	</object>
+</object>
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/TradeDialogBarterPanel.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/TradeDialogBarterPanel.js
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/TradeDialogBarterPanel.js
@@ -0,0 +1,45 @@
+/**
+ * This class owns the BarterButtonManager and the accessory elements for bartering.
+ */
+TradeDialog.prototype.BarterPanel = class
+{
+	constructor()
+	{
+		this.barterResources = Engine.GetGUIObjectByName("barterResources");
+
+		let isAvailable = BarterButtonManager.IsAvailable(this.barterResources);
+		if (isAvailable)
+			this.barterButtonManager = new BarterButtonManager(this.barterResources);
+
+		Engine.GetGUIObjectByName("tradeDialogPanelBarter").hidden = !isAvailable;
+
+		this.barterNoMarketsMessage = Engine.GetGUIObjectByName("barterNoMarketsMessage");
+		this.barterHelp = Engine.GetGUIObjectByName("barterHelp");
+	}
+
+	update()
+	{
+		let playerState = GetSimState().players[g_ViewedPlayer];
+		let canBarter = playerState && playerState.canBarter;
+
+		this.barterButtonManager.setViewedPlayer(g_ViewedPlayer);
+		this.barterButtonManager.update();
+		this.barterNoMarketsMessage.hidden = canBarter;
+		this.barterResources.hidden = !canBarter;
+		this.barterHelp.hidden = !canBarter;
+		this.barterHelp.tooltip = sprintf(
+			translate(this.InstructionsTooltip), {
+				"quantity": this.BarterResourceSellQuantity,
+				"hotkey": colorizeHotkey("%(hotkey)s", "session.massbarter"),
+				"multiplier": this.Multiplier
+			});
+	}
+};
+
+TradeDialog.prototype.BarterPanel.getWidthOffset = function()
+{
+	return BarterButton.getWidth(Engine.GetGUIObjectByName("barterResources")) * g_ResourceData.GetBarterableCodes().length;
+};
+
+TradeDialog.prototype.BarterPanel.prototype.InstructionsTooltip =
+	markForTranslation("Start by selecting the resource you wish to sell from the upper row. For each time the lower buttons are pressed, %(quantity)s of the upper resource will be sold for the displayed quantity of the lower. Press and hold %(hotkey)s to temporarily multiply the traded amount by %(multiplier)s.");
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/TradeDialogTradePanel.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/TradeDialogTradePanel.js
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/TradeDialogTradePanel.js
@@ -0,0 +1,24 @@
+/**
+ * This class owns the TradeButtonManager and trader information texts.
+ */
+TradeDialog.prototype.TradePanel = class
+{
+	constructor()
+	{
+		if (TradeButtonManager.IsAvailable())
+			this.tradeButtonManager = new TradeButtonManager();
+
+		this.traderStatusText = new TraderStatusText();
+	}
+
+	update()
+	{
+		for (let name in this)
+			this[name].update();
+	}
+};
+
+TradeDialog.prototype.TradePanel.getWidthOffset = function()
+{
+	return TradeButton.getWidth() * g_ResourceData.GetTradableCodes().length;
+};
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/TradePanel.xml
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/TradePanel.xml
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/TradePanel.xml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<object name="tradeDialogPanelTrade">
+
+	<object type="text" size="8 0 100% 32" style="ModernLeftLabelText">
+		<translatableAttribute id="caption">Trade</translatableAttribute>
+	</object>
+
+	<object type="image" size="0 28 100% 29" sprite="ModernGoldLine"/>
+
+	<object name="tradeGoods" size="0 38 100% 70">
+
+		<object type="text" size="0 0 60 100%" style="ModernRightLabelText">
+			<!-- Translation: Used in the Trade Dialog -->
+			<translatableAttribute id="caption">Goods:</translatableAttribute>
+		</object>
+
+		<object name="tradeResources" size="72 0 100% 100%">
+			<repeat count="8">
+				<object name="tradeResource[n]" size="0 0 58 32">
+
+					<object name="tradeResourceButton[n]" type="button" size="4 0 36 100%" style="StoneButton">
+						<object name="tradeResourceIcon[n]" type="image" ghost="true"/>
+						<object name="tradeResourceSelection[n]" type="image" sprite="stretched:session/icons/corners.png" ghost="true"/>
+						<object name="tradeResourceText[n]" type="text" style="ModernLabelText" ghost="true"/>
+					</object>
+					<object name="tradeArrowUp[n]" type="button" size="36 0 52 50%" style="iconButton">
+						<object type="image" sprite="StoneArrowUp" ghost="true"/>
+					</object>
+					<object name="tradeArrowDn[n]" type="button" size="36 50% 52 100%" style="iconButton">
+						<object type="image" sprite="StoneArrowDn" ghost="true"/>
+					</object>
+
+				</object>
+			</repeat>
+		</object>
+
+		<object name="tradeHelp" type="button" size="100%-24 4 100% 28" style="StoneButton" tooltip_style="sessionToolTipBold" enabled="false">
+			<object type="image" size="20% 15% 80% 75%" sprite="iconInfoWhite" ghost="true"/>
+		</object>
+
+	</object>
+
+	<object name="traderCountText" type="text" size="8 88 100% 100%" style="ModernLeftTopLabelText"/>
+
+</object>
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/TraderStatusText.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/TraderStatusText.js
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/TraderStatusText.js
@@ -0,0 +1,29 @@
+/**
+ * This class composes the texts summarizing the current status of trader activity.
+ */
+class TraderStatusText
+{
+	constructor()
+	{
+		this.traderCountText = Engine.GetGUIObjectByName("traderCountText");
+
+		this.components = Object.keys(this.Components.prototype).map(name =>
+			new this.Components.prototype[name]());
+	}
+
+	update()
+	{
+		let traderNumber = Engine.GuiInterfaceCall("GetTraderNumber", g_ViewedPlayer);
+		this.traderCountText.caption = this.components.reduce((caption, component) =>
+			caption += component.getText(traderNumber, this.IdleTraderTextTags) + "\n\n", "").trim();
+	}
+}
+
+TraderStatusText.prototype.IdleTraderTextTags = { "color": "orange" };
+
+/**
+ * This class stores classes that build a trader information text and can be extended in externally.
+ */
+TraderStatusText.prototype.Components = class
+{
+};
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/TraderStatusTextLand.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/TraderStatusTextLand.js
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/TraderStatusTextLand.js
@@ -0,0 +1,83 @@
+/**
+ * This class provides information on the current trade carts.
+ */
+TraderStatusText.prototype.Components.prototype.LandText = class
+{
+	getText(traderNumber, idleTags)
+	{
+		let active = traderNumber.landTrader.trading;
+		let garrisoned = traderNumber.landTrader.garrisoned;
+		let inactive = traderNumber.landTrader.total - active - garrisoned;
+
+		let message = this.IdleLandTraderText[active ? "active" : "no-active"][garrisoned ? "garrisoned" : "no-garrisoned"][inactive ? "inactive" : "no-inactive"](inactive);
+
+		let activeString = sprintf(
+			translatePlural(
+				"There is %(numberTrading)s land trader trading",
+				"There are %(numberTrading)s land traders trading",
+				active
+			),
+			{ "numberTrading": active }
+		);
+
+		let inactiveString = sprintf(
+			active || garrisoned ?
+				translatePlural(
+					"%(numberOfLandTraders)s inactive",
+					"%(numberOfLandTraders)s inactive",
+					inactive
+				) :
+				translatePlural(
+					"%(numberOfLandTraders)s land trader inactive",
+					"%(numberOfLandTraders)s land traders inactive",
+					inactive
+				),
+			{ "numberOfLandTraders": inactive }
+		);
+
+		let garrisonedString = sprintf(
+			active || inactive ?
+				translatePlural(
+					"%(numberGarrisoned)s garrisoned on a trading merchant ship",
+					"%(numberGarrisoned)s garrisoned on a trading merchant ship",
+					garrisoned
+				) :
+				translatePlural(
+					"There is %(numberGarrisoned)s land trader garrisoned on a trading merchant ship",
+					"There are %(numberGarrisoned)s land traders garrisoned on a trading merchant ship",
+					garrisoned
+				),
+			{ "numberGarrisoned": garrisoned }
+		);
+
+		return sprintf(message, {
+			"openingTradingString": activeString,
+			"openingGarrisonedString": garrisonedString,
+			"garrisonedString": garrisonedString,
+			"inactiveString": setStringTags(inactiveString, idleTags)
+		});
+	}
+};
+
+TraderStatusText.prototype.Components.prototype.LandText.prototype.IdleLandTraderText = {
+	"active": {
+		"garrisoned": {
+			"no-inactive": () => translate("%(openingTradingString)s, and %(garrisonedString)s."),
+			"inactive": () => translate("%(openingTradingString)s, %(garrisonedString)s, and %(inactiveString)s.")
+		},
+		"no-garrisoned": {
+			"no-inactive": () => translate("%(openingTradingString)s."),
+			"inactive": () => translate("%(openingTradingString)s, and %(inactiveString)s.")
+		}
+	},
+	"no-active": {
+		"garrisoned": {
+			"no-inactive": () => translate("%(openingGarrisonedString)s."),
+			"inactive": () => translate("%(openingGarrisonedString)s, and %(inactiveString)s.")
+		},
+		"no-garrisoned": {
+			"inactive": inactive => translatePlural("There is %(inactiveString)s.", "There are %(inactiveString)s.", inactive),
+			"no-inactive": () => translate("There are no land traders.")
+		}
+	}
+};
Index: ps/trunk/binaries/data/mods/public/gui/session/trade/TraderStatusTextShip.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade/TraderStatusTextShip.js
+++ ps/trunk/binaries/data/mods/public/gui/session/trade/TraderStatusTextShip.js
@@ -0,0 +1,53 @@
+/**
+ * This class provides information on the current merchant ships.
+ */
+TraderStatusText.prototype.Components.prototype.ShipText = class
+{
+	getText(traderNumber, idleTags)
+	{
+		let active = traderNumber.shipTrader.trading;
+		let inactive = traderNumber.shipTrader.total - active;
+
+		let message = this.IdleShipTraderText[active ? "active" : "no-active"][inactive ? "inactive" : "no-inactive"](inactive);
+
+		let activeString = sprintf(
+			translatePlural(
+				"There is %(numberTrading)s merchant ship trading",
+				"There are %(numberTrading)s merchant ships trading",
+				active
+			),
+			{ "numberTrading": active }
+		);
+
+		let inactiveString = sprintf(
+			active ?
+				translatePlural(
+					"%(numberOfShipTraders)s inactive",
+					"%(numberOfShipTraders)s inactive",
+					inactive
+				) :
+				translatePlural(
+					"%(numberOfShipTraders)s merchant ship inactive",
+					"%(numberOfShipTraders)s merchant ships inactive",
+					inactive
+				),
+			{ "numberOfShipTraders": inactive }
+		);
+
+		return sprintf(message, {
+			"openingTradingString": activeString,
+			"inactiveString": setStringTags(inactiveString, idleTags)
+		});
+	}
+};
+
+TraderStatusText.prototype.Components.prototype.ShipText.prototype.IdleShipTraderText = {
+	"active": {
+		"inactive": () => translate("%(openingTradingString)s, and %(inactiveString)s."),
+		"no-inactive": () => translate("%(openingTradingString)s.")
+	},
+	"no-active": {
+		"inactive": inactive => translatePlural("There is %(inactiveString)s.", "There are %(inactiveString)s.", inactive),
+		"no-inactive": () => translate("There are no merchant ships.")
+	}
+};
Index: ps/trunk/binaries/data/mods/public/gui/session/trade_window.xml
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/trade_window.xml
+++ ps/trunk/binaries/data/mods/public/gui/session/trade_window.xml
@@ -1,112 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<object name="tradeDialogPanel"
-	size="50%-80 50%-270 50%+80 50%+130"
-	type="image"
-	hidden="true"
-	sprite="ModernDialog"
->
-	<object type="text" size="50%-96 -16 50%+96 16" style="TitleText">
-		<translatableAttribute id="caption">Barter &amp; Trade Goods</translatableAttribute>
-	</object>
-
-	<!-- Barter Goods -->
-	<object size="24 24 100%-24 33%" name="tradeDialogPanelBarter">
-
-		<object type="text" size="8 0 100% 32" style="ModernLeftLabelText">
-			<translatableAttribute id="caption">Barter</translatableAttribute>
-		</object>
-		<object type="image" size="0 28 100% 29" sprite="ModernGoldLine"/>
-
-		<object size="0 38 100% 122">
-
-			<object type="text" size="0 0 60 41" style="ModernRightLabelText">
-				<translatableAttribute id="caption">Sell:</translatableAttribute>
-			</object>
-
-			<object type="text" size="0 100%-41 60 100%" style="ModernRightLabelText">
-				<translatableAttribute id="caption">Buy:</translatableAttribute>
-			</object>
-
-			<object name="barterNoMarketsMessage" type="text" size="72 0 100% 100%" style="ModernLabelText">
-				<translatableAttribute id="caption">No Markets Available</translatableAttribute>
-			</object>
-
-			<object name="barterResources" size="72 0 100% 100%">
-				<repeat count="10">
-					<object name="barterResource[n]" size="0 0 58 100%">
-
-						<!-- Sell -->
-						<object name="barterSellButton[n]" type="button" size="0 0 41 41" style="iconButton" tooltip_style="sessionToolTipBottomBold" hidden="true">
-							<object name="barterSellIcon[n]" type="image" size="3 3 100%-3 100%-3" ghost="true"/>
-							<object name="barterSellAmount[n]" type="text" size="0 0 100% 50%" style="resourceText" ghost="true"/>
-							<object name="barterSellSelection[n]" type="image" size="3 3 100%-3 100%-3" sprite="stretched:session/icons/corners.png" hidden="true" ghost="true"/>
-						</object>
-
-						<!-- Buy -->
-						<object name="barterBuyButton[n]" type="button" size="0 100%-41 41 100%" style="iconButton" tooltip_style="sessionToolTipBottomBold" hidden="true">
-							<object name="barterBuyIcon[n]" type="image" size="3 3 100%-3 100%-3" ghost="true"/>
-							<object name="barterBuyAmount[n]" type="text" size="0 0 100% 50%" style="resourceText" ghost="true"/>
-						</object>
-
-					</object>
-				</repeat>
-			</object>
-
-			<object name="barterHelp" type="button" size="100%-24 50%-12 100% 50%+12" style="StoneButton" tooltip_style="sessionToolTipBold" enabled="false">
-				<object type="image" size="20% 15% 80% 75%" sprite="iconInfoWhite" ghost="true"/>
-			</object>
-
-		</object>
-	</object>
-
-	<!-- Trading goods -->
-	<object size="24 33%+32 100%-24 100%-64" name="tradeDialogPanelTrade">
-
-		<object type="text" size="8 0 100% 32" style="ModernLeftLabelText">
-			<translatableAttribute id="caption">Trade</translatableAttribute>
-		</object>
-		<object type="image" size="0 28 100% 29" sprite="ModernGoldLine"/>
-
-		<object name="tradeGoods" size="0 38 100% 70">
-
-			<object type="text" size="0 0 60 100%" style="ModernRightLabelText">
-				<!-- Translation: Used in the Trade Dialog -->
-				<translatableAttribute id="caption">Goods:</translatableAttribute>
-			</object>
-
-			<object name="tradeResources" size="72 0 100% 100%">
-				<repeat count="8">
-					<object name="tradeResource[n]" size="0 0 58 32">
-
-						<object name="tradeResourceButton[n]" type="button" size="4 0 36 100%" style="StoneButton">
-							<object name="tradeResourceIcon[n]" type="image" ghost="true"/>
-							<object name="tradeResourceSelection[n]" type="image" sprite="stretched:session/icons/corners.png" ghost="true"/>
-							<object name="tradeResourceText[n]" type="text" style="ModernLabelText" ghost="true"/>
-						</object>
-						<object name="tradeArrowUp[n]" type="button" size="36 0 52 50%" style="iconButton">
-							<object type="image" sprite="StoneArrowUp" ghost="true"/>
-						</object>
-						<object name="tradeArrowDn[n]" type="button" size="36 50% 52 100%" style="iconButton">
-							<object type="image" sprite="StoneArrowDn" ghost="true"/>
-						</object>
-
-					</object>
-				</repeat>
-			</object>
-
-			<object name="tradeHelp" type="button" size="100%-24 4 100% 28" style="StoneButton" tooltip_style="sessionToolTipBold" enabled="false">
-				<object type="image" size="20% 15% 80% 75%" sprite="iconInfoWhite" ghost="true"/>
-			</object>
-
-		</object>
-
-		<object name="traderCountText" type="text" size="8 88 100% 100%" style="ModernLeftTopLabelText"/>
-
-	</object>
-
-	<object type="button" size="50%-64 100%-50 50%+64 100%-22" style="StoneButton">
-		<translatableAttribute id="caption">Close</translatableAttribute>
-		<action on="Press">closeTrade();</action>
-	</object>
-</object>
-
Index: ps/trunk/binaries/data/mods/public/gui/session/unit_actions.js
===================================================================
--- ps/trunk/binaries/data/mods/public/gui/session/unit_actions.js
+++ ps/trunk/binaries/data/mods/public/gui/session/unit_actions.js
@@ -1258,7 +1258,7 @@
 		},
 		"execute": function()
 		{
-			toggleTrade();
+			g_TradeDialog.toggle();
 		},
 	},