/**
 * @author Roel
 */

var tooltip = new Class({
	
	presets: {
		layouts: {/*
			[name]: {
				id: [id of the template],
				offset: {
					x: [horizontal offset; left = 0],
					y: [vertical offset; top = 0]
				}
			},
			*/
		},
		element_id: 'momkai_tooltip',
		data_elements: { // This should be CSS selectors
			/*
			[name]: [css-selector]
			*/
		},
		fx_options: {
			duration: 500,
			transition: Fx.Transitions.Quint.easeOut
		}
	},
	
	layouts: {},
	data_elements: {},
	
	initialize: function(options) {
		
		this.options = $merge(this.presets, options);
		
		
		// Create a new element that will contain the tooltip
		
		this.div = new Element('div', {
			'id': this.options.element_id
		});
		
		$(document.body).adopt(this.div);
		
		this.div.setStyles({
			'position': 'absolute',
			'visibility': 'hidden',
			'width': '0px',
			'height': '0px',
			'overflow': 'hidden'
		});
		
		
		// Load the templates for the various layouts
		
		for (var i in this.options.layouts) {
			
			this.add_layout(i, this.options.layouts[i]);
			
		}
		
		// This is hardcoded and should be removed
		this.current_layout = 'north';
		
		
		// Assign the CSS slectors for the elements that will contain the data
		/*
		for (var i in this.options.data_elements) {
			
			this.data_elements[i] = $E(this.options.data_elements[i]);
			
		}
		*/
		
		this.fx = new Fx.Styles(this.div, this.options.fx_options);
	},
	
	add_layout: function(name, layout) {
		
		// Method to assign a tooltip layout
		
		this.layouts[name] = {};
		
		this.layouts[name].el = $(layout.id);
		
		this.layouts[name].offset = {};
		this.layouts[name].offset.x = layout.offset.x;
		this.layouts[name].offset.y = layout.offset.y;
		 /*
		this.layouts[name].size.x = this.layouts[name].el.getSize().size.x;
		this.layouts[name].size.y = this.layouts[name].el.getSize().size.y;
		*/
		
		this.layouts[name].el.setStyle('display', 'none');
		
		this.div.adopt(this.layouts[name].el);		
		
	},
	
	add_element: function(element) {
		
		// Method to assign the tooltip to an element in the DOM
		
		var serial_data = element.title;
		element.title = '';
		
		var data = serial_data.split(';');
		
		var meta_data = {};
			
		for (var i = 0; i < data.length; i++) {
			
			var key_val_pair = data[i].split('|');
			
			meta_data[key_val_pair[0]] = key_val_pair[1];
			
		}
		
		element.addEvent('mouseenter', function(event) {
			this.show(event, meta_data);
			//this.position(event);
		}.bind(this));
		
		element.addEvent('mousemove', this.position.bindWithEvent(this));
		
		element.addEvent('mouseleave', function(event) {
			this.hide();
		}.bind(this));
		
	},
	
	switch_layout: function(layout) {
		
		// Method to switch between the different layouts
		
		this.layouts[this.current_layout].el.setStyle('display', 'none');
		
		this.layouts[layout].el.setStyle('display', '');
		
		this.current_layout = layout;
		
	},
	
	position: function(event) {
		
		// Place the tooltip in the window
		
		var win = {'x': window.getWidth(), 'y': window.getHeight()};
		var scroll = {'x': window.getScrollLeft(), 'y': window.getScrollTop()};
		var mouse = {'x': event.client.x, 'y': event.client.y};		
		
		this.div.setStyles({
			'left': mouse.x + this.layouts[this.current_layout].offset.x + document.body.scrollLeft,
			'top': mouse.y + this.layouts[this.current_layout].offset.y + document.body.scrollTop
		});
		
	},
	
	show: function(event, meta_data) {
		
		// Fill the tooltip with the correct data and show it.
		
		
		// Write your own custom function to switch layouts etc
		
		
		
	},
	
	load_data: function(data) {
		/*
		// Parse meta data and place in appropriate element if available
		
		var data = data.split(';');
		var data_id, data_value, data_tmp;
		
		
		for (var i = 0; i < meta_data.length; i++) {
			
			data_tmp = data[i].split(':');
			data_id = data_tmp[0];
			data_value = data_tmp[1];
			
			if (typeof this.data_elements[data_id] !== 'undefined') {
				this.data_elements[meta_id].setHTML(data_value);
			}
			
		}*/
	
	},
	
	hide: function() {
		
		this.div.setStyles({
			'position': 'absolute',
			'visibility': 'hidden',
			'width': '0px',
			'height': '0px',
			'overflow': 'hidden'
		});
		
	}
	
});