if (!Array.prototype.filter)
{
  Array.prototype.filter=function(b){if(this===void 0||this===null){throw new TypeError()}var f=Object(this);var a=f.length>>>0;if(typeof b!=="function"){throw new TypeError()}var e=[];var d=arguments[1];for(var c=0;c<a;c++){if(c in f){var g=f[c];if(b.call(d,g,c,f)){e.push(g)}}}return e};
}

if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf=function(c){if(this===void 0||this===null){throw new TypeError()}var d=Object(this);var a=d.length>>>0;if(a===0){return -1}var e=0;if(arguments.length>0){e=Number(arguments[1]);if(e!==e){e=0}else{if(e!==0&&e!==(1/0)&&e!==-(1/0)){e=(e>0||-1)*Math.floor(Math.abs(e))}}}if(e>=a){return -1}var b=e>=0?e:Math.max(a-Math.abs(e),0);for(;b<a;b++){if(b in d&&d[b]===c){return b}}return -1};
}

(function() {
  var $j = $j || jQuery.noConflict();

  var DOMAIN = document.location.protocol + '//' + document.location.host + '/';

  var PATH_TO_IMAGES = 'html/logo/badge/';

  var LAYOUTS = {
    'horizontal': 'horiz_html5_??.png',
    'vertical': 'vert_html5_??.png'
  };

  var currentOrientation = 'horizontal';

  window.THEMES = {
    'storage': 'Offline & Storage',
    'device': 'Device Access',
    'connectivity': 'Connectivity / Realtime',
    'performance': 'Performance & Integration',
    'multimedia': 'Multimedia',
    'semantics': 'Semantics',
    'graphics': 'Graphics, 3D & Effects',
    'css3': 'CSS3 / Styling'
  };

  window.preloadBadges = function() {
    var themes = [];  // Object.keys(THEMES) doesn't work in FF 3.6.
    for (var key in THEMES) {
      themes.push(key);
    }

    renderBadges(themes);
    ouputCode();
  };

  function renderBadges(list) {
    for (var layout in LAYOUTS) {
      var badge = $j('#' + layout + '-badge');
      badge.html(generateImageTagForBadge(list, layout));
    }
  }

  function generateImageTagForBadge(list, layout) {
    var host = DOMAIN + PATH_TO_IMAGES;
    var html = [];

    // Calculate iframe width by sum of header + footer + class images widths.
    switch (currentOrientation) {
      case 'vertical':
        var width = 38;
        var height = (list.length > 0 ? (42 + ((list.length + 1) * (29 + 3))) : 61); // 3px is a margin adjustment.
        break;
      case 'horizontal':
        //break;
      default:
        var width = 63 + (list.length > 0 ? (38 + (list.length * 32)) : 0);
        var height = 64;
    };

    var altText = 'HTML5 Powered';
    var imgComponents = 'solo';

    if (list.length > 0) {
      imgComponents = list.sort().join('-');
      altText += ' with ';
      for (var i = 0; i < list.length; i++) {
        if (i > 0) {
          altText += ', ';
        }
        if (i == list.length - 1 && list.length > 1) {
          altText += 'and ';
        }
        altText += window.THEMES[list[i]].replace(/&/g, '&amp;');
      }
    }

    html.push('<img src="', DOMAIN, PATH_TO_IMAGES, 'html5-badge-', layout.charAt(0), '-',
              imgComponents, '.png" width="', width, '" height="', height,
              '" alt="', altText, '" title="', altText, '">');

    return html.join('');
  }

  function generateCodeForBadges(list, layout) {
    var html = [];

    html.push('<a href="http://www.w3.org/html/logo/">',
              generateImageTagForBadge(list, layout),
              '</a>');

    return html.join('').replace(/></g, '>\n<');
  }

  function ouputCode() {
    // TODO(ericbidelman): pretty print
    var list = [];
    var themeCheckboxes = $j('#toggles input[type="checkbox"]');
    for (var i = 0, themeToggle; themeToggle = themeCheckboxes[i]; ++i) {
      if (themeToggle.checked) {
        list.push(themeToggle.id);
      }
    }
    // TODO(ericbidelman): only rendering horizontal here.
    $j('#badge-code').val(generateCodeForBadges(list, currentOrientation));
    renderBadges(list);
  }

  $j(document).ready(function() {

    $j('#toggles').click(function(e) {
      if (e.target.nodeName == 'INPUT') {
        ouputCode();
        $j('[data-id="' + e.target.id + '"]').each(function() {
          $j(this).toggleClass('hidden');
        });
      }
    });

    $j('[name="badge-orientation"]').click(function(e) {
      currentOrientation = this.value;
      if (currentOrientation == 'horizontal') {
        $j('#badge-selector-horizontal').show();
        $j('#badge-selector-vertical').hide();
      } else {
        $j('#badge-selector-vertical').show();
        $j('#badge-selector-horizontal').hide();
      }
      ouputCode();
    });

  });
})();