var popupDiv = '#divMap';
//var appPath = '/';

var dontHide = new Array();

// This is for IE because IE doesn't support indexOf
if (!Array.indexOf) {
  Array.prototype.indexOf = function(obj) {
    for (var i = 0; i < this.length; i++) {
      if (this[i] == obj) {
        return i;
      }
    }
    return -1;
  }
}

$(document).ready(function() {

  $('#lnkWorldMap').click(function(e) {

    e.preventDefault(); //Cancel the link behavior

    //alert("doc h=" + $(document).height() + "\ndoc w=" + $(document).width() + "\nwin h=" + $(window).height() + "\nwin w=" + $(window).width());

    //Set height and width to mask to fill up the whole screen
    $('#mask').css({ 'width': $(document).width(), 'height': $(document).height() });

    //Show the mask
    $('#mask').fadeTo(0, 0.05);
    $('#mask').show();
    $('#mask').fadeTo(600, 0.7);

    if ($(popupDiv).length > 0) {
      //$(popupDiv).css('display', 'block');
      $(popupDiv).slideDown(1000);
    }
    else {
      // Get the popup div content
      $.get(appPath + "functions/worldmap.aspx", LoadPopupDiv);
    }
  });

});

function LoadPopupDiv(data) {

  //var re = new RegExp("<div id=\"divMap\">[^]+<!--divMap-->");
  var re = new RegExp("<div id=\"divMap\">[^§]+<!--divMap-->");
  var m = re.exec(data);

  if (m == null) {
    alert("Error. Unexpected data returned.");
  }

  $('body').append(m[0]);
  $(popupDiv).hide(); // Hide it first until it is positioned right
  
  //Get the window height and width
  var winH = $(window).height();
  var winW = $(window).width();

  //Set the popup window to center
  var divTop = winH / 2 - $(popupDiv).outerHeight() / 2;
  $(popupDiv).css('top', divTop + 'px');
  var divLeft = winW / 2 - $(popupDiv).outerWidth() / 2;
  $(popupDiv).css('left', divLeft + 'px');

  $(popupDiv).slideDown('slow');

  // Fix the dots positions after map is loaded
  var img = new Image();
  $(img).load(MoveDotsRelativeToMap);
  $(img).error(MoveDotsRelativeToMap); // Force it even if error occurred
  $(img).attr('src', appPath + 'images/world_map.png');
  //alert($(img).attr('src'));

  // Hovering over a dot should show its baloon
  SetDotHover();

  // Set the mask clickable to hide
  $('#mask').click(HideMap);
}

// Move the dots and their baloons relative to the map position, and hide baloons
function MoveDotsRelativeToMap() {

  var map = $('#worldmap')[0];

  $(".mapDot").each(function() {
    //alert("map.offsetLeft = " + map.offsetLeft + "\n $(this).position().left = " + $(this).position().left);
    var x = $(this).position().left + map.offsetLeft;
    var y = $(this).position().top + map.offsetTop;
    $(this).css("left", x + "px");
    $(this).css("top", y + "px");
  });

  $(".mapBaloon").each(function() {
    var x = $(this).position().left + map.offsetLeft;
    var y = $(this).position().top + map.offsetTop;
    $(this).css("left", x + "px");
    $(this).css("top", y + "px");
    $(this).hide(); // Hide all baloons
  });

  $(".mapBaloon").hover(function() {
    var baloonId = '#' + $(this).attr("id");
    dontHide.push(baloonId);
    $(this).show();
  }, function() {
    var baloonId = '#' + $(this).attr("id");
    if (dontHide.indexOf(baloonId) != -1)
      dontHide.splice(dontHide.indexOf(baloonId), 1);
    setTimeout("HideBaloon('" + baloonId + "')", 400);
  });
}

function SetDotHover() {
  $('.mapDot').hover(function() {
    var baloonId = '#mapbaloon' + ExtractInt($(this).attr('id'));
    dontHide.push(baloonId);
    $(baloonId).show(300);
  }, function() {
    var baloonId = '#mapbaloon' + ExtractInt($(this).attr('id'));
    if(dontHide.indexOf(baloonId) != -1)
      dontHide.splice(dontHide.indexOf(baloonId), 1);
    setTimeout("HideBaloon('" + baloonId + "')", 400);
  });
}

function HideBaloon(baloonId) {
  //alert("dontHide = " + dontHide + "\nbaloonId = " + baloonId + "\nindex = " + dontHide.indexOf(baloonId));
  if (dontHide.indexOf(baloonId) == -1)
    $(baloonId).hide(300);
}

function ExtractInt(str) {
  var num = str.match(/\d+/);
  return num;
}

function HideMap() {
  $(popupDiv).slideUp(400);
  setTimeout("$('#mask').fadeOut(400)", 100);
}