How can I keep my functions in the proper 'this' scope when using a chain of lambda functions?

How can I keep my functions in the proper 'this' scope when using a chain of lambda functions?

This issue is no longer relevant to what I'm trying to acccomplish
on line 102 I call "this.contentAppear" under the scope of a lambda function triggered by the end of an animation. If I call it outside of the animation lambda function it works fine. If I use a setTimeout trigger of the same time it takes to complete the function it still screws over. How can I trigger the .contentAppear() function with the proper scope WITHOUT passing a parameter?


Here is my test link:  http://k8r.us/test11/test.html
Here is my code
  1. //REQUIRES: jQuery

  2. function k8rModal(DOMnamespace){
  3. var _ = this._ = DOMnamespace+"_"; // for DOM namespacing
  4. var slate,stage,closeButton,contentContainer;
  5. var k8rModalInstance = this;

  6. this.tightWrap=01;
  7. this.visible = 0;
  8. this.content = '';

  9. $('body').prepend('<div id="'+_+'stage" class="'+_+'modalSet"></div>');
  10. this.stage = stage = $('#'+_+'stage');
  11. stage.css({
  12. 'display':'none',
  13. 'width':'100%',
  14. 'height':'100%',
  15. 'position': 'fixed',
  16. 'left':'0px',
  17. 'top':'0px',
  18. 'opacity': '.6',
  19. 'background-color':'#333'
  20. });
  21. stage.click(function(){
  22. k8rModalInstance.disappear();
  23. });


  24. $('body').append('<div id="'+_+'slate" class="'+_+'modalSet"></div>');
  25. this.slate = slate = $('#'+_+'slate');
  26. slate.css({
  27. 'display':'none',
  28. 'width':'640px',
  29. 'height':'480px',
  30. 'position': 'fixed',
  31. 'left':'0px',
  32. 'top':'0px',
  33. 'background-color':'#eee'
  34. });

  35. slate.append('<div id="'+_+'contentContainer"></div>');
  36. this.contentContainer = contentContainer = $('#'+_+'contentContainer');
  37. contentContainer.css({
  38. 'display':'none',
  39. 'width':'100%',
  40. 'height':'100%',
  41. 'padding': '0px',
  42. 'margin':'0px',
  43. });

  44. $('body').append('<div id="'+_+'closeButton" class="'+_+'modalSet">Close</div>');
  45. this.closeButton = closeButton = $('#'+_+'closeButton');
  46. closeButton.css({
  47. 'display':'none',
  48. 'width':'60px',
  49. 'height':'24px',
  50. 'position': 'fixed',
  51. 'left':'0px',
  52. 'top':'0px',
  53. 'background-color':'#eee'
  54. });
  55. closeButton.click(function(){
  56. k8rModalInstance.disappear();
  57. });

  58. this.modalSet = $('.'+_+'modalSet');

  59. $('.'+_+'caller').on('click',function(){
  60. k8rModalInstance.setContent( $(this).attr(_+'src') );
  61. k8rModalInstance.appear();
  62. });
  63. this.centerSlate();

  64. $(window).resize(function(){
  65.  k8rModalInstance.adjustToScreenResize();
  66. });
  67. }

  68. k8rModal.prototype.setContent = function(src){
  69. this.content = document.getElementById(src);
  70. this.contentContainer.html(this.content.innerHTML);
  71. }

  72. k8rModal.prototype.updateTightWrap = function(){
  73. if (this.tightWrap){
  74. var W, H, _this = this;
  75. W = $(this.content).first().innerWidth();
  76. H = $(this.content).first().innerHeight();
  77. this.contentContainer.css({
  78. 'width':W,
  79. 'height':H,
  80. 'display':'none',
  81. });
  82. if (this.slate.css('width')!=W || this.slate.css('height')!=H ){
  83. this.slate.animate(
  84. {width: W,height: H},
  85. 591,
  86. 'linear',
  87. _this.contentAppear
  88. );
  89. }else{
  90. this.contentAppear();
  91. }
  92. }
  93. }

  94. k8rModal.prototype.appear = function(){
  95. var _this=this;
  96. if (this.tightWrap){
  97. this.modalSet.fadeIn('600',function(){
  98. _this.updateTightWrap();
  99. });
  100. }else{
  101. this.modalSet.fadeIn('600');
  102. this.contentAppear();
  103. }
  104. }

  105. k8rModal.prototype.contentAppear = function(){
  106. this.contentContainer.fadeIn('505',function(){
  107. this.visible = 1;
  108. });
  109. }

  110. k8rModal.prototype.disappear = function(){
  111. this.visible = 0;
  112. this.modalSet.fadeOut('222');
  113. }

  114. k8rModal.prototype.centerSlate = function(){
  115. var wWidth, wHeight, slate = $(this.slate), closeButton = $(this.closeButton);
  116. wWidth = $(window).width();
  117. wHeight = $(window).height();

  118. slate.css({
  119. top: ( wHeight/2 - ( slate.height()/2 ) )+"px",
  120. left: ( wWidth/2 - ( slate.width()/2 ) )+"px"
  121. });

  122. closeButton.css({
  123. top: ( wHeight/2 + ( slate.height()/2 )*1.05 )+"px",
  124. left: ( wWidth/2 - ( closeButton.width()/2 ) )+"px"
  125. });
  126. }

  127. k8rModal.prototype.adjustToScreenResize = function(){
  128. this.centerSlate();
  129. }

--- Keysle