/*
	Tip effect. Create tip for any element.

	Example:

	jQuery(function() {
		setTimeout(function() { new tip({data : {'class1' : 'tip Text1', 'class2' : 'tip Text2', 'class3' : 'tip Text3'}, align : 'center'})}, 3000);
	});

	Add and adjust following styles for module this script is applied to:

	#tipId .value {
		color: #d61919;
	}
	#tipId .price {
		color: #9d001a;
		font-size: 11px;
	}
	#tipId .stock {
		text-align: center;
	}

	@Author: Kadir Fuzaylov
*/
var tip = function(optObj) {
	//Tip object
	this.tip = null;

	//Class initialization
	this.init(optObj);
}

tip.prototype = {
	init : function(optObj) {
		//Link to "this" which is a link to tip class object. Not to be confused with jQuery "this"
		var self = this;

		if(self.checkData(optObj)) {
			self.createTable(optObj);

			//We have to use closure to save link to the tip class object and target title
			var setupOver = function(title) {
				return function() {
					self.over($(this), title);
				}
			}

			var setupOut = function() {
				return function() {
					self.out($(this));
				}
			}

			//Tip define
			self.tip = $('#tipId');

			for(var i in optObj.data) {
				$('#' + i + ' img').hover(setupOver(optObj.data[i]), setupOut());
			}
		}
	},

	checkData : function(opt) {
		//Check if passed data is Object and objs element
		if(!opt instanceof Object || !opt.data instanceof Object) {
			return false;
		}
		else {
			return true;
		}
	},

	corner : function(bg) {
		return {
			'width' : '20px',
			'height' : '20px',
			'background' : 'url(/public/images/mopTip/' + bg + '.png) left top no-repeat'
		};
	},

	sides : function(side, bg, repeat) {
		return {
			side : '20px',
			'background' : 'url(/public/images/mopTip/' + bg + '.png) left top repeat-' + repeat
		}
	},

	createTable : function(opt) {
		var table = $('<table></table>')
		.attr('id', 'tipId')
		.css({
			'border-collapse' : 'collapse',
			'display' : 'none',
			'position' : 'absolute',
			'border' : '0px',
			'z-index' : '888'
		})
		.append('<tr></tr><tr></tr><tr></tr>');


		$('body').append(table);

		var tr = $('tr:nth-child(1)', table);
		tr.append($('<td></td>').css(this.corner('leftTop')));
		tr.append($('<td></td>').css({
			'width' : '60px',
			'height' : '20px',
			'background' : 'url(/public/images/mopTip/arrowTop.png) left top no-repeat'
		}));
		tr.append($('<td></td>').css(this.sides('height', 'top', 'x')).html('&nbsp;'));
		tr.append($('<td></td>').css(this.corner('rightTop')));

		var tr = $('tr:nth-child(2)', table);
		tr.append($('<td></td>').css(this.sides('width', 'left', 'y')));
		tr.append($('<td></td>').css('background', '#fff').attr({
			'id' : 'content',
			'colspan' : '2',
			'align' : $.trim(opt.align) ? opt.align : 'left'
		}));
		tr.append($('<td></td>').css(this.sides('width', 'right', 'y')));

		var tr = $('tr:nth-child(3)', table);
		tr.append($('<td></td>').css(this.corner('leftBottom')));
		tr.append($('<td></td>').css(this.sides('height', 'bottom', 'x')).attr('colspan', '2').html('&nbsp;'));
		tr.append($('<td></td>').css(this.corner('rightBottom')));

		$('table#' + table.attr('id') + ' td').css('padding', '0px');

	},

	content : function(txt) {
		//Find td by id and replace its content
		$('td#content', this.tip).html(txt);
	},

	over : function(target, txt) {
		var self = this;
		//Change the tip content
		self.content(txt);
		//Display the tip
		self.display('block');
		//Activation mousemove event for tip target
		self.mouseMove(target, 'active');
	},

	out : function(target) {
		var self = this;

		self.display('none');
		self.mouseMove(target, 'inactive');
	},

	move : function(event) {
		var self = this;

		var x = event.pageX - 45;
		var y = event.pageY + 25;

		self.tip.css({
			'left': x,
			'top': y
		});
	},

	mouseMove : function(target, state) {
		var self = this;

		if(state == 'active') {
			target.bind('mousemove', function(event) {
				self.move(event);
			});
		}
		else if(state == 'inactive') {
			//Unbind any mousemove handler of this target in order to it is not be involved in event propagation
			target.unbind('mousemove');
		}
	},

	display : function(type) {
		this.tip.css('display', type);
	}
}