//GLOBAL VARIABLES
var recommended_cards = new Array();
var compare_cards = new Array();
var hide = 0;

//Input Objects
var personal;
var business; 
var student;

var type_rewards_insur; 
var type_rewards;
var type_nolow_fee;
var type_lowrate;
var type_cashback;
var type_travel_rewards;
var type_merch;
var type_insur;
var type_low_ratefee;
var type_nofee;

var type_rewards_insur_row; 
var type_rewards_row;
var type_nolow_fee_row;
var type_lowrate_row;
var type_cashback_row;
var type_travel_rewards_row;
var type_merch_row;
var type_insur_row;
var type_low_ratefee_row;
var type_nofee_row;

var feature_flightrewards;
var feature_travelinsur;
var feature_usdollar;
var feature_giftcard;
var feature_nofee;
var feature_freegas;
var feature_rewards;
var feature_lowrate;
var feature_cashback;

var feature_flightrewards_row;
var feature_travelinsur_row;
var feature_usdollar_row;
var feature_giftcard_row;
var feature_nofee_row;
var feature_freegas_row;
var feature_rewards_row;
var feature_lowrate_row;
var feature_cashback_row;
var feature_none_row;

var el;
var arrow;
var white;
var text;
var subheader;

//Main function -- initialise cards, check query params, display cards
function init() {
	//Initialize Cards
	initializeCards();
	//Initialize inputs
	personal = document.getElementById('personal'); 
	business = document.getElementById('business'); 
	student = document.getElementById('student'); 
	
	type_rewards_insur = document.getElementById('type_rewards_insur');
	type_rewards = document.getElementById('type_rewards'); 
	type_nolow_fee = document.getElementById('type_nolow_fee'); 
	type_lowrate = document.getElementById('type_lowrate');
	type_cashback = document.getElementById('type_cashback');
	type_travel_rewards = document.getElementById('type_travel_rewards');
	type_merch = document.getElementById('type_merch');
	type_insur = document.getElementById('type_insur');
	type_low_ratefee = document.getElementById('type_low_ratefee');
	type_nofee = document.getElementById('type_nofee');
	
	type_rewards_insur_row = document.getElementById('type_rewards_insur_row');
	type_rewards_row = document.getElementById('type_rewards_row'); 
	type_nolow_fee_row = document.getElementById('type_nolow_fee_row'); 
	type_lowrate_row = document.getElementById('type_lowrate_row');
	type_cashback_row = document.getElementById('type_cashback_row');
	type_travel_rewards_row = document.getElementById('type_travel_rewards_row');
	type_merch_row = document.getElementById('type_merch_row');
	type_insur_row = document.getElementById('type_insur_row');
	type_low_ratefee_row = document.getElementById('type_low_ratefee_row');
	type_nofee_row = document.getElementById('type_nofee_row');
	
	
	feature_merchandise = document.getElementById('feature_merchandise'); 
	feature_travel = document.getElementById('feature_travel'); 
	feature_specialty = document.getElementById('feature_specialty'); 
	feature_usdollar = document.getElementById('feature_usdollar'); 
	feature_insurance = document.getElementById('feature_insurance'); 
	
	feature_flightrewards = document.getElementById('feature_flightrewards');
	feature_travelinsur = document.getElementById('feature_travelinsur');
	feature_usdollar = document.getElementById('feature_usdollar');
	feature_giftcard = document.getElementById('feature_giftcard');
	feature_nofee = document.getElementById('feature_nofee');
	feature_freegas = document.getElementById('feature_freegas');
	feature_rewards = document.getElementById('feature_rewards');
	feature_lowrate = document.getElementById('feature_lowrate');
	feature_cashback = document.getElementById('feature_cashback');
	
	feature_flightrewards_row = document.getElementById('feature_flightrewards_row');
	feature_travelinsur_row = document.getElementById('feature_travelinsur_row');
	feature_usdollar_row = document.getElementById('feature_usdollar_row');
	feature_giftcard_row = document.getElementById('feature_giftcard_row');
	feature_nofee_row = document.getElementById('feature_nofee_row');
	feature_freegas_row = document.getElementById('feature_freegas_row');
	feature_rewards_row = document.getElementById('feature_rewards_row');
	feature_lowrate_row = document.getElementById('feature_lowrate_row');
	feature_cashback_row = document.getElementById('feature_cashback_row');
	feature_none_row = document.getElementById('feature_none_row');
	
	feature_flightrewards_row.style.display = 'none';
	feature_travelinsur_row.style.display = 'none';
	feature_usdollar_row.style.display = 'none';
	feature_giftcard_row.style.display = 'none';
	feature_nofee_row.style.display = 'none';
	feature_freegas_row.style.display = 'none';
	feature_rewards_row.style.display = 'none';
	feature_lowrate_row.style.display = 'none';
	feature_cashback_row.style.display = 'none';
		
	
	if(hide == 0)
	{
		el = $("#selector-table-01");
		arrow = $("#arrow-div").
		//css("border", "1px solid red").
		css("position", "absolute").
		css("padding-left", "70px").
		//css("padding-top", "75px").
		css("margin-left", "181px").
		css("top", el.position().top+52).
		css("z-index", 1000000).
		css("padding-top", "25px").
		width(513).
		height(el.height()-79).
		css("background-image","url('/cards/tools/_assets-custom/images/right-arrow-middle.jpg')").
		css("background-repeat","no-repeat").
		css("background-position", "left center");
		
		white = $("#white-div").
		//css("border", "1px solid red").
		css("position", "absolute").
		css("margin-left", "181px").
		css("top", el.position().top+52).
		css("z-index", 999998).
		css("padding-top", "52px").
		width(583).
		height(el.height()-106).
		css("background-color","white");
		
		text = $("#arrow-text").
		width(400);
		//css("border", "1px solid red");
		subheader = $("#arrow-subheader");
		checkParamsForInputs();
	}else
	{
		el = $("#selector-table-inline");
		
		arrow = $("#arrow-div").
		//css("border", "1px solid red").
		css("position", "absolute").
		css("padding-left", "70px").
		//css("padding-top", "75px").
		css("margin-left", "120px").
		css("top", el.position().top+52).
		css("padding-top", "52px").
		css("z-index", 1000000).
		width(343).
		height(el.height()-106).
		css("background-image","url('/cards/tools/_assets-custom/images/right-arrow-middle.jpg')").
		css("background-repeat","no-repeat").
		css("background-position", "left 50%");
		
		white = $("#white-div").
		//css("border", "1px solid red").
		css("position", "absolute").
		css("margin-left", "120px").
		css("top", el.position().top+52).
		css("z-index", 999998).
		css("padding-top", "52px").
		width(413).
		height(el.height()-105).
		css("background-color","white");
		
		text = $("#arrow-text").
		width(300);
		//css("border", "1px solid red");
		subheader = $("#arrow-subheader");
	}
	//Check for Query parameter Inputs
	//Enable and Disable Inputs
	resetInputs();
	updateInputs();
	//Calculate cards from inputes
	calculateCards();
}


