var classBg    = 'bg';
var BgHeight   = 50;
var classText  = 'text';
var classText1 = 'text1';
var classText2 = 'text2';


var onMouseEnter = function()
{
  var Bg = this.getElement('.'+classBg);
  var myText = this.getElement('.'+classText);
  myText.set('tween', {duration: 'short', onComplete:function(h){}});
  Bg.set('morph', {duration: 'short', onComplete:function(h){ myText.fade('in'); } } );
  Bg.morph({height:BgHeight});
}

var onMouseLeave = function()
{
  var Bg = this.getElement('.'+classBg);
  var myText = this.getElement('.'+classText);
  Bg.set('morph', {duration: 'short', onComplete:function(h){}});
  myText.set('tween', {duration: 'short', onComplete:function(h){ Bg.morph({height:0}); }});
  myText.fade('out');
}

var doImgHoverInit = function()
{
  $(document.body).getElements('img').each(function(item, index, array)
  {
    var htmltext = '';
    var text1 = item.getProperty('text1');
    var text2 = item.getProperty('text2');
    
    if (text1)
      htmltext = '<span class="'+classText1+'">'+text1+'</span>';
    if (text2)
      htmltext += '<br />'+'<span class="'+classText2+'">'+text2+'</span>';
      
    var myBgDiv = new Element('div', {
        'styles': {
            'height': '0px',
        },
        'class': classBg
    });
    var myTextDiv = new Element('div', {
        'class': classText,
        'html' : htmltext
    });
    myTextDiv.fade('hide');
    item.getParent().appendChild(myBgDiv, 'before');
    item.getParent().appendChild(myTextDiv, 'before');
  });
  $(document.body).getElements('li').addEvents({
      'mouseenter': onMouseEnter,
      'mouseleave': onMouseLeave
  });
}

window.addEvent( 'domready', doImgHoverInit );