/*-----------------------------------------------------------------------------
tip Class

version:	1.0
author:		iq
libs:		mootools 1.2

notes: In this class you will notice that we target elements by walking through
the dom quite a bit and never saving them to a variable.  This is intentional
to adapt to how the Tip class works because it creates and destroys elements
quite frequently.
-----------------------------------------------------------------------------*/
tip = new Class({
        options: {
				container: '',
				content: '',
				scroll: false,
				deBug: false
        },
        initialize: function(options){
                this.setOptions(options);
             				
				this.container = this.options.container;
				this.content = this.options.content;
				this.scroll = this.options.scroll;
				
				// add the tip
				this.add();
				this.trigger();
							
        },
        trigger: function() {
        	var instance = this;
        	var xo = -46;
        	var yo = 28;
        	var content = $(this.content);
        	var trigger = $(this.container);
        	
        	// check for what size tip needed
			var alpha = new RegExp(/[a-z]/gi);
			var className = content.getProperty('class');
			
			var individualClasses = className.split(' ');
			
			if( className != 'bContent') {
				var specs = individualClasses[1].split('|');
			}
			
			// default these if not present in bContent class property
			var width = ( className != 'bContent') ? specs[0].replace(alpha, '') : 250;
			var xOffset = ( className != 'bContent') ? specs[1].replace(alpha, '') : 0;
			xOffset = xOffset.toInt();
			var yOffset = ( className != 'bContent') ? specs[2].replace(alpha, '') : 0;
			yOffset = yOffset.toInt();
        	
        	
        	var currentWidth = this.currentWidth;
        	trigger.addEvent('click', function() {
        	
        		var pageCoords = trigger.getPosition();	
        		var bookScrollsYPosition = 0;
        		var x = pageCoords.x + xOffset + xo;
        		
        		
        		if(instance.scroll && Browser.Engine.trident) {
        			var bookScroll = $('bookScrollWrap');
        			var bookScrolls = bookScroll.getScroll();
        			bookScrollsYPosition = bookScrolls.y;
           		}
           		
           		var y = pageCoords.y + yOffset + bookScrollsYPosition + yo;
				
				content.getParent().getParent().getParent().setStyles({
					width: width + 'px',
					top: y + 'px',
		    		left : x + 'px'
		    	})
			});
        },
		add: function() {	// init
			var instance = this;
			var trigger = $(this.container);
			var content = $(this.content);
			var first = true;
	
			var body = $$('body');
			
			trigger.setStyle('cursor','pointer');
			
			trigger.store('tip:text', content);			
			
			// set up our tip and give it a very lond hide delay
			// so we can manipulate the styles on and off via click event
			var tip = new Tips(trigger, {
				className: 'y-tip tool-tip',
				fixed: true,
				hideDelay: 1000000000,
				showDelay: 0,
				onShow: function() {
					content.getParent().getParent().getParent().setStyle('display','none');
				},
				onHide: function() {
					content.getParent().getParent().getParent().setStyle('display','none');
				}
			});
			
			// just toggling display on styles on click event
			trigger.addEvent('click', function() {
				instance.closeAllBubbles();
				if(first) { 
					
					//
					instance.buildBubble(tip, content);
					first = false;
				}
						
				if(content.getStyle('display') == 'block') {
					content.setStyle('display','none');
					content.getParent().getParent().getParent().setStyle('display','none');
					content.getParent().getParent().getParent().setStyle('visibility','hidden');
					
					// I'm doing this in order to fix the hover repositioning 
					// that tips does when you dont have enough viewport space for the tip
					tip.attach(trigger);
					
				} else {				
					content.setStyle('display','block');
					content.getParent().getParent().getParent().setStyle('display','block');
					content.getParent().getParent().getParent().setStyle('visibility','visible');
					
					// I'm doing this in order to fix the hover repositioning 
					// that tips does when you dont have enough viewport space for the tip 
					tip.detach(trigger);
					
					if(instance.scroll) {
						// giving body a scroll event to close bubble
						$('bookScrollWrap').addEvent('scroll', function() {
							instance.closeAllBubbles();
							$('bookScrollWrap').removeEvents('scroll');
						});
					}
				}
			
				// return false to the link so url isn't executed
				// should be a link to a page version of the action
				return false;
			}, this);
			
			// giving body a click event to close bubble
			body.addEvent('click', function(e) {
				var element = $(e.target);
				var object = element.getParent('div.bContent');
				
				if(!object && (content.getStyle('display') == 'block') ) {
					content.setStyle('display','none');
					content.getParent().getParent().getParent().setStyle('display','none');
				}
			});
		}, 
		buildBubble: function(tip, content) {
		
			
			// tip divs
			var top = content.getParent().getParent().getPrevious();
			var text = content.getParent();
			var bottom = content.getParent().getParent().getNext();
			
			var bContainer = content.getParent().getParent().getParent();
			
			
			// elements that need to be injected for bubble layout
			var nw = new Element('div', {
				'class': 'nw',
				'html': "<div class='n'></div>"
			});
		
			var sw = new Element('div', {
				'class': 'sw',
				'html': "<div class='s'></div>"
			});
			
			var carrot = new Element('div', {
				'class': 'nCarrot'
			});
			
					
					
			// create markup structure we need for a more versatile bubble
			carrot.inject(bContainer);
			nw.inject(top);
			sw.inject(bottom);
			
		},
		closeAllBubbles: function() {
			var bubbles = $$('div.y-tip');
			bubbles.each(function(bubble) {
				bubble.setStyle('display','none');
			});
		}
});
tip.implement(new Options, new Events);