$(function(){  
    var startdivtooltip = '<div class="tooltip"><span class="spantooltip"><img src="../../images/v2/feature/Info.png" alt="Information" width="48" height="48">';
    var enddivtooltip ='</span></div>';
    
    // Start Building Your Feature
    var textlivedate = '<em>Live Date</em>This is the date when your feature will appear on the Yoosk site.';  
    var textclosedate = '<em>Closing date for questions</em>This is the last date that you will accept questions. After this date the ‘Yoosk a question’ buttons will disappear.';
    var textfeaturetitle ='<em>Feature Title</em>Will be displayed at the top of your feature. Try to choose something short and snappy.';
    var textfeatureimage = '<em>Feature Image</em>This will appear at the top of your page and should be topical to your feature. Image should be no larger than 2mb and 800 by 800 pixels.';
    var textfeaturethumbnail = '<em>Feature Thumbnail</em>This is the image which will be displayed if your feature is on the home page. The image should be no more than 2mb in size and 399 by 399 pixels.';
    var textintroduction ='<em>Introduction</em>This text will display on your feature page and should be used to let users know what your feature is about.';
    
    var livedate = startdivtooltip + textlivedate + enddivtooltip;
    var closedate = startdivtooltip + textclosedate + enddivtooltip;
    var featuretitle = startdivtooltip + textfeaturetitle + enddivtooltip;
    var featureimage = startdivtooltip + textfeatureimage + enddivtooltip;
    var featurethumbnail = startdivtooltip + textfeaturethumbnail + enddivtooltip;
    var introduction = startdivtooltip + textintroduction + enddivtooltip;
    
    // Add Interviewees To Question
    var textinterviewee = '<em>Add some Interviewees to Question</em>On this page you will add people to your feature. If the people are on our database already, when you type their name, the name will autocomplete and you simply click the ‘add’ button. If they are not on our database, you will need to add images and details for them.';
    var textname = '<em>Name</em>Please enter first followed by second name and do not include any titles. If the name autocompletes, this means that this person is on our database already and it is not necessary to add a job title or image - you only need to click ‘add’.';
    var textoccupation = '<em>Occupation</em>Job title.';
    var textphoto = '<em>Photo</em>When you add somebody to our database we will create a new page for them and this photo will be displayed on that page and also on your feature page. Images should be no larger than 2mb in size and 399 by 399 pixels.';
    var textlinks = '<em>Links</em>Use this to add links to the person’s own website, blog, Facebook etc page.';
    var textpanel = '<em>Panel Members added</em>This box will display the names of people you have added. Maximum number is six.';
    
    var interviewee = startdivtooltip + textinterviewee + enddivtooltip;
    var name = startdivtooltip + textname + enddivtooltip;
    var occupation = startdivtooltip + textoccupation + enddivtooltip;
    var photo = startdivtooltip + textphoto + enddivtooltip;
    var links = startdivtooltip + textlinks + enddivtooltip;
    var panel = startdivtooltip + textpanel + enddivtooltip;
    
     
    // Show (create) the tooltip.
    var toolTipLiveDate = function(event) 
    {          	
      $('div.tooltip').remove();
      $(livedate).appendTo('#BuildingYourFeature');
	  showtooltipsleft($('#livedate'));
    };
    
    var toolTipCloseDate = function(event) 
    { 	
      $('div.tooltip').remove();
      $(closedate).appendTo('#BuildingYourFeature');
        showtooltipsright($('#closedate'));
    };
    
    var toolTipFeatureTitle = function(event) 
    { 	
      $('div.tooltip').remove();
      $(featuretitle).appendTo('#BuildingYourFeature');
      showtooltipsleft($('#featuretitle'));
    };
    
    var toolTipFeatureImage = function(event) 
    { 	
      $('div.tooltip').remove();
      $(featureimage).appendTo('#BuildingYourFeature');
      showtooltipsleft($('#featureimage'));
    };
    
    var toolTipFeatureThumbnail = function(event) 
    { 	
      $('div.tooltip').remove();
      $(featurethumbnail).appendTo('#BuildingYourFeature');
	  
	  showtooltipsleft($('#featurethumbnail')); 
    };
    
    var toolTipIntroduction = function(event) 
    { 	
      $('div.tooltip').remove();
      $(introduction).appendTo('#BuildingYourFeature');
	 
	 showtooltipsleft($('#introduction')); 
    };
    
    var toolTipInterviewee = function(event) 
    { 	
      $('div.tooltip').remove();
      $(interviewee).appendTo('#addInterviewee');
	  showtooltipscenter($('#interviewee')); 
    };
    
    var toolTipName= function(event) 
    { 	
      $('div.tooltip').remove();
      $(name).appendTo('#addInterviewee');
	  showtooltipsleft($('#findBoxId')); 
    };
    
    var toolTipOccupation= function(event) 
    { 	
      $('div.tooltip').remove();
      $(occupation).appendTo('#addInterviewee');
	  showtooltipsleft($('#occupation')); 
    };
    
    var toolTipPhoto= function(event) 
    { 	
      $('div.tooltip').remove();
      $(photo).appendTo('#addInterviewee');
	  showtooltipsleft($('#addinterphoto')); 
    };
    
    var toolTipLinks= function(event) 
    { 	
      $('div.tooltip').remove();
      $(links).appendTo('#addInterviewee');
	  showtooltipsleft($('#links')); 
    };
    
    var toolTipPanel= function(event) 
    { 	
      $('div.tooltip').remove();
      $(panel).appendTo('#addInterviewee');
	  showtooltipsright($('#divmemberpanel')); 
    };
    
    var hideTooltip = function(event)
    {
        $('div.tooltip').remove();
    }
            
    // Building Feature
    $('#livedate').hover(toolTipLiveDate, hideTooltip);   
    $('#closedate').hover(toolTipCloseDate, hideTooltip);
    $('#featuretitle').hover(toolTipFeatureTitle, hideTooltip);
	$('#featureimage').hover(toolTipFeatureImage, hideTooltip);
	$('#featurethumbnail').hover(toolTipFeatureThumbnail, hideTooltip);
	$('#introduction').hover(toolTipIntroduction, hideTooltip);
	
	//Add Interviewee
	$('#interviewee').hover(toolTipInterviewee, hideTooltip);
	$('#findBoxId').hover(toolTipName, hideTooltip);
	$('#occupation').hover(toolTipOccupation, hideTooltip);
	$('#addinterphoto').hover(toolTipPhoto, hideTooltip);
	$('#links').hover(toolTipLinks, hideTooltip);
	$('#divmemberpanel').hover(toolTipPanel, hideTooltip);
	
	//Romove tooltips
	$('#livedate').keyup(function() {
	    $('div.tooltip').remove();
	});
	$('#closedate').keyup(function() {
	    $('div.tooltip').remove();
	});
	$('#featuretitle').keyup(function() {
	   $('div.tooltip').remove();
	});
	$('#introduction').keyup(function() {
	   $('div.tooltip').remove();
	});	
	$('#occupation').keyup(function() {
	   $('div.tooltip').remove();
	});
	$('#links').keyup(function() {
	   $('div.tooltip').remove();
	});
});
/**
* Position the tooltip. *
*/


function showtooltipsleft(id)
{
    var tPosX = $(id).position().left - 10; 
 	var tPosY =  $(id).position().top + 10 ;
 	$('div.tooltip').css({top: tPosY, left: tPosX}); 
}

function showtooltipsright(id)
{
    var tPosX = $(id).position().left - 150; 
 	var tPosY =  $(id).position().top + 10 ;
 	$('div.tooltip').css({top: tPosY, left: tPosX}); 
}    

function showtooltipscenter(id)
{
    var tPosX = $(id).position().left + 180; 
 	var tPosY =  $(id).position().top + 10 ;
 	$('div.tooltip').css({top: tPosY, left: tPosX}); 
}