<div id="col-md-hello"><p></p><i></i><span id="mh1">Добрый день</span><span id="mh2">Добрый вечер</span><span id="mh3">Доброй ночи</span>, $USERNAME$!</div>

div#col-md-hello {
  background: #ffffff url(http://www.mybeststudio.ru/bs/chell.png) no-repeat top right;
  color: #1d2129;
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  margin-bottom: 15px;
  padding: 10px 0px 7px 30px;
  font-weight: bolder;
}
div.col-md-night {
  background: #ffffff url(http://www.mybeststudio.ru/bs/chell.png) no-repeat right -42px !important;
}
div.col-md-vesper {
  background: #ffffff url(http://www.mybeststudio.ru/bs/chell.png) no-repeat right -83px !important;
}
div#col-md-hello i {
  background: #ffffff url(http://www.mybeststudio.ru/bs/chell.png) no-repeat 0px -122px;
  width: 21px;
  height: 21px;
  display: inline-block;
  float: left;
  margin: 0px 15px 0px -15px;
  position: relative;
  top: -1px;
}
div#col-md-hello p, span#mh2, span#mh3 {display:none;}
div#col-md-hello:hover p {display: inline-block;}
div#col-md-hello p {
  background: url(http://www.mybeststudio.ru/bs/chell.png) no-repeat -21px -124px;
  width: 17px;
  height: 14px;
  margin: -10px 15px 0px 416px;
  position: absolute;
  cursor: pointer;
}

$(function () {
jQuery.cookie = function(name, value, options) {  
  if (typeof value != 'undefined') { // name and value given, set cookie  
  options = options || {};  
  if (value === null) {  
  value = '';  
  options.expires = -1;  
  }  
  var expires = '';  
  if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {  
  var date;  
  if (typeof options.expires == 'number') {  
  date = new Date();  
  date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));  
  } else {  
  date = options.expires;  
  }  
  expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE  
  }  
  // CAUTION: Needed to parenthesize options.path and options.domain  
  // in the following expressions, otherwise they evaluate to undefined  
  // in the packed version for some reason...  
  var path = options.path ? '; path=' + (options.path) : '';  
  var domain = options.domain ? '; domain=' + (options.domain) : '';  
  var secure = options.secure ? '; secure' : '';  
  document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');  
  } else { // only name given, get cookie  
  var cookieValue = null;  
  if (document.cookie && document.cookie != '') {  
  var cookies = document.cookie.split(';');  
  for (var i = 0; i < cookies.length; i++) {  
  var cookie = jQuery.trim(cookies[i]);  
  // Does this cookie string begin with the name we want?  
  if (cookie.substring(0, name.length + 1) == (name + '=')) {  
  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));  
  break;  
  }  
  }  
  }  
  return cookieValue;  
  }  
  };  

   
$('div#col-md-hello p').click(function () {  
$('div#col-md-hello').hide();
if($.cookie('optHello') != 'false') {  
$.cookie('optHello', 'false');  
} else {  
$.cookie('optHello', 'true');  
}  
});  
if($.cookie('optHello') != 'false') {  
} else {  
$('div#col-md-hello').hide();  
};  

var time = new Date();
if ((time.getHours()>=16) && (time.getHours()<=21)) { $('span#mh1').hide(); $('span#mh2').show(); $('div#col-md-hello').addClass("col-md-vesper"); };
if ((time.getHours()>=21) && (time.getHours()<=24)) { $('span#mh1, span#mh2').hide(); $('span#mh3').show(); $('div#col-md-hello').removeClass("col-md-vesper"); $('div#col-md-hello').addClass("col-md-night"); };
if ((time.getHours()>=0) && (time.getHours()<=5)) { $('span#mh1, span#mh2').hide(); $('span#mh3').show(); $('div#col-md-hello').removeClass("col-md-vesper"); $('div#col-md-hello').addClass("col-md-night"); }; });