// Static variables //
var CARD_WIDTH = 80; // Small card size
var CARD_HEIGHT = 111;

var MIN_CARD_STEP = 15;  // Minimum amount of pixel space between cards (15px would be about 35 cards at standard width)
var MAX_CARD_STEP = 87;  // Maximum amount of pixel space between cards (87px would be about 7 cards at standard width)

var HOVER_CARD_GAP = 10;  // X&Y gap between the mouse and hover card div

//////////////////////////
// Hover card functions //
//////////////////////////

//First we need to load the dom

// Position (X/Y/W/H) objects definition //
function PosObj($elem) {
  // mouse element
  if ($elem.pageX || $elem.pageY) {
    this.W = 0;
    this.H = 0;
    this.X = $elem.pageX;
    this.Y = $elem.pageY;
  }
  // window
  else if ($.isWindow($elem)) {
    $elem = $($elem);
    this.W = $elem.width();
    this.H = $elem.height();
    this.X = $elem.scrollLeft();
    this.Y = $elem.scrollTop();
  }
  // another PosObj
  else if (typeof ($elem.W) == 'number' && typeof ($elem.X) == 'number') {
    this.W = $elem.W;
    this.H = $elem.H;
    this.X = $elem.X;
    this.Y = $elem.Y;
  }
  // other, assume a DOM object
  else {
    this.W = $elem.outerWidth(true);
    this.H = $elem.outerHeight(true);
    this.X = $elem.offset().left;
    this.Y = $elem.offset().top;
  }

  // element edge/corners
  this.StartX = this.X;           // left
  this.StartY = this.Y;           // top
  this.EndX = this.X + this.W;  // right
  this.EndY = this.Y + this.H;  // bottom

  // midpoints
  this.MidW = Math.round(this.W / 2);
  this.MidH = Math.round(this.H / 2);
  this.MidX = this.X + this.MidW;
  this.MidY = this.Y + this.MidH;
}

$(document).ready(InitialSetup);

function InitialSetup() {

  //Add a div
  var $card_hover = $('<div id="card_hover"/></div>');
  $("body").append($card_hover);

  //Get all the anchors linking to cards on either wow/tcg/mtg elements
  $('a[href*="g=mtg"]').each(function (i) {
    $(this).mouseenter({n: $(this).text() }, CreateHoverCard).mouseleave(HideHoverCard).mousemove(MoveHoverCard);
  });
}

var noHoverCard = 0;

function CreateHoverCard(e) {
  //var card = CardSet[e.data.set][e.data.index];

  var $div = $('DIV#card_hover');
  var edition = e.data.e;
  var image = "http://www.tcgvault.com/tools/ImageHandler.ashx?CardName=" + e.data.n + "&Game=MTG";
  var name = e.data.n;

  if (noHoverCard) {
    $div.hide();
    return;
  }

  // Create img and fill content
  var $img = $('<img>').attr({
    src: image,
    alt: name,
    'class': 'card'
  });
  $div.empty().append($img);

  // Try to keep the mouse out of the div (without blinking in IE)
  $div.mouseenter(MoveHoverCard).mouseleave(HideHoverCard).mousemove(MoveHoverCard);
  $div.find('IMG').mouseenter(HideHoverCard);  // mouse pointer is too far in, hide it
}

function MoveHoverCard(e) {
  var $div = $('DIV#card_hover');

  if (noHoverCard) {
    $div.hide();
    return;
  }

  // Calculate right position (based on mouse cursor and boundaries)
  var wp = new PosObj(window);
  var dp = new PosObj($div);
  var mp = new PosObj(e);
  var g = HOVER_CARD_GAP;

  // (Even though the code would be "reversed" on only one side, starting in the
  // top-right corner works better as people scan cards left to right, and card
  // placement on the left does not block the right side.)
  dp.X = mp.X - dp.W - g;  // right corner of card div
  dp.Y = mp.Y + g;         // top   corner of card div
  dp = new PosObj(dp);

  // check the bottom/left window boundaries
  // (NOTE: X/Y is always top-left corner of div)
  if (dp.StartX < wp.StartX) dp.X = mp.X + g;          // left   corner of card div
  if (dp.EndY > wp.EndY) dp.Y = mp.Y - dp.H - g;   // bottom corner of card div
  dp = new PosObj(dp);
  // check the top/right window boundaries (make sure we didn't just clip the card in the other direction)
  if (dp.EndX > wp.EndX) dp.X = wp.EndX - dp.W;  // top/bottom edge of card div
  if (dp.StartY < wp.StartY) dp.Y = wp.StartY;       // left/right edge of card div

  // Position on mouse cursor
  $div.css('left', dp.X).css('top', dp.Y);
  $div.show().fadeTo(0, .8);  // show with alpha transparency
}

function HideHoverCard() {
 $('DIV#card_hover').hide();
}
