$(document).ready(function() {
var timeArray = new Array(3,4,5,6,7,8,9,10);
var shortestTime = timeArray[7];
var fastestPony = {};
var index;

var pony = {
    name: "pony",
    raceTime: -1,
    selected: ""
};

//change the color of the pony when the user clicks on it
$('.pony').bind('click', function() {
    $('.pony').removeClass('selectedPony');
    $(this).addClass('selectedPony');

    //get the pony that the user selected
    pony.selected = $(this);
});

$('#startButton').click(function() {
    if (pony.selected == "") {
        alert("Please click the pony you think will win the race.");
    }
    else {
        for (i = 1; i <= 8; i++) {
           //get a random number from the timeArray
            index = Math.floor(Math.random() * timeArray.length);
            pony.raceTime = timeArray[index];

            //pull the random race time number out of the array
            //so it can't be assigned to another horse
            timeArray.splice(index, 1);

            //get the fastest pony
            if (pony.raceTime < shortestTime) {
                shortestTime = pony.raceTime;
                fastestPony = $('#pony' + i);
            }

            //award the winner after the ponies have reached the finish line
            if (i == 8) {
                fastestPony.addClass('winner').append(' - Winner!');
            }

            //send the horses on their way to race!
            $('#pony' + i).animate({left: '320px'}, pony.raceTime * 1000);
        }
    }
});

//reset the ponies back to the starting line by reloading the page
$('#resetButton').click(function() {
    document.location.reload(true);
});
});

$(function() { // just pass in a function; it's the same as using $(document).ready()
  var ponies = $(".pony"), // Again: I never thought I'd write "ponies" in code
      raceButton = $("#raceButton"); // use a single button for race and reset

  ponies.click(function (event) {
    ponies.removeClass('selected');
    $(this).addClass('selected');
    // no need to store the selection; we can always find it, now that it's got a "selected" class
  });

  // use one button for both start and reset
  raceButton.click(function() {
    // If we have a winner, the race is pretty much over
    // If we have no winner, and no elements currently animating, we're ready to race
    // Otherwise we're racing; don't do anything

    if( ponies.filter(".winner").length !== 0 ) {
      reset();
    } else if( ponies.filter(".winner, :animated").length === 0 ) {
      race();
    }
  });

  function race() {
    // check for selection
    if( ponies.filter(".selected").length === 0 ) {
      alert("Please click the pony you think will win the race.");
      return; // return here instead of having a big else-block
    }

    var times  = [], i, l;

    // disable the race button
    raceButton.prop("disabled", true);

    // build time array; don't hardcode it
    for( i = 0, l = ponies.length ; i < l ; i++ ) {
      times.push(i);
    }

    // Use .each() instead of relying on all the divs having numbered IDs.
    ponies.each(function () {
      var index = Math.floor(Math.random() * times.length),
          time  = times[index],
          pony  = $(this);

      times.splice(index, 1);

      // Use the onComplete callback to identify the winner
      pony.animate({left: '320px'}, {
        duration: (time + 3) * 1000, // only here do we set the minimum time by adding 3
        complete: function () {
          // If this was the fastest one
          if( time === 0 ) {
            pony
              .addClass("winner")
              .append("<span>Winner!</span>"); // use a span or something, so it's easier to remove later

            // alert the gambler and enable the reset button
            if( pony.hasClass("selected") ) {
              alert("You win tons of money or something");
            } else {
              alert("You lost. Boo-hoo");
            }
            raceButton.prop("disabled", false).val("Reset");
          }
        }
      });
    });
  }

  // just reset everything yourself; no need to reload
  function reset() {
    ponies
      .stop()                  // stop any running animations
      .removeClass("selected") // clear selection
      .removeClass("winner")   // clear winner
      .css({ left: '0px' })    // move 'em back
      .children("span").remove(); // remove the label
    raceButton.val("Race!");
  }
});

function raceInProgress() {
  return ponies.filter(":animated").length > 0;
}

function raceDecided() {
  return ponies.filter(".winner").length > 0
}

function raceNotStarted() {
  return !raceInProgress() && !raceDecided();
}