// http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another/1128764#1128764

jQuery.fn.getBox = function() {
  return {
    left: $(this).offset().left,
    top: $(this).offset().top,
    width: $(this).outerWidth(),
    height: $(this).outerHeight()
  };
}

jQuery.fn.position = function(target, options) {
  var anchorOffsets = {t: 0, l: 0, c: 0.5, b: 1, r: 1};
  var defaults = {
    anchor: ['tl', 'tl'],
    animate: false,
    offset: [0, 0]
  };
  options = $.extend(defaults, options);

  var targetBox = $(target).getBox();
  var sourceBox = $(this).getBox();

  //origin is at the top-left of the target element
  var top = targetBox.top;
  var left = targetBox.left;

  //alignment with respect to source
  top -= anchorOffsets[options.anchor[0].charAt(0)] * sourceBox.height;
  left -= anchorOffsets[options.anchor[0].charAt(1)] * sourceBox.width;

  //alignment with respect to target
  top += anchorOffsets[options.anchor[1].charAt(0)] * targetBox.height;
  left += anchorOffsets[options.anchor[1].charAt(1)] * targetBox.width;

  // горизонтальный скролл
  if (left + sourceBox.width > $('body').width()) {
    left = $('body').width() - sourceBox.width - 20;
    options.offset[1] = 0;
  };
  
  //add offset to final coordinates
  top += options.offset[0];
  left += options.offset[1];
  
  if ($(this).is(':visible')) {
    $(this).css('top', top + 'px').animate({
      left: left + 'px'
    }, 'fast');
  } else {
    $(this).css({
      top: top + 'px',
      left: left + 'px'
    }).fadeIn('fast', function() {
      if ($.browser.msie) {
        this.style.removeAttribute('filter');
      };
    })
  }

}

$(document).ready(function() {
  
  $('.popup .close').click(function() {
    $(this).parents('.popup:first').fadeOut('fast');
    $(window).unbind('resize');
    if ($.browser.msie && $.browser.version.substr(0,1) == 6) $('select').css('visibility', 'visible')
  });
  
  $('a[rel=popup]').click(function() {
    var link = $(this);
    var popup = $(link.attr('href'));
    var timer = null;

    var settings = {
      anchor: ['tl', 'tr'],
      offset: [-10, 20]
    }
    if (popup.is('.tooltip')) {
      settings.anchor = ['tr', 'br'];
      settings.offset = [10, 10]
    };
    if(link.is('.fav')){
      settings.anchor = ['tr', 'tr'];
      settings.offset = [20, 400];
    }
    if (!popup.is(':visible')) {
      if ($.browser.msie && $.browser.version.substr(0,1) == 6) $('select').css('visibility', 'hidden')
      popup.position(link, settings);
      $(window).bind('resize', function() {
        if (timer) clearTimeout(timer);
        timer = setTimeout(function() {
          popup.position(link, settings);
        }, 100);
      });
      if (popup.is('.tooltip')) {
        $(document).click(function(event) {
          if ($(event.target).parents('.tooltip').length == 0) {
            $('.popup.tooltip').fadeOut('fast');
            $(window).unbind('resize');
            if ($.browser.msie && $.browser.version.substr(0,1) == 6) $('select').css('visibility', 'visible');
          };
        });
      };
    };
    return false;
  });
  	$('body').click(function() {
  		if($('.popup').is(':visible')){
			$('.popup').fadeOut('fast');
	    	$(window).unbind('resize');
	    	if ($.browser.msie && $.browser.version.substr(0,1) == 6) $('select').css('visibility', 'visible')
			//$('body').unbind('click');	    	
  		}
	});

});