var ZJ_ToolTip = new Class({

	options: {
		onShow: function(tip){
			tip.setStyle('visibility', 'visible');
		},
		onHide: function(tip){
			tip.setStyle('visibility', 'hidden');
		},
		maxTitleChars: 30,
		showDelay: 100,
		hideDelay: 100,
		className: 'zj_tool',
		offsets: {'x': 10, 'y': -10},
		fixed: false,
		fix_rokbox_title: 1
	},

	initialize: function(elements, options){
		this.setOptions(options);
		this.toolTip = new Element('div', {
			'class': this.options.className + '-tip',
			'styles': {
				'position': 'absolute',
				'top': '0',
				'left': '0',
				'visibility': 'hidden'
			}
		}).inject(document.body);
		this.content = new Element('ul').inject(this.toolTip);
		this.contentTop = new Element('li', {'class' : 'top'}).inject(this.content);
		this.contentMid = new Element('li', {'class' : 'mid'}).inject(this.content);
		this.contentBottom = new Element('li', {'class' : 'bottom'}).inject(this.content);
		
		$A($$(elements)).each(this.build, this);
		if (this.options.initialize) this.options.initialize.call(this);
	},
	
	build: function(el) {
		var el2 = $(el.getProperty('rel'));
		if (!el2) {
			return;
		}
		if (this.options.fix_rokbox_title) {
			this.buildTitle(el, el2);
		}
		el2.$tmp.ttContent = el.innerHTML;
		el2.title = '';
		el2.addEvent('mouseenter', function(event){
			this.start(el2);
			if (!this.options.fixed) this.locate(event);
			else this.position(el2);
		}.bind(this));
		if (!this.options.fixed) el2.addEvent('mousemove', this.locate.bindWithEvent(this));
		var end = this.end.bind(this);
		el2.addEvent('mouseleave', end);
		el2.addEvent('trash', end);
	},
	
	buildTitle: function(el, el2) {
		var title = '';
		var tip_ul = $(el).getElement('ul');
		var child = tip_ul.getElementsByTagName('li');
		var isFirst = true;
		
		for (var i = 0; i < Math.round(child.length / 2); i++) {
			if (isFirst) {
				isFirst = false;
				if (i * 2 >= child.length) {
					title = $(child[i * 2]).innerHTML;
				} else {
					title = $(child[i * 2]).innerHTML;
					title = title + ' :: ' + $(child[i * 2 + 1]).innerHTML;
				}
			} else {
				if (i * 2 >= child.length) {
					title = title + ' :*: ' + $(child[i * 2]).innerHTML;
				} else {
					title = title + ' :*: ' + $(child[i * 2]).innerHTML;
					title = title + ' :: ' + $(child[i * 2 + 1]).innerHTML;
				}
			}
		}
		
		el2.zj_title = title;
	},
	
	start: function(el){
		this.contentMid.empty();
		this.contentMid.innerHTML = el.$tmp.ttContent;
		$clear(this.timer);
		this.timer = this.show.delay(this.options.showDelay, this);
	},

	end: function(event){
		$clear(this.timer);
		this.timer = this.hide.delay(this.options.hideDelay, this);
	},

	position: function(element){
		var pos = element.getPosition();
		this.toolTip.setStyles({
			'left': pos.x + this.options.offsets.x,
			'top': pos.y + this.options.offsets.y
		});
	},

	locate: function(event){
		var win = {'x': window.getWidth(), 'y': window.getHeight()};
		var scroll = {'x': window.getScrollLeft(), 'y': window.getScrollTop()};
		var tip = {'x': this.toolTip.offsetWidth, 'y': this.toolTip.offsetHeight};
		var prop = {'x': 'left', 'y': 'top'};
		for (var z in prop){
			var pos = event.page[z] + this.options.offsets[z];
			if (z == 'y') pos = event.page[z] - this.options.offsets[z] - tip[z];
			this.toolTip.setStyle(prop[z], pos);
		};
	},

	show: function(){
		if (this.options.timeout) this.timer = this.hide.delay(this.options.timeout, this);
		this.fireEvent('onShow', [this.toolTip]);
	},

	hide: function(){
		this.fireEvent('onHide', [this.toolTip]);
	}

});

ZJ_ToolTip.implement(new Events, new Options);

window.addEvent('domready', function(){
	new ZJ_ToolTip($$('.zj_tip'), {
		fix_rokbox_title:	1,
		initialize:function(){
			this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 300, wait: false}).set(0);
		},
		onShow: function(toolTip) {
			this.fx.start(1);
		},
		onHide: function(toolTip) {
			this.fx.start(0);
		}
	});
});