<!DOCTYPE html>
<html>

  <head>
     <script data-require="jquery@2.1.3" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
   
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row" >
        <div class="col-md-4">
          How many players (2-8):
        </div>
        <div class="col-md-1">
          <input class="form-control" type="number" min="2" max="8" id="numPlayers"/>
        </div>
        <div class="col-md-1">
          <button class="btn btn-primary" onclick="deal()">Deal</button>
        </div>
      </div>
      <div id="players" class="container">
        
        
      </div>
      <div id="table" class="container">
        <div class="row" >
          <div class="col-md-2">
            <h3>Table</h3>
          </div>
        </div>
        
        <div class="row" id="tableCards" >
         
        </div>
        
      </div>
      <!--
      <div class="row " style="margin-left:20px;">
				ME:
				        <div id="me" class="hand"></div>
      </div>
      <div class="row" style="margin-left:20px;">
        <div id="totalme"></div>
      </div>
      <div class="row " style="margin-left:20px;">
				Dealer:
				        <div id="dealer" class="hand"></div>
      </div>
      <div class="row" style="margin-left:20px;">
        <div id="totaldealer"></div>
      </div>
      <h1 id="result"></h1>-->
    </div>
  </body>

</html>
// Code goes here

var Card = function(v, t) {
  this.value = v;
  this.suit = t;
 
}
var Deck = function() {
  var Deck = this;
  var values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
  var suits = ['&spades;', '&diams;', '&hearts;', '&clubs;'];

  Deck.cards = [];
  for (var i = 0; i < values.length; i++) {
    for (var j = 0; j < suits.length; j++) {
      this.cards.push(new Card(values[i], suits[j]))

    }

  }
  /* Shuffle Algorithm Taken from online */
  Deck.shuffle = function() {
    var o = Deck.cards;
    for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    Deck.cards = o;

  }
  Deck.draw = function(num_cards) {
    if (num_cards > Deck.cards.length) {
      return Deck.cards.splice(0, this.cards.length);
    } else {
      return Deck.cards.splice(0, num_cards);
    }

  }
  Deck.shuffle();
  Deck.shuffle();
  Deck.shuffle();
  Deck.shuffle();
  Deck.shuffle();

}
var deck = new Deck();


function deal(){
  var players = parseInt($('#numPlayers').val());
  var hands = [];
  if(players && (players >= 2 && players <= 8)){
    
    var deck = new Deck();
    for(var i = 0;i < players; i++){
      hands[i] = deck.draw(2);
    }
    var burns= [];
    var table = [];
    burns = burns.concat(deck.draw(1));
    table = table.concat(deck.draw(3));
    burns = burns.concat(deck.draw(1));
    table = table.concat(deck.draw(1));
    burns = burns.concat(deck.draw(1));
    table = table.concat(deck.draw(1));
    render(hands,table,burns);
  }else{
    alert('Enter a valid number of players!');
  }
  
  
}

function render(hands,table,burns){
  var playerarea = $('#players');
  console.log(hands);
  console.log(table);
  playerarea.empty();
  var row1 = '<div class="row" id="row1"></div>';
  var row2 = '<div class="row" id="row2"></div>';
  /* separate players into 2 rows to look pretty*/
    playerarea.append(row1);
   if(hands.length >= 4){
    playerarea.append(row2);
  }
  for(var i = 0;i < hands.length; i++){
    if(i < 4){
      buildPlayer($('#row1'),hands[i],i);
    }else{
      buildPlayer($('#row2'),hands[i],i)
    }

    
  }


  buildTable(table);
  
}
function buildPlayer(row,hand,player){
  
  var playerText = player===0?'Me':'AI '+player;
  row.append('<div class="col-md-3  col-sm-3 container" ><div class="row col-md-12 col-sm-12">'+playerText+':</div><div class="row col-md-12 col-sm-12"  id="player'+player+'"></div></div>')
  var playerHand = $('#player'+player);

  for(var i =0;i<hand.length;i++){
    buildCard(hand[i],playerHand)
  }
}

function buildCard(card,playerHand){
   if (card.suit == '&hearts;' || card.suit == '&diams;') {

      var elem = $('<div class="card col-md-6 col-sm-6"><span style="color:red;">' + card.value + card.suit + '<span></div>');
    } else {
      var elem = $('<div class="card col-md-6  col-sm-6"><span>' + card.value + card.suit + '<span></div>');
    }
    playerHand.append(elem);
  
}
function buildTable(table){
  var tableArea = $('#tableCards');
  tableArea.empty();
  for(var i =0; i < table.length;i++){
    buildCard(table[i],tableArea);
    
  }

  
}





.card{
    border: 2px solid black;
    height: 100px;
    width:65px;
    background-color:white;
    margin-left:5px;
    float: left;
    text-align:center;

    display:table;

    
}
.card span{
 display: table-cell;   
 vertical-align:middle;
}

.hand{
    

}

#container{
  margin-left:20px;
}
#table{
  margin-top:20px;
  border:2px solid black;
  height:200px;
  background-color:Peru;
}