(function($) {
	var imageUrl = '';
	var popup = '';
	var popupWidth = 0;
	var offset = 0;
	var popupBorder = 0;
	var popupPadding = 0;

	$.fn.jTipster = function(options) {
		settings = $.extend({
			marker: '.marker',
			popup: '.popup',
			width: 150,
			offset: 0,
			baseimageurl: 'numbers'
		}, options || {});
		imageUrl = settings.baseimageurl;
		popup = settings.popup.toString().substring(1, settings.popup.toString().length);
		offset = settings.offset;
		popupWidth = settings.width;
		setup(this, settings.marker);
		hover(this, settings.marker, settings.popup);
	};

	function setup(elem, marker) {
		$('li', elem).each(function() {
			$(marker, this).each(function() {
				var coordinates = $(this).attr('title');
				$(this).removeAttr('title');
				var x = parseInt(coordinates.split(',')[0]);
				var y = parseInt(coordinates.split(',')[1]);
				$(this).css('top', y);
				$(this).css('left', x);
			});
		});
		$('img', elem).each(function() {
			$(this).attr('id', $(this).attr('alt'));
			$(this).removeAttr('alt');
		});
	};

	function hover(elem, marker, popup) {
		var src = '';
		var markerClass = marker.toString().substring(1, marker.toString().length);
		var popupClass = popup.toString().substring(1, popup.toString().length);
		$('.content', elem).mouseover(function(event) {
			var mat = $(this);
			if ($(event.target).attr('nodeName').toLowerCase() == 'img' && $(event.target).parent('div').hasClass(markerClass)) {
				//debugger;
				var image = $(event.target);
				var target = $(event.target).parent('div');
				var id = (image).attr('id');
				//$(image).attr('src', imageUrl + '/on/' + id + '.png');
				var tip = $('<div></div>').attr('class', popupClass);
				$(tip).css('width', popupWidth);
				var x = parseInt($(target).css('left'));
				var y = parseInt($(target).css('top'));
				var span = $('span', target).html();
				$(tip).html(span);
				$(mat).append(tip);
				popupBorder = parseInt($(tip).css('border-left-width'));
				popupPadding = parseInt($(tip).css('padding-left'));
				x = setMarkerPosition(x, marker, elem);
				var offsetTop = event.pageY - $(event.target).offset().top;
				var offsetLeft = event.pageX - $(event.target).offset().left;
				$(tip).css('left', x + offsetLeft);
				$(tip).css('top', y + 20 + offsetTop);

				$(tip).fadeIn('fast');
				//debugger;
				//alert($(elem).offset().top);
			}
		});
		$('li', elem).mouseout(function(event) {
			if ($(event.target).attr('nodeName').toLowerCase() == 'img' && $(event.target).parent('div').hasClass(markerClass)) {
				$(popup).fadeOut('fast', function() {
					$(this).remove();
				})
				var image = $(event.target);
				var id = $(image).attr('id');
				//$(image).attr('src', imageUrl + '/' + id + '.png');
			}
		});
	};

	function setMarkerPosition(x, marker, elem) {
		//debugger;
		var bodyWidth = $('body').innerWidth();
		var left = $(elem).offset().left;
		var markerWidth = $(marker).width();
		if ((x + popupWidth + (2 * popupPadding) + (2 * popupBorder) + left + offset + markerWidth) > bodyWidth) {
			x = x - popupWidth - (2 * popupBorder);
		}
		else {
			x = x + (markerWidth / 2);
		}

		return x;
	}
})(jQuery);