//Collects inputs and calculates recommended cards
// if hide is set to 0 it will display the cards
// otherwise it will only update the number
function calculateCards() {
	//Clear arrays
	recommended_cards = new Array();
	compare_cards = new Array();
	
	for (var x=0; x< cards.length; x++) {	
		if (personal.checked){
			if(	cards[x].id == "avion_inf" || 
				cards[x].id ==  "westjet" || 
				cards[x].id == "ba_platinum" || 
				cards[x].id == "westjet_world" || 
				cards[x].id == "cp_platinum" || 
				cards[x].id == "gold_p" || 
				cards[x].id == "gold_us" || 
				cards[x].id == "classic2" ||
				cards[x].id == "rewards_gold" ||
				cards[x].id == "esso" || 
				cards[x].id == "classic_lr" || 
				cards[x].id == "cashback"){
				recommended_cards.push(cards[x]);
			}			
		}
		else if (business.checked){
			if(	cards[x].id == "bus_avion" || 
				cards[x].id ==  "creditline" || 
				cards[x].id == "business")
			{recommended_cards.push(cards[x]);}
		}
		else if (student.checked){
			if(	cards[x].id == "avion_p" ||
				cards[x].id == "classic2" ||
				cards[x].id == "rewards_gold" ||
				cards[x].id == "esso" || 
				cards[x].id == "cashback" ||
				cards[x].id ==  "westjet")
			{recommended_cards.push(cards[x]);}
		}
	}
	
	var obj = new Card;
 	var remove_flag = 0;
	var temp_array = recommended_cards;
	recommended_cards = new Array();
	for (var x=0; x < temp_array.length; x++) {
		obj = temp_array[x];	
		add_flag = 0	
		if (	type_rewards_insur.checked ){
			if(	obj.id == 'avion_inf' || 
				obj.id == 'westjet' || 
				obj.id == 'ba_platinum' || 
				obj.id == 'westjet_world' || 
				obj.id == 'cp_platinum' ||
				obj.id == 'gold_p' ||
				obj.id == 'gold_us')
			{add_flag = 1;}
		}
		else if(type_rewards.checked && personal.checked){
			if(	obj.id == 'classic2' || 
				obj.id == 'rewards_gold' || 
				obj.id == 'esso' || 
				obj.id == 'gold_us' )
			{add_flag = 1;}
		}
		else if(type_nolow_fee.checked && !student.checked){
			if(	obj.id == 'classic2' || 
				obj.id == 'rewards_gold' || 
				obj.id == 'westjet' || 
				obj.id == 'esso' ||
				obj.id == 'classic_lr' ||
				obj.id == 'cashback')
			{add_flag = 1;}
		}
		else if(type_lowrate.checked){
			if(	obj.id == 'classic_lr')
			{add_flag = 1;}
		}
		 else if(type_cashback.checked){
			if(	obj.id == 'cashback')
			{add_flag = 1;}
		}
		else if(type_travel_rewards.checked && !student.checked){
			if(	obj.id == 'bus_avion' ||
				obj.id == 'creditline' )
			{add_flag = 1;}
		}
		else if(type_merch.checked ){
			if(	obj.id == 'bus_avion' ||
				obj.id == 'creditline' )
			{add_flag = 1;}
		}
		else if(type_insur.checked ){
			if(	obj.id == 'bus_avion')
			{add_flag = 1;}
		}
		else if(type_low_ratefee.checked && !student.checked){
			if(	obj.id == 'business' ||
				obj.id == 'creditline' )
			{add_flag = 1;}
		}
		else if(type_nofee.checked && !student.checked){
			if(	obj.id == 'rewards_gold' ||
				obj.id == 'cashback')
			{add_flag = 1;}
		}
		else if(type_travel_rewards.checked && student.checked){
			if(	obj.id == 'avion_p' ||
				obj.id == 'westjet')
			{add_flag = 1;}
		}
		else if(type_nolow_fee.checked && student.checked){
			if(	obj.id == 'classic2' || 
				obj.id == 'rewards_gold' || 
				obj.id == 'westjet' || 
				obj.id == 'esso' ||
				obj.id == 'cashback')
			{add_flag = 1;}
		}
		else if(type_nofee.checked && student.checked){
			if(	obj.id == 'rewards_gold' ||
				obj.id == 'classic2' ||
				obj.id == 'westjet' ||
				obj.id == 'esso')
			{add_flag = 1;}
		}
		else{
			add_flag = 1;
		}
		if (add_flag == 1) recommended_cards.push(obj);
	}
	if(feature_flightrewards.checked || feature_travelinsur.checked || feature_usdollar.checked || feature_giftcard.checked || feature_nofee.checked || feature_freegas.checked || feature_rewards.checked || feature_lowrate.checked || feature_cashback.checked){
		var obj = new Card;
		var add_flag = 0;
		var temp_array = recommended_cards;
		recommended_cards = new Array();
		for (var x=0; x < temp_array.length; x++) {
			obj = temp_array[x];	
			add_flag = 0	
			if (feature_flightrewards.checked ){
					if( obj.id == 'avion_inf' || 
						obj.id == 'westjet' ||
						obj.id == 'ba_platinum' || 
						obj.id == 'westjet_world' || 
						obj.id == 'cp_platinum')
					{add_flag = 1;}
			}
			if(feature_travelinsur.checked){
					if(	obj.id == 'gold_p' ||
						obj.id == 'avion_inf' ||
						obj.id == 'ba_platinum' || 
						obj.id == 'westjet_world' || 
						obj.id == 'cp_platinum')
					{add_flag = 1;}
			}
			if(feature_usdollar.checked){
					if(	obj.id == 'gold_us')
					{add_flag = 1;}
			}
			if(feature_freegas.checked){
					if(	obj.id == 'esso')
					{add_flag = 1;}
			}
			if(feature_giftcard.checked){
					if(	obj.id == 'classic2' ||
						obj.id == 'rewards_gold')
					{add_flag = 1;}
			}
			if(feature_nofee.checked){
					if(	obj.id == 'esso' ||
						obj.id == 'rewards_gold')
					{add_flag = 1;}
			}
			if(feature_rewards.checked && !type_nofee.checked){
					if(	obj.id == 'classic2' ||
						obj.id == 'westjet' ||
						obj.id == 'rewards_gold')
					{add_flag = 1;}
			}
			if(feature_rewards.checked && type_nofee.checked){
					if(	obj.id == 'esso' ||
						obj.id == 'rewards_gold')
					{add_flag = 1;}
			}
			if(feature_lowrate.checked){
					if(	obj.id == 'classic_lr')
					{add_flag = 1;}
			}
			if(feature_cashback.checked){
					if(	obj.id == 'cashback')
					{add_flag = 1;}
			}
			if (add_flag == 1) recommended_cards.push(obj);
		}
	}else if(feature_none_row.style.display == ''){

	}else{
		recommended_cards = new Array();
	}

	//Update Recommended Card Number
	
	//alert("hide="+hide+" "+"length="+recommended_cards.length);
	
	//document.getElementById('num_cards').innerHTML = (hide==1 && recommended_cards.length==0) ? '' : recommended_cards.length;
	//------DEBUG 
	//document.getElementById('debug').innerHTML;
	//debug();
	
	//Change the number of cards message
	if ((hide==1 && recommended_cards.length==0) || recommended_cards.length <= 0) {
		document.getElementById('num_cards_message').innerHTML = '';
		document.getElementById('num_cards').innerHTML = "";
	}else{
		document.getElementById('num_cards_message').innerHTML = '<strong>Credit cards<br> match my <br>criteria.</strong>';
		document.getElementById('num_cards').innerHTML = recommended_cards.length;
	}
	
	//Display the cards and the link to compare tool
	if (hide == 1) { 
		if (recommended_cards.length > 0) document.getElementById('num_cards_button').style.display = '';
		else document.getElementById('num_cards_button').style.display = 'none';			
	}
	else {
		document.getElementById('num_cards_button').style.display = 'none';	
		displayCards();
		compareCardsUpdate();		
	}	
	
	//Hide or Show Compare Button
	if (hide != 1) { 
		if (recommended_cards.length > 0) document.getElementById('compare_button_wrapper').style.display = '';
		else document.getElementById('compare_button_wrapper').style.display = 'none';
	}
}

