var SpeechMe = new Class({ Implements: [Options], options:{ 'element':null, 'width':213, 'content':null, 'mouseevents':false, 'theme':'/images/bubble-huge.png', 'left':false }, initialize:function(options){ var self = this; this.setOptions(options); if(!$(this.options.element)){ return false; } elcoords = this.options.element.getCoordinates(); this.bubble = new Element('div',{ 'styles':{ 'display':'block', 'position':'absolute', 'left':elcoords.right + 2, 'top':elcoords.top - 13, 'width':this.options.width, 'opacity':0, 'overflow':'hidden' } }).inject(document.body,'bottom'); if(this.options.left){ this.bubble.setStyles({ 'left':elcoords.left - this.options.width - 2 }) } this.bubblecontent = new Element('div',{ 'styles':{ 'display':'block', 'width':this.options.width - 50, 'padding':'27px 20px 20px 30px', 'background':'url("'+this.options.theme+'") no-repeat', 'margin-bottom':'20px' } }).set('html',this.options.content).inject(this.bubble,'top'); bubblecoords = this.bubble.getCoordinates(); this.bubblebottom = new Element('div',{ 'styles':{ 'position':'absolute', 'display':'block', 'height':'20px', 'left':0, 'bottom':0, 'width':this.options.width, 'background':'url("'+this.options.theme+'") no-repeat', 'background-repeat':'no-repeat', 'background-position':'bottom' } }).set('html',' ').inject(this.bubble,'bottom'); this.options.element.addEvent('focus',function(){ self.isfocused = true; self.bubble.fade('in'); }); this.options.element.addEvent('blur',function(){ self.isfocused = false; self.bubble.fade('out'); }); if(this.options.mouseevents){ this.options.element.addEvent('mouseenter',function(){ if(!self.isfocused){ self.bubble.fade('in'); } }); this.options.element.addEvent('mouseleave',function(){ if(!self.isfocused){ self.bubble.fade('out'); } }); } } }); SpeechMe.implement(new Events, new Options);