/*-----------------------------------------------------------------------
tooltip JavaScript File

version: 	4.1
author:		sebastian kupke
email:		sebastian.kupke@baral-geohaus.de
website:	http://www.baral.de
-----------------------------------------------------------------------*/

/* =namespace tooltip
-----------------------------------------------------------------------*/
ws.tt = {
	
	// delays
	openDelay: 200,
	closeDelay: 800,
	
	// is mouse over?
	moTt: false,
	moElem: false,
	
	/* =show
	 * @elem The element for the tooltip
	 * @opts.header The header
	 * @opts.headerExt The extension of the header (in brackets, like this ;-))
	 * @opts.content Content
	 * @opts.width Width 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600	default: 300
	-----------------------------------------------------------------------*/
	show: function(elem, opts) {
	
		$(elem).unbind('mouseover');
		$(elem).unbind('mouseout');
		
		/* =element
		-----------------------------------------------------------------------*/
		$(elem).mouseover(function(e) {
			
			// set mouseover flag
			ws.tt.moElem = true;
			
			window.setTimeout(function() {
				
				// check if mouse is really(!!) mouseover, not only short
				if (ws.tt.moElem) {
					
					/* =default values
					-----------------------------------------------------------------------*/
					// header
					var header = '';
					if (opts.header) {
						header = opts.header;
					}
					
					// headerExt
					if (opts.headerExt) {
						header += ' <span class="tt_header_ext">(' + opts.headerExt + ')</span>';
					}
					
					// content
					var content = '';
					if (opts.content && opts.content.constructor == String) {
						content = opts.content;
					} else if (opts.content && opts.content.constructor == Function){
						content = opts.content.call(this);
					}
					
					/* =fill html
					-----------------------------------------------------------------------*/
					$('#tt_header').html(header);
					if (content.match(/.*\S.*/)) {
						$('#tt_content').show();
						$('#tt_content').html(content);
					} else {
						$('#tt_content').hide();
					}
					
					// width
					var nWidth = opts.width ? opts.width : 300;
					$('#tt_div').width(nWidth + 'px');
					$('#tt_header').css('background', 'url(style/' + ws.c.style + '/img/tooltip/top_' + nWidth + '.gif) no-repeat top left');
					$('#tt_content').css('background', 'url(style/' + ws.c.style + '/img/tooltip/bottom_' + nWidth + '.gif) no-repeat bottom left');
					
					/* =get size
					-----------------------------------------------------------------------*/
					var width = $('#tt_div').width();
					var height = $('#tt_div').height();
					
					var wHeight = $(window).height();
					var wWidth = $(window).width();
					
					var x = e ? e.pageX : 0;
					var y = e ? e.pageY : 0;
					
					/* =calculate position
					-----------------------------------------------------------------------*/
					var top = y > wHeight / 2 ? y - height - 15 : y + 15;
					var left = x > wWidth / 2 ? x - width - 15 : x + 15;
					
					// if window is very small, center it in the middle
					if (top < 0 || top + height > wHeight) {
						top = (wHeight / 2) - (height / 2);
					}
					
					if (left < 0 || left + width > wWidth) {
						left = (wWidth / 2) - (width / 2);
					}
					
					// if width of tooltip is larger than window, resize it to window width
					if (width > wWidth) {
						$('#tt_div').width((wWidth - 10) + 'px');
					}
					
					$('#tt_div').css({
						top: top + 'px',
						left: left + 'px'
					});
					
					$('#tt_div').show();
					
					// drag/drop
					$('#tt_div').css('opacity', '1.0');
					$('#tt_header').css('cursor', 'move');
					$('#tt_div').draggable({
						handle: $('#tt_header'),
						opacity: 0.7
					});
				}
			}, ws.tt.openDelay);
			
		}).mouseout(function() {
			
			ws.tt.moElem = false;
			
			ws.tt.hide();
		});
		
		/* =tooltip
		-----------------------------------------------------------------------*/
		$('#tt_div').mouseover(function() {
			
			ws.tt.moTt = true;
			
		}).mouseout(function() {
			
			ws.tt.moTt = false;
			
			ws.tt.hide();
		});
	},
	
	/* =hide
	-----------------------------------------------------------------------*/
	hide: function() {
		window.setTimeout(function() {
			if (!ws.tt.moElem && !ws.tt.moTt) {
				$('#tt_header').html('');
				$('#tt_content').html('');
				$('#tt_div').hide();
				$('#tt_div').draggable('destroy');
			}
		}, ws.tt.closeDelay);
	}
};