//Enables, disables, and clears inputs appropriately. 
function updateInputs() {	
	var step1_selection_made = 0;
	var step2_selection_made = 0;
	var step3_selection_made = 0;
	//Check selections
	if (personal.checked || business.checked || student.checked) step1_selection_made = 1;
	if (type_rewards_insur.checked || type_rewards.checked || type_nolow_fee.checked || type_lowrate.checked || type_cashback.checked || type_travel_rewards.checked || type_merch.checked || type_insur.checked || type_low_ratefee.checked || type_nofee.checked) step2_selection_made = 1;
	if (feature_flightrewards.checked || feature_travelinsur.checked || feature_usdollar.checked || feature_giftcard.checked || feature_nofee.checked || feature_freegas.checked || feature_rewards.checked || feature_lowrate.checked || feature_cashback.checked)step3_selection_made = 1;
	
	//Flip Switches
	//Step 1
	if (step1_selection_made == 1) {
		step1Inputs(1);
		step2Inputs(1, 1);	
		
		//Step 2
		if (step2_selection_made == 1) {
			step3Inputs(1, 1);	
		}
		else {
			step2Inputs(1, 1);
			step3Inputs(0, 0);		
		}		
	}
	else {
		step1Inputs(1);
		step2Inputs(0, 0);
		step3Inputs(0, 0);
	}
	if (feature_none_row.style.display == '') step3_selection_made = 1;
	if(step3_selection_made == 1){
		step4Inputs(1);
	}else{
		step4Inputs(0);
	}
}

