Initial version of the script for asynchronous ad-fetching from OpenX

openx.js replaces the OpenX-script spcjs.php. It is modified in such a
way, that it can be called at the bottom of the HTML-page, just before the
closing </body>-tag, so that the ads are loaded, when the rendering of the
page is already completed and, thus, do not block the rendering of the
page.

Implementation-details:
 * openx.js searches via jQery for DOM-elements, that are marked with the
   CSS-class "oa". It fetches banners for all found elements (which banners
   are to fetch is encoded in a second CSS-class).
 * openx.js takes seperate steps to
   1. fetch the banners,
   2. render them in the page and
   3. show them.
   This is necessary, because most of the second-party ad-scripts work
   with document.write(), so that the created banners first become
   accessable via the DOM, when the script returns.
 * Banners are rendert first into a div-block marked with "display:none".
   They are moved to their final destination afterwards. This is necessary,
   because "document.write()" always writes to the actual position of the
   HTML-document, that is the position, where the browser found the
   openx.js-script he is just executing. Hence, all ad-scripts that call
   "document.write()" itself, would render their banner at the bottom of
   the page, albeit the script itself was appended to the right DOM
   -element. The Banners are renderd in a hidden div-block, because it has
   shown, that some ad-scripts produce errors, when they are moved, so that
   the ad was visible in two places afterwards: the div-block at the end of
   the page and at the intended position.

TODO:
 * Not tested with IE yet!

diff --git a/openx.js b/openx.js
new file mode 100644 (file)
index 0000000..68cc431
--- /dev/null
+++ b/openx.js
@@ -0,0 +1,71 @@
+/** Optimized methods for fetching ad-banners via OpenX */
+
+/** see: http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/ */
+
+(function( openx, $, undefined ) {
+
+  var count = 0;
+  var slots = {};
+  var ads = new Array();
+
+
+  openx.fetch_ads = function(server, zones) {
+
+    var spc;
+
+    spc  = "<script type='text/javascript' src='";
+    spc += location.protocol == 'https:' ? 'https://' + server + ':8443':'http://' + server;
+    spc += "/www/delivery/spc.php?zones=";
+
+    /** Only fetch banners, that are really included in this page */
+    $('.oa').each(function() {
+      var node = $(this);
+      for(var name in zones) {
+        if (node.hasClass(name)) {
+          var id = 'oa_' + ++count;
+          slots[id] = node;
+          spc += escape(id + '=' + zones[name] + "|");
+        }
+      }
+    });
+
+    spc += "&amp;nz=1&amp;source=" + escape(OA_source);
+    spc += "&amp;r=" + Math.floor(Math.random()*99999999);
+    spc += "&amp;block=1&amp;charset=UTF-8";
+
+    if (window.location)   spc += "&amp;loc=" + escape(window.location);
+    if (document.referrer) spc += "&amp;referer=" + escape(document.referrer);
+
+    spc+="'></script>";
+
+    document.write(spc);
+    document.write("<script type='text/javascript' src='http://" + server + "/www/delivery/fl.js'></script>");
+  }
+
+
+  openx.render_ads = function() {
+
+    /** Render the fetched ad-banners... */
+    for (var id in slots) {
+      // alert(id + ": " + OA_output[id]);
+      if (typeof(OA_output[id]) != 'undefined' && OA_output[id] != '') {
+        document.write("<div id='" + id + "'>");
+        document.write(OA_output[id]);
+        document.write("</div>");
+        ads.push(id);
+        // alert('Banner ' + id + ': ' + OA_output[id]);
+      }
+    }
+
+  }
+
+  openx.show_ads = function() {
+
+    /** Show the rendered banners */
+    for (var i=0; i<ads.length; i++) {
+      var ad = $('#'+ads[i]).detach();
+      slots[ads[i]].append(ad);
+    }
+  }
+
+} ( window.openx = window.openx || {}, jQuery ));