// M E T H O D IT HOMEPAGE SOLUTIONS MENU JS

//// VARS
var tooltipShowing=false;

//// JQUERY INIT.
$(document).ready(function() {
	
	initSolutionsMenu();
	
});


////RESIZE WINDOW HANDLER
$(window).resize(function(){
	if(tooltipShowing){
		closeTooltip();
	};
});

//// DEVICE ORIENTATION CHANGES
window.onorientationchange=function(){
	if(tooltipShowing){
		closeTooltip();
	};
};

//// FUNCTIONS 

////initialize solutions 
function initSolutionsMenu(){
	
		//append tooltip to html
	$('body').append('<div id="tooltip"><a href="#" class="closeBtn" id="tooltipCloseBtn">'+languageHelper.strings.btnClose+'</a><h2>&nbsp;</h2><div id="tooltipContent">Solution description goes here</div></div><canvas width="10" height="5" id="tooltipPoint"></canvas>');
	$('#tooltip').hide();
	$('#tooltipPoint').hide();
	//append floating logo to html
	$('body').append('<div id="floatingLogo"><img src="/images/hdr_logo_method_it_text.png"/></div>');
	showFloatingLogo(false);
	
	//append highlight box to html
	$('body').append('<div id="hiBox"><span>&nbsp;</span></div>');
	$('#hiBox').hide();
	
	//append dark background to html
	$('body').append('<div id="shadow">&nbsp;</div>');
	adjustShadowSize();
	$('#shadow').hide();
	
	//button/link actions
	
	//deep linking on all but external links
	$('#solutionsNav a').not(".external").address();
	
	$('#tooltip #tooltipCloseBtn').click(function(){
		fadeOutTooltip();
		return false;
	});
	
	$('#shadow').click(function(){
		fadeOutTooltip();
	});	
	
	$('#hiBox').click(function(){
		fadeOutTooltip();
	});	
	
	$('#tooltip .pdfLink').live('click', function(){
		window.open($(this).attr('href'));
		return false;
	});
	
	$('#tooltip .contactLink').live('click', function(){
		$('#siteNavButtons a.contact').click();
		return false;
	});		
	
	//solutions button actions
	$('#solutionsNav a').click(function(){	
		
		//external link
		if($(this).hasClass('external')){
			window.open($(this).attr('href'));
		} else{
			//tooltip link
			showTooltip($(this));
		}
		return false;		
	});	
	//end button/link actions

}
////end init fn


////display tooltip

function showTooltip(theLink){
	
		resetOtherComponents('solutions');
	
		tooltipShowing=true;

		//get variables from link
		var bgColour=theLink.css('background-color');
		var contentId=theLink.data('idnum');
		
		//draw point of tooltip and colour-in
		drawTooltipPoint(bgColour);
		
		//colour highlight box and tooltip box
		$('#hiBox').css('background-color', bgColour);
		$('#tooltip').css('background-color', bgColour);
		
		//set tooltip panel size
		var panelWidth=$('#solutionsNavList').width()-parseInt($('#solutionsNavList > li:last').css('margin-left'));
		$('#tooltip').css('width', panelWidth+"px");
									  
		//text for hi box		
		var titleText=theLink.html();
		$('#hiBox span').html(titleText);
		
		//fade bg to black
		adjustShadowSize();
					showFloatingLogo(true);
		$('#shadow').fadeTo(100,0.85,function(){
			$('#tooltip').slideDown(10, function(){
				loadTooltipContent(contentId);
			});
			$('#tooltipPoint').show();
			$('#hiBox').show();
			positionTooltip(theLink);			
		});	
};

///position tooltip and pointer under the link clicked
function positionTooltip(theLink){
	
	//move tooltip to link
		
		var trgW=theLink.outerWidth();
		var trgH=theLink.outerHeight();
		
		var trgX= theLink.offset().left;
		var trgY= theLink.offset().top;
		
		var pointW=$('#tooltipPoint').outerWidth();
		var pointH=$('#tooltipPoint').outerHeight();
		
		var pointX= trgX+trgW-(trgW+pointW)/2;
		var pointY= trgY+trgH;		
		
		var tipW= $('#tooltip').outerWidth();
		var tipH= $('#tooltip').outerHeight();
		
		//var tipX= trgX+trgW-(trgW+tipW)/2;
		var tipX= $('#solutionsNavList').offset().left;
		var tipY= trgY+trgH+pointH;
		
		$('#tooltipPoint').css({
			left: pointX + 'px',
			top:  pointY + 'px'
		});		
		
		$('#tooltip').css({
			left: tipX + 'px',
			top:  tipY + 'px'
		});
	
	
		//resize and reposition highlight box
		$('#hiBox').css({
			left: trgX + 'px',
			top:  trgY + 'px',
			width: trgW + 'px',
			height: trgH + 'px'
		});
		
};

