Lots of fixes

3 files changed, 81 insertions, 133 deletions

diff --git a/cards.js b/cards.js
index 160b07a..66741a6 100644
--- a/cards.js
+++ b/cards.js
@@ -1,44 +1,44 @@
 
 var cards = (function() {
-	//Constants:
-	var CARD_SIZE = {width:71,height:96};
-	var CONDENSE_COUNT = 6; //How many cards are shown as one in a deck
-	var CARD_PADDING = 18;
-	var OVERLAY_MARGIN = 2;
-	var HORIZONTAL = 'h';
-	var VERTICAL = 'v';
-	var LEFT = 'left', RIGHT = 'right', TOP = 'top', BOTTOM = 'bottom';
-	//Timing
-	var ANIMATION_SPEED = 500;
-	var CARDBACK = { x: 0, y: -4 * CARD_SIZE.height };
-	var HCARDBACK = { x: -8 * CARD_SIZE.height, y: -5 * CARD_SIZE.height};
+	//The global options
+	var opt = {
+		cardSize : {width:69,height:94, padding:18},
+		animationSpeed : 500,
+		table : 'body',
+		cardback : 'red',
+		acesHigh : false,
+		cardsUrl : 'img/cards.png',
+		blackJoker : false,
+		redJoker : false
+	};
 	var zIndexCounter = 1;
-	
-	var table = {};
 	var all = []; //All the cards created.
 	
 	function init(options) {
-		options = options || {};
-		var start = options.acesHigh ? 2 : 1;
-		var end = start + 12;
-		if (!options.table) {
-			alert('You must set the table id');
+		if (options) {
+			for (var i in options) {
+				if (opt.hasOwnProperty(i)) {
+					opt[i] = options[i];
+				}
+			}
 		}
-		table.el = $(options.table);
-		if ($(table.el).css('position') == 'static') {
-			$(table.el).css('position', 'relative');
+		var start = opt.acesHigh ? 2 : 1;
+		var end = start + 12;
+		opt.table = $(opt.table)[0];
+		if ($(opt.table).css('position') == 'static') {
+			$(opt.table).css('position', 'relative');
 		}
 		for (var i = start; i <= end; i++) {
-			all.push(new Card('h', i, table.el));
-			all.push(new Card('s', i, table.el));
-			all.push(new Card('d', i, table.el));
-			all.push(new Card('c', i, table.el));
+			all.push(new Card('h', i, opt.table));
+			all.push(new Card('s', i, opt.table));
+			all.push(new Card('d', i, opt.table));
+			all.push(new Card('c', i, opt.table));
 		}
-		if (options.blackJoker) {
-			all.push(new Card('bj', 0, table.el));
+		if (opt.blackJoker) {
+			all.push(new Card('bj', 0, opt.table));
 		}
-		if (options.redJoker) {
-			all.push(new Card('rj', 0, table.el));
+		if (opt.redJoker) {
+			all.push(new Card('rj', 0, opt.table));
 		}
 		shuffle(all);
 	}
@@ -68,13 +68,16 @@ var cards = (function() {
 			this.name = suit.toUpperCase()+rank;
 			this.faceUp = false;
 			this.el = $('<div/>').css({
-				width:'71px',
-				height:'96px',
-				"background-image":'url(img/cards.png)',
+				width:opt.cardSize.width,
+				height:opt.cardSize.height,
+				"background-image":'url('+ opt.cardsUrl + ')',
 				position:'absolute',
 				cursor:'pointer'	
 			}).addClass('card').data('card', this).appendTo($(table));
 			this.showCard();
+			$(this.el).click(function() {
+				alert($(this).data('card').name);
+			});
 			this.moveToFront();
 		},
 
@@ -83,8 +86,8 @@ var cards = (function() {
 		},
 
 		moveTo : function(x, y, speed, callback) {
-			var props = {top:y-(CARD_SIZE.height/2),left:x-(CARD_SIZE.width/2)};
-			$(this.el).animate(props, speed || ANIMATION_SPEED, callback);
+			var props = {top:y-(opt.cardSize.height/2),left:x-(opt.cardSize.width/2)};
+			$(this.el).animate(props, speed || opt.animationSpeed, callback);
 		},
 		
 		rotate : function(angle) {
@@ -96,88 +99,22 @@ var cards = (function() {
 				.css('-o-transform', 'rotate(' + angle + 'deg)');
 		},
 		
-		showCard : function(position) {
+		showCard : function() {
 			var offsets = { "c": 0, "d": 1, "h": 2, "s": 3 };
 			var xpos, ypos;
-			if (!position) {
-				position = BOTTOM;
-			}
-			var h = $(this.el).height(), w = $(this.el).width();
-			if (position == TOP || position == BOTTOM) {
-				var rank = this.rank;
-				if (rank == 1) {
-					rank = 14; //Aces low must work as well.
-				}
-				xpos = (-rank + 2) * CARD_SIZE.width;
-				ypos = -offsets[this.suit] * CARD_SIZE.height;
-				if (position == TOP && this.rank > 10) {
-					xpos -= 4*CARD_SIZE.width;
-				}
-				//Special case for jokers...
-				if (this.rank == 0) {
-					ypos = -4*CARD_SIZE.height;
-					var extra = position == TOP ? 2 : 0;
-					if (this.suit == 'rj') {
-						xpos = (-2-extra)*CARD_SIZE.width;
-					} else if (this.suit == 'bj') {
-						xpos = (-3-extra)*CARD_SIZE.width;
-					}
-				}
-				if (w>h) {
-					$(this.el).height(w).width(h);
-				}
-				this.rotate(0);
-			} else {
-				ypos = -5*CARD_SIZE.height; //base pos
-				var rank = this.rank;
-				if (rank == 1) {
-					rank = 14;
-				}
-				//Special case for jokers...
-				if (this.rank == 0) {
-					xpos = -8*CARD_SIZE.height;
-					var extra = position == RIGHT ? 0 : 2;
-					if (this.suit == 'rj') {
-						ypos -= (2+extra)*CARD_SIZE.width;
-					} else if (this.suit == 'bj') {
-						ypos -= (3+extra)*CARD_SIZE.width;
-					}
-				} else if (this.rank <= 10) {
-					ypos -= (this.rank-2)*CARD_SIZE.width;
-					xpos = -offsets[this.suit] * CARD_SIZE.height;
-				} else {
-					xpos = -4*CARD_SIZE.height -offsets[this.suit] * CARD_SIZE.height;
-					if (position == LEFT) {
-						ypos -= (this.rank-7)*CARD_SIZE.width;
-					} else { //RIGHT
-						ypos -= (this.rank-11)*CARD_SIZE.width;
-					}
-				}
-				
-				if (h>w) {
-					$(this.el).height(w).width(h);
-				}
-				this.rotate(0);
+			var rank = this.rank;
+			if (rank == 14) {
+				rank = 1; //Aces high must work as well.
 			}
+			xpos = -rank * opt.cardSize.width;
+			ypos = -offsets[this.suit] * opt.cardSize.height;
+			this.rotate(0);
 			$(this.el).css('background-position', xpos + 'px ' + ypos + 'px');
 		},
 
 		hideCard : function(position) {
-			if (!position) {
-				position = BOTTOM;
-			}
-			var h = $(this.el).height(), w = $(this.el).width();
-			if (position == TOP || position == BOTTOM) {
-				$(this.el).css('background-position', CARDBACK.x + 'px ' + CARDBACK.y + 'px');
-				if (w>h) {
-					$(this.el).height(w).width(h);
-				}
-			} else {
-				$(this.el).css('background-position', HCARDBACK.x + 'px ' + HCARDBACK.y + 'px');
-				if (h>w) {
-					$(this.el).height(w).width(h);
-				}
-			}
+			var y = opt.cardback == 'red' ? -2 : -1;
+			$(this.el).css('background-position', '0px ' + y + 'px');
 			this.rotate(0);
 		},
 		
@@ -224,8 +161,8 @@ var cards = (function() {
 
 		init : function(options) {
 			options = options || {};
-			this.x = options.x || $(table.el).width()/2;
-			this.y = options.y || $(table.el).height()/2;
+			this.x = options.x || $(opt.table).width()/2;
+			this.y = options.y || $(opt.table).height()/2;
 			this.faceUp = options.faceUp;
 		},
 
@@ -235,9 +172,7 @@ var cards = (function() {
 				var me = this;
 				$('.card').click(function() {
 					var card = $(this).data('card');
-					alert(card.container);
 					if (card.container === me) {
-						alert(1);
 						for (var i = 0; i < me._click; i++) {
 							var obj = me._click[i];
 							obj.func.call(obj.context||window, card);
@@ -250,7 +185,7 @@ var cards = (function() {
 		
 		render : function(options) {
 			options = options || {};
-			var speed = options.speed || ANIMATION_SPEED;
+			var speed = options.speed || opt.animationSpeed;
 			this.calcPosition(options);
 			for (var i=0;i<this.length;i++) {
 				var card = this[i];
@@ -305,10 +240,11 @@ var cards = (function() {
 	Deck.prototype.extend({
 		calcPosition : function(options) {
 			options = options || {};
-			var left = Math.round(this.x-CARD_SIZE.width/2, 0);
-			var top = Math.round(this.y-CARD_SIZE.height/2, 0);
+			var left = Math.round(this.x-opt.cardSize.width/2, 0);
+			var top = Math.round(this.y-opt.cardSize.height/2, 0);
+			var condenseCount = 6;
 			for (var i=0;i<this.length;i++) {
-				if (i > 0 && i % CONDENSE_COUNT == 0) {
+				if (i > 0 && i % condenseCount == 0) {
 					top-=1;
 					left-=1;
 				}
@@ -344,12 +280,12 @@ var cards = (function() {
 	Hand.prototype.extend({
 		calcPosition : function(options) {
 			options = options || {};
-			var width = CARD_SIZE.width + (this.length-1)*CARD_PADDING;
+			var width = opt.cardSize.width + (this.length-1)*opt.cardSize.padding;
 			var left = Math.round(this.x - width/2);
-			var top = Math.round(this.y-CARD_SIZE.height/2, 0);
+			var top = Math.round(this.y-opt.cardSize.height/2, 0);
 			for (var i=0;i<this.length;i++) {
 				this[i].targetTop = top;
-				this[i].targetLeft = left+i*CARD_PADDING;
+				this[i].targetLeft = left+i*opt.cardSize.padding;
 			}
 		},
 		
@@ -383,7 +319,8 @@ var cards = (function() {
 	return {
 		init : init,
 		all : all,
-		SIZE : CARD_SIZE,
+		options : opt,
+		SIZE : opt.cardSize,
 		Card : Card,
 		Container : Container,
 		Deck : Deck,
diff --git a/demo.html b/demo.html
index d939922..14d5899 100644
--- a/demo.html
+++ b/demo.html
@@ -69,20 +69,31 @@ deck.render({immediate:true});
 upperhand = new cards.Hand({faceUp:false, y:50});
 lowerhand = new cards.Hand({faceUp:true, y:350});
 //Deck has a built in method to deal to hands.
-deck.deal(5, [upperhand, lowerhand], 50)
+deck.deal(25, [upperhand, lowerhand], 50)
 		</code>
 		<code id="ex3">
-			lowerhand.click(function(card) {
-				alert(card);
-			});
-			deck.click(function(card){
-				if (card === deck.topCard()) {
-					lowerhand.addCard(deck.topCard());
-					lowerhand.render();
-				}
-			});
+//Lets setup a handler to draw cards
+deck.click(function(card){
+	if (card === deck.topCard()) {
+		//Normally you'd have some more specific logic here
+		//to determine whether we can play a card right now.
+		lowerhand.addCard(deck.topCard());
+		lowerhand.render();
+	}
+});
+alert('Try clicking the deck now');
 		</code>
-		<button onclick="execute()">Execute</button>
+		<code id="ex4">
+function computerPlay() {
+	for (var i = 0; i < upperhand.length; i++) {
+		var topcard = discardPile.topCard();
+		if (upperhand[i].rank == topCard.rank) {
+			
+		}
+	}
+}
+		</code>
+		<button onclick="execute()">Next</button>
 		<div id="card-table">
 		</div>
 	</body>
diff --git a/img/cards.png b/img/cards.png
index f4fc050..87231ff 100644
--- a/img/cards.png
+++ b/img/cards.png