Heart monitor2

by edgardleal

HTML

<div class="logo1"></div>
<button id="error">Error</button>

CSS

body {
    background-color: black;
}
.logo1 {
    box-shadow: inset 0 0 10px 8px white;
}
.logo_error {
    box-shadow: inset 0 0 15px 8px red!important;
}
.re_logo_35 {
    background: url(http://localhost/monitoracao/static/img/logo/re_35.png);
    width: 114px;
    height: 114px;
    float: left;
    /*
    box-shadow: inset 0 0 4px 2px yellow;
    */
}
.hidden {
    display:none;
}
.monitor_image {
    float: left;
}

JavaScript

$.fn.monitor = function (options) {
    var defaults = {
        showMonitor: true
    };
    var self = this;
    options = $.extend(defaults, options);
    template = '<div class="re_logo_35"></div>';

    monitor_template = '<img width="114" class="monitor_image" ' + ' src="' + options.logo + '" />';

    self.reset = function () {
        this.append(template + (options.showMonitor ? monitor_template : ''));
    };

    if (!self.hasClass('monitor_started')) {
        self.reset();
    }
}

$('.logo1').monitor({
    logo: 'http://localhost/monitoracao/static/img/heart-monitor-o.gif',
    showMonitor: true
});

$('#error').click(function () {
    $('.re_logo_35').toggleClass('logo_error');
});