title: calling multiple functions in javascript without overwriting the original - polymorphism problem?
body: <p>I am using two different plugins requiring the onyoutubeplayerready function:</p>
  
  <pre><code>http://code.google.com/p/jquery-tubular/
  http://badsyntax.github.com/jquery-youtube-player/examples/player.html
  </code></pre>
  
  <p>Both of them declare and initialize the onyoutubeplayerready function. Hence, one of the plugins ends up not working. </p>
  
  <p>I have these three in head tag:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.youtube.player.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Both of the scripts are defined right before the ending body tag:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
  
  (function($){
      var config =  {
  
          repeatPlaylist: 1,
  
          // Custom playlist
          playlist: {
              title: 'Random videos',
              videos: [
                  { id: 'CJCTiC1po8E', title: 'VCore Intro'},
                  { id: 'ydCF922o944', title: 'VCore Admin' }, 
                  { id: 'yC-_eqPqaoY', title: 'VCore Admin System' },
                  { id: '7qkE30S2Btk', title: 'VCore Site' }
              ]
          }
  
          /*
          // Youtube playlist
          playlist: {
              playlist: '71B8152559FA2805'
          }
  
          // Latest user videos
          playlist: {
              user: 'TheSensless'
          }
          */
      };
  
      $('.youtube-player').player(config)
  
  })(this.jQuery);
  //]]&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  (function($){
  function initializeTub(){
      $('body').tubular('_VKW_M_uVjw','wrapper');
  
  }
  $('a').click(function(){initializeTub()}); //clicking a random link just to test it
  })(jQuery)
  &lt;/script&gt;
  </code></pre>
  
  <p>@epascarello</p>
  
  <p>I tried your solution. The one that comes first has this:</p>
  
  <pre><code>            window.onYouTubePlayerReady = function(id){ 
                  console.log('2');
  
  
                  var player = document.getElementById(id);
  
                  player.addEventListener("onStateChange", 'onytplayerStateChange' + id);
  
                  player.addEventListener('onError', 'onytplayerStateChange' + id);
  
                  window['onytplayerStateChange' + id](9);
              };
  </code></pre>
  
  <p>The one that comes second has this:</p>
  
  <pre><code>var _onYouTubePlayerReady = onYouTubePlayerReady;
  function onYouTubePlayerReady(playerId) {
  console.log('1');
  ytplayer = document.getElementById("myytplayer");
   ytplayer.setPlaybackQuality('medium');
   ytplayer.mute();
  
  _onYouTubePlayerReady( playerId );
  </code></pre>
  
  <p>}</p>
  
  <p>The console outputs this:</p>
  
  <pre><code>2
  2
  </code></pre>
  
  <p>Hence, the one that is declared first is called both times. And the second one never is called because console never outputs 1. </p>
  
  <p>But according to the book JavaScript Programmer's Reference:</p>
  
  <pre><code>In fact, if you attempt to overload a function, the most recent definition will be used. This is because of the mutable nature of objects such as functions.
  </code></pre>
  
  <p>So if that's the case:</p>
  
  <pre><code>    &lt;script type="text/javascript" src="js/jquery.youtube.player.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Since the one function defined in tubular comes second, why isn't that the one that is pointed to when the function is eventually called? Notice the tubular script comes second.</p>
  
  <p>Also, Fred's solution didn't work either.</p>
  
  <p>I tried this and it didn't work either:</p>
  
  <pre><code>var _onYouTubePlayerReady = onYouTubePlayerReady;
  function _onYouTubePlayerReady(playerId) {
  console.log('1');
  ytplayer = document.getElementById("myytplayer");
     ytplayer.setPlaybackQuality('medium');
     ytplayer.mute();
  
  }
  _onYouTubePlayerReady( playerId );
  </code></pre>
  
  <p>By the way, I have no clue when this is called, apparently magically a call to google at some point, but definitely not in any of scripts that came with plugin. </p>
  
  <p>Thanks for response.</p>