// JavaScript for Signature Apply page (personal)
//function to create a row
function createRow(rowId) {
	$('<div class="apply-outer gradient-border"><div class="apply-inner leather-background applyleather"><div id="row' + rowId + '" class="apply-content"></div><br clear="all" /></div></div>').appendTo('#allContainer');	
}

// this function creates the bank div for card items to be added. we pass in the bank object and the number in iteration to name the id with
function createBank(bank,bankId,rowId,containerId,containerCSSClass) {
	$('<div id="container-' + containerId + '" class="' + containerCSSClass + '"></div>').appendTo('#row'+rowId);
	$('<a name="' + bank.bankName.substring(0,bank.bankName.indexOf(" ")) + '"></a>').appendTo('#container-'+containerId);
	$('<div class="bankNameHed"><h3>' + bank.bankName + '</h3></div>').appendTo('#container-'+containerId);	
	$('<div id="' + bankId + '" class="bankContainerAll"></div>').appendTo('#container-'+containerId);		
}

// a function to create the card items that will go into the bank. we pass the card and also the iterator for making unique id's
function createCard(card,cardId,bankId,filterType) {
	var cardDiv = '<div class="cardAndHover"><span class="hoverBorderContainer"><img class="cards active" src="/personal/visa-signature/img/cards/' +
	card.imageSrc +
	'" alt="' +
	card.cardTitle +
	'" width="97" height="61" />' +
	'<img src="/img/visa-signature-2/hover_border.png" class="hoverBorderImg" width="101" height="65" /></span></div><br /><p><a href="' +
	card.redirctURL +
	'" title="' +
	card.cardTitle +
	'" target="_blank">' +
	card.cardTitle +
	'</a></p>';

//cardId may need to be reworked to remove quotes from the variable.
	$('<div class="apply-card-container"><div id=' + cardId + ' class="all bankCard ' + filterType.join(" ") + '" >' + cardDiv + '</div></div>').appendTo('#bankID0'+bankId);
				
				
	// loop through the reward type and make img tags for pop up tooltip
	var myFilterIcons ='';
	for(r = 0; r < card.rewardType.length; r++) {
		myFilterIcons = myFilterIcons + '<img class="imgIcon" src="/img/personal/visa-signature/' + card.rewardType[r] + '_icon.png" alt="' + card.rewardType[r] + '" />'; 
	}
				
	// add the div for the tooltip				
	$('#' + cardId.substr(1,cardId.length-2)).prepend('<div class="toolTip"><img src="/img/visa-signature-2/closeicon.png" alt="close" class="closeIcon" />' +
	'<p class="toolTopTitleText">' +
	card.cardTitle +
	'</p><div class="toolTipText">' + card.desc + '</div>' +				
	'<div class="chromeApplyBtnFix toolTipFooter">' +
	myFilterIcons +
	'<a href="' +
	card.redirctURL +
	'" class="toolTipApplyNow" target="_blank"><img src="/img/visa-signature-2/apply_button.jpg" alt="Apply Now"></a></div></div>');
				
				
				
	// add close for event close icon
	$('#' + cardId.substr(1,cardId.length-2) + ' .closeIcon').bind('click',function(event){
		$('#'+cardId.substr(1,cardId.length-2) + ' .toolTip').stop(true,true).hide();
	});
				
				
				
	//add hover state so that we can show the rounded image
	$('#' + cardId.substr(1,cardId.length-2) + ' span').hover(function(){
		if($('#' + cardId.substr(1,cardId.length-2)).hasClass('selectedFilterItem')) {
			return;
		}
		
		//ie6 check
		if(typeof document.body.style.maxHeight === 'undefined') {
			$('#' + cardId.substr(1,cardId.length-2) + ' img.cards').addClass('showHoverBorder');
			return;
		}

		
		$('#' + cardId.substr(1,cardId.length-2) + ' img.hoverBorderImg').show();
	},
	function(){
		//ie6 check
		if(typeof document.body.style.maxHeight === 'undefined') {
			$('#' + cardId.substr(1,cardId.length-2) + ' img.cards').removeClass('showHoverBorder');
			return;
		}
		$('#' + cardId.substr(1,cardId.length-2) + ' img.hoverBorderImg').hide();
	});

	//add hover over for tool tip				
	$('#' + cardId.substr(1,cardId.length-2) + ' img.cards').bind('click',function() {
		if($('#' + cardId.substr(1,cardId.length-2)).hasClass('selectedFilterItem')) {
			return;
		}
		// for Merril lynch the client wanted the card to open a new window instead of a tooltip
		if (card.cardTitle == 'Merrill Lynch Visa&reg; Signature Rewards&reg;') {
			window.open(card.redirctURL,'_blank');
			return;
		}			
		$('.toolTip').stop(true,true).hide();
		$('#' + cardId.substr(1,cardId.length-2) + ' .toolTip').stop(true, true).show();
	});

	// for the hover state image to trigger the click event for the card image
	$('#' + cardId.substr(1,cardId.length-2) + ' img.hoverBorderImg').bind('click',function(){
		$('#' + cardId.substr(1,cardId.length-2) + ' img.cards').trigger('click');
	});
}

