/**
 * Adds classes (e.g. tiny, large, huge) to the body tag based on the width
 * of the browser/projector/mobile etc.
 *
 * Requires the jQuery
 *
 * @copyright Box Design 2007
 * @author Nick Joyce
 *
 **/


$(window).bind('resize', function()
{
  var body = $('body')

  if (!body[0].mediaType)
    // didn't work
    return;

  var mt = body[0].mediaType

  var list = {
    'screen': {
      'minute': 0,
      'tiny': 640,
      'small': 800,
      'medium': 1024,
      'large': 1280
    }
  };

  if (!list[mt])
    return;

  var sizes = list[mt];
  var width = $(this).width();

  for (var i in sizes)
  {
    body.removeClass(i)

    if (width >= sizes[i])
      body.addClass(i)
  }
});

$(document).ready(function()
{
  var media_types = {
    'screen': '0px',
    'print': '1px',
    'handheld': '2px'
  };

  var st = $('<style type="text/css"></style>')
  var css_rules = "#detect-media-type {\nposition: absolute;\n}\n\n";

  for (var mt in media_types)
    css_rules += "@media " +  mt + " {\n#detect-media-type {\ntop: " +
      media_types[mt] + ";\n}\n}\n\n";

  if (st[0].styleSheet)
    st[0].styleSheet.cssText = css_rules
  else
    st.text(css_rules);

  st.appendTo('head')
  var body = $('body')

  body.append('<span id="detect-media-type"></span>')

  var top = $('#detect-media-type').css('top')

  for (var media in media_types) {
    if (media_types[media] != top) continue;

    body[0].mediaType = media;
    body.addClass(media);
  }

  $(window).resize()
});

(function($) {
  $.fn.oddify = function(settings)
  {
   var config = {};

   if (settings) $.extend(config, settings);

   this.each(function(i)
   {
     if (i % 2 == 0)
       $(this).addClass('odd')
     else
       $(this).addClass('even')
     // element-specific code here
   });

   return this;

  };
 
 })(jQuery);
