<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://webo4ka.ru/_ld/44/35659566.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://webo4ka.ru/_ld/44/35659566.png) no-repeat right -42px !important;  
  }  
  div.col-md-vesper {  
  background: #ffffff url(http://webo4ka.ru/_ld/44/35659566.png) no-repeat right -83px !important;  
  }  
  div#col-md-hello i {  
  background: #ffffff url(http://webo4ka.ru/_ld/44/35659566.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://webo4ka.ru/_ld/44/35659566.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"); }; });