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','img/stop.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: 500,
		  	transition: Fx.Transitions.quartInOut
		  });
		  ef.start(s,e);
    },
    Minimize: function (el) {
			 // remove event of element
			 el.removeEvents('focus');
			 el.removeEvents('blur');
			// make minihint
      var Localthis = this;
      if (!$('mini_'+el.getProperty('name'))) {
	      var img = new Element('img')
	      .injectAfter(el)
	      .setProperties({'id':'mini_'+el.getProperty('name'),'src':'img/down.png'});
	      this.Effect(0,1,img);
	      
	    img.addEvent('click', function(event) {
	  			Localthis.Effect(0,1,Localthis.span);
			})
			img.addEvent('blur', function(event) {
	  			Localthis.Effect(1,0,Localthis.span);
			})
	      
      } 
    }
});