window.addEvent('domready', function() {
	$$('.makehint').each(function(el){
    new MakeHint(el);
  });
});

var MakeHint = new Class({
    initialize: function(el) {
    
	    this.span = new Element('span').addClass('hint')
	    .setHTML(el.getProperty('alt')).injectAfter(el);
	    
	    var span2 = new Element('span').addClass('hint-pointer').injectInside(this.span);
			this.img = new Element('img').setProperty('src','css/hints/close.png')
			.injectBefore(span2);
			
		  this.AddEvent(el);
		  
		},
		AddEvent: function(el) {
		  var Localthis = this;
		  this.img.addEvent('click', function(event) {
		      Localthis.Minimize(el);
	  			Localthis.Effect(1,0,Localthis.span);
			})
			el.addEvent('focus', function(event) {
	        Localthis.span.setStyle('display','inline');
	  			Localthis.Effect(0,1,Localthis.span);
			})
			el.addEvent('blur', function(event) {
			    Localthis.Effect(1,0,Localthis.span);
			});
    },
    Effect: function(s,e,el) { // start, end , element
      	var ef = new Fx.Style(el, 'opacity', {
			duration: 700,
		  	transition: Fx.Transitions.Quart.easeInOut
		 });
		 ef.start(s,e);
    },
    Minimize: function (el) {
			// make minihint
      var Localthis = this;
    }
});