From f4651e362bd81a7a5fc4441c1e7a0d46a11c8314 Mon Sep 17 00:00:00 2001
From: AKFish <akfish@gmail.com>
Date: Fri, 11 Jul 2014 07:27:58 +0800
Subject: [PATCH] Use different style to indicate affordable item's button

---
 css/main.css     |  4 ++++
 script/Button.js | 21 ++++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/css/main.css b/css/main.css
index d385f8dfe..c9dbdcc06 100644
--- a/css/main.css
+++ b/css/main.css
@@ -193,6 +193,10 @@ div.button:hover {
 	text-decoration: underline;
 }
 
+div.button.affordable {
+	border-color: green;
+}
+
 div.button.disabled, div.button.disabled:hover {
 	cursor: default;
 	border-color: grey;
diff --git a/script/Button.js b/script/Button.js
index 68448df1f..724dd02c3 100644
--- a/script/Button.js
+++ b/script/Button.js
@@ -38,13 +38,32 @@ var Button = {
 		if(options.cost) {
 			var ttPos = options.ttPos ? options.ttPos : "bottom right";
 			var costTooltip = $('<div>').addClass('tooltip ' + ttPos);
+			var affordable = true;
 			for(var k in options.cost) {
+				var have = $SM.get("stores." + _(k));
+				var need = options.cost[k];
 				$("<div>").addClass('row_key').text(_(k)).appendTo(costTooltip);
-				$("<div>").addClass('row_val').text(options.cost[k]).appendTo(costTooltip);
+				$("<div>").addClass('row_val').text(need).appendTo(costTooltip);
+				if (have < need) affordable = false;
 			}
+			el.toggleClass('affordable', affordable);
 			if(costTooltip.children().length > 0) {
 				costTooltip.appendTo(el);
 			}
+			// Subscribe to stateUpdateEvent
+			$.Dispatch('stateUpdate').subscribe(function (e) {
+				if (e.category != 'stores') return;
+				var affordable = true;
+				for (var k in options.cost) {
+					var need = options.cost[k];
+					var have = $SM.get("stores." + _(k));
+					if (need > have) {
+						affordable = false;
+						break;
+					}
+				}
+				el.toggleClass('affordable', affordable);
+			});
 		}
 		
 		if(options.width) {