logger.js

;
(function ($, root, document, console, undefined) {
  'use strict'
  
  var consoleLog;
  
  // Discrete log when collapsed.
  // - Cycle through each new message and display for a set amount of time before moving onto the next one,
  //   or display like a <marqueue>?
  // Fix the scrollToBottom function.
  // Add a bottom toolbar.
  // - Add a button to clear the log.
  // Allow the user to insert new logs.
  // Show the file logger invoked the log/dir function.
  // Create a dir function.
  // IE7?
  // (option) visble (boolean, default: false)
  // Create a Logger class?
  // Add an options object.

  // Keybooard a11y.
  // Full ARIA support.

  $.loggerDefaults = {
    hide: '&#9660;',
    show: '&#9650;'
  };

  $.logger = $.logger || (function () {
    var logger = {},
        unreadLogCount = 0,
        $unreadLogCount = $('<span />'),
        $toggleButtonText = $('<span>' + $.loggerDefaults.show + '</span>'),
        $toggleButton = $('<a href="#" style="color: #fff; text-decoration: none;" />').append($toggleButtonText)
          .append($unreadLogCount)
          .on('click', function (e) {
            e.preventDefault();
            
            logger.toggle();
          }),
        $tab = $('<div style="background-color: #000 !important; -webkit-border-top-left-radius: 5px !important; -webkit-border-top-right-radius: 5px !important; -moz-border-radius-topleft: 5px !important; -moz-border-radius-topright: 5px !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; float: right !important; padding: 5px 10px !important;" />').append($toggleButton),
        $log = $('<ul style="background-color: #000 !important; color: #fff !important; border-top: 1px solid #aaa !important; height: 200px; overflow-x: hidden !important; overflow-y: auto !important; list-style-type: none !important; margin: 0 !important; padding: 5px !important;" />'),
        $logContainer = $('<div style="clear: both !important; display: none !important;" />').append($log)
          .resizable({
            alsoResize: $log,
            handles: 'n',
            resize: function () {
              $logContainer.css({
                bottom: 0,
                top: 0
              });
              
              logger.scrollToBottom();
            }
          }),
        $container = $('<div class="logger" style="bottom: 0 !important; font-family: Courier New !important; font-size: 14px !important; line-height: 20px !important; opacity: 0.8 !important; filter: alpha(opacity=80) !important; position: fixed !important; width: 100% !important;" />').append($tab)
          .append($logContainer);
    
    var formatTime = function (date) {
      var hours = date.getHours(),
      minutes = formatTimeFragment(date.getMinutes()),
      seconds = formatTimeFragment(date.getSeconds()),
      milliseconds = date.getMilliseconds();
      
      return [hours, minutes, seconds].join(':') + '.' + milliseconds;
    },
    formatTimeFragment = function (fragment) {
      if (fragment < 10) {
        return '0' + fragment;
      }
      
      return fragment;
    },
    log = function (html) {
      $log.append('<li style="line-height: 20px !important;">' + html + '</li>');
      
      logger.scrollToBottom();
    },
    logStart = function () {
      var now = new Date(),
          time = formatTime(now),
          date = $.datepicker.formatDate('dd/mm/yy', now),
          dateTime = '=== Log started at '+ time + ' ' + date + ' ===',
          html = '<span style="color: #abe8ab;">' + dateTime + '</span>';
      
      log(html);
    };
    
    logger.log = function () {
      var now = new Date(),
          time = formatTime(now),
          index,
          length,
          messages = [];
      
      for (index = 0, length = arguments.length; index < length; index += 1) {
        messages.push(arguments[index]);
      }
      
      if (!messages.length) {
        messages.push('<div style="color: #aaa">undefined</div>');
      }
      
      log('<div style="color: #aaa; float: left;">' + time + '</div><div style="margin-left: 8em;">' + messages.join(' ') + '</div>');
      
      if (!$logContainer.is(':visible')) {
        $unreadLogCount.text(' (' + (++unreadLogCount) + ')');
      }
    };
    
    logger.scrollToBottom = function () {
      $log.scrollTop($log[0].scrollHeight);
    };
    
    logger.toggle = function () {
      $logContainer.stop();
      $logContainer.slideToggle({
        complete: function () {
          logger.scrollToBottom();
          
          unreadLogCount = 0;
          $unreadLogCount.text('');
          
          // Add a timeout to ensure it's stopped animating.
          setTimeout(function () {
            if ($logContainer.is(':visible')) {
              $toggleButtonText.html($.loggerDefaults.hide);
            } else {
              $toggleButtonText.html($.loggerDefaults.show);
            }
          }, 10);
        }
      });
    };
    
    logStart();
    
    $('body').append($container);
    
    return logger;
  })();

  $(document).on('keyup', function (e) {
    if (e.keyCode === 27 /* Escape */) {
      $.logger.toggle();
    }
  });
  
    // Create a dummy console object.
   console = console || {};
   consoleLog = console.log
  
  // Override the console.log function.
  console.log = function () {
    $.logger.log.apply(this, arguments);

    if (consoleLog) {
      consoleLog.apply(this, arguments);
    }
  };
})(this.jQuery, this, this.document, this.console);

// $.logger.log('foo');
// or
// console.log('foo');