/*
 * mediaquery function - test whether a CSS media type or query applies
 * author: Scott Jehl
 * Copyright (c) 2010 Filament Group, Inc
 * MIT license
 * Developed as a feature of the EnhanceJS Framework (enhancejs.googlecode.com)
 * thx to:
   - phpied.com/dynamic-script-and-style-elements-in-ie for inner css text trick
   - @paul_irish for fakeBody trick
*/

var mediaquery = (function(doc,undefined){
   var cache = {},
    docElem = doc.documentElement,
    fakeBody = doc.createElement('body'),
    testDiv = doc.createElement('div');

  testDiv.setAttribute('id','ejs-qtest');
  fakeBody.appendChild(testDiv);

  return function(q){
    if (cache[q] === undefined) {
      var styleBlock = doc.createElement('style');
      styleBlock.type = 'text/css';
      var cssrule = '@media '+q+' { #ejs-qtest { position: absolute; width: 10px; } }';
      if (styleBlock.styleSheet){
          styleBlock.styleSheet.cssText = cssrule;
      }
      else {
          styleBlock.appendChild(doc.createTextNode(cssrule));
      }
      docElem.insertBefore(fakeBody, docElem.firstChild);
      docElem.insertBefore(styleBlock, docElem.firstChild);
      cache[q] = (testDiv.offsetWidth == 10);
      docElem.removeChild(fakeBody);
      docElem.removeChild(styleBlock);
    }
    return cache[q];
  }
})(document);


/*
 * EXAMPLE USAGE
*/

//test 'screen' media type
if(mediaquery('screen')){
  //screen media type supported
}

//test a handheld media query
if(mediaquery('screen and (device-max-width: 480px)')){
  //smartphone/iphone... maybe run some small-screen related dom scripting?
}