/**
 * The following code automatically adds a specified class to the body element based on the current width of the browser window.
 * This is useful for specifying different styles for different screen resolutions
 *
 * The following classes are used by default:
 * ------------------------------------------
 * pda-vertical         < 240px
 * pda-horizontal       240px - 320px
 * screen-reallysmall   320px - 640px
 * screen-small         640px - 800px
 * screen-medium        800px - 1024px
 * screen-large         1024px - 1280px
 * screen-reallylarge   > 1280px
 */

// Setup classes and maximum widths
var classes = [['pda-vertical', 240],
               ['pda-horizontal', 320],
               ['screen-reallysmall', 640],
               ['screen-small', 800],
               ['screen-medium', 1024],
               ['screen-large', 1280],
               ['screen-reallylarge', 9999]];

// Run code on page load and when resized
$(document).ready(setScreenClass);
$(window).resize(setScreenClass);

function setScreenClass() {
  // Get current width
  var width = $(document).width();
  var myClass = '';
  
  // Determine which class should be set for current width
  for (var i in classes) {
    if (width <= classes[i][1]) {
      myClass = classes[i][0];
      break;
    }
  }
  
  // Remove existing classes
  for (var i in classes) {
    $('body').removeClass(classes[i][0]);
  }
  
  // Add new class
  $('body').addClass(myClass);
}