//Sets the hide variable to 1 so that the cards are not displayed
function setHide(){
	hide = 1;
}


function animate(position){
	if(position == 1){
		text.animate({
			opacity: 0,
			width: 400},
			500
		);
		subheader.animate({
			opacity: 0},
			500
		);
		//subheader.html("Lorem Ipsum");
		text.html("<strong>Use our credit card selector to help find the right card for you.</strong>");
		subheader.animate({
			opacity: 100},
			500
		);
		text.animate({
			opacity: 100},
			500
		);
		arrow.animate({
			marginLeft: 180,
			width: 483},
			1000
		);
		white.animate({
			opacity: 100,
			width: 553,
			marginLeft: 180},
			1000
		);
	}
	if(position == 2){
		text.animate({
			opacity: 0,
			width: 295},
			500
		);
		subheader.animate({
			opacity: 0},
			500
		);
		//subheader.html("Lorem Ipsum");
		text.html("");
		subheader.animate({
			opacity: 100},
			500
		);
		text.animate({
			opacity: 100},
			500
		);
		arrow.animate({
			marginLeft: 372,
			width: 325},
			1000
		);
		white.animate({
			opacity: 100,
			width: 395,
			marginLeft: 372},
			1000
		);
	}
	if(position == 3 && ( type_lowrate.checked || type_cashback.checked)){
		arrow.animate({
			marginLeft: 550,
			width: 129},
			1000
		);
		text.html("");
		text.animate({
			opacity: 0},
			1000
		);
		subheader.animate({
			opacity: 0},
			1000
		);
		white.animate({
			width: 60,
			marginLeft: 550},
			1000
		);
		// white.animate({
			// opacity: 0},
			// 10
		// );
	}
	else if(position == 3 && personal.checked){
		text.animate({
			opacity: 0,
			width: 69},
			500
		);
		subheader.animate({
			opacity: 0},
			500
		);
		//subheader.html("Lorem Ipsum");
		text.html("");
		subheader.animate({
			opacity: 100},
			500
		);
		text.animate({
			opacity: 100},
			500
		);
		arrow.animate({
			marginLeft: 550,
			width: 129},
			1000
		);
		white.animate({
			opacity: 100,
			width: 199,
			marginLeft: 550},
			1000
		);
	}
	if(position == 3 && !personal.checked){
		arrow.animate({
			marginLeft: 550,
			width: 144},
			1000
		);
		text.html("");
		text.animate({
			opacity: 0},
			1000
		);
		subheader.animate({
			opacity: 0},
			1000
		);
		white.animate({
			width: 60,
			marginLeft: 550},
			1000
		);
		// white.animate({
			// opacity: 0},
			// 10
		// );
	}
	if(position == 4){
		text.html("");
		text.animate({
			opacity: 0},
			1000
		);
		subheader.animate({
			opacity: 0},
			1000
		);
		white.animate({
			width: 60,
			marginLeft: 550},
			1000
		);
		// white.animate({
			// opacity: 0},
			// 10
		// );
	}
}
function animateInline(position){
	if(position == 1){
		text.animate({
			opacity: 0,
			width: 300},
			500
		);
		subheader.animate({
			opacity: 0},
			500
		);
		//subheader.html("Lorem Ipsum");
		text.html("<strong>Use our credit card selector to help find the right card for you.</strong>");
		subheader.animate({
			opacity: 100},
			500
		);
		text.animate({
			opacity: 100},
			500
		);
		arrow.animate({
			marginLeft: 120,
			width:343,
			paddingLeft: 70},
			1000
		);
		white.animate({
			opacity: 120,
			width: 413,
			marginLeft: 120},
			1000
		);
	}
	if(position == 2){
		text.animate({
			opacity: 0,
			width: 191},
			500
		);
		subheader.animate({
			opacity: 0},
			500
		);
		//subheader.html("Lorem Ipsum");
		text.html("");
		subheader.animate({
			opacity: 100},
			500
		);
		text.animate({
			opacity: 100},
			500
		);
		arrow.animate({
			marginLeft: 256,
			width: 215,
			paddingLeft: 70},
			1000
		);
		white.animate({
			opacity: 100,
			width: 276,
			marginLeft: 256},
			1000
		);
	}
	if(position == 3 && ( type_lowrate.checked || type_cashback.checked)){
		document.getElementById("arrow-subheader").style.display = 'none';
		document.getElementById("arrow-text").style.display = 'none';
		arrow.animate({
			marginLeft: 380,
			width: 73},
			1000
		);
		text.html("");
		text.animate({
			opacity: 0},
			1000
		);
		subheader.animate({
			opacity: 0},
			1000
		);
		white.animate({
			width: 138,
			marginLeft: 380},
			1000
		);
		white.animate({
			opacity: 0},
			10
		);
		white.animate({
			width:0},
			10
		);
		arrow.animate({
			width: 10,
			paddingLeft: 30},
			1000
		);
	}
	else if(position == 3 && personal.checked){
		document.getElementById("arrow-subheader").style.display = 'none';
		document.getElementById("arrow-text").style.display = 'none';
		text.html("");
		text.animate({
			opacity: 0,
			width: 73},
			500
		);
		subheader.animate({
			opacity: 0},
			500
		);
		arrow.animate({
			marginLeft: 380,
			width: 73,
			paddingLeft: 70},
			1000
		);
		white.animate({
			opacity: 100,
			width: 138,
			marginLeft: 380},
			1000
		);
	}
	if(position == 3 && !personal.checked){
		document.getElementById("arrow-subheader").style.display = 'none';
		document.getElementById("arrow-text").style.display = 'none';
		arrow.animate({
			marginLeft: 380,
			width: 73},
			1000
		);
		text.html("");
		text.animate({
			opacity: 0},
			100
		);
		subheader.animate({
			opacity: 0},
			100
		);
		white.animate({
			width: 138,
			marginLeft: 380},
			1000
		);
		white.animate({
			opacity:0},
			1000
		);
		white.animate({
			width:0},
			10
		);
		arrow.animate({
			width: 10,
			paddingLeft: 30},
			1000
		);
	}
	if(position == 4){
		text.html("");
		document.getElementById("arrow-subheader").style.display = 'none';
		document.getElementById("arrow-text").style.display = 'none';
		text.animate({
			opacity: 0},
			1000
		);
		subheader.animate({
			opacity: 0},
			1000
		);
		white.animate({
			opacity: 0},
			500
		);
		white.animate({
			width:0},
			10
		);
		arrow.animate({
			width: 10,
			paddingLeft: 30},
			1000
		);
	}
}

