/*
*	CREATED FOR MUNIOS - 10-8-09
* 	TODO:
- add options such as having the tip always fixed (as defined in the css) or free (as described above)
- add option to have the close button ot not
- add option to have an arrow or not
- create a jquery version
*/
var bottips = new Class({
			
	initialize: function(options) {
		this.elements = $(document.body).getElements(".bottips");
		this.elements.each(function(e){
			//ADD OUR HOVER EVENT
				e.addEvent("mouseover", function(e){
					$("bottips_"+this.rel).setStyle("visibility", "visible");					
				});
				e.addEvent("mouseout", function(e){
					$("bottips_"+this.rel).setStyle("visibility", "hidden");					
				});
			//CREATE OUR TIP CONTAINER
				var container = new Element('div').set({
					'class': "bottips_container",
					'id': "bottips_"+e.rel,
					'styles':{ 
						'visibility': 'hidden'
					}
				});
			//CREATE THE PARTS OF OUR TIP
				//ARROW
					var arrow = new Element('div', {'class':'bottips_arrow_left'});
				//TOP
					var top = new Element('div', {'class':'bottips_top'});
				//CLOSE
					var close_but = new Element('div', { 'class':'bottips_close' });
					//ADD OUR CLICK EVENT TO THE CLOSE BUTTON
						close_but.addEvent("click", function(e){
							container.setStyle("visibility", "hidden");					
						});
						close_but.setStyles({
							'top':'5px',
							'right':'5px'
						});
				//CONTENT
					var content = new Element('div', {'class':'bottips_content'});
					//GRAB OUR CONTENT AND SET IT IN OUR CONTENT
						content.set({'html':$(e.rel).get('html')});
				//BOTTOM
					var bottom = new Element('div', {'class':'bottips_bottom'});
				//ADD ALL THE PARTS TO OUR CONTAINER
					container.adopt(top, close_but, content, bottom, arrow);
			//ADD THE TIP TO THE DOCUMENT
				e.adopt(container);
			//GRAB OUR SCREEN DIMENSIONS
				var screen_height = screen.height;
				var screen_width = screen.width;
			//GRAB THE SIZES
				var e_size = e.getSize();
				var e_pos = e.getPosition();
				var container_size = container.getSize();
				var arrow_size = arrow.getSize();
			//TEST TO SEE WHERE WE SHOULD POSITION THE CONTAINER - RIGHT OR LEFT
				var container_position = "";
				var container_x = container_size.x + arrow_size.x;
				var test_container_pos = container.getPosition().x - container_x;
				if(test_container_pos>0){
					container_position = "Left";
				}else{
					container_position = "Right";
				}
			//TEST TO SEE WHERE WE SHOULD POSITION THE CONTAINER - Y COORD
				var container_y = (container_size.y/2) - (e_size.y/2);
				var test_y_container_pos = container.getPosition().y - container_y;
				var arrow_y = 0;
				if(test_y_container_pos<0){
					//WE NEED TO MOVE IT DOWN 
						container_y+= test_y_container_pos - (e_size.y);
					//
						arrow_y = e_pos.y;
				}else{
					arrow_y = ((container_size.y/2) - (e_size.y/2))*1.5;
					//arrow_y = ((container_size.y/2) - (e_size.y/2));
				}
			//POSITION OUR CONTAINER
				var offset = 40;
				if(container_position == "Left"){
					arrow.set("class", "bottips_arrow_left");
					var container_x = container_size.x + arrow_size.x-offset;
					var arrow_x = container_size.x;
					arrow.setStyles({
						'top':arrow_y+'px',
						'left':arrow_x+'px'				
					});
					container.setStyles({
						'top':'-'+container_y+'px',
						'left':'-'+container_x+'px'
					});
				}else if(container_position == "Right"){
					arrow.set("class", "bottips_arrow_right");
					var container_x = e_size.x + arrow_size.x-offset;
					var arrow_x = arrow_size.x;
					arrow.setStyles({
						'top':arrow_y+'px',
						'left':'-'+arrow_x+'px'
					});
					container.setStyles({
						'top':'-'+container_y+'px',
						'left':container_x+'px'
					});
				}
			//
				$(e.rel).dispose();
		});
	}
});