//GLOBAL VARIABLES
var card1_param = null;
var card2_param = null;
var card3_param = null;
var card1 = new Card();
var card2 = new Card();
var card3 = new Card();
var empty_card_image = '/products/gic/_assets-custom/images/empty-card.gif';

function convertWhitespace(str){
	var finish = '';
	if(str != undefined){
		finish = str.replace(/ /g, "_");
	
		return finish;
	}	
}

function clearTags(str,pos){
	var finish = '';
	if(str != undefined){
		finish = str.replace(/<sup>&reg;<\/sup>/g, "");
		finish = finish.replace(/&#153;/g, "");
		if(pos == 1){
			finish = 'Change '+finish;
		}else if(pos == 2){
			finish = 'Learn more about '+finish;
		}
		return finish;
	}else{
		if(pos == 1){
			finish = 'Add a GIC';
		}else if(pos == 2){
			finish = '';
		}
		return finish;
	}
}

function buildTable(card1,card2,card3){
	var comparetable  = '';
	
comparetable  += '<table class="contentframework">';
comparetable  += '<tbody>';
comparetable  += '	<tr>';
comparetable  += '		<th width="25%" class="contentframework-dataheadertop" style="text-align:center;"><strong>&nbsp;</strong></th>';
comparetable  += '		<th width="25%" id="'+convertWhitespace(clearTags(card1.name,1))+'" class="contentframework-dataheadertop cardon">';
comparetable  += '			<span id="c1_change" style="display:none;"><a href="javascript:clearCardObject(1);" title="'+clearTags(card1.name,1)+'"><strong>Change GIC</strong></a><a href="javascript:clearCardObject(1);" class="change_card_x"><img src="/products/gic/_assets-custom/images/compare-close-btn.gif" class="icon" alt="Remove/Change" style="padding-bottom: 2px;"/></a></span>';
comparetable  += '			<span id="c1_add" style="display:;"><strong>Add a GIC</strong></span>';
comparetable  += '		</th>';
comparetable  += '		<th width="25%" id="'+convertWhitespace(clearTags(card2.name,1))+'" class="contentframework-dataheadertop cardon">';
comparetable  += '			<span id="c2_change" style="display:none;"><a href="javascript:clearCardObject(2);" title="'+clearTags(card2.name,1)+'"><strong>Change GIC</strong></a><a href="javascript:clearCardObject(2);" class="change_card_x"><img src="/products/gic/_assets-custom/images/compare-close-btn.gif" class="icon" alt="Remove/Change"  style="padding-bottom: 2px;"/></a></span>';
comparetable  += '			<span id="c2_add" style="display:;"><strong>Add a GIC</strong></span>';
comparetable  += '		</th>';
comparetable  += '		<th width="25%" id="'+convertWhitespace(clearTags(card3.name,1))+'" class="contentframework-dataheadertop cardon">';
comparetable  += '			<span id="c3_change" style="display:none;"><a href="javascript:clearCardObject(3);" title="'+clearTags(card3.name,1)+'"><strong>Change GIC</strong></a><a href="javascript:clearCardObject(3);" class="change_card_x"><img src="/products/gic/_assets-custom/images/compare-close-btn.gif" class="icon" alt="Remove/Change"  style="padding-bottom: 2px;"/></a></span>';
comparetable  += '			<span id="c3_add" style="display:;"><strong>Add a GIC</strong></span>';
comparetable  += '		</th>';
comparetable  += '	</tr>';
comparetable  += '	<tr>';
comparetable  += '		<td class="compare-header-bg-first" id="Learn_More" >&nbsp;</td>';
comparetable  += '		<td class="compare-header-bg" headers="'+convertWhitespace(clearTags(card1.name,1))+' Learn_More">';
comparetable  += '			<h5 id="c1_name" style="padding-bottom:25px;">&nbsp;</h5>';
comparetable  += '			<span id="c1_links" style="display:none;">';
comparetable  += '				<span class="floatcenter nowrap"><img src="uos/_assets/images/layout/bullet-link.gif" alt="" border="0" class="bullet" /> <a href="#" id="c1_learn_more" title="'+clearTags(card1.name,2)+'">Learn More</a></span>';
comparetable  += '			</span>';
comparetable  += '			<div id="c1_choose" style="display:;" class="lastline"><strong>Select another GIC<br />to compare:</strong></div>';
comparetable  += '		</td>';
comparetable  += '		<td class="compare-header-bg" headers="'+convertWhitespace(clearTags(card2.name,1))+' Learn_More">';
comparetable  += '			<h5 id="c2_name" style="padding-bottom:25px;">&nbsp;</h5>';
comparetable  += '			<span id="c2_links" style="display:none;">';
comparetable  += '				<span class="floatcenter nowrap"><img src="uos/_assets/images/layout/bullet-link.gif" alt="" border="0" class="bullet" /> <a href="#" id="c2_learn_more" title="'+clearTags(card2.name,2)+'">Learn More</a></span>';
comparetable  += '			</span>';
comparetable  += '			<div id="c2_choose" style="display:;" class="lastline"><strong>Select another GIC<br />to compare:</strong></div>';
comparetable  += '		</td>';
comparetable  += '		<td class="compare-header-bg-last" headers="'+convertWhitespace(clearTags(card3.name,1))+' Learn_More">';
comparetable  += '			<h5 id="c3_name" style="padding-bottom:25px;">&nbsp;</h5>';
comparetable  += '			<span id="c3_links" style="display:none;">';
comparetable  += '				<span class="floatcenter nowrap"><img src="uos/_assets/images/layout/bullet-link.gif" alt="" border="0" class="bullet" /> <a href="#" id="c3_learn_more" title="'+clearTags(card3.name,2)+'">Learn More</a></span>';
comparetable  += '			</span>';
comparetable  += '			<div id="c3_choose" style="display:;" class="lastline"><strong>Select another GIC<br />to compare:</strong></div>';
comparetable  += '		</td>';
comparetable  += '	</tr>';
comparetable  += '	<tr>';
comparetable  += '		<th colspan="4" class="contentframework-subheader cardposition">';
			
comparetable  += '			<div class="compare-change-box-wrapper pos1" id="c1_cardlist" style="z-index:1000;">';
comparetable  += '				<div class="compare-change-box-dropdown">';
comparetable  += '					<strong><label for="c1_cardlist_category">Choose a Category:</label></strong>';
comparetable  += '					<select class="contentframework-select" title="GIC 1 - Choose a Category" style="width:160px;margin:0 5px 0 0" id="c1_cardlist_category" onchange="populateCardList(1, 0);">';
comparetable  += '						<option value="" selected="selected">Select</option>';
comparetable  += '						<option value="Guaranteed-return">Guaranteed-return GICs</option>';
comparetable  += '						<option value="Interest Rate-linked">Interest Rate-linked GICs</option>';
comparetable  += '						<option value="RBC Market Access">RBC Market Access GICs&trade;</option>';
comparetable  += '					</select>';
comparetable  += '				</div>';
comparetable  += '				<div class="compare-change-cardlist">';
comparetable  += '					<strong>Select a GIC to add:</strong>';
comparetable  += '					<ul class="bullets-arrow" id="c1_cardlist_links"><li></li></ul>';
comparetable  += '				</div>';
comparetable  += '			</div>		';
					
comparetable  += '			<div class="compare-change-box-wrapper pos2" id="c2_cardlist" style="z-index:1000;">';
comparetable  += '				<div class="compare-change-box-dropdown">';
comparetable  += '					<strong><label for="c2_cardlist_category">Choose a Category:</label></strong>				';
comparetable  += '					<select class="contentframework-select" title="GIC 2 - Choose a Category" style="width:160px;margin:0 5px 0 0" id="c2_cardlist_category" onchange="populateCardList(2, 0);">';
comparetable  += '						<option value="" selected="selected">Select</option>';
comparetable  += '						<option value="Guaranteed-return">Guaranteed-return GICs</option>';
comparetable  += '						<option value="Interest Rate-linked">Interest Rate-linked GICs</option>';
comparetable  += '						<option value="RBC Market Access">RBC Market Access GICs&trade;</option>';
comparetable  += '					</select>';
comparetable  += '				</div>';
comparetable  += '				<div class="compare-change-cardlist">';
comparetable  += '					<strong>Select a GIC to add:</strong>';
comparetable  += '					<ul class="bullets-arrow" id="c2_cardlist_links"><li></li></ul>';
comparetable  += '				</div>';
comparetable  += '			</div>	';
			
comparetable  += '			<div class="compare-change-box-wrapper pos3" id="c3_cardlist" style="z-index:1000;">';
comparetable  += '				<div class="compare-change-box-dropdown">';
comparetable  += '					<strong><label for="c3_cardlist_category">Choose a Category:</label></strong>';
comparetable  += '					<select class="contentframework-select" title="GIC 3 - Choose a Category" style="width:160px;margin:0 5px 0 0" id="c3_cardlist_category" onchange="populateCardList(3, 0);">';
comparetable  += '						<option value="" selected="selected">Select</option>';
comparetable  += '						<option value="Guaranteed-return">Guaranteed-return GICs</option>';
comparetable  += '						<option value="Interest Rate-linked">Interest Rate-linked GICs</option>';
comparetable  += '						<option value="RBC Market Access">RBC Market Access GICs&trade;</option>';
comparetable  += '					</select>';
comparetable  += '				</div>';
comparetable  += '				<div class="compare-change-cardlist">';
comparetable  += '					<strong>Select a GIC to add:</strong>';
comparetable  += '					<ul class="bullets-arrow" id="c3_cardlist_links"><li></li></ul>';
comparetable  += '				</div>';
comparetable  += '			</div>			';
comparetable  += '		</th>';
comparetable  += '	</tr>';
comparetable  += '	<tr class="contentframework-altrow" >';
comparetable  += '		<th class="contentframework-subheader" id="Minimum_Amount"><h4 style="padding-left:12px;">Minimum Amount</h4></th>';
comparetable  += '		<td id="c1_min_inv" headers="'+convertWhitespace(clearTags(card1.name,1))+' Minimum_Amount" style="text-align:left;">&nbsp;</td>';
comparetable  += '		<td id="c2_min_inv" headers="'+convertWhitespace(clearTags(card2.name,1))+' Minimum_Amount" style="text-align:left;">&nbsp;</td>';
comparetable  += '		<td id="c3_min_inv" headers="'+convertWhitespace(clearTags(card3.name,1))+' Minimum_Amount" style="text-align:left;">&nbsp;</td>';
comparetable  += '	</tr>';
comparetable  += '	<tr>';
comparetable  += '		<th class="contentframework-subheader" id="Terms_Available"><h4 style="padding-left:12px;">Terms Available</h4></th>';
comparetable  += '		<td id="c1_inv_terms" headers="'+convertWhitespace(clearTags(card1.name,1))+' Terms_Available" style="text-align:left;">&nbsp;</td>';
comparetable  += '		<td id="c2_inv_terms" headers="'+convertWhitespace(clearTags(card2.name,1))+' Terms_Available" style="text-align:left;">&nbsp;</td>';
comparetable  += '		<td id="c3_inv_terms" headers="'+convertWhitespace(clearTags(card3.name,1))+' Terms_Available" style="text-align:left;">&nbsp;</td>';
comparetable  += '	</tr>';
comparetable  += '	<tr class="contentframework-altrow" >';
comparetable  += '		<th class="contentframework-subheader" id="Interest_Payment_Options"><h4 style="padding-left:12px;">Interest Payment Options</h4></th>';
comparetable  += '		<td id="c1_int_pay_opt" headers="'+convertWhitespace(clearTags(card1.name,1))+' Interest_Payment_Options" style="text-align:left;">&nbsp;</td>';
comparetable  += '		<td id="c2_int_pay_opt" headers="'+convertWhitespace(clearTags(card2.name,1))+' Interest_Payment_Options" style="text-align:left;">&nbsp;</td>';
comparetable  += '		<td id="c3_int_pay_opt" headers="'+convertWhitespace(clearTags(card3.name,1))+' Interest_Payment_Options" style="text-align:left;">&nbsp;</td>';
comparetable  += '	</tr>';
comparetable  += '	<tr>';
comparetable  += '		<th class="contentframework-subheader" id="Cashable"><h4 style="padding-left:12px;">Cashable</h4></th>';
comparetable  += '		<td id="c1_redeemable" headers="'+convertWhitespace(clearTags(card1.name,1))+' Cashable" style="text-align:left;">&nbsp;</td>';
comparetable  += '		<td id="c2_redeemable" headers="'+convertWhitespace(clearTags(card2.name,1))+' Cashable" style="text-align:left;">&nbsp;</td>';
comparetable  += '		<td id="c3_redeemable" headers="'+convertWhitespace(clearTags(card3.name,1))+' Cashable" style="text-align:left;">&nbsp;</td>';
comparetable  += '	</tr>';
comparetable  += '	<tr class="contentframework-altrow" >';
comparetable  += '		<th class="contentframework-subheader" id="Key_Benefits"><h4 style="padding-left:12px;">Key Benefits</h4></th>';
comparetable  += '		<td id="c1_features" headers="'+convertWhitespace(clearTags(card1.name,1))+' Key_Benefits" style="text-align:left;">&nbsp;</td>';
comparetable  += '		<td id="c2_features" headers="'+convertWhitespace(clearTags(card2.name,1))+' Key_Benefits" style="text-align:left;">&nbsp;</td>';
comparetable  += '		<td id="c3_features" headers="'+convertWhitespace(clearTags(card3.name,1))+' Key_Benefits" style="text-align:left;">&nbsp;</td>';
comparetable  += '	</tr>';
comparetable  += '	<tr class="" >';
comparetable  += '		<th class="contentframework-subheader" id="Plan_Eligibility"><h4 style="padding-left:12px;">Plan Eligibility</h4></th>';
comparetable  += '		<td id="c1_eligib" headers="'+convertWhitespace(clearTags(card1.name,1))+' Plan_Eligibility" style="text-align:left;">&nbsp;</td>';
comparetable  += '		<td id="c2_eligib" headers="'+convertWhitespace(clearTags(card2.name,1))+' Plan_Eligibility" style="text-align:left;">&nbsp;</td>';
comparetable  += '		<td id="c3_eligib" headers="'+convertWhitespace(clearTags(card3.name,1))+' Plan_Eligibility" style="text-align:left;">&nbsp;</td>';
comparetable  += '	</tr>';
comparetable  += '</tbody>';
comparetable  += '</table>	';

document.getElementById('comparetable').innerHTML = comparetable;
}

//Main function -- initialise cards, check query params, display cards
function init() {
	//Initialize Cards
	initializeCards();
	
	//Check query params for cards to compare
	card1_param = getURLParam('c1');
	card2_param = getURLParam('c2');
	card3_param = getURLParam('c3');
	
	//Get card objects
	if (card1_param != null) card1 = getCardObjectById(card1_param);
	if (card2_param != null) card2 = getCardObjectById(card2_param);
	if (card3_param != null) card3 = getCardObjectById(card3_param);	

	buildTable(card1,card2,card3);
	
	//Set data in columns
	setCardColumnData(1); 
	setCardColumnData(2); 
	setCardColumnData(3); 

}

//Fills column with card data, if a card column is empty it also displays the card list
function setCardColumnData(num) {
	//Set card object
	var card;
	if (num == 1) card = card1;
	if (num == 2) card = card2;
	if (num == 3) card = card3;
	//Fill data

	if (card.id != undefined) {
		document.getElementById('c' + num + '_change').style.display = '';
		document.getElementById('c' + num + '_add').style.display = 'none';	
		document.getElementById('c' + num + '_name').innerHTML = card.name;
		document.getElementById('c' + num + '_links').style.display = '';
		document.getElementById('c' + num + '_choose').style.display = 'none';
		document.getElementById('c' + num + '_min_inv').innerHTML = card.min_inv;
		document.getElementById('c' + num + '_inv_terms').innerHTML = card.inv_terms;
		document.getElementById('c' + num + '_int_pay_opt').innerHTML = card.int_pay_opt;
		document.getElementById('c' + num + '_redeemable').innerHTML = card.redeemable;
		document.getElementById('c' + num + '_learn_more').href = card.learn_more;
		document.getElementById('c' + num + '_features').innerHTML = card.features;
		document.getElementById('c' + num + '_eligib').innerHTML = card.plan_eligib;
		
		document.getElementById('c' + num + '_cardlist').style.display = 'none';	
		$('#c' + num + '_cardlist').hide("blind", {}, 500);												
	}
	else {
		document.getElementById('c' + num + '_change').style.display = 'none';
		document.getElementById('c' + num + '_add').style.display = '';
		document.getElementById('c' + num + '_name').innerHTML = '';
		document.getElementById('c' + num + '_links').style.display = 'none';
		document.getElementById('c' + num + '_choose').style.display = '';		
		document.getElementById('c' + num + '_min_inv').innerHTML = '';
		document.getElementById('c' + num + '_inv_terms').innerHTML = '';
		document.getElementById('c' + num + '_int_pay_opt').innerHTML = '';
		document.getElementById('c' + num + '_redeemable').innerHTML = '';
		document.getElementById('c' + num + '_learn_more').href = '';
		document.getElementById('c' + num + '_features').innerHTML = '';
		document.getElementById('c' + num + '_eligib').innerHTML = '';
		populateCardList(num, true);
	}
}

//Populates and displays the card list
function populateCardList(num, animate) {
	//Get Current Category
	var cat = document.getElementById('c' + num + '_cardlist_category').value;
	
	//Create List
	var temp;
	var list = '';
	for (var x=0; x< cards.length; x++) {
		temp = cards[x].id;
		if (temp != card1.id && temp != card2.id && temp != card3.id) {
			//Ensure card is part of selected category
			if ((cat == 'Guaranteed-return' && cards[x].type=='Guaranteed-return') || (cat == 'Interest Rate-linked' && cards[x].type=='Interest Rate-linked') || (cat == 'RBC Market Access' && cards[x].type=='RBC Market Access')) {
					list += '<li><a href="javascript:changeColumnCard(' + num + ', \'' + cards[x].id + '\')"  title="GIC ' + num + ' - ' + clearTags(cards[x].name) + '">' + cards[x].name + '</a></li>';	
			}
		}
	}

	if (list == '' && cat!='') list = 'Please choose a different category.'; 
	else if (list == '' && cat=='') list = 'Please choose a category to add a GIC';
	
	
	document.getElementById('c' + num + '_cardlist_links').innerHTML = list;
	
	//Show displays blind rolldown animation
	if (animate) $('#c' + num + '_cardlist').show("blind", {}, 500);
	
}

//Clears the card object for the given column
function clearCardObject(num) {
	//Default cardlisting to "Seelct" category
	document.getElementById('c' + num + '_cardlist_category').selectedIndex = 0;
	
	
	//Remove current card from given column
	if (num == 1) card1 = new Card();
	else if (num == 2) card2 = new Card();
	else if (num == 3) card3 = new Card();
	
	//Set this columns data to blank
	setCardColumnData(num);
	
	//Repopulate other lists
	if (num != 1) populateCardList(1, false);
	if (num != 2) populateCardList(2, false);
	if (num != 3) populateCardList(3, false);	
}

//Changes the columns card and sets the data
function changeColumnCard(num, cid) {
	//Set card object
	if (num == 1) card1 = getCardObjectById(cid);
	else if (num == 2) card2 = getCardObjectById(cid);
	else if (num == 3) card3 = getCardObjectById(cid);

	buildTable(card1,card2,card3);
	//Set data in column
	setCardColumnData(1); 
	setCardColumnData(2); 
	setCardColumnData(3); 
	
	
	//Repopulate other lists
	if (num != 1) populateCardList(1, false);
	if (num != 2) populateCardList(2, false);
	if (num != 3) populateCardList(3, false);	

	
		
}