var ktcn_tips = new Class({

	Implements: [Events, Options],

	options: {
		onShow: function(tip){
			tip.setStyle('visibility', 'visible');
		},
		onHide: function(tip){
			tip.setStyle('visibility', 'hidden');
		},
		showDelay: 100,
		hideDelay: 100,
		className: null,
		offsets: {x: 16, y: 16},
		fixed: false,
		img_dir: "templates/img/gold_box/",
		img_prefix: "dark_box_"
	},

	initialize: function(){
		var params = Array.link(arguments, {options: Object.type, elements: $defined});
		this.setOptions(params.options || null);
		
		this.tip = new Element('div').inject(document.body);
		if (this.options.className) this.tip.addClass(this.options.className);
		
		var top = new Element('div', {'class': 'tip-top'}).inject(this.tip);
		this.container = new Element('div', {'class': 'tip'}).inject(this.tip);
		var bottom = new Element('div', {'class': 'tip-bottom'}).inject(this.tip);
		
		this.tip.setStyles({position: 'absolute', top: 0, left: 0, visibility: 'hidden', 'z-index':100000});
		var s = this.options.img_dir+this.options.img_prefix;
		var wrapper = new Element('div').set("html","<table cellspacing='0' cellpadding='0'><tr><td><img src=\""+s+"01.png\" alt='' class='blk'/></td><td style=\"background:url("+s+"02.png) 0 0 repeat-x\"/></td><td><img src=\""+s+"03.png\" alt='' class='blk'/></td></tr><tr><td style=\"background:url("+s+"04.png) 0 0 repeat-y\"></td><td class=\"tip-center\"></td><td style=\"background:url("+s+"06.png) 0 0 repeat-y\"></td></tr><tr><td><img src=\""+s+"07.png\" alt='' class='blk'/></td><td style=\"background:url("+s+"08.png) 0 0 repeat-x\"/></td><td><img src=\""+s+"09.png\" alt='' class='blk'/></td></tr></table>");
		//wrapper.getElement('.tip-center').adopt(this.tip.getElement('.tip'));
		//wrapper.wraps(this.tip.getElement('.tip'));
		this.container.adopt(wrapper);
		//alert(this.container.get("html"));
		
		if (params.elements) this.attach(params.elements);
	},
	
	attach: function(elements){
		$$(elements).each(function(element){
			var title = element.retrieve('tip:title', element.get('title'));
			var text = element.retrieve('tip:text', ''/*element.get('rel') || element.get('href')*/);
			var rel = element.retrieve('tip:rel', element.get('rel'));
			var enter = element.retrieve('tip:enter', this.elementEnter.bindWithEvent(this, element));
			var leave = element.retrieve('tip:leave', this.elementLeave.bindWithEvent(this, element));
			element.addEvents({mouseenter: enter, mouseleave: leave});
			if (!this.options.fixed){
				var move = element.retrieve('tip:move', this.elementMove.bindWithEvent(this, element));
				element.addEvent('mousemove', move);
			}
			element.store('tip:native', element.get('title'));
			element.erase('title');
		}, this);
		return this;
	},
	
	detach: function(elements){
		$$(elements).each(function(element){
			element.removeEvent('mouseenter', element.retrieve('tip:enter') || $empty);
			element.removeEvent('mouseleave', element.retrieve('tip:leave') || $empty);
			element.removeEvent('mousemove', element.retrieve('tip:move') || $empty);
			element.eliminate('tip:enter').eliminate('tip:leave').eliminate('tip:move');
			var original = element.retrieve('tip:native');
			if (original) element.set('title', original);
		});
		return this;
	},
	
	elementEnter: function(event, element){
		//alert(this.container.get('html'));
		$A(this.container.getElement('.tip-center').childNodes).each(Element.dispose);
		//alert(this.container.get('html'));
		this.container.set("rel",element.retrieve('tip:rel'));
		//this.container.set("html","<table><tr><td><img src=\"new_gfx/dark_box/dark_box_01.png\" alt=''/></td><td style=\"background:url(new_gfx/dark_box/dark_box_02.png) 0 0 repeat-x\"/>&nbsp;</td><td><img src=\"new_gfx/dark_box/dark_box_03.png\" alt=''/></td></tr><tr><td><img src=\"new_gfx/dark_box/dark_box_01.png\" alt=''/></td><td class=\"tip-center\"></td><td><img src=\"new_gfx/dark_box/dark_box_01.png\" alt=''/></td></tr></table>");
		var wrapper = this.container.getElement('.tip-center');//.getElement('.tip');
		//alert(wrapper.get('html'));
		var title = element.retrieve('tip:title');
		
		if (title){
			this.titleElement = new Element('div', {'class': 'tip-title'}).inject(wrapper/*this.container.wrapper*/);
			this.fill(this.titleElement, title);
		}
		
		var text = element.retrieve('tip:text');
		//if (text){
			this.textElement = new Element('div', {'class': 'tip-text'}).inject(wrapper/*this.container.wrapper*/);
			this.fill(this.textElement, text);
		//}
		
//		alert(wrapper.get('html'));
		this.timer = $clear(this.timer);
		this.timer = this.show.delay(this.options.showDelay, this);

		this.position((!this.options.fixed) ? event : {page: element.getPosition()});
	},
	
	elementLeave: function(event){
		$clear(this.timer);
		this.timer = this.hide.delay(this.options.hideDelay, this);
	},
	
	elementMove: function(event){
		this.position(event);
	},
	
	position: function(event){
		var size = window.getSize(), scroll = window.getScroll();
		var tip = {x: this.tip.offsetWidth, y: this.tip.offsetHeight};
		var props = {x: 'left', y: 'top'};
		for (var z in props){
			var pos = event.page[z] + this.options.offsets[z];
			if ((pos + tip[z] - scroll[z]) > size[z]) pos = event.page[z] - this.options.offsets[z] - tip[z];
			this.tip.setStyle(props[z], pos);
		}
	},
	
	fill: function(element, contents){
		(typeof contents == 'string') ? element.set('html', contents) : element.adopt(contents);
	},

	show: function(){
		this.fireEvent('show', this.tip);
	},

	hide: function(){
		this.fireEvent('hide', this.tip);
	}

});