$(document).ready(function() {
	//$('#phone').cluetip({splitTitle: '|', dropShadow: false, cluetipClass: 'rounded', showtitle: false, positionBy: 'bottomTop', topOffset: 20});
	//$('#phone').bt();
	$('#phone').bt({
	  showTip: function(box){
		var $content = $('.bt-content', box).hide(); /* hide the content until after the animation */
		var $canvas = $('canvas', box).hide(); /* hide the canvas for a moment */
		var origWidth = $canvas[0].width; /* jQuery's .width() doesn't work on canvas element */
		var origHeight = $canvas[0].height;
		$(box).show(); /* show the wrapper, however elements inside (canvas, content) are now hidden */
		$canvas
		  .css({width: origWidth * .5, height: origHeight * .5, left: origWidth * .25, top: origHeight * .25, opacity: .1})
		  .show()
		  .animate({width: origWidth, height: origHeight, left: 0, top: 0, opacity: 1}, 400, 'easeOutBounce',
			function(){$content.show()} /* show the content when animation is done */
			);
	  },	
  /* when using hideTip, do NOT forget 'callback' at end of animation */
  hideTip: function(box, callback){
    var $content = $('.bt-content', box).hide();
    var $canvas = $('canvas', box);
    var origWidth = $canvas[0].width;
    var origHeight = $canvas[0].height;
    $canvas
      .animate({width: origWidth * .5, height: origHeight * .5, left: origWidth * .25, top: origHeight * .25, opacity: 0}, 400, 'swing', callback); /* callback */
  },	  	
	  fill: '#383939',
		cornerRadius: 10,
		strokeWidth: 0,
		shadow: true,
		shadowOffsetX: 3,
		shadowOffsetY: 3,
		shadowBlur: 8,
		shadowColor: 'rgba(0,0,0,.9)',
		shadowOverlap: false,
		noShadowOpts: {strokeStyle: '#999', strokeWidth: 2},
		positions: ['left', 'top'],	  
	  cssStyles: {color: '#eaedef',width: '150px','font-family':'Myriad Pro','font-size':'15px','text-align':'center'}});	
	  
	$('#mail').bt({
	  showTip: function(box){
		var $content = $('.bt-content', box).hide(); /* hide the content until after the animation */
		var $canvas = $('canvas', box).hide(); /* hide the canvas for a moment */
		var origWidth = $canvas[0].width; /* jQuery's .width() doesn't work on canvas element */
		var origHeight = $canvas[0].height;
		$(box).show(); /* show the wrapper, however elements inside (canvas, content) are now hidden */
		$canvas
		  .css({width: origWidth * .5, height: origHeight * .5, left: origWidth * .25, top: origHeight * .25, opacity: .1})
		  .show()
		  .animate({width: origWidth, height: origHeight, left: 0, top: 0, opacity: 1}, 400, 'easeOutBounce',
			function(){$content.show()} /* show the content when animation is done */
			);
	  },	
  /* when using hideTip, do NOT forget 'callback' at end of animation */
  hideTip: function(box, callback){
    var $content = $('.bt-content', box).hide();
    var $canvas = $('canvas', box);
    var origWidth = $canvas[0].width;
    var origHeight = $canvas[0].height;
    $canvas
      .animate({width: origWidth * .5, height: origHeight * .5, left: origWidth * .25, top: origHeight * .25, opacity: 0}, 400, 'swing', callback); /* callback */
  },	  	
	  fill: '#383939',
		cornerRadius: 10,
		strokeWidth: 0,
		shadow: true,
		shadowOffsetX: 3,
		shadowOffsetY: 3,
		shadowBlur: 8,
		shadowColor: 'rgba(0,0,0,.9)',
		shadowOverlap: false,
		noShadowOpts: {strokeStyle: '#999', strokeWidth: 2},
		positions: ['left', 'top'],	  
	  cssStyles: {color: '#eaedef',width: '150px','font-family':'Myriad Pro','font-size':'15px','text-align':'center'}});	
});