////close tooltip, revert to page
function closeTooltip(){
	$('#shadow').hide();
		$('#hiBox').hide();
		showFloatingLogo(false);
		$('#hiBox span').empty();
		$('#tooltip h2').empty();
		$('#tooltipContent').empty();
		$('#tooltip').hide();
		$('#tooltip').css({
			left: '0px',
			top:  '0px'
		});
		$('#tooltipPoint').hide();
		tooltipShowing=false;
}

//close tooltip with smooth fade animation
function fadeOutTooltip(){
	$('#shadow').fadeTo(100,0, function(){
		closeTooltip();
	});
}

////adjust bg shadow to fit window
function adjustShadowSize(){
		
	var docW=$(document).width();
	var docH=$(document).height();
		
	if ($.browser.msie) {
		var docW=$(window).width();
		var docH=$(window).height();
 	}
		
	$('#shadow').css({
		'width': docW,						 
		'height': docH
	});

}

//draw point of tooltip
function drawTooltipPoint(clr){
		
	var drawingCanvas = document.getElementById('tooltipPoint');

	if(drawingCanvas.getContext) {
    	var context = drawingCanvas.getContext('2d');
		context.fillStyle = clr;
		context.beginPath();
		context.moveTo(0, 5);
		context.lineTo(5, 0);
		context.lineTo(10, 5);
		context.lineTo(0, 5);
		context.closePath();
		context.fill();
	};
}

//erase point of tooltip
function resetTooltipPoint(){
	var drawingCanvas = document.getElementById('tooltipPoint');
	drawingCanvas.width=drawingCanvas.width;
}

//add footer links to tooltip content
function addTooltipFooter(extLink){
	var footerHtml=$('<div id="tooltipFooter"><a class="extLink pdfLink">'+languageHelper.strings.downloadPdf+'</a><a class="contactLink" href="#">'+languageHelper.strings.contactUs+'</a></div>');
	
	if(extLink.length && extLink!=" "){
		$("a.extLink", footerHtml).attr('href', ASSETS_DIR+extLink);
	} else {
		$("a.extLink", footerHtml).remove();
	}
	$("#tooltipContent").append(footerHtml);
}


//switch header logo with floating version
function showFloatingLogo(toggle){
	if(toggle){
		$('#floatingLogo').show().css({
			left: $('h1').offset().left + 'px',
			top:  $('h1').offset().top + 'px'
		});	
		$('h1').css("opacity",0);
	} else{
		$('#floatingLogo').hide();
		$('h1').css("opacity",1);
	}
}

//// EXT. DATA FUNCTIONS

//load xml content
function loadTooltipContent(id){
	//show loading message/animation
	$('#tooltip h2').show().html(LOADING_IMG);
	$('#tooltipContent').hide();

	$.ajax({
   		type: "GET",
   		url: FEED_URL+id,
   		dataType: "xml",
   		success: function(data){
		 var contentExists=$(data).find("item").length;
		 (contentExists)? parseTooltipData(data) : failTooltipData();
		},
		error: failTooltipData
  	});		
}

//xml success handler
function parseTooltipData(xml){
    var auxContent = '';
	 
	$("#tooltip h2").hide(); 
		 
	var solutionList=$('<ul class="solutionContent"></ul>');
	 
	var isSingleColumn=$(xml).find("singlecolumn").text();	 

	if (isSingleColumn == "true"){
	 	$(solutionList).addClass('singleColumn');
	} else{
		$(solutionList).addClass('twoColumn');
	};
		 
	$(xml).find("item").each(
	function(i){
		var listItem=$('<li><h3></h3><p></p></li>');
		var imagePath=ASSETS_DIR;
		var itemImage=$(this).find('image').text();
		var itemTitle=$(this).find('title').text();
		var itemBody=$(this).find('body').text();
		if(itemImage.length && itemImage!=" "){
			$(listItem).css("background-image", "url('"+imagePath+itemImage+"')").addClass('icon');
		};
		$('h3',listItem).html(itemTitle);
		$('p',listItem).html(itemBody);
		$(solutionList).append(listItem);

        auxContent += itemBody; //gather all items body
	});
	
	$("#tooltipContent").html($(solutionList));
		
	var pdfUrl=$(xml).find("pdf").text();
	addTooltipFooter(pdfUrl);
	
	var contentHeight=$("#tooltipContent").height();
	$("#tooltipContent").slideDown(contentHeight*0.5);	
	
    // Modify metatags with 
    pageContent = (auxContent.length <= 160) ? auxContent : auxContent.substr(0,160);
    $('meta[name=description]').attr('content', pageContent.replace(/(<([^>]+)>)/ig,""));
    var pageTitle = $(xml).find('pagetitle').text();
    $('title').text(pageTitle);
}

//xml failure handler
function failTooltipData(){
	
	var errorTitle;
	var errorBody;
	
	try{
		errorTitle=languageHelper.strings.loadErrorSolutionsTitle;
		errorBody=languageHelper.strings.loadErrorSolutionsBody;
	} catch(err) {
		errorTitle="Error";
		errorBody="Unable to load content, please try again";		
	}
	
	$("#tooltip h2").show().text(errorTitle);
	$("#tooltipContent").html(errorBody).slideDown();
	
}