//Turn Step 1 On or Off
function step1Inputs(highlight) {
	if (highlight == 1) document.getElementById('step1_num').className = 'card-select-num-on';
	else document.getElementById('step1_num').className = 'card-select-num-off';
}

//Turn Step 2 On or Off
function step2Inputs(highlight, enable) {
	//Number
	if (highlight == 1) document.getElementById('step2_num').className = 'card-select-num-on';
	else {document.getElementById('step2_num').className = 'card-select-num-off';}
	//Inputs
	if (enable == 1) {
		document.getElementById('features_table').style.display = '';
		if (personal.checked){			
			type_rewards_insur_row.style.display = '';
			type_rewards_row.style.display = '';
			type_nolow_fee_row.style.display = '';
			type_lowrate_row.style.display = '';
			type_cashback_row.style.display = '';	 
			type_travel_rewards_row.style.display = 'none';	 
			type_merch_row.style.display = 'none';
			type_insur_row.style.display = 'none';	 
			type_low_ratefee_row.style.display = 'none';	 
			type_nofee_row.style.display = 'none';
		}
		else if(business.checked){
			type_rewards_insur_row.style.display = 'none';
			type_rewards_row.style.display = 'none';
			type_nolow_fee_row.style.display = 'none';
			type_lowrate_row.style.display = 'none';
			type_cashback_row.style.display = 'none';	 
			type_travel_rewards_row.style.display = '';	 
			type_merch_row.style.display = '';
			type_insur_row.style.display = '';	 
			type_low_ratefee_row.style.display = '';	 
			type_nofee_row.style.display = 'none';
		}
		else if(student.checked){
			type_rewards_insur_row.style.display = 'none';
			type_rewards_row.style.display = '';
			type_nolow_fee_row.style.display = '';
			type_lowrate_row.style.display = 'none';
			type_cashback_row.style.display = '';	 
			type_travel_rewards_row.style.display = '';	 
			type_merch_row.style.display = 'none';
			type_insur_row.style.display = 'none';	 
			type_low_ratefee_row.style.display = 'none';	 
			type_nofee_row.style.display = '';
		}
	}
	else {
		resetInputs(3);
	}
}

