jQuery(document).ready(function(){

    var tooltipHeight     = parseInt(jQuery('.tooltip-background > img').css('height'));
    var tooltipWidth      = parseInt(jQuery('.tooltip-background > img').css('width'));

    jQuery("div.tooltip-box").bind({
        mouseenter: function(){

						jQuery(this).find('.tooltip-content-wrapper').addClass('transform');
						jQuery(this).find('.tooltip-icon').addClass('active');

						var orgLeft = parseInt(jQuery(this).css('left'));
            var orgTop  = parseInt(jQuery(this).css('top'));

						var tooltipboxHeight	= parseInt(jQuery('.transform .tooltip-content').css('height'));
						var tooltipboxWidth		= parseInt(jQuery('.transform .tooltip-content').css('width'));

						var borderTopHeight			= parseInt(jQuery('.transform .top').css('height'));
						var borderBottomHeight	= parseInt(jQuery('.transform .bottom').css('height'));

						var iconHeight = parseInt(jQuery('.tooltip-icon.active > img').css('height'));
						var iconWidth	 = parseInt(jQuery('.tooltip-icon.active > img').css('width'));

						var maxTopDiff	= (tooltipHeight - (tooltipboxHeight + iconHeight));
						var maxLeftDiff	= (tooltipWidth - (tooltipboxWidth + iconWidth));

						jQuery(this).css('zIndex', 99);
						jQuery('.transform .tooltip-content').css({marginTop: iconHeight+'px',marginBottom: iconHeight+'px',marginLeft: iconWidth+'px',marginRight: iconWidth+'px'});
						jQuery('.transform .tooltip-content .middle').css({height: (tooltipboxHeight - (borderTopHeight + borderBottomHeight)) + 'px'});
						jQuery('.transform').css({height: '0px',width:'0px'}).show();


            if (orgLeft >= maxLeftDiff && orgTop >= maxTopDiff ) {
               jQuery('.transform').animate({
                    top: (-tooltipboxHeight - iconHeight) + 'px',
                    left: (-tooltipboxWidth - iconWidth) + 'px',
                    height:	(tooltipboxHeight + iconHeight) + 'px',
										width:	(tooltipboxWidth + iconWidth + iconWidth) + 'px'
                }, {
                    duration: 400,
                    queue: false
                });
            } else if(orgTop >= maxTopDiff){
                jQuery('.transform').animate({
                    top: (-tooltipboxHeight - iconHeight) + 'px',
                    height:	(tooltipboxHeight + iconHeight) + 'px',
										width:	(tooltipboxWidth + iconWidth + iconWidth) + 'px'
                }, {
                    duration: 400,
                    queue: false
                });
            } else if (orgLeft >= maxLeftDiff){
                jQuery('.transform').animate({
                    left: (-tooltipboxWidth - iconWidth) + 'px',
                    height:	(tooltipboxHeight + iconHeight) + 'px',
										width:	(tooltipboxWidth + iconWidth + iconWidth) + 'px'
                }, {
                    duration: 400,
                    queue: false
                });
            } else {
                jQuery('.transform').animate({
                    height:	(tooltipboxHeight + iconHeight) + 'px',
										width:	(tooltipboxWidth + iconWidth) + 'px'
                }, {
                    duration: 400,
                    queue: false
                });
            }
        }
        ,
        mouseleave: function(){
            if(jQuery('.transform').size() > 0){
                jQuery('.transform').animate({
                    top: 0,
                    left: 0,
                    width: 0,
                    height: 0
                }, {
                    duration: 400,
                    queue: false,
										complete: function(){
											jQuery(this).css('zIndex', 5);
										}
								});
            }
						jQuery(this).css('zIndex', 5);
						jQuery(this).find('.tooltip-content-wrapper').removeClass('transform');
						jQuery(this).find('.tooltip-icon').removeClass('active');
        }
    });
});