var PageToolTips = [];

var ToolTip=new Class({
    initialize:function(trigger,content,options){
        this.setOptions({
            duration:300,transition:Fx.Transitions.linear,wait:false,tooltipClass:'yoo-tooltip',style:'default',width:250,display:'inline',mode:'cursor',sticky:0
        }
        ,options);
        this.open=false;
        this.trigger=$(trigger);
        this.trigger.setStyles(this.triggerstyles());
        this.tooltip=new Element('div',{
            'class':this.options.tooltipClass,'styles':{
                'position':'absolute','top':0,'left':0,'z-index':10,'visibility':'hidden','width':this.options.width
            }
            
        }
        ).injectTop(document.body);
        this.tooltip_style=new Element('div',{
            'class':this.options.style
        }
        ).injectInside(this.tooltip);
        this.tooltip_tl=new Element('div',{
            'class':'tooltip-tl','styles':{
                'width':this.options.width
            }
            
        }
        ).injectInside(this.tooltip_style);
        this.tooltip_tr=new Element('div',{
            'class':'tooltip-tr'
        }
        ).injectInside(this.tooltip_tl);
        this.tooltip_t=new Element('div',{
            'class':'tooltip-t','styles':{
                'height':15
            }
            
        }
        ).injectInside(this.tooltip_tr);
        this.tooltip_l=new Element('div',{
            'class':'tooltip-l','styles':{
                'width':this.options.width
            }
            
        }
        ).injectAfter(this.tooltip_tl);
        this.tooltip_r=new Element('div',{
            'class':'tooltip-r'
        }
        ).injectInside(this.tooltip_l);
        this.tooltip_m=new Element('div',{
            'class':'tooltip-m'
        }
        ).injectInside(this.tooltip_r).set('html', content);
        this.tooltip_bl=new Element('div',{
            'class':'tooltip-bl','styles':{
                'width':this.options.width
            }
            
        }
        ).injectAfter(this.tooltip_l);
        this.tooltip_br=new Element('div',{
            'class':'tooltip-br'
        }
        ).injectInside(this.tooltip_bl);
        this.tooltip_b=new Element('div',{
            'class':'tooltip-b'
        }
        ).injectInside(this.tooltip_br);
        this.tooltip_arrow=new Element('div',{
            'class':'tooltip-arrow','styles':{
                'height':23
            }
            
        }
        ).injectInside(this.tooltip_b);
        //if(this.options.sticky){
            this.close=new Element('div',{
                'class':'tooltip-close'
            }
            ).injectInside(this.tooltip_tl)
        //}
        this.fx=new Fx.Morph(this.tooltip,this.options);
        this.trigger.addEvent('mouseenter',this.show.bindWithEvent(this));
        if(this.options.sticky){
            this.close.addEvent('mouseenter',this.hide.bindWithEvent(this))
        }
        else{
	    //kev@redbullet.co.uk edited
	    this.close.addEvent('mouseenter',this.hide.bindWithEvent(this));
	    this.trigger.addEvent('mouseleave',this.checkHide.bindWithEvent(this));
            //this.trigger.addEvent('mouseleave',this.hide.bindWithEvent(this))
        }
        
    }
    ,show:function(event){
        if(!this.open){
            $each(PageToolTips, function(tip)
			{
				if(tip.open)
					tip.hide();
			});
			
            this.pos=this.position(event);
            this.tooltip.setStyles({
                'opacity':0,'top':this.pos.top+'px','left':this.pos.left+'px'
            }
            );
            this.fx.start({
                'opacity':1,'top':(this.pos.top-10)+'px'
            }
            );
            this.open=true
        }
        
    }
    ,hide:function(event){
        this.fx.start({
            'opacity':0,'top':(this.pos.top-20)+'px'
        }
        );
        this.open=false
    }
    ,position:function(event){
        var trg=this.trigger.getCoordinates();
        var tip=this.tooltip.getCoordinates();
        if(this.options.mode=='cursor'){
            var event=new Event(event);
            trg=$extend(trg,{
                'top':event.page.y,'left':event.page.x,'width':0
            }
            )
        }
        return{
            'top':trg.top-(tip.height),'left':trg.left-(tip.width/2)+(trg.width/2)
        }
        
    }
    ,triggerstyles:function(){
        var styles={
            'display':this.options.display
        }
        ;
        if(!this.trigger.getFirst())return styles;
        var first=this.trigger.getFirst().getCoordinates();
        return $extend(styles,{
            'width':first.width
        }
        )
    },
    checkHide: function()
    {
	//to check whether we should hide this add a quick timeout
	this.cancelHide = false;
	this.tooltip.addEvent('mouseenter', (function()
					     {
						this.cancelHide = true;
					     }).bindWithEvent(this));
	this.trigger.addEvent('mouseenter', (function()
					     {
						this.cancelHide = true;
					     }).bindWithEvent(this));	
	this.tooltip.addEvent('mouseleave',this.checkHide.bindWithEvent(this));
	
	(function()
	 {
	    if(!this.cancelHide)
		this.hide();
	 }).delay(500, this);
	
	
    }
    
}
);
ToolTip.implement(new Options);