Simplytest infobar New design Iteration 1

http://drupal.org/node/1925526

by kkomelin

HTML

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.7/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.8.7/jquery-ui.min.js"></script>
Lorem ipsum dolor sit amet, te omittam consetetur qui, no usu albucius
iudicabit, ius vide ocurreret no. Eu labore mandamus tractatos sea, odio
solum vel ad. No odio wisi veri quo. Sit adhuc luptatum platonem id, at
sea discere luptatum comprehensam. Te zril tritani civibus eos.
<br>
<br>
<br>
<br>Ei mei alia meis feugait, sea eu alii accusata, ad officiis pertinax expetendis
eum. Oportere vituperatoribus te mel, est congue aliquando ei. Mei posse
dolorum id. Quo etiam verear an, enim utamur cu eum.
<br>
<br>
<br>
<br>Imperdiet necessitatibus qui id, ne ius consetetur reprimique. His prima
indoctum rationibus at, pro liber sanctus partiendo no, ex duo audiam dolores.
Est id antiopam definiebas, iisque impedit voluptua cu per, delenit maiestatis
vix eu. Eirmod voluptatibus vim ut. Pro sint labore te.
<br>
<br>
<br>
<br>Est invidunt scribentur ut, est id postea vulputate. Sit adversarium signiferumque
ut, dolor accusata indoctum an mea. Id tota dicunt argumentum eos, ei his
agam nonumes consulatu. Ei sed iusto dissentiet, ex purto voluptua ius.
<br>
<br>
<br>
<br>Ei mei alia meis feugait, sea eu alii accusata, ad officiis pertinax expetendis
eum. Oportere vituperatoribus te mel, est congue aliquando ei. Mei posse
dolorum id. Quo etiam verear an, enim utamur cu eum.
<br>
<br>
<br>
<br>Imperdiet necessitatibus qui id, ne ius consetetur reprimique. His prima
indoctum rationibus at, pro liber sanctus partiendo no, ex duo audiam dolores.
Est id antiopam definiebas, iisque impedit voluptua cu per, delenit maiestatis
vix eu. Eirmod voluptatibus vim ut. Pro sint labore te.
<br>
<br>
<br>
<br>
    <div  id="simplytest-snippet">
        <span id="simplytest-snippet-bar">
            <span id="simplytest-snippet-countdown-time"></span>
            <span...

CSS

#simplytest-snippet {    
    cursor:default;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:1em;
    line-height: 1.2;
    color: #fff !important;
    position:fixed;
    z-index: 9999999999;
    bottom: 0;
    overflow:hidden;
    font-weight:bold;
    padding: 0 5px;
    background-color: rgba(33,33,33,0.2);
    color: white; text-shadow: black 0.1em 0.1em 0.2em, black 0.1em 0.1em 0.2em;
    border: 1px solid transparent;
    border-radius:5px; 
}
#simplytest-snippet.warn {    
    background-color: rgba(255, 13, 0, 0.69);
    border: 1px solid #BD362F;
}
#simplytest-snippet a {
    text-decoration: none;
    color: white;
}
#simplytest-snippet-bar.hide {
    display: none;
}
#simplytest-snippet-show {
    display: none; 
    font-size: 19px;
    cursor:pointer;
}
#simplytest-snippet-show.show {
    display: inline;
}
#simplytest-snippet-qr-code {
    margin-left: 10px;
    font-size:0.8em;
}
#simplytest-snippet-hide, #simplytest-snippet-qr-code {
    cursor:pointer;
}
#simplytest-snippet-hide:hover, #simplytest-snippet-qr-code:hover {
    color:red;
}

#simplytest-snippet-backlink {
    margin-left: 10px;
    margin-right: 10px;
}

.qr-code-dialog-wrapper .ui-dialog-content {
    padding:0;
}

JavaScript

(function () {
    if ( window.self !== window.top ) {
        // inside an iframe. Uncomment this code to hide the bar and return
        //document.getElementById('simplytest-snippet').style.display = 'none';        
        //return;
    }
  
    var get = function(id) {
        return document.getElementById(id);
    };
     
    var snippet_element = get('simplytest-snippet');
    var counter_time_element = get('simplytest-snippet-countdown-time');
    var counter_element_qr_code = get('simplytest-snippet-qr-code');
    var counter_element_hide = get('simplytest-snippet-hide');   
    var counter_element_show = get('simplytest-snippet-show');     
    var bar_element = get('simplytest-snippet-bar');
    
    var counter = function() {
        var end;

        function format_number(n) {
            return ((n < 10) ? "0" : "") + n;
        }
        return {
            showCountDown: function () {
                var delta = end - (new Date().getTime());
                
                if (delta <= 60000) { // warn when time left is 1 min
                     snippet_element.className = 'warn';
                }
                if (delta >=0){
                    delta = new Date(delta);
                    var self = this;
                    var hh = format_number(delta.getUTCHours());
                    var mm = format_number(delta.getUTCMinutes());
                    var ss = format_number(delta.getUTCSeconds());
                    counter_time_element.innerHTML = hh + ':' + mm + ':' + ss; 
                   
                } else {
                    counter_time_element.innerHTML = 'Time over!';
                    window.location = 'http://simplytest.me/';
                }
            },
            init: function (seconds) {
                end = new Date().getTime() + (1000 * seconds);                              
                this.showCountDown();
                setInterval(this.showCountDown, 990);
            }
        };
    }();
...