gistfile1.txt

$(function () {

  // Get the coordinates of each item as an array of arrays

  var piecesArray = [
    // piece 1
    {
      location: [20, 50],
      title: "Mimco Dress",
      description: "Drapey Mimco grey dress"
    },
    {
      location: [400, 100],
      title: "Burberry Tote",
      description: "Leather bag from Milan"
    }
  ];

  var piecesCount = piecesArray.length;

  // Place a marker for each piece

  for(i = 0; i < piecesCount; i+= 1) {
    // Build the string for an individual piece marker
    var currentPiece = i + 1;
    var currentPieceX = piecesArray[i].location[0] + "px";
    var currentPieceY = piecesArray[i].location[1] + "px";

    var pieceMarkup = "<div class=\"piece\" id=\"p" + currentPiece + "\" style=\"left: " + currentPieceX + "; top: " + currentPieceY + ";\"></div>";

    // Print the previously built string
    $("#landing_LHS").append(pieceMarkup);
  }

  // Expand the dot on rollover 150x60
  // [TODO: make sure it expands the correct way depending on location]

  // on mouseover
  $(".piece").mouseover(function() {
    $(this).addClass("toFront");
    $(this).animate({
        width: 150,
        height: 60,
        opacity: 0.8
      }, {
        queue: false,
        duration: 300
      }
    );
  });

  // on mouseout
  $(".piece").mouseout(function() {
    $(this).animate({
        width: 5,
        height: 5,
        opacity: 1
      }, {
        queue: false,
        duration: 300
      }, function() { $(this).removeClass("toFront"); }
    );
  });
});