// function that changes the filter for the selection of one on the apply now page
function changeFilter(id,filter) {
	$(".toolTip").stop(true,true).hide();

	$("a[id*='Filter']").removeClass("selectedFilter");
	$("#" + id).addClass("selectedFilter");

	$("div[class^='all']").addClass("selectedFilterItem");
	$("div[class~='all'] img.cards").addClass("selectedFilterItem");
	$("div[class~='all'] img.cards").removeClass("active");

	$("div[class~='"+filter+"']").removeClass("selectedFilterItem");
	$("div[class~='"+filter+"'] img.cards").addClass("active");
	$("div[class~='"+filter+"'] img.cards").removeClass("selectedFilterItem");

	$("div[class^='all']").unbind('click');
	$("div[class~='selectedFilterItem']").bind('click',function(event){event.preventDefault();});	
}

// cleans up the white space on single-word names
// used on the pull-downlist
function trim(stringToTrim) {
	return stringToTrim.replace(/^\s+|\s+$/g,"");
}

$(document).ready(function() {
	$.getJSON('/js/sig_apply_json.js', function(jsonData){
		var rowNum=0;

		//creates the pull-down list to select a bank
		for(f=0;f<jsonData.bankList.length;f++){
			$('<ul><li><a href="#' + jsonData.bankList[f].bankName.substring(0,jsonData.bankList[f].bankName.indexOf(" ")) + '" class="dropdown-link">' + trim(jsonData.bankList[f].bankName) + '</a></li></ul>').appendTo('#bankFilter');
		}

		for(i=0;i<jsonData.bankList.length;i++){
			createRow(rowNum);

			if(jsonData.bankList[i].cardList.length == 1 && jsonData.bankList[i+1] == null) {
				//last row
				createBank(jsonData.bankList[i],'bankID0'+i,rowNum,i);
				createCard(jsonData.bankList[i].cardList[0],'"bankCard0'+i+'-1"',i,jsonData.bankList[i].cardList[0].rewardType);
			} else if(jsonData.bankList[i].cardList.length == 1 && jsonData.bankList[i+1].cardList.length == 1 && jsonData.bankList[i+2].cardList.length == 1 && jsonData.bankList[i+3].cardList.length == 1) {
				//4-up
				createBank(jsonData.bankList[i],'bankID0'+i,rowNum,i,'bankContainerLeft');
				createCard(jsonData.bankList[i].cardList[0],'"bankCard0'+i+'-1"',i,jsonData.bankList[i].cardList[0].rewardType);
				i++;
				createBank(jsonData.bankList[i],'bankID0'+i,rowNum,i,'bankContainerLeft');
				createCard(jsonData.bankList[i].cardList[0],'"bankCard0'+i+'-1"',i,jsonData.bankList[i].cardList[0].rewardType);
				i++;
				createBank(jsonData.bankList[i],'bankID0'+i,rowNum,i,'bankContainerLeft');
				createCard(jsonData.bankList[i].cardList[0],'"bankCard0'+i+'-1"',i,jsonData.bankList[i].cardList[0].rewardType);
				i++;
				createBank(jsonData.bankList[i],'bankID0'+i,rowNum,i,'bankContainerLeft');
				createCard(jsonData.bankList[i].cardList[0],'"bankCard0'+i+'-1"',i,jsonData.bankList[i].cardList[0].rewardType);
			} else if(jsonData.bankList[i].cardList.length == 1 && jsonData.bankList[i+1].cardList.length == 1) {
				//2-up			
				createBank(jsonData.bankList[i],'bankID0'+i,rowNum,i,'bankContainerLeft');
				createCard(jsonData.bankList[i].cardList[0],'"bankCard0'+i+'-1"',i,jsonData.bankList[i].cardList[0].rewardType);
				i++;
				createBank(jsonData.bankList[i],'bankID0'+i,rowNum,i,'bankContainerLeft');
				createCard(jsonData.bankList[i].cardList[0],'"bankCard0'+i+'-1"',i,jsonData.bankList[i].cardList[0].rewardType);
			} else if(jsonData.bankList[i].cardList.length > 1) {
				//banks with multiple cards				
				createBank(jsonData.bankList[i],'bankID0'+i,rowNum,i,'bankContainerLeft');						
				for(j=0; j<jsonData.bankList[i].cardList.length; j++){	
					createCard(jsonData.bankList[i].cardList[j],'"bankCard0'+i+'-'+j+'"',i,jsonData.bankList[i].cardList[j].rewardType);
				}
			}
			rowNum++;
		}
		//init filter
		changeFilter('allFilter','all');
	});

	// add a click event on the document to close any clicks that are not in the tooltip
	// this is so we can close the tooltip when we click away from the page
	$(document).click(function(e) {
		var target = (e && e.target) || (e && e.srcElement); 
		if (!$(target).hasClass('hoverBorderImg') && !$(target).hasClass('cards') &&  $(target).closest('.toolTip').get(0) == null ) {
			$('.toolTip').hide();
		}
	});

});