$(document).ready(function() {
	Stack.init();
});

var Stack = {
	activeTip: { num: null, el: null },
	openTip: { num: null, el: null, startPosition: null },
	expandDuration: 600,
	windowPadding: { width: 10, height: 20 },
	fixedPosition: [{left: 'center'}],
	init: function() {
		Stack.addTip(".hit_point");
		Stack.preloadImages();
	},
	preloadImages: function() {
		var images = ['images/tooltip/tooltip_bottom_left', 
									'images/tooltip/tooltip_top_right',
									'images/tooltip/tooltip_bottom_right_bg',
									'images/tooltip/tooltip_top_left_bg'
								];
		var ext = '.png';
		if(jQuery.browser['msie'] && jQuery.browser.version == 6.0) {
			ext = '.gif';
		}
		for(var i = 0; i < images.length; i++) {
			var img = new Image();
			img.src = images[i]+ext;
		}
		
		//load tabs
		for(i = 1; i < $('.tip').length; i++) {
			var img = new Image();
			str = (String(i).length == 1) ? String('0'+i) : String(i);
			img.src = 'images/tabs/sub'+str+'.gif';
		}
	},
	addTip: function(selector) {
		$(selector).mouseover(Stack.showTip);
		$(selector).click(Stack.onTipClick);
	},
	showTip: function(e) {
		var tipNum = Stack.parseTipnum(this.id);
		Stack.setActiveTip(tipNum);
		Stack.updateTip(e);
		Stack.activeTip.el.css({ display: 'block', 'z-index': 1000 });
		$(document).mousemove( Stack.updateTip );
		$(this).mouseout( Stack.hideTip );
	},
	updateTip: function(e) {
		var leftPos = e.pageX + 10;
		var topPos = e.pageY - ( Stack.activeTip.el.outerHeight(true) + 10 );
		var windowWidth = $(window).width();
		if(jQuery.browser['safari']) {
			windowWidth = windowWidth - 15;
		}
		
		if( ( leftPos + Stack.activeTip.el.outerWidth(true) ) > ( $(document).scrollLeft() + windowWidth ) ) {
			leftPos = e.pageX - ( Stack.activeTip.el.outerWidth(true) + 10 );
		}
		
		if( topPos < ( $(document).scrollTop() + 5 ) ) {
			topPos = ( $(document).scrollTop() + 5 )
		}
		
		Stack.activeTip.el.css({ left: leftPos, top: topPos });
	},
	hideTip: function() {
		if(Stack.activeTip.el != null) {
			Stack.activeTip.el.css({display: 'none'});
			$(Stack.activeTip).unbind( 'mouseout', Stack.hideTip );
			$(document).unbind('mousemove', Stack.updateTip );
			Stack.setActiveTip(null);
		}
	},
	setActiveTip: function(tipNum) {
		if( tipNum != null ) {
			Stack.activeTip.num = tipNum;
			Stack.activeTip.el = $('#tip_'+tipNum);
		} else {
			Stack.activeTip.num = null;
			Stack.activeTip.el = null;
		}
	},
	setOpenTip: function(tipNum) {
		if( tipNum != null ) {
			Stack.openTip.num = tipNum;
			Stack.openTip.el = $('#tip_'+tipNum);
			Stack.openTip.startPosition = null;
		} else {
			Stack.openTip.num = null;
			Stack.openTip.el = null;
			Stack.openTip.startPosition = null;
		}
	},
	onTipClick: function(e) {
		if( Stack.activeTip.num != null && Stack.parseTipnum(this.id) != Stack.openTip.num ) {
			if( Stack.openTip.el != null ) {
				Stack.closeTip();
			}
			Stack.expandTip(e);
		}
		return false;
	},
	expandTip: function(e) {
		Stack.setOpenTip( Stack.activeTip.num );
		Stack.setActiveTip( null );
		
		$(e.target).unbind('mouseover', Stack.showTip );
		$(e.target).unbind('mouseout', Stack.hideTip );
		$(document).unbind('mousemove', Stack.updateTip );
		
		var tipPosition = Stack.openTip.el.position();
		
		var moreInfo = Stack.openTip.el.find('.more_info');
		var animateParams = { width: null, height: null };
		
		animateParams['width'] = moreInfo.width();
		animateParams['height'] = moreInfo.height();
		
		var animateContainer = {};
		var currentWidth = Stack.openTip.el.outerWidth(true);
		var newTotalWidth = ( ( currentWidth - Stack.openTip.el.find('.content').width() ) + animateParams['width'] ); 
		
		var windowWidth = $(window).width();
		if(jQuery.browser['safari']) {
			windowWidth = windowWidth - 15;
		}
		
		animateContainer['left'] = tipPosition.left;
		
		if( animateContainer['left'] < ( ( windowWidth / 2 ) - 25 ) ) {
			animateContainer['left'] = (animateContainer['left'] + currentWidth ) - newTotalWidth;
		}
		
		if( (animateContainer['left'] + newTotalWidth) > ( $(document).scrollLeft() + windowWidth - Stack.windowPadding['width'] ) ) {
			animateContainer['left'] = ( ( $(document).scrollLeft() + windowWidth - Stack.windowPadding['width'] ) - newTotalWidth );
		}
		
		if( animateContainer['left'] < ( $(document).scrollLeft() + Stack.windowPadding['width'] ) ) {
			animateContainer['left'] = $(document).scrollLeft() + Stack.windowPadding['width'];
		}
		
		/*Overwrite Calculated Position for Fixed position*/
		if(Stack.fixedPosition[Stack.openTip.num]) {
			animateContainer['left'] = Stack.fixedPosition[Stack.openTip.num].left;
		}
		
		if(animateContainer['left'] == 'center') {
			animateContainer['left'] = ($(document).scrollLeft() + windowWidth - Stack.windowPadding['width']) / 2 - (newTotalWidth/2);
		}
		
		var newTotalHeight = ( ( Stack.openTip.el.outerHeight(true) ) + animateParams['height'] );
		if( (tipPosition.top + newTotalHeight) > ( $(document).scrollTop() + $(window).height() - Stack.windowPadding['height'] ) ) {
			animateContainer['top'] = ( ( $(document).scrollTop() + $(window).height() - Stack.windowPadding['height'] ) - newTotalHeight );
			if( animateContainer['top'] < ( $(document).scrollTop() + Stack.windowPadding['height'] ) ) {
				animateContainer['top'] = ( $(document).scrollTop() + Stack.windowPadding['height'] );
			}
		}
		
		Stack.openTip.el.css('z-index', 900);
		moreInfo.css({ width: 1, height: 1 });
		moreInfo.css('display', 'block');
		moreInfo.animate( animateParams, Stack.expandDuration );
		if( animateContainer['top'] != undefined || animateContainer['left'] != undefined ) {
			Stack.openTip.startPosition = tipPosition;
			Stack.openTip.el.animate( animateContainer, Stack.expandDuration ); 
		}
		
	},
	closeTip: function() {
		var animateParams = { width: 0, height: 0 };
		if(Stack.openTip.startPosition != null) {
			animateParams['top'] = Stack.openTip.startPosition.top;
			animateParams['left'] = Stack.openTip.startPosition.left;
		}
		
		Stack.openTip.el.animate( animateParams, Stack.expandDuration, null, Stack.closedTip );
		Stack.setOpenTip(null);
	},
	closedTip: function() {
		el = $(this);
		el.css({ display: 'none', height: 'auto', width: 'auto' });
		el.find('.more_info').css({ display: 'none' });
		
		var tipNum = parseInt(el.get(0).id.replace(/tip_/, ''));
		$('#hit_point_'+tipNum).mouseover(Stack.showTip);
	},
	parseTipnum: function(id) {
		return parseInt(id.replace(/hit_point_/, ''));
	}
}