//Turn Step 3 On or Off
function step3Inputs(highlight, enable) {
	//Number
	if (highlight == 1) document.getElementById('step3_num').className = 'card-select-num-on';		
	else document.getElementById('step3_num').className = 'card-select-num-off';
	
	//Inputs	
	if (enable == 1) {
		document.getElementById('benefits_table').style.display = '';
		
		if(type_rewards_insur.checked && personal.checked){
			feature_flightrewards_row.style.display = '';
			feature_travelinsur_row.style.display = '';
			feature_usdollar_row.style.display = '';
		}
		if(type_rewards.checked && personal.checked){
			feature_usdollar_row.style.display = '';
			feature_giftcard_row.style.display = '';
			feature_nofee_row.style.display = '';
			feature_freegas_row.style.display = '';
		}
		if(type_nolow_fee.checked && personal.checked){
			feature_rewards_row.style.display = '';
			feature_lowrate_row.style.display = '';
			feature_cashback_row.style.display = '';
			feature_freegas_row.style.display = '';
		}
		if(type_lowrate.checked && personal.checked){
			feature_none_row.style.display = '';
		}
		if(type_cashback.checked && personal.checked){
			feature_none_row.style.display = '';
		}
		if(type_travel_rewards.checked){
			feature_none_row.style.display = '';
		}
		if(type_merch.checked){
			feature_none_row.style.display = '';
		}
		if(type_insur.checked){
			feature_none_row.style.display = '';
		}
		if(type_low_ratefee.checked){
			feature_none_row.style.display = '';
		}
		if(type_nofee.checked){
			feature_none_row.style.display = '';
		}
		
		//student cards
		if(type_rewards.checked && student.checked){
			feature_giftcard_row.style.display = '';
			feature_nofee_row.style.display = '';
			feature_freegas_row.style.display = '';
		}
		
		if(type_cashback.checked && student.checked){
			feature_none_row.style.display = '';
		}
		
		if(type_travel_rewards.checked && student.checked){
			feature_none_row.style.display = '';
		}
		
		if(type_nolow_fee.checked && student.checked){
			feature_rewards_row.style.display = '';
			feature_cashback_row.style.display = '';
			feature_freegas_row.style.display = '';
			feature_none_row.style.display = 'none';
		}
		
		if(type_nofee.checked && student.checked){
			feature_rewards_row.style.display = '';
			feature_cashback_row.style.display = 'none';
			feature_freegas_row.style.display = '';
			feature_none_row.style.display = 'none';
		}
		
		//feature_flightrewards.disabled = false;
		//feature_travel.disabled = false;
		//feature_specialty.disabled = false;
		//feature_usdollar.disabled = false;
		//feature_insurance.disabled = false;
	}
	else {
	//	feature_merchandise.disabled = true; feature_merchandise.checked = false;
		//feature_travel.disabled = true; feature_travel.checked = false;
		//feature_specialty.disabled = true; feature_specialty.checked = false;
		//feature_usdollar.disabled = true; feature_usdollar.checked = false;
		//feature_insurance.disabled = true; feature_insurance.checked = false;	 
	}		
}
function step4Inputs(highlight) {
	if (highlight == 1) document.getElementById('step4_num').className = 'card-select-num-on';		
	else document.getElementById('step4_num').className = 'card-select-num-off';
}
//Resets the given steps inputs
function resetInputs(num) {

	
	if (num == 1) {
		personal.checked = false;
		business.checked = false;
		student.checked = false; 
	}	
	else if (num == 2) {
		type_rewards_insur.checked = false;
		type_rewards.checked = false;
		type_nolow_fee.checked = false;
		type_lowrate.checked = false;
		type_cashback.checked = false;	 
		type_travel_rewards.checked = false;	 
		type_merch.checked = false;	 
		type_insur.checked = false;	 
		type_low_ratefee.checked = false;	 
		type_nofee.checked = false;
	}		
	else if (num == 3) {
		feature_flightrewards_row.style.display = 'none';
		feature_travelinsur_row.style.display = 'none';
		feature_usdollar_row.style.display = 'none';
		feature_giftcard_row.style.display = 'none';
		feature_nofee_row.style.display = 'none';
		feature_freegas_row.style.display = 'none';
		feature_rewards_row.style.display = 'none';
		feature_lowrate_row.style.display = 'none';
		feature_cashback_row.style.display = 'none';
		feature_none_row.style.display = 'none';
		
		feature_flightrewards.checked = false;
		feature_travelinsur.checked = false;
		feature_usdollar.checked = false;
		feature_giftcard.checked = false;
		feature_nofee.checked = false;
		feature_freegas.checked = false;
		feature_rewards.checked = false;
		feature_lowrate.checked = false;
	    feature_cashback.checked = false;
	}		
}

//Sorts by ranking and then displays cards held in the recommended_cards array
function displayCards() {
	//Sort Cards
	recommended_cards.sort(compareCardRankings);
	
	//------DEBUG 
	//document.getElementById('debug').innerHTML;
	//debug();
	
	//Display Top Three
	var top3_output = '';
	var bg_color = 'on';
	var top3_number = 0;
	for (var x=0; (x<6 && x<recommended_cards.length); x++) {	
		var obj = recommended_cards[x];
		top3_output += '		<tr class="contentframework-subheader">';
		top3_output += '			<th id="headerCardTitle1" colspan="4"><h4>' + obj.name + '</h4></th>';
		top3_output += '			<th id="headerCheckBoxTitle1" style="text-align:center;"><input id="compare_' + obj.id + '" value="' + obj.id + '" type="checkbox" onclick="compareCardsUpdate(this);"></th>';
		top3_output += '		</tr>';		
		top3_output += '		<tr class="visaoverview-bg-' + bg_color + '">';			
				
		top3_output += '			<td headers="headerCardImage headerCardTitle1"><a href="' + obj.learn_more + '"><img src="/cards/_assets-custom/images/mid-cards/m_' + obj.id + '.gif" alt="' + obj.name + '" height="79" width="125"></a>';	
		top3_output += '					<span class="button button-primary buttonfloatright" style="text-align:centre;margin: 5px 10px 5px auto;">';
		if (obj.id == 'business') 
			top3_output += '						<span><a href="'+ apply_business_link+'">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';
		else if (obj.id == 'bus_avion') 
			top3_output += '						<span><a href="'+ apply_business_avion_link+ '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';		
			
		else if (obj.id == 'creditline') 
			top3_output += '						<span><a href="'+ apply_creditline_link+ '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';		
				else if (obj.id == 'cashback')
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=HD0024' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';
		else if (obj.id == 'avion_inf')
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=IAP069' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';

				else if (obj.id == 'rewards_gold')
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=IAP037' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';
				else if (obj.id == 'classic2')
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=IAP004' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';
				else if (obj.id == 'avion_p')
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=IAP001' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';
				else if (obj.id == 'gold_p')
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=IAP002' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';
				else if (obj.id == 'ba_platinum')
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=IAP009' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';
				else if (obj.id == 'cp_platinum')
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=IAP035' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';
				else if (obj.id == 'gold_us')
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=IAP007' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';
				else if (obj.id == 'esso')
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=IAP011' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';

else if (obj.id == 'westjet' || obj.id == 'westjet_world') 
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=WJR061' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';
			
							else if (obj.id == 'classic_lr')
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=IAP014' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';
				else if (obj.id == 'platinum')
top3_output += '<span><a href="' + apply_link + '?cid=' + obj.id + '&ASC=IAP012' + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';

			
			
		else
			top3_output += '						<span><a href="' + apply_link + '?cid=' + obj.id + '">Apply Now <img src="uos/_assets/images/buttons/chevron.gif" alt="" height="12" width="12"></a></span>';	
		top3_output += '				</td>';	
		top3_output += '			<td class="subcopy" headers="headerInterestRate headerCardTitle1">' + obj.interest_rate + '</td>';			
		top3_output += '			<td class="subcopy" headers="headerAnnualFee headerCardTitle1">' + obj.annual_fee;
		//if (obj.annual_fee_65 != '') top3_output += '<br />' + obj.annual_fee_65 + ' (age 65+)';	
		top3_output += '					</span>';
		top3_output += '			</td>';			
				
		top3_output += '			<td headers="headerCardOverview headerCardTitle1">';				
		top3_output += '				<ul>';					
		top3_output += '					<li>' + obj.benefit + '</li>';
		top3_output += '					<li>' + obj.feature1 + '</li>';
		top3_output += '					<li>' + obj.feature2 + '</li>';		
		if (obj.special_offer != '') top3_output += '					<li>' + obj.special_offer + '</li>';								
		top3_output += '				</ul>';				
		top3_output += '				<div class="visaoverview-btnarea-wrapper">';
		top3_output += '					<div class="visaoverview-btnarea subcopy nowrap">';
		top3_output += '						<img src="uos/_assets/images/layout/bullet-link.gif" alt="" class="bullet" border="0">'; 
		top3_output += '						<a href="' + obj.learn_more + '">Learn More</a>';
		top3_output += '					</div>';				
		
		
				
		
					
		top3_output += '				</div>';			
		top3_output += '			</td>';
		top3_output += '			<td headers="headerCheckBox headerCheckBoxTitle1">&nbsp;</td>';			
		top3_output += '		</tr>';			
		top3_number++;
		
		//Switch bg color
		bg_color = (bg_color == 'on') ? 'off' : 'on';
	}
	if(top3_number > 1){
		var table_output = '<div><h2 class="firstline">My Top ' + top3_number + ' Recommended Cards:</h2>';	
	}else{
		var table_output = '<div><h2 class="firstline">My Top Recommended Card:</h2>';
	}
	table_output += '<table class="contentframework">';
	table_output += '	<tbody>';		
	table_output += '		<tr>';			
	
	table_output += '			<th class="contentframework-dataheadertop" id="headerCardImage" width="15%">Card</th>';			
	table_output += '			<th class="contentframework-dataheadertop" id="headerInterestRate" width="10%">Interest<br>Rate</th>';			
	table_output += '			<th class="contentframework-dataheadertop" id="headerAnnualFee" width="10%">Annual<br>Fee</th>';			
	table_output += '			<th class="contentframework-dataheadertop" id="headerCardOverview" width="63%">Card Overview</th>';		
	table_output += '			<th class="contentframework-dataheadertop" id="headerCheckBox" width="2%">Compare</th>';			
	table_output += '		</tr>';		
	table_output += top3_output;
	table_output += '	</tbody>';
	table_output += '</table>';
		
	
	//Update HTML -- Recommended
	if (top3_number > 0) {
		document.getElementById('recommended_top3').innerHTML = table_output;
		$("#recommended_top3").show("blind", {}, 1000);	
	}
	else {
		document.getElementById('recommended_top3').style.display = 'none';
		document.getElementById('recommended_top3').innerHTML = '';
	}	
	
	
}

//Comparison function for sorting, compares card ranking value
function compareCardRankings(a, b) {
	//return b.ranking - a.ranking; //highest (20) to lowest (1)
	return a.ranking - b.ranking; //lowest (1) to highest (20)
}

//Checks and updates the compare cards array for up to three cards
//takes in checkbox object
function compareCardsUpdate(obj){
	//If Object is passed in add or remove from array
	if (obj != undefined){
		//Add to array
		if (obj.checked) {
			//If array is full disable the click, otherwise add it to array
			if (compare_cards.length >= 3) obj.checked = false;
			else {
				compare_cards.push(obj.value);
			}
		}
		//Remove from array
		else {
			for (var x=0; x < compare_cards.length; x++) {
				if (compare_cards[x] == obj.value) compare_cards.splice(x, 1);
			}	
		}
	}
	
	//Check compare button
	if (compare_cards.length > 0) {
		document.getElementById('compare_button_enabled').style.display = '';
		document.getElementById('compare_button_disabled').style.display = 'none';			
	}
	else {
		document.getElementById('compare_button_enabled').style.display = 'none';
		document.getElementById('compare_button_disabled').style.display = '';	
	}
}

//Builds the compare link from the compare_cards array 
//for the card comparison tool.
function buildCompareLink () {
	//Build link
	var link = compare_tool_link + '?';
	for (var x=0; x < compare_cards.length; x++) {
		link += 'c' + (x+1) + '=' +  compare_cards[x];
		if (x != (compare_cards.length-1)) link += '&';
	}	
	
	//Go to Link
	document.location = link;
}

//Checks parameters for the inputs and fills in the specified inputs
function checkParamsForInputs() {
	//Inputs to look for
	var inputs_list = new Array();
	inputs_list.push('usage');
	inputs_list.push('type');
	inputs_list.push('feature');
	if(getURLParam('feature')){
		animate(3);
		animate(4);
	}else if(getURLParam('type')){
		animate(3);
	}else if(getURLParam('usage')){
		animate(2);
	}else{
		animate(1);
	}
	//Get params
	var temp_val = '';
	for (var x=0; x<inputs_list.length; x++) {
		temp_val = getURLParam(inputs_list[x]);		
		
		//Select Input
		if (temp_val != null) document.getElementById(temp_val).checked = true;
	}
}

//Prints out cards in recommended array
function debug() {
	var current = document.getElementById('debug').innerHTML;
	
	var bug ='';
	for (var y=0; y < recommended_cards.length; y++) {
		bug += recommended_cards[y].id;
		bug +="<br />";
	}
	
	document.getElementById('debug').innerHTML = current + bug + '=====<br />';
}