var globalIsBrowse = false;

function JTipImg()
{
	var elems = [];
	var secondsBeforeShow = .5
	var timeoutBeforeShow;

	var _mouse = {};
	var tpl = {};

	var mainElem;

	var id = {};
	id.name = 'jtip';
	id.main = id.name + '-main';
	id.title = id.name + '-title';
	id.cat = id.name + '-cat';
	id.image = id.name + '-image';
	id.content = id.name + '-content';

	var isBrowse;

	var template = 	$('<div id="' + id.main + '" class="jtip-main">'
					+	'<div id="' + id.title + '" class="jtip-title"></div>'
					+	(id.cat ? '<div id="' + id.cat + '" class="jtip-content"></div>' : '')
					+	'<div id="' + id.image + '" class="jtip-image"></div>'
					+	'<div id="' + id.content + '" class="jtip-content"></div>'
					+'</div>');

	var IE = $.browser.msie ? true : false;
	if(!IE) document.captureEvents(Event.MOUSEMOVE);

	function doToolTip(s)
	{
		isBrowse = location.href.indexOf('browse_games.php') < 0 ? false : true;

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

		$s = $(s).mouseover(function(){ over($(this)); })
			.mouseout(function(){ out($(this)); });

		if($s.parent().find('a:eq(1)')[0] && location.href.indexOf('browse_games.php') < 0)
		{
			isBrowse = true;
			$s.parent().find('a:eq(1)')
				.mouseover(function(){ over($(this).parents('div:eq(0)').find('a:has(img)')); })
				.mouseout(function(){ out($(this).parents('div:eq(0)').find('a:has(img)')); });
		 	//$s
		}


		mainElem = $('#'+id.main);

		tpl.width = tpl.width ? tpl.width : mainElem.width();

		document.onmousemove = mousemove;
	}

	function over(elem)
	{
		clearTimeout(timeoutBeforeShow);

		var e = elem.find('img')[0];

		if(e)
		{
			$('#'+id.title).html('<strong>' + e.attributes.jttitle.value + '</strong>');
			if(id.cat && e.attributes.jtcat && e.attributes.jtcat.value != 'none')
			{
				$('#'+id.cat).html('<img src="' + e.attributes.jtcat.value + '" />');
			}
			$('#'+id.image).html('<img src="' + e.src.replace('42x31_', '100x75_').replace('65x48_', '100x75_').replace('tmb_', 'shadow_') + '" />');
			$('#'+id.content).html(e.attributes.jtalt.value);
		}
		timeoutBeforeShow = setTimeout(function(){ mainElem.show(); }, secondsBeforeShow*1000);
	}

	function out(e)
	{
		clearTimeout(timeoutBeforeShow);
		mainElem.hide();
	}


	function mousemove(e)
	{
		if (IE) { // grab the x-y pos.s if browser is IE
			_mouse.x = event.clientX + document.documentElement.scrollLeft;
			_mouse.y = event.clientY + document.documentElement.scrollTop;
		} else {  // grab the x-y pos.s if browser is NS
			_mouse.x = e.pageX;
			_mouse.y = e.pageY;
		}
		// catch possible negative values in NS4
		if (_mouse.x < 0){ _mouse.x = 0; }
		if (_mouse.y < 0){ _mouse.y = 0; }
		// show the position values in the form named Show
		// in the text fields named MouseX and MouseY

		t = _mouse.y - 60;
		l = _mouse.x - tpl.width - 25;

		if(l < 0)
		{
			l += tpl.width+50;
			mainElem.children().eq(0).removeClass('show-right-arrow').addClass('show-left-arrow');
		}
		else
		{
			mainElem.children().eq(0).removeClass('show-left-arrow').addClass('show-right-arrow');
		}



		mainElem.css(
		{
			top: 	t,
			left: 	l
		});
	}

	return {
		init: function (selector)
		{
			$(function()
			{
				if($.browser.mozilla)
				{
					doToolTip(selector);
				}
				else
				{
					setTimeout(function(){ doToolTip(selector); }, 3000);
				}
			});
		},

		setTemplate: function(templateHTML)
		{
			isBrowse = location.href.indexOf('browse_games.php') < 0 ? false : true;
			if(globalIsBrowse) isBrowse = globalIsBrowse;

			if( (templateHTML.indexOf('=title=') && templateHTML.indexOf('=content=')) >= 0 )
			{
				templateHTML = templateHTML.replace('=title=', '<div id="' + id.title + '" class="jtip-title"></div>');
				templateHTML = templateHTML.replace('=cat=', '<div id="' + id.cat + '" class="jtip-cat"></div>');
				templateHTML = templateHTML.replace('=image=', '<div id="' + id.image + '" class="jtip-image '+(isBrowse ? 'browse' : 'game')+'"></div>');
				templateHTML = templateHTML.replace('=content=', '<div id="' + id.content + '" class="jtip-content"></div>');
				template = '<div id="' + id.main + '" class="jtip-main">' + templateHTML + '</div>';

				return 1;
			}
			else
			{
				return 'Missing =title= or =content=';
			}
		},

		getElements: function(){ return elems; },

		setToLeft: function(){ tpl.width = $('#'+id.main).width(); },

		setToRight: function(){ tpl.width = -30; },

		secToShow: function(sec){ secondsBeforeShow = sec; },

		setName: function(newName)
		{
			id.name = newName;
			id.main = id.name + '-main';
			id.title = id.name + '-title';
			id.cat = id.name + '-cat';
			id.image = id.name + '-image';
			id.content = id.name + '-content';

			template = $('<div id="' + id.main + '" class="jtip-main">'
				+	'<div id="' + id.title + '"></div>'
				+	'<div id="' + id.cat + '"></div>'
				+	'<div id="' + id.image + '"></div>'
				+	'<div id="' + id.content + '"></div>'
				+'</div>');
		}
	}
};