$(document).ready(function() {
	//use javascript drop down menus over css
	$('ul').removeClass('vNav');
	//clear search bar
	$("#search").focus(function() {
		if ($(this).attr("value") == $(this).attr("rel")){
			$(this).attr("value", '');
		}
	});
	$("#search").blur(function() {
		if ($(this).attr("value") == ""){
			var val = $(this).attr("rel");
			$(this).attr("value", val);
		}
	});
	
	//navigation drop down menus
	$("#navigation li").hover(function() {
		$('.subNavigation', this).stop(true, true).show();
	},
	function() {
		$('.subNavigation', this).stop(true, true).hide();
	});
	//increase method size
	$("#method li").click(function() {
		$("#method li").css('font-size', '12px').css('font-weight', 'normal').css('padding-top', '10px').css('padding-bottom', '10px');
		$(this).css('font-size', '14px').css('font-weight', 'bold').css('padding-top', '15px').css('padding-bottom', '15px');
	});
	$('#allReviews').click(function(){
		$('.hiddenReview').toggle();
		return false;
	});
	//print recipe			
	$("#printRecipe").click(function(){
		window.print();
		return false;
	});
	//external link
	$('a[rel="external"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
    });
	
	//quick tips for recipes
		$('.recipeTip li a').stop(true, true).each(function(){
	   $(this).qtip({
			  //this line is causing the problem:
			  content: '<img src="'+$(this).attr('rel')+'"/>',
			  show: 'mouseover',
			  hide: 'mouseout',
			  position: {
			  corner: {
			   target: 'middleRight',
			   tooltip: 'middleLeft'
			   },
			  adjust: {
			  x: 15,
			  y: -4
			  }
			  },
			style: { 
				padding: 0,
				background: '#ffffff',
				color: 'white',
				textAlign: 'center',
				border: {
				  width: 5,
				  radius: 5,
				  color: '#D0D2EA'
				},
			   tip: { // Now an object instead of a string
			   corner: 'leftTop', // We declare our corner within the object using the corner sub-option
			   color: '#D0D2EA',
			   size: {
				 x: 20, // Be careful that the x and y values refer to coordinates on screen, not height or width.
				 y : 15 // Depending on which corner your tooltip is at, x and y could mean either height or width!
					}
				   }
			  }
		   });
		});
	//quick tips
		$('.showTip').stop(true, true).each(function(){
	   $(this).qtip({
			  //this line is causing the problem:
			  content: '<img src="'+$(this).attr('rev')+'"/>',
			  show: 'mouseover',
			  hide: 'mouseout',
			  position: {
			  corner: {
			   target: 'middleRight',
			   tooltip: 'middleLeft'
			   },
			  adjust: {
			  x: 15,
			  y: -4
			  }
			  },
			style: { 
				padding: 0,
				background: '#ffffff',
				color: 'white',
				textAlign: 'center',
				border: {
				  width: 5,
				  radius: 5,
				  color: '#D0D2EA'
				},
			   tip: { // Now an object instead of a string
			   corner: 'leftTop', // We declare our corner within the object using the corner sub-option
			   color: '#D0D2EA',
			   size: {
				 x: 20, // Be careful that the x and y values refer to coordinates on screen, not height or width.
				 y : 15 // Depending on which corner your tooltip is at, x and y could mean either height or width!
					}
				   }
			  }
		   });
		});
});