// define function that opens the overlay 
function openOverlay(branch) {          
    
    CompareCardsShowWait();
    
    // get access to the overlay API     
    var api = $("#overlay").overlay({
			
		// start exposing when overlay starts to load
		onBeforeLoad: function() {
			
			// this line does the magic. it makes the background image sit on top of the mask
			this.getBackgroundImage().expose({color: '#fff', opacity: 0.6, closeOnClick:false});
		}, 
		
		closeOnClick: false,
		
		// when overlay is closed take the expose instance and close it as well
		onClose: function() {
			$.expose.close();
		},

		onLoad: function() {
			GetCardsToCompare(branch);
		}
		
	});      
    
    // call it's  open() method             
    var self = api.load();
}

function CompareCardsShowWait()
{
    $(".compare_wait").show();
    $(".compare_show").hide();
}

function CompareCardsShowResults()
{
    $(".compare_show").show();
    $(".compare_wait").hide();
}

function GetCardsToCompare(branch)
{    
    var paramList = "";
        
     $("INPUT[type='checkbox']").each(function(i){
     if(this.checked) {               
                paramList+=this.value+",";
        }
    });

    GetDataAndBindToTable(paramList, branch);  
}

function BuildImageUrl(id) {
    return "/moneycontent/content/images/creditcards/" + id + ".gif";
}
    
function GetDataAndBindToTable(paramList, branch)
{
  CompareCardsShowWait();
  $.get("/credit-cards/GetJsonArrayOfCardObjects/" + paramList, function(data) {
      var obj = eval("(" + data + ")");
      var html = "";
      var x = 0;
      var cellsinrow = 4;
      ClearAll();
      FillRowNames();

      jQuery(obj).each(function() {

          x = x + 1;
          var imageUrl = BuildImageUrl(this.result.CreditCardNumber);
          AppendRow("." + x, "<img src=\"" + imageUrl + "\" alt='" + this.result.CreditCardName + "' width='97' height='67'>");

          var BTRateIntrod = parseFloat(this.result.BalanceTransferRateIntroductory).toFixed(2);
          var PRIntro = parseFloat(this.result.PurchaseRateIntroductory).toFixed(2);
          var PRStandard = parseFloat(this.result.PurchaseRateStandardAnnual).toFixed(2);
          var BTStandard = parseFloat(this.result.BalanceTransferFeeStandard).toFixed(2);
          var BTIntroPeriod = "";
          if (this.result.BalanceTransferRateIntroductoryPeriodMonths != null)
              BTIntroPeriod = "for " + this.result.BalanceTransferRateIntroductoryPeriodMonths + " months."
          var PRIntroPeriod = "";
          if (this.result.PurchaseRateIntroductoryPeriodMonths != null)
              PRIntroPeriod = "for " + this.result.PurchaseRateIntroductoryPeriodMonths + " months."

          var y = x + cellsinrow;
          AppendRow("." + y, "<b>" + this.result.CreditCardName + "</b>");
          y = y + cellsinrow;
          AppendRow("." + y, BTRateIntrod + "% " + BTIntroPeriod);
          y = y + cellsinrow;
          AppendRow("." + y, PRIntro + "% " + PRIntroPeriod);
          y = y + cellsinrow;
          AppendRow("." + y, "<b>" + PRStandard + "%</b> typical (variable).");
          y = y + cellsinrow;
          AppendRow("." + y, BTStandard + "%");
          y = y + cellsinrow;
          var applyLink = "javascript:goToSpecifiedurl('" + this.result.ConfusedApplyLink + "');";
          AppendRow("." + y, "&nbsp;<a href=\"" + applyLink + "\" style='text-decoration:none'><button class='image-button' onclick=\"" + applyLink + "\">apply for this credit card</button></a>");
          y = y + cellsinrow;

          var supplier = this.result.SupplierName.replace(/ /, "-").toLowerCase();
          supplier = supplier.replace(' ', "-");
          AppendRow("." + y, "&nbsp;<a href='/credit-cards/product/" + supplier+"/" + this.mappingId + "/" + branch + "' target='new'><b>More Info.</b></a>");
      });
      CompareCardsShowResults();
  });
}

function AppendRow(cssClass, appendData)
{
    $(cssClass).html(appendData);
}

function FillRowNames()
{
    $(".8").html("<b>Balance Transfer Intro Rate & Duration.</b>");
    $(".12").html("<b>Purchases Intro Rate & Duration.</b>");
    $(".16").html("<b>APR.</b>");
    $(".20").html("<b>Balance Transfer Fee.</b>");
}

function ClearAll()
{
    var maxCssClass = 31;
    for(i=0;i<=maxCssClass;i++)
    {
       $("."+i).html("&nbsp;");
    }
}