/**
* Mithril components for OSF4I.
*/
'use strict';
var $ = require('jquery');
var m = require('mithril');

var utils = require('js/components/utils');
var required = utils.required;

/**
 * Display an OSF4I logo.
 */
var MUTED_OPACITY = '0.5';
var InstitutionImg = {
    view: function(ctrl, opts) {
        if (!opts.width && !opts.height) {
            throw new Error('InstitutionImg requires width and/or height option.');
        }
        if (opts.width && !opts.height) { opts.height = opts.width; }
        if (opts.height && !opts.width) { opts.width = opts.height; }
        var logoPath = required(opts, 'logoPath');
        var institutionName = required(opts, 'name');
        var style = {};
        if (opts.muted) {
            style.opacity = MUTED_OPACITY;
        }
        // allow user to pass additional styles
        style = $.extend({}, style, opts.style);
        var imgOpts = $.extend({}, opts, {
            className: 'img-circle text-muted ' + (opts.className || ''),
            style: style,
            src: logoPath,
            width: opts.width, height: opts.height,
            alt: opts.alt || institutionName
        });
        return m('img', imgOpts);
    }
};

var CheckableInstitution = {
    view: function(ctrl, opts) {
        var checked = required(opts, 'checked');
        return m('',[
            m.component(InstitutionImg, opts),
            checked ?
            m('i.img-circle.fa.fa-check',
                {
                    style: {
                        color: '#C7FFC7',
                        textAlign: 'center',
                        fontSize: '275%',
                        width: '100%', height: '100%',
                        top: '0', left: '0',
                        position: 'absolute',
                        display: 'block',
                        background: 'rgba(0, 0, 0, .4)'
                    }
                }
            ) : '',
        ]);
    }
};

module.exports = {
    InstitutionImg: InstitutionImg,
    CheckableInstitution: CheckableInstitution,
};

@@ -1323,363 +1323,142 @@
     
-return m('',%5B%0A            m.component(InstitutionImg, opts),%0A            checked ?%0A            m('i.img-circle.fa.fa-check',%0A                %7B%0A                    style: %7B%0A                        color: '#C7FFC7',%0A                        textAlign: 'center',%0A                        fontSize: '275%25',%0A                        width: '100%25', height: '
+var mutedStyle = %7B%0A            opacity: '0.25',%0A            '-webkit-filter': 'grayscale(100%25)',%0A            filter: 'grayscale(
 100%25
+)
 '
-,
 %0A   
@@ -1466,132 +1466,71 @@
     
-                top: '0', left: '0',%0A                        position: 'absolute',%0A                        display: 'block',
+%7D;%0A        if (!checked) %7B%0A            opts.style = mutedStyle;
 %0A   
@@ -1534,31 +1534,26 @@
         
-       
+%7D%0A
         
  backgro
@@ -1548,110 +1548,47 @@
     
- background: 'rgba(0, 0, 0, .4)'%0A                    %7D%0A                %7D%0A            ) : '',%0A        %5D
+return m.component(InstitutionImg, opts
 );%0A 

change check mark to opacity toggle