Hint = function Hint (div_id, content) {
	this.hint = (div_id ? Core.getElementU(div_id) : null);
	if (this.hint == null) {
		this.init = null;
		return;
	}
	
	this.head = null;
	this.body = null;
	this.content = (content ? content : "<center><img src=http://images.fotki.com/progress.gif> <span class='text2b black'>Loading...</span></center>");

	this.hint_id = div_id;
	this.head_id = div_id + "_hinthead";
	this.body_id = div_id + "_hintbody";
			
	// flags
	this.is_showing = 0;
	this.animation_on = 0;

	// setTimeout magic variable
	this.is_closing = 0;
	this.intervalID = 0;

	// extra
	this.parentSize = null;
	this.timeout = 1000;	// ms
	
	// animation
	this.frames = 8;
	this.sFrame = 0;
	this.hFrame = 8;
	this.animation_delay = 30; // ms
	this.animationShowHint = null;
	this.animationHideHint = null;

	this.obj_name = this.hint_id+'_hint';	
	var obj_name = this.hint_id+'_hint';
	Hint[obj_name] = this;	

   var classes = null;
	var arrows = { 1:"arrow1", 2:"arrow2", 3:"arrow3", 4:"arrow4", 5:"arrow5", 6:"arrow6", 7:"arrow7", 8:"arrow8" };
	var cur_arrow = 1;	// default         
   var styles = { "note":"", "win":"win", "dark":"dark", "warn":"warn", "orange":"orange" };	
	//TODO: Create image and css for other styles; Now WIN works only    

	this.hint_class = Core.getClassName(this.hint_id);   // return like: hint arrow1 dark
	var head_class = "hint_arrow";
	var body_class = "hint_body";	
		
	this.init = function Hint_init () {
		classes = this.getHintClasses();
		this.hint.innerHTML = "<ul><li id='"+this.head_id+"' class='"+head_class +"'>&nbsp;</li><li class='dd1'>&nbsp;</li><li class='dd2'>&nbsp;</li><li class='bb1'><div>&nbsp;</div></li><li id='"+this.body_id+"' class='bb2'>" + 
			this.content +
		"</li><li class='dd3'>&nbsp;</li><li class='dd4'>&nbsp;</li><li class='bb3'><div>&nbsp;</div></li></ul>";
		
		this.head = Core.getElementU(this.head_id);
		this.body = Core.getElementU(this.body_id);
		this.animationShowHint = new Core.animation(this.frames, this.animation_delay, this.animeShowFunc, this.animeShowStartFunc, this.animeShowFinishFunc);
		this.animationHideHint = new Core.animation(this.frames, this.animation_delay, this.animeHideFunc, this.animeHideStartFunc, this.animeHideFinishFunc);
	} // this.init

	this.setPosition = function Hint_setPosition (ref) { 
		var parent_pos = Core.getElementPos(ref);
		this.parentSize = Core.getElementSize(ref);

		if (parent_pos && this.parentSize) {	
			var left, top;
			switch (this.cur_arrow) {
				case 1:
					left = parent_pos.x;
					top = parent_pos.y + this.parentSize.height + 2;
					break;

				case 2:
					left = parent_pos.x;
					top = parent_pos.y + this.parentSize.height + 2;
					break;

				case 3:
					left = parent_pos.x - 4;
					top = parent_pos.y;
					break;

				case 4:
					left = parent_pos.x - 4;
					top = parent_pos.y;
					break;

				case 5:
					left = parent_pos.x + this.parentSize.width;
					top = parent_pos.y - 2;
               break;

				 case 6:
					left = parent_pos.x + this.parentSize.width;
					top = parent_pos.y - 2;
					break;

				case 7:
					left = parent_pos.x + this.parentSize.width + 2;
					top = parent_pos.y;
					break;

				case 8:
					left = parent_pos.x + this.parentSize.width + 2;
					top = parent_pos.y;
					break;
				
				default:
					left = parent_pos.x;
					top = (parent_pos.y + this.parentSize.height + 2);
					break;	
			}
			this.hint.style.left = left + "px";
			this.hint.style.top = top + 'px';

			return true;
		} else {
			return false;
		}
	} //this.getPosition

	this.setTimeout = function Hint_setTimeout (t) {	// ms 
		this.timeout = t; 
	} // this.setTimeout
	
	this.setAnimationDelay = function Hint_AnimationDelay (d) {   // ms
		this.animation_delay = d;
	} // this.
	
	this.getHintClasses = function Hint_getHintClasses() {
		var arr = this.hint_class.split(" ");
		return {'hint': (arr[0]?arr[0]:''), 'arrow': (arr[1]?arr[1]:''), 'style': (arr[2]?arr[2]:'')};
	} // this.gethintClasses

	this.show = function Hint_show (ref) { 
		if (this.is_showing) {
         this.quickHide();
      }
		if (this.animation_on && !Core.detectBrowser().isIE) {
			if (this.animationHideHint && this.animationHideHint.isStarted()) this.animationHideHint.stop();
			if (this.animationShowHint && this.animationShowHint.isStarted()) this.animationShowHint.stop();
		}
		if (!this.setPosition(ref)) return;

		if(this.animation_on && !Core.detectBrowser().isIE) this.animationShowHint.start(); 
		Core.showElement(this.hint);
		Hint[obj_name].addHintEvents();
		this.is_closing = setTimeout("Hint['"+obj_name+"'].hide()", this.timeout);

		this.is_showing = 1;
	} // this.show

	this.setArrow = function Hint_setArrow (key) {
		if (key && arrows[key]) {
			classes["arrow"] = arrows[key];
			this.cur_arrow = key;
		}
		this.hint_class = classes["hint"]+" "+classes["arrow"]+" "+classes["style"];
		Core.setClassName(this.hint, this.hint_class);
	} // this.setArrow

	this.setStyle = function Hint_setStyle (key) {
      if (key && (styles[key] || key == "note")) {
         classes["style"] = styles[key];
      }
      this.hint_class = classes["hint"]+" "+classes["arrow"]+" "+classes["style"];
      Core.setClassName(this.hint, this.hint_class);
   } // this.setStyle

	this.setContent = function Hint_setContent (cont) {
		this.content = cont;
		Core.setText(this.body_id, cont);
	} // this.setContent 	

	this.hide = function Hint_hide () {
		if (this.animation_on && !Core.detectBrowser().isIE) { 
			if (this.animationShowHint.isStarted()) this.animationShowHint.stop();
			this.animationHideHint.start();
		} else {
			this.quickHide();
		}
	} // this.hide

	this.quickHide = function Hint_quickHide () {
		Core.hideElement(this.hint);
		this.is_closing = clearTimeout(this.is_closing);
		this.is_showing = 0;
	} // this.quickHide

	this.animationOn = function Hint_animationOn () {
		this.animation_on = 1;					
	} // Hint_animationOn

	 this.animationOff = function Hint_animationOff () {
      this.animation_on = 0;
   } // Hint_animationOff
	
	//XXX: animation show functions
	this.animeShowStartFunc = function () {
		Hint[obj_name].sFrame = 0;
		Core.setClassName(Hint[obj_name].hint_id, Hint[obj_name].hint_class+' fojo10');
	} // this.animeShowStartFunc

	this.animeShowFunc = function () {
		Core.setClassName(Hint[obj_name].hint_id, Hint[obj_name].hint_class+" fojo"+((Hint[obj_name].sFrame+2)*10));
		Hint[obj_name].sFrame++;
	} // this.animeShowFunc

	this.animeShowFinishFunc = function () {
		Core.setClassName(Hint[obj_name].hint_id, Hint[obj_name].hint_class);
	} // this.animeShowFinishFunc
	
	//XXX: animation hide functions
	this.animeHideStartFunc = function () {
		Hint[obj_name].hFrame = 8;
		Core.setClassName(Hint[obj_name].hint_id, Hint[obj_name].hint_class+' fojo90');
	} // this.animeHideStartFunc

	this.animeHideFunc = function () {
		Core.setClassName(Hint[obj_name].hint_id, Hint[obj_name].hint_class+" fojo"+(Hint[obj_name].hFrame*10));
		Hint[obj_name].hFrame--;
	} // this.animeHideFunc

	this.animeHideFinishFunc = function () {
		Core.hideElement(Hint[obj_name].hint);
		Core.setClassName(Hint[obj_name].hint_id, Hint[obj_name].hint_class);
		Hint[obj_name].is_closing = clearTimeout(Hint[obj_name].is_closing);
		Hint[obj_name].is_showing = 0;
	} // this.animeHideFinishFunc

	this.init();	
} // Hint
	
Hint.prototype.addHintEvents = function Hint_prototype_addHintEvents () {
	var ref = this;

	ref.hint.onmouseover = function () {
		clearTimeout(ref.is_closing);
	};

	ref.hint.onmouseout = function () {
		ref.is_closing = setTimeout("Hint['"+ref.obj_name+"'].hide()", ref.timeout);
	};
}