Ariix

<html>
<head>
<link rel="icon" type="image/png" href="https://images.ariix.com/images/ariix_mark.png" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="build.number" content="#801"/>
<meta name="environment" content="production"/>
<title>Online Enrollment</title>
<script src="/OnlineServices/static/bundle-true_defer.js" type="text/javascript"></script>
<script src="/OnlineServices/static/bundle-true_defer.js" type="text/javascript"></script>
<script src="/OnlineServices/static/js/jquery.maskedinput.js" type="text/javascript"></script>
<script src="/OnlineServices/static/js/smoothness/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
<link rel="stylesheet" href="/OnlineServices/static/css/docs.css" type="text/css"/>
<link rel="stylesheet" href="/OnlineServices/static/css/smoothness/jquery-ui-1.10.4.custom.css" type="text/css"/>
<style>
<!-- -->
</style>
</head>
<body class="antialiased">
<div class="row">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="toggle-topbar menu-icon"><a class="shop-category" href="#">
<span>menu</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<!-- <li class="active"><a href="#">Right Button Active</a></li> -->
<li class="active has-dropdown">
<a href="#" style=" background: #F1F1F1;color:black;font-weight: bold;font-family: Tungsten-Light,xTungsten,仿宋;"></a>
<ul class="dropdown">
<li><a style="background: #F1F1F1;color:black;font-weight: bold;font-family: Tungsten-Light,xTungsten,仿宋;" onclick='window.location = "/OnlineServices/enroll/logout"' >Logout</a></li>
</ul>
</li>
</ul>
<ul class="left">
<li><a style=" background: #fff;height:45px" onclick='window.location = "/OnlineServices/enroll/xo"'><img src="/OnlineServices/static/images/xoffice_logo_header100_35_v16.png" style="margin-bottom: 4px;" /></a></li>
</ul>
</section>
</nav>
</div>
<div class="row">&nbsp;</div>
<div class="row">
<div class="large-12 small-12 columns">
<dl class="tabs vertical" data-tab>
<!-- Placement -->
<dd class="active">
<a href="#panel-10" onclick="$('#go').val('10');$('#agreement').removeAttr('required');next()">
Placement
</a>
</dd>
<!-- Contact Info -->
<dd
class="disabled">
<a href="#panel-10" >
Contact Info
</a>
</dd>
<!-- Pack Selection -->
<!-- A La Carte -->
<dd
class="disabled">
<a href="#panel-10" >
A La Carte
</a>
</dd>
<!-- Auto Delivery -->
<dd
class="disabled">
<a href="#panel-10" >
Auto Delivery
</a>
</dd>
<!-- Direct Deposit -->
<!-- Review -->
<dd
class="disabled">
<a href="#panel-10" >
Review
</a>
</dd>
<!-- Japan Questions -->
<!-- Japan Upload Images -->
<!-- Finish it Up -->
<dd
class="disabled">
<a href="#panel-10" >
Finish it Up
</a>
</dd>
</dl>
<script src="/OnlineServices/static/js/smoothness/jquery.ui.datepicker.js" type="text/javascript"></script>
<script src="/OnlineServices/static/js/d3.js" type="text/javascript"></script>
<!-- <link rel="stylesheet" href="/OnlineServices/static/css/jquery-ui.css" type="text/css"/> -->
<script src="/OnlineServices/static/js/jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/OnlineServices/static/js/jquery/jquery-ui.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="/OnlineServices/static/css/jquery.contextMenu.css"/>
<script type="text/javascript" src="/OnlineServices/static/js/jquery.contextMenu.js"></script>
<script type="text/javascript" src="/OnlineServices/static/js/common.js"></script>
<script src="/OnlineServices/static/js/tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
<script src="/OnlineServices/static/js/tablesorter/jquery.tablesorter.widgets.js" type="text/javascript"></script>
<script src="/OnlineServices/static/js/tablesorter/jquery.tablesorter.pager.js" type="text/javascript"></script>

<style type="text/css">
body { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important; }
.ui-widget, .nodetext { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important; }
/* .node { cursor: pointer; } */
.overlay { background-color:#fff; }
.node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; }
.node text { font-size:10px; font-family:sans-serif; stroke: black; /*darkblue;*/ stroke-width: 0.5px; }
.link { fill: none; stroke: #555; stroke-width: 1px; }
.templink { fill: none; stroke: red; stroke-width: 3px; }
.ghostCircle.show { display:block; }
.ghostCircle, .activeDrag .ghostCircle{ display: none; }
.nodeCircle {cursor: pointer;}
</style>
<script>
$(function() {
$( "#tabs" ).tabs({
event:"mouseover"
});
});
</script>
<style>
#tabs{font-size: 14px;}
.ui-widget-header {
background:#f8f8f8;
border: 1px solid #f8f8f8;
/* color: #FFFFFF; */
font-weight: bold;
font-size: 0.88889rem; color: #212121;
}
.aui-pager { margin: 0; padding: 0; }
.aui-pager li { margin-right: 3px; position: relative; float: left; list-style: none; display: block; }
.aui-pager li.ui-state-default { cursor: pointer; padding: 5px 3px; }
.aui-pager span.ui-icon { float: left; margin: 0 3px; }
.aui-pagedisplay { padding-top: 4px; }
.aui-pagedisplay span { padding: 0em 1em 0em 1em; font-size: 0.77778rem; font-weight: bold; color: #222; }
</style>
<!-- 160928001 China 11 sales promotion -->
<div id="gouqingshow" style="background:#dab205;text-align:center;display:none" ><label style="font-size:9">欢度国庆佳节,网购全场9折不减分!(10/1日至10/14截止)</label></div>
<div class="tabs-content vertical">
<div class="content active" id="panel-0">
<form id="applicant-form" action="applicant" method="post" data-abide>
<div class="row">
<div class="large-4 columns">
<div class="row">
<div class="large-12 columns">
<label id="otherLabel" class="left caption">Please select the country you reside in.</label>
<label id="jpnLabel" class="left caption">Input of member information by the person in question to be new registration has been required.</label>
<script>
$('#otherLabel').show();
$('#jpnLabel').hide();
</script>
</div>
</div>
<div class="row collapse">
<div class="large-12 columns">
<label>Home Country
<select id="country" name="country">
<option value="CAN" >
Canada</option>
<option value="CHN" >
China</option>
<option value="EU" >
European Union</option>
<option value="HKG" >
Hong Kong</option>
<option value="JPN" >
Japan</option>
<option value="KAZ" >
Kazakhstan</option>
<option value="MEX" >
Mexico</option>
<option value="NLD" >
Netherlands</option>
<option value="RUS" >
Russia</option>
<option value="TWN" >
Taiwan</option>
<option value="USA" selected>
United States</option>
</select>
</label>
</div>
</div>
<div class="row collapse" id="jpn" style="display: none;">
<div class="large-12 columns">
<label>9digit number on Gaiyo Shomen
<input type="text" pattern="integer" id="jpnNumber" name="jpnNumber" value="" />
</label>
<small id="jpnNumberError" class="error">9digit number is required and must be a digits.</small>
</div>
</div>
<div class="row collapse" id="divWarehouseJPN" style="display: none;">
<div class="large-12 columns">
<label>Warehouse
<select id="warehouseJPN" name="warehouseJPN">
<option value='10' >OTG</option>
</select>
</label>
</div>
</div>
<div class="row collapse" id="divEU" style="display: none;">
<div class="large-12 columns">
<label>Ship to country
<select id="EUcountry" name="EUcountry">
<option value="NOCountry" selected>------Please Select a Country------</option>
<option value="AUT" >Austria</option>
<option value="BEL" >Belgium</option>
<option value="DEU" >Germany</option>
<option value="DNK" >Denmark</option>
<option value="ESP" >Spain</option>
<option value="EST" >Estonia</option>
<option value="FIN" >Finland</option>
<option value="FRA" >France</option>
<option value="GBR" >United Kingdom</option>
<option value="HRV" >Croatia</option>
<option value="HUN" >Hungary</option>
<option value="IRL" >Ireland</option>
<option value="ITA" >Italy</option>
<option value="POL" >Poland</option>
<option value="PRT" >Portugal</option>
<option value="SWE" >Sweden</option>
</select>
</label>
</div>
</div>
<div class="row collapse" id="nld" style="display: none;">
<div class="large-12 columns">
<label>Warehouse
<select id="warehouseNLD" name="warehouseNLD">
<option value='11' >Netherlands OTG</option>
</select>
</label>
</div>
</div>
<div class="row collapse" id="rus" style="display: none;">
<div class="large-12 columns">
<label>Warehouse
<select id="warehouseRUS" name="warehouseRUS">
<option value='12' >Moscow or Izhevsk will call</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label class="left caption">Please select the type of the new applicant.</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="radio" name="applicantType" value="D" checked required />
<label>Become a member/representative</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="radio" name="applicantType" value="P" required />
<label>Become a preferred customer</label>
</div>
</div>
<fieldset>
<legend>Sponsorship</legend>
<div class="row collapse">
<div class="large-12 columns">
<label>Sponsor ID *
<input type="text" pattern="integer" id="sponsorId" name="sponsorId" value="3324838" placeholder="" readonly />
</label>
<small id="sponsorIdError" class="error">Sponsor ID must be a digits.</small>
</div>
</div>
<div class="row collapse">
<div class="large-12 columns">
<label>Sponsor Name
<input type="text" id="sponsorName" name="sponsorName" value="Revolution Marketing Team LLC" disabled />
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="large-7 columns" >
<div id="placement" style="display:none;">
<fieldset>
<legend>You can use ONE method below to set the placement</legend>
<div class="row">
<div class="large-12 columns">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Manual Placement</a></li>
</ul>
<div id="tabs-1">
<p>Best used if you know the Rep ID, income position, and the line that you would like to place them under.</p>
</div>
<ul>
<div class="row collapse">
<div class="large-12 columns">
<div class="small-12 columns">
<label>Placement ID *
<input type="text" pattern="integer" id="placementSponsorId" name="placementSponsorId" value="4976597" />
</label>
<small id="placementSponsorIdError" class="error" style="">Placement Sponsor ID must be a digits.</small>
</div>
</div>
</div>
<div class="row collapse">
<div class="large-12 columns">
<div class="small-12 columns">
<label>Placement Name
<input type="text" id="placementSponsorName" name="placementSponsorName" value="MICHEL, ROBERT" disabled />
</label>
</div>
</div>
</div>
<div class="row collapse">
<div class="large-12 columns">
<label>Placement Income Position #
<select id="incomePositionId" name="incomePositionId" >
<option value="1" selected="selected" >1</option>
</select>
</label>
</div>
</div>
<div class="row collapse">
<div class="large-12 columns">
<label>Line #
<select id="lineId" name="lineId">
<option value="1"
selected>
1 - Available</option>
<option value="2"
>
2 - Available</option>
<option value="3"
>
3 - Available</option>
</select>
</label>
<small class="error">Line # is require.</small>
</div>
</div>
</ul>
</div>
</div>
</div>
</fieldset>
</div>
<div class="row">
<div class="large-12 columns">
<div class="button-bar" id="btnNext">
<ul class="button-group">
<li><a onclick="$('#go').val('20');next()" class="aui-button">Next</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="large-4 columns">
</div>
<div class="large-4 columns">
</div>
<input type="hidden" id="go" name="go" value="1" />
<input type="hidden" id="addCountry" name="addCountry" value="" />
</form>
</div>
<div id="wait" class="reveal-modal tiny" data-options="close_on_background_click:false;close_on_esc:true;" data-reveal>
<p class="lead">Please Wait</p>
<p>Progressing your request...</p>
</div>
<div id="helper" class="reveal-modal tiny" data-reveal>
<p class="lead">Helper</p>
<label class="price">Enter a representative's ID, income position and the line number you would like this person to be placed in. We will identify a representative's ID you can use to place this person under on your line.</label>
<form data-abide>
<fieldset>
<legend>placement</legend>
<div class="row collapse">
<div class="large-10 columns">
<label>Placement ID *
<input type="text" pattern="integer" id="helperSponsorId" name="helperSponsorId" value="" required />
</label>
<small id="helperSponsorIdError" class="error">Placement Sponsor ID must be a digits.</small>
</div>
</div>
<div class="row collapse">
<div class="large-10 columns">
<label>Placement Name
<input type="text" id="helperSponsorName" name="helperSponsorName" value="" disabled />
</label>
</div>
</div>
<div class="row collapse">
<div class="large-10 columns">
<label>Placement Income Position #
<select id="helperIncomePositionId" name="helperIncomePositionId" >
<option value="1" selected="selected" >1</option>
</select>
</label>
</div>
</div>
<div class="row collapse">
<div class="large-10 columns">
<label>Line #
<select id="helperLineId" name="helperLineId" required>
<option value="1"
selected>
1 - Available</option>
<option value="2"
>
2 - Available</option>
<option value="3"
>
3 - Available</option>
</select>
</label>
<small class="error">Line # is require.</small>
</div>
</div>
</fieldset>
</form>
<p>
<a id="populateHelper" onclick="populateHelper();" class="aui-button">Choose</a>
</p>
<a onclick="interrupt=false;enableHelper();" class="close-reveal-modal">&#215;</a>
</div>
<div id="searcher" class="reveal-modal medium" data-reveal>
<p class="lead">Search By Name</p>
<label class="price">Please input a name, we will bring up all reps with fully or partially matched names and their addresses. You can then pick one from the list that matches your search.</label>
<form data-abide>
<div class="row collapse">
<div class="large-4 columns">
<label>Sponsor Name
<input type="text" id="searcherSponsorName" name="searcherSponsorName" value="" required />
</label>
<small class="error">is required and Half-width Roman only entry.</small>
</div>
<div style="display: none;">
<input type="text" id="ignore" name="ignore" />
</div>
</div>
<div id="recordContainer" class="row collapse">
</div>
</form>
<p><a id="searchRecord" onclick="searchRecord();" class="aui-button">Search</a>
<a id="populateSearcher" onclick="populateSearcher();" class="aui-button">Choose</a>
</p>
<a onclick="enableSearcher();enablePopulator();" class="close-reveal-modal">&#215;</a>
</div>
<div id="tree" class="reveal-modal x-large" data-reveal style="width: 1500px;">
<p class="lead">Tree View Helper</p>
<label class="price">Enter a representative's ID, income position and the line number you would like this person to be placed in. We will identify a representative's ID you can use to place this person under on your line.</label>
<form data-abide>
<fieldset>
<legend>placement</legend>
<div class="row">
<div class="large-2 columns">
<label>Placement ID *
<input type="text" pattern="integer" id="treeSponsorId" name="treeSponsorId" value="" required />
</label>
<input type="hidden" id="treeSponsorIdValidation" name="treeSponsorIdValidation" value="0" />
<small id="treeSponsorIdError" class="error">Placement Sponsor ID must be a digits.</small>
</div>
<div class="large-2 columns">
<label>Placement Name
<input type="text" id="treeSponsorName" name="treeSponsorName" value="" disabled />
</label>
</div>
<div class="large-2 columns">
<label>Placement Income Position #
<select id="treeIncomePositionId" name="treeIncomePositionId" >
<option value="1" selected="selected" >1</option>
</select>
</label>
</div>
<div class="large-6 columns" style="margin-top: 23px;">
<a id="populateTree" onclick="$('#nav').val(0);populateTree();" class="aui-button" style="margin: 15px 0 0 0;">Show Tree View</a>
<input type="hidden" id="nav" name="nav" value="0" />
<a onclick="$('#nav').val(-1); populateTree();" class="aui-button" style="margin: 15px 0 0 0;">Back</a>
<a onclick="$('#nav').val(1); populateTree();" class="aui-button" style="margin: 15px 0 0 0;">Forward</a>
</div>
</div>
<div class="row" style="display: none;">
<div class="large-12 columns">
<label>Line #
<select id="treeLineId" name="treeLineId" required>
<option value="1"
selected>
1 - Available</option>
<option value="2"
>
2 - Available</option>
<option value="3"
>
3 - Available</option>
</select>
</label>
<small class="error">Line # is require.</small>
</div>
</div>
</fieldset>
<fieldset>
<legend>Tree View Helper</legend>
<div class="">
<div id="panel"></div>
</div>
</fieldset>
<div>






</div>
</form>
<a class="close-reveal-modal">&#215;</a>
</div>
</div>

<div id="profile-dialog" title="&nbsp;">
<div id="profile-tabs">
<ul>
<li><a href="#detail-container" style="font-size: 0.88889rem; font-weight: bold;">Reprentative/Customer&nbsp;Detail</a></li>
<li><a href="#order-container" style="font-size: 0.88889rem; font-weight: bold;">Orders</a></li>
<li><a href="#sponsor-container" style="font-size: 0.88889rem; font-weight: bold;">Sponsorship</a></li>
<li><a href="#points-container" style="font-size: 0.88889rem; font-weight: bold;">Total Sales Volume Points</a></li>
</ul>
<div id="detail-container" class="ui-widget">
<table style="width: 90%;">
<tr style="background: #fff;">
<td>Representative ID</td>
<td><input type="text" id="profile-id" style="margin: 0;" readonly="readonly" /></td>
<td>Full Name</td>
<td><input type="text" id="profile-name" style="margin: 0;" readonly="readonly" /></td>
</tr>
<tr style="background: #fff;">
<td>Phone</td>
<td><input type="text" id="profile-phone" style="margin: 0;" readonly="readonly" /></td>
<td rowspan="2">Address1</td>
<td rowspan="2"><textarea id="profile-addr1" style="width: 100%; height: 90px; margin-bottom: 11px; margin: 0;" readonly="readonly"></textarea></td>
</tr>
<tr style="background: #fff;">
<td>Email</td>
<td><input type="text" id="profile-email" style="margin: 0;" readonly="readonly" /></td>
</tr>
<tr style="background: #fff;">
<td>Upline</td>
<td><input type="text" id="profile-upline" style="margin: 0;" readonly="readonly" /></td>
<td rowspan="2">Address2</td>
<td rowspan="2"><textarea id="profile-addr2" style="width: 100%; height: 90px; margin-bottom: 11px; margin: 0;" readonly="readonly"></textarea></td>
</tr>
<tr style="background: #fff;">
<td>Enrollment Date</td>
<td><input type="text" id="profile-entrydate" style="margin: 0;" readonly="readonly" /></td>
</tr>
<tr style="background: #fff;">
<td>State/Province</td>
<td><input type="text" id="profile-state" style="margin: 0;" readonly="readonly" /></td>
<td>City</td>
<td><input type="text" id="profile-city" style="margin: 0;" readonly="readonly" /></td>
</tr>
<tr style="background: #fff;">
<td>Zip Code</td>
<td><input type="text" id="profile-zipcode" style="margin: 0;" readonly="readonly" /></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="order-container" class="ui-widget aui-container">
<table id="order-tablesorter" class="ui-widget ui-widget-content aui-tablesorter"></table>
<ul id="order-pager" class="ui-widget ui-helper-clearfix aui-pager"></ul>
</div>
<div id="sponsor-container" class="ui-widget aui-container">
<table id="sponsor-tablesorter" class="ui-widget ui-widget-content aui-tablesorter"></table>
<ul id="sponsor-pager" class="ui-widget ui-helper-clearfix aui-pager"></ul>
</div>
<div id="points-container" class="ui-widget aui-container">
<table id="points-tablesorter" class="ui-widget ui-widget-content aui-tablesorter"></table>
<ul id="points-pager" class="ui-widget ui-helper-clearfix aui-pager"></ul>
</div>
</div>
</div>
<input type="hidden" id="jpnNumberInvalid" name="jpnNumberInvalid" value="true" />
<div id="wait-dialog" title=Please&nbsp;wait>
<font style="font-size: 0.88889rem; color: #212121;">Processing your request...</font>
</div>

<script type="text/javascript">
$("#profile-dialog").dialog({
autoOpen : false,
width: 950,
modal : true,
create: function (event, ui) {
$(".ui-widget-header").hide();
},
open : function(event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
close : function(event, ui) {
$(".ui-dialog-titlebar-close").show();
},
buttons : {
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#wait-dialog").dialog({
closeOnEscape : false,
open : function(event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
close : function(event, ui) {
$(".ui-dialog-titlebar-close").show();
},
autoOpen : false,
resizable : false,
height : 90,
modal : true
});
$('#otherLabel').show();
$('#jpnLabel').hide();
var invalid = false,jpnNumberInvalid = $('#jpnNumberInvalid').val(),placementInvalid = false
var sponsorIdError = false, placementSponsorIdError = false, jpnNumberError = false;
var interrupt = false, helperInvalid = false, helperSponsorIdError = false, treeInvalid = false, treeSponsorIdError = false;
$('#country').change(function() {
// 160928001 China 11 sales promotion
if ($(this).val() == 'JPN') {
$('#jpn').show();
$('#divWarehouseJPN').show();
$('#nld').hide();
$('#rus').hide();
$('#divEU').hide();
$('#jpnNumber').attr("required", "");
$('#searcherSponsorName').attr("pattern", "alpha");
$('#otherLabel').hide();
$('#jpnLabel').show();
} else if ($(this).val() == 'NLD') {
$('#jpn').hide();
$('#divWarehouseJPN').hide();
$('#nld').show();
$('#rus').hide();
$('#divEU').hide();
$('#jpnNumber').removeAttr("required");
$('#searcherSponsorName').removeAttr("pattern");
$('#otherLabel').show();
$('#jpnLabel').hide();
} else if ($(this).val() == 'RUS') {
$('#jpn').hide();
$('#divWarehouseJPN').hide();
$('#nld').hide();
$('#rus').show();
$('#divEU').hide();
$('#jpnNumber').removeAttr("required");
$('#searcherSponsorName').removeAttr("pattern");
$('#otherLabel').show();
$('#jpnLabel').hide();
} else if($(this).val() == 'EU'){
$('#jpn').hide();
$('#rus').hide();
$('#divWarehouseJPN').hide();
$('#nld').hide();
$('#divEU').show();
$('#otherLabel').show();
$('#jpnLabel').hide();
} else {
$('#jpn').hide();
$('#divWarehouseJPN').hide();
$('#nld').hide();
$('#rus').hide();
$('#divEU').hide();
$('#jpnNumber').removeAttr("required");
$('#searcherSponsorName').removeAttr("pattern");
$('#otherLabel').show();
$('#jpnLabel').hide();
}
});

$('#EUcountry').change(function() {
if($('#country').val()=='EU' && $('#EUcountry').val() != "NOCountry") {
$('#EUcountry').css("borderColor","#cccccc");
}
});
$('#jpnNumber').keyup(function(e) {
if (e.keyCode == 13) {
$(this).blur();
}
});
$('#jpnNumber').blur(function() {
if (jpnNumberError) {
$('#jpnNumberError').html('9digit number is required and must be a digits.');
$('#jpnNumber').closest("div").removeClass('error');
jpnNumberError = false;
}
if ($(this).val() != '') {
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxJpnNumber?jpnNumber=' + $(this).val(),
data : $(this).val(),
dataType : 'json',
beforeSend : function() {
$('#wait').foundation('reveal', 'open');
},
complete : function() {
$('#wait').foundation('reveal', 'close');
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
if (response[0] != null) {
$('#jpnNumberError').html('Invalid 9digit number.');
$('#jpnNumber').closest("div").addClass('error');
jpnNumberError = true;
jpnNumberInvalid = true;
} else {
jpnNumberInvalid = false;
if(clickNext) {
if(!invalid && !placementInvalid) {
$("#applicant-form").submit();
} else {
clickNext = false;
}
}
}
}
});
}
});
$('#incomePositionId').change(function() {
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxLineList?incomePositionId=' + $(this).val() + "&placementSponsorId=" + $('#placementSponsorId').val(),
data : $(this).val(),
dataType : 'json',
beforeSend : function() {
$('#wait').foundation('reveal', 'open');
},
complete : function() {
$('#wait').foundation('reveal', 'close');
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
if (response != null && response.length > 0) {
var option = "";
var available = false;
for (var i = 0; i < response.length; i++) {
if (response[i].avail == 0) {
available = true;
}
}
if (!available) {
option += "<option value=\"\">No Available Line #</option>";
}
for (var i = 0; i < response.length; i++) {
option += "<option value=" + response[i].lineid;
if (response[i].avail == 1) {
option += " disabled>";
} else {
option += ">";
}
option += response[i].lineid + " - ";
if (response[i].avail == 1) {
option += "Occupied</option>";
} else {
option += "Available</option>";
}
}
$('#lineId').closest("div").removeClass('error');
// $('#lineId').removeAttr("required");
$('#lineId').html(option);
}
}
});
});

$('#placementSponsorId').keyup(function(e) {
if (e.keyCode == 13) {
$(this).blur();
}
});
$('#placementSponsorId').blur(function() {
if (placementSponsorIdError) {
$('#placementSponsorIdError').html('Placement Sponsor ID must be a digits.');
$('#placementSponsorId').closest("div").removeClass('error');
placementSponsorIdError = false;
}
if($('#sponsorId').val() == '') {
$('#sponsorIdError').html('Sponsor ID must be a digits.');
$('#sponsorId').closest("div").addClass('error');
//sponsorIdError = false;
placementInvalid = false;
$('#placementSponsorId').val('');
return;
}
placementInvalid = false;
if (typeof($(this).attr('data-invalid'))=='undefined' && $(this).val() != '' && !interrupt) { // && $('#sponsorId').val() != '') {
$('#placementSponsorName').val('');
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxIncomePositionList?type=1&sponsorId=' + $('#sponsorId').val() + '&placementSponsorId=' + $(this).val(),
data : $(this).val(),
dataType : 'json',
beforeSend : function() {
$('#wait').foundation('reveal', 'open');
},
complete : function() {
$('#wait').foundation('reveal', 'close');
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
if (response[0] != null) {
$('#placementSponsorIdError').html(response[0]);
$('#placementSponsorId').closest("div").addClass('error');
placementSponsorIdError = true;
placementInvalid = true;
}
else if (response[0] == null && response[1] != null && response[1].length > 0) {
$('#placementSponsorName').val(response[2]);
var option = "";
for (var i = 0; i < response[1].length; i++) {
option += "<option value=" + response[1][i].distIpid + ">" + response[1][i].distIpid + "</option>";
}
$('#incomePositionId').html(option);
option = "";
var available = false;
for (var i = 0; i < response[3].length; i++) {
if (response[3][i].avail == 0) {
available = true;
}
}
if (!available) {
option += "<option value=\"\">No Available Line #</option>";
}
for (var i = 0; i < response[3].length; i++) {
option += "<option value=" + response[3][i].lineid;
if (response[3][i].avail == 1) {
option += " disabled>";
} else {
option += ">";
}
option += response[3][i].lineid + " - ";
if (response[3][i].avail == 1) {
option += "Occupied</option>";
} else {
option += "Available</option>";
}
}
$('#lineId').closest("div").removeClass('error');
// $('#lineId').removeAttr("required");
$('#lineId').html(option);
} else {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
}
}
});
}
if ($(this).val() == '') {
$('#placementSponsorName').val('');
$('#incomePositionId').html('');
$('#lineId').html('<option value=\"\">No Available Line #</option>');
}
});
// *************** HELPER **************
$('#helperSponsorId').keyup(function(e) {
if (e.keyCode == 13) {
$(this).blur();
}
});
$('#helperSponsorId').blur(function() {
if (helperSponsorIdError) {
$('#helperSponsorIdError').html('Placement Sponsor ID must be a digits.');
$('#helperSponsorId').closest("div").removeClass('error');
helperSponsorIdError = false;
}
if (typeof($(this).attr('data-invalid'))=='undefined' && $(this).val() != '') {
$('#helperSponsorName').val('');
helperInvalid = false;
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxIncomePositionList?type=1&sponsorId=' + $('#sponsorId').val() + '&placementSponsorId=' + $(this).val(),
data : $(this).val(),
dataType : 'json',
beforeSend : function() {
disableHelper();
},
complete : function() {
enableHelper();
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
if (response[0] != null) {
$('#helperSponsorIdError').html(response[0]);
$('#helperSponsorId').closest("div").addClass('error');
helperSponsorIdError = true;
helperInvalid = true;
$('#helperSponsorName').val('');
$('#helperIncomePositionId').html('');
$('#helperLineId').html('<option value=\"\">No Available Line #</option>');
}
else if (response[0] == null && response[1] != null && response[1].length > 0) {
$('#helperSponsorName').val(response[2]);
var option = "";
for (var i = 0; i < response[1].length; i++) {
option += "<option value=" + response[1][i].distIpid + ">" + response[1][i].distIpid + "</option>";
}
$('#helperIncomePositionId').html(option);
option = "";
var available = false;
/* for (var i = 0; i < response[3].length; i++) {
if (response[3][i].avail == 0) {
available = true;
}
}
if (!available) {
option += "<option value=\"\">No Available Line #</option>";
}
for (var i = 0; i < response[3].length; i++) {
option += "<option value=" + response[3][i].lineid;
if (response[3][i].avail == 1) {
option += " disabled>";
} else {
option += ">";
}
option += response[3][i].lineid + " - ";
if (response[3][i].avail == 1) {
option += "Occupied</option>";
} else {
option += "Available</option>";
}
} */
for (var i = 0; i < response[3].length; i++) {
option += "<option value=" + response[3][i].lineid + ">" + response[3][i].lineid + "</option>";
}
$('#helperLineId').closest("div").removeClass('error');
$('#helperLineId').html(option);
} else {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
}
}
});
}
if ($(this).val() == '') {
$('#helperSponsorName').val('');
$('#helperIncomePositionId').html('');
$('#helperLineId').html('');
}
});

$('#helperIncomePositionId').change(function() {
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxLineList?incomePositionId=' + $(this).val() + "&placementSponsorId=" + $('#helperSponsorId').val() ,
data : $(this).val(),
dataType : 'json',
beforeSend : function() {
disableHelper();
},
complete : function() {
enableHelper();
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
if (response != null && response.length > 0) {
var option = "";
var available = false;
/* for (var i = 0; i < response.length; i++) {
if (response[i].avail == 0) {
available = true;
}
}
if (!available) {
option += "<option value=\"\">No Available Line #</option>";
}
for (var i = 0; i < response.length; i++) {
option += "<option value=" + response[i].lineid;
if (response[i].avail == 1) {
option += " disabled>";
} else {
option += ">";
}
option += response[i].lineid + " - ";
if (response[i].avail == 1) {
option += "Occupied</option>";
} else {
option += "Available</option>";
}
} */
for (var i = 0; i < response.length; i++) {
option += "<option value=" + response[i].lineid + ">" + response[i].lineid + "</option>";
}
$('#helperLineId').closest("div").removeClass('error');
$('#helperLineId').html(option);
}
}
});
});
function openHelper() {
$('#helperSponsorId').val('3324838');
$('#helperSponsorName').val('Revolution Marketing Team LLC');
$('#helper').foundation('reveal', 'open');
$('#helperSponsorId').closest("div").removeClass('error');
$('#helperLineId').closest("div").removeClass('error');
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxIncomePositionList?type=1&sponsorId=' + $('#sponsorId').val() + '&placementSponsorId=' + $('#helperSponsorId').val(),
data : $('#helperSponsorId').val(),
dataType : 'json',
beforeSend : function() {
disableHelper();
},
complete : function() {
enableHelper();
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
if (response[0] != null) {
$('#helperSponsorIdError').html(response[0]);
$('#helperSponsorId').closest("div").addClass('error');
helperSponsorIdError = true;
helperInvalid = true;
$('#helperSponsorName').val('');
$('#helperIncomePositionId').html('');
$('#helperLineId').html('<option value=\"\">No Available Line #</option>');
}
else if (response[0] == null && response[1] != null && response[1].length > 0) {
$('#helperSponsorName').val(response[2]);
var option = "";
for (var i = 0; i < response[1].length; i++) {
option += "<option value=" + response[1][i].distIpid + ">" + response[1][i].distIpid + "</option>";
}
$('#helperIncomePositionId').html(option);
option = "";
var available = false;
for (var i = 0; i < response[3].length; i++) {
option += "<option value=" + response[3][i].lineid + ">" + response[3][i].lineid + "</option>";
}
$('#helperLineId').closest("div").removeClass('error');
$('#helperLineId').html(option);
}
$('#helperIncomePositionId').val('1');
$('#helperLineId').val('2');
}
});
}
function populateHelper() {
// $('#helperSponsorId').focus();
// $('#helperSponsorId').blur();
// $('#helperLineId').focus();
// $('#helperLineId').blur();
if ($('#helperSponsorId').val() == '') {
$('#helperSponsorId').closest("div").addClass('error');
}
if ($('#helperLineId').val() == '') {
$('#helperLineId').closest("div").addClass('error');
}
// alert(typeof($('#helperSponsorId').attr('data-invalid')) == 'undefined');
// alert(typeof($('#helperLineId').attr('data-invalid')) == 'undefined');
if (typeof($('#helperSponsorId').attr('data-invalid')) == 'undefined' &&
typeof($('#helperLineId').attr('data-invalid')) == 'undefined' &&
!helperInvalid && $('#helperSponsorId').val() != '' && $('#helperIncomePositionId').val() != '' && $('#helperLineId').val() != '') {
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxHelper?helperSponsorId=' + $('#helperSponsorId').val() + '&helperIncomePositionId=' + $('#helperIncomePositionId').val() + '&helperLineId=' + $('#helperLineId').val(),
dataType : 'json',
beforeSend : function() {
disableHelper();
},
complete : function() {
enableHelper();
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
interrupt = false;
$('#helper').foundation('reveal', 'close');
if (response[0] == null && response[1] != null && response[1].length > 0) {
$('#placementSponsorName').val(response[2]);
var option = "";
for (var i = 0; i < response[1].length; i++) {
option += "<option value=" + response[1][i].distIpid + ">" + response[1][i].distIpid + "</option>";
}
$('#incomePositionId').html(option);
option = "";
var available = false;
for (var i = 0; i < response[3].length; i++) {
if (response[3][i].avail == 0) {
available = true;
}
}
if (!available) {
option += "<option value=\"\">No Available Line #</option>";
}
for (var i = 0; i < response[3].length; i++) {
option += "<option value=" + response[3][i].lineid;
if (response[3][i].avail == 1) {
option += " disabled>";
} else {
option += ">";
}
option += response[3][i].lineid + " - ";
if (response[3][i].avail == 1) {
option += "Occupied</option>";
} else {
option += "Available</option>";
}
}
$('#lineId').closest("div").removeClass('error');
$('#lineId').html(option);
$('#placementSponsorId').val(response[4]);
$('#incomePositionId').val(response[5]);
$('#lineId').val(response[6]);
}
}
});
}
}
function enableHelper() {
$('#helperSponsorId').removeAttr('disabled');
$('#helperIncomePositionId').removeAttr('disabled');
$('#helperLineId').removeAttr('disabled');
$('#populateHelper').removeAttr('disabled');
$('#openTree').removeAttr('disabled');
$('#populateHelper').html('Choose');
}
function disableHelper() {
$('#helperSponsorId').attr('disabled', 'disabled');
$('#helperIncomePositionId').attr('disabled', 'disabled');
$('#helperLineId').attr('disabled', 'disabled');
$('#populateHelper').attr('disabled', 'disabled');
$('#openTree').attr('disabled', 'disabled');
$('#populateHelper').html('Loading...');
}



// *************** SEARCHER **************
$('#searcherSponsorName').keyup(function(e) {
if (e.keyCode == 13) {
searchRecord();
}
});
function openSearcher() {
$('#searcherSponsorName').val('');
$('#recordContainer').html('');
$('#searchRecord').show();
$('#populateSearcher').hide();
$('#confirmSearcher').hide();
$('#searcherSponsorName').closest("div").removeClass('error');
$('#searcher').foundation('reveal', 'open');
}
function searchRecord() {
if (typeof($('#searcherSponsorName').attr('data-invalid')) == 'undefined') {
// if ($('#searcherSponsorName').val() == '') {
// $('#searcherSponsorName').closest("div").addClass('error');
// } else {
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxSearcher?searcherSponsorName=' + encodeURI(encodeURI($('#searcherSponsorName').val())),
dataType : 'json',
beforeSend : function() {
disableSearcher();
},
complete : function() {
enableSearcher();
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
var recordContainer = '';
if (response.length > 0) {
recordContainer += '<div class=\"large-12 columns\" style=\"max-height: 300px; overflow-y: scroll; margin-bottom: 20px;\">';
recordContainer += '<label class=\"price\">Result List</label>';
recordContainer += '<table id=\"recordTable\" style=\"width: 100%;\">';
recordContainer += '<thead>';
recordContainer += '<tr>';
recordContainer += '<th>ID</th>';
recordContainer += '<th>Name</th>';
recordContainer += '<th>Address</th>';
recordContainer += '<th>City</th>';
recordContainer += '<th>State</th>';
recordContainer += '</tr>';
recordContainer += '</thead>';
recordContainer += '<tbody>';
for (var i = 0; i < response.length; i++) {
recordContainer += '<tr style=\"background: #f9f9f9;\">';
recordContainer += '<td style=\"white-space:nowrap;\">';
recordContainer += '<input type=\"radio\" id=\"searcherSponsorId\" name=\"searcherSponsorId\" style=\"margin-bottom: 0px; vertical-align: text-top;\" value=\"' + response[i].DISTID + '\" radiosponsorName=\"' + response[i].DISPLAY_NAME + '\" />&nbsp;' + response[i].DISTID;
recordContainer += '</td>';
recordContainer += '<td style=\"white-space:nowrap;\">' + response[i].DISPLAY_NATIVE_NAME + '</td>';
recordContainer += '<td style=\"white-space:nowrap;\">' + response[i].ADDRESS + '</td>';
recordContainer += '<td style=\"white-space:nowrap;\">' + response[i].CITY + '</td>';
recordContainer += '<td style=\"white-space:nowrap;\">' + response[i].STATE + '</td>';
recordContainer += '</tr>';
}
recordContainer += '</tbody>';
recordContainer += '</table>';
recordContainer += '</div>';

recordContainer += '<div id=\"searcherSponsorIdError\" class=\"large-12 columns error\" style=\"display: none;\">';
recordContainer += '<small class=\"error\" style=\"padding-top: 0.5rem;\">Please Choose a Sponsor.</small>';
recordContainer += '</div>';

$('#recordContainer').html(recordContainer);
$('#searchRecord').show();
$('#populateSearcher').show();
$('input:radio[name="searcherSponsorId"]').click(function() {
$('#searcherSponsorIdError').hide();
});
} else if(response[0] == null) {
recordContainer += '<label class=\"price\">No Records Found.</label>';
$('#recordContainer').html(recordContainer);
} else {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
}
}
});
}
}
function confirmSearcher(){
if (!$('input:radio[name="searcherSponsorId"]').is(":checked")) {
$('#searcherSponsorIdError').show();
}
else{
$("#sponsorId").val($('input:radio[name="searcherSponsorId"]:checked').val());
$("#sponsorName").val($('input:radio[name="searcherSponsorId"]:checked').attr('radiosponsorName'));
$('#searcher').foundation('reveal', 'close');
}
}
function populateSearcher() {
if (!$('input:radio[name="searcherSponsorId"]').is(":checked")) {
$('#searcherSponsorIdError').show();
} else {
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxPopulator?searcherSponsorId=' + $('input:radio[name="searcherSponsorId"]:checked').val(),
dataType : 'json',
beforeSend : function() {
disablePopulator();
},
complete : function() {
enablePopulator();
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
$('#searcher').foundation('reveal', 'close');
if (response[0] == null && response[1] != null && response[1].length > 0) {
$('#placementSponsorName').val(response[2]);
var option = "";
for (var i = 0; i < response[1].length; i++) {
option += "<option value=" + response[1][i].distIpid + ">" + response[1][i].distIpid + "</option>";
}
$('#incomePositionId').html(option);
option = "";
var available = false;
for (var i = 0; i < response[3].length; i++) {
if (response[3][i].avail == 0) {
available = true;
}
}
if (!available) {
option += "<option value=\"\">No Available Line #</option>";
}
for (var i = 0; i < response[3].length; i++) {
option += "<option value=" + response[3][i].lineid;
if (response[3][i].avail == 1) {
option += " disabled>";
} else {
option += ">";
}
option += response[3][i].lineid + " - ";
if (response[3][i].avail == 1) {
option += "Occupied</option>";
} else {
option += "Available</option>";
}
}
$('#lineId').closest("div").removeClass('error');
$('#lineId').html(option);
$('#placementSponsorId').val(response[4]);
}
}
});
}
}
function enableSearcher() {
$('#searcherSponsorName').removeAttr('disabled');
$('#searchRecord').removeAttr('disabled');
$('#searchRecord').html('Search');
}
function disableSearcher() {
$('#searcherSponsorName').attr('disabled', 'disabled');
$('#searchRecord').attr('disabled', 'disabled');
$('#searchRecord').html('Loading...');
}
function enablePopulator() {
$('#searcherSponsorName').removeAttr('disabled');
$('input:radio[name="searcherSponsorId"]').removeAttr('disabled');
$('#searchRecord').removeAttr('disabled');
$('#populateSearcher').removeAttr('disabled');
$('#populateSearcher').html('Choose');
}
function disablePopulator() {
$('#searcherSponsorName').attr('disabled', 'disabled');
$('input:radio[name="searcherSponsorId"]').attr('disabled', 'disabled');
$('#searchRecord').attr('disabled', 'disabled');
$('#populateSearcher').removeAttr('disabled');
$('#populateSearcher').html('Loading...');
}
// *************** TREE VIEW HELPER **************
var treeData1 = {
"distId": 10001, "name": "Flare", "status": 1,
"children": [{
"distId": 10002, "name": "Analytics", "status": 1,
"children": [
{
"distId": 10003, "name": "Cluster", "status": 0,
"children": [
{"distId": 10004, "name": "AgglomerativeCluster", "status": 1, "size": 3938},
{"distId": 10005, "name": "CommunityStructure", "status": 0, "size": 3812},
{"distId": 10006, "name": "HierarchicalCluster", "status": 0, "size": 6714},
{"distId": 10007, "name": "MergeEdge", "status": 0, "size": 743}
]
},
{
"distId": 10008, "name": "graph", "status": 1,
"children": [
{"distId": 10009, "name": "BetweennessCentrality", "status": 1, "size": 3534},
{"distId": 10010, "name": "LinkDistance", "status": 1, "size": 5731},
{"distId": 10011, "name": "MaxFlowMinCut", "status": 0, "size": 7840},
{"distId": 10012, "name": "ShortestPaths", "status": 0, "size": 5914},
{"distId": 10013, "name": "SpanningTree", "status": 0, "size": 3416}
]
},
{
"distId": 10014, "name": "Optimization", "status": 0,
"children": [
{"distId": 10015, "name": "AspectRatioBanker", "status": 1, "size": 7074}
]
}
]}]
}
$('#treeSponsorId').keyup(function(e) {
if (e.keyCode == 13) {
$(this).blur();
}
});
$('#treeSponsorId').blur(function() {
$('#treeSponsorIdValidation').val(-1);
if (treeSponsorIdError) {
$('#treeSponsorIdError').html('Placement Sponsor ID must be a digits.');
$('#treeSponsorId').closest("div").removeClass('error');
treeSponsorIdError = false;
}
if (typeof($(this).attr('data-invalid'))=='undefined' && $(this).val() != '') {
$('#treeSponsorName').val('');
treeInvalid = false;
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxIncomePositionList?type=1&sponsorId=' + $('#sponsorId').val() + '&placementSponsorId=' + $(this).val(),
data : $(this).val(),
dataType : 'json',
beforeSend : function() {
disableTree();
},
complete : function() {
enableTree();
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
if (response[0] != null) {
$('#treeSponsorIdError').html(response[0]);
$('#treeSponsorId').closest("div").addClass('error');
treeSponsorIdError = true;
treeInvalid = true;
$('#treeSponsorName').val('');
$('#treeIncomePositionId').html('');
$('#treeLineId').html('<option value=\"\">No Available Line #</option>');
}
else if (response[0] == null && response[1] != null && response[1].length > 0) {
$('#treeSponsorName').val(response[2]);
var option = "";
for (var i = 0; i < response[1].length; i++) {
option += "<option value=" + response[1][i].distIpid + ">" + response[1][i].distIpid + "</option>";
}
$('#treeIncomePositionId').html(option);
option = "";
var available = false;
for (var i = 0; i < response[3].length; i++) {
option += "<option value=" + response[3][i].lineid + ">" + response[3][i].lineid + "</option>";
}
$('#treeLineId').closest("div").removeClass('error');
$('#treeLineId').html(option);
// $('#nav').val(0);
$('#treeSponsorIdValidation').val(0);
// populateTree();
} else {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
}
}
});
}
if ($(this).val() == '') {
$('#treeSponsorName').val('');
$('#treeIncomePositionId').html('');
$('#treeLineId').html('');
}
});

$('#treeIncomePositionId').change(function() {
/* jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxLineList?incomePositionId=' + $(this).val() + "&placementSponsorId=" + $('#treeSponsorId').val(),
data : $(this).val(),
dataType : 'json',
beforeSend : function() {
disableTree();
},
complete : function() {
enableTree();
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
if (response != null && response.length > 0) {
var option = "";
var available = false;
for (var i = 0; i < response.length; i++) {
option += "<option value=" + response[i].lineid + ">" + response[i].lineid + "</option>";
}
$('#treeLineId').closest("div").removeClass('error');
$('#treeLineId').html(option);
}
}
}); */
});
function openTree() {
var viewerWidth = 1405;
var viewerHeight = 600;
$("#panel").html('');
var baseSvg = d3.select("#panel").append("svg")
.attr("width", viewerWidth)
.attr("height", viewerHeight)
.attr("overflow", "hidden");
if($('#helperSponsorId').val() != '') {
$('#treeSponsorId').val($('#helperSponsorId').val());
$('#treeSponsorName').val($('#helperSponsorName').val());
} else {
$('#treeSponsorId').val('3324838');
$('#treeSponsorName').val('Revolution Marketing Team LLC');
}
$('#tree').foundation('reveal', 'open');
$('#treeSponsorId').closest("div").removeClass('error');
$('#treeLineId').closest("div").removeClass('error');
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxIncomePositionList?type=1&sponsorId=' + $('#sponsorId').val() + '&placementSponsorId=' + $('#treeSponsorId').val(),
data : $('#treeSponsorId').val(),
dataType : 'json',
beforeSend : function() {
disableTree();
},
complete : function() {
enableTree();
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
if (response[0] != null) {
$('#treeSponsorIdError').html(response[0]);
$('#treeSponsorId').closest("div").addClass('error');
treeSponsorIdError = true;
treeInvalid = true;
$('#treeSponsorName').val('');
$('#treeIncomePositionId').html('');
$('#treeLineId').html('<option value=\"\">No Available Line #</option>');
}
else if (response[0] == null && response[1] != null && response[1].length > 0) {
$('#treeSponsorName').val(response[2]);
var option = "";
for (var i = 0; i < response[1].length; i++) {
option += "<option value=" + response[1][i].distIpid + ">" + response[1][i].distIpid + "</option>";
}
$('#treeIncomePositionId').html(option);
option = "";
var available = false;
for (var i = 0; i < response[3].length; i++) {
option += "<option value=" + response[3][i].lineid + ">" + response[3][i].lineid + "</option>";
}
$('#treeLineId').closest("div").removeClass('error');
$('#treeLineId').html(option);
$('#nav').val(0);
//generatedTree();
}
}
});
}
function populateTree() {
if ($('#treeSponsorIdValidation').val() != 0){
return;
}
if (!treeSponsorIdError) {
generatedTree();
} else {
if ($('#nav').val() != 0) {
generatedTree();
}
}
}
function enableTree() {
$('#treeSponsorId').removeAttr('disabled');
$('#treeIncomePositionId').removeAttr('disabled');
$('#treeLineId').removeAttr('disabled');
$('#populateTree').removeAttr('disabled');
$('#populateTree').html('Show Tree View');
}
function disableTree() {
$('#treeSponsorId').attr('disabled', 'disabled');
$('#treeIncomePositionId').attr('disabled', 'disabled');
$('#treeLineId').attr('disabled', 'disabled');
$('#populateTree').attr('disabled', 'disabled');
$('#populateTree').html('Loading...');
}
function generatedTree() {
$("#panel").html('');
disableTree();
// Calculate total nodes, max label length
var totalNodes = 0;
var maxLabelLength = 0;
// variables for drag/drop
var selectedNode = null;
var draggingNode = null;
// panning variables
var panSpeed = 200;
// Within 20px from edges will pan when dragging.
var panBoundary = 20;
// Misc. variables
var i = 0;
var duration = 750;
var root;
// size of the diagram
var viewerWidth = 1405;
var viewerHeight = 600;
var check = false;
var tree = d3.layout.tree(5) // WIDTH
.size([, viewerWidth])
.separation(function(a, b) {
var separation = (a.parent == b.parent ? 1 : 2) * a.depth;
return 20;
});
// define a d3 diagonal projection for use by the node paths later on.
var diagonal = d3.svg.diagonal();

// sort the tree according to the node names
function sortTree() {
tree.sort(function(a, b) {
// if ((/msie/.test(navigator.userAgent.toLowerCase()) || /trident/.test(navigator.userAgent.toLowerCase()))
// && !/opera/.test(navigator.userAgent.toLowerCase())) {
// return parseInt(b.parentLineId) < parseInt(a.parentLineId) ? -1 : 1;
// } else {
return parseInt(b.parentLineId) < parseInt(a.parentLineId) ? 1 : -1;
// }
});
}
// Sort the tree initially incase the JSON isn't in a sorted order.
sortTree();
// TODO: Pan function, can be better implemented.
function pan(domNode, direction) {
var speed = panSpeed;
if (panTimer) {
cleanTimeout(panTimer);
translateCoords = d3.transform(svgGroup.attr("transform"));
if (direction == 'left' || direction == 'right') {
translateX = direction == 'left' ? translateCoords.translate[0] + speed : translateCoords.translate[0] - speed;
translateY = translateCoords.translate[1];
} else if (direction == 'up' || direction == 'down') {
translateX = translateCoords.translate[0];
translateY = direction == 'up' ? translateCoords.translate[1] + speed : translateCoords.translate[1] - speed;
}
scaleX = translateCoords.scale[0];
scaleY = translateCoords.scale[1];
scale = zoomListener.scale();
svgGroup.transition().attr("transform", "translate(" + translateX + "," + translateY + ")scale(" + scale + ")");
d3.select(domNode).select('g.node').attr("transform", "translate(" + translateX + "," + translateY + ")");
zoomListener.scale(zoomListener.scale());
zoomListener.translate([translateX, translateY]);
panTimer = setTimeout(function() {
pan(domNode, speed, direction);
}, 50);
}
}
// Define the zoom function for the zoomable tree
function zoom() {
svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
// define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom);

// define the baseSvg, attaching a class for styling and the zoomListener
var baseSvg = d3.select("#panel").append("svg")
.attr("width", viewerWidth)
.attr("height", viewerHeight)
.attr("overflow", "hidden")
.call(zoomListener);
// Append a group which holds all nodes and which the zoom Listener can act upon.
var svgGroup = baseSvg.append("g");
// Define the drag listeners for drag/drop behaviour of nodes.
// Helper functions for collapsing and expanding nodes.
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
function expand(d) {
if (d._children) {
d.children = d._children;
d.children.forEach(expand);
d._children = null;
}
}
var overCircle = function(d) {
selectedNode = d;
updateTempConnector();
};
var outCircle = function(d) {
selectedNode = null;
updateTempConnector();
};
// Function to update the temporary connector indicating dragging affiliation
var updateTempConnector = function() {
var data = [];
if (draggingNode !== null && selectedNode !== null) {
// have to flip the source coordinates since we did this for the existing connectors on the original tree
data = [{
source: {
x: selectedNode.y0,
y: selectedNode.x0
},
target: {
x: draggingNode.y0,
y: draggingNode.x0
}
}];
}
var link = svgGroup.selectAll(".templink").data(data);
link.enter().append("path")
.attr("class", "templink")
.attr("d", d3.svg.diagonal())
.attr('pointer-events', 'none');
link.attr("d", d3.svg.diagonal());
link.exit().remove();
};
// Function to center node when clicked/dropped so node doesn't get lost when collapsing/moving with large amount of children.
function centerNode(source, initial) {
if (initial == null ) {
scale = zoomListener.scale();
} else {
scale = initial;
}
y = -source.y0;
x = -source.x0; //+
x = x * scale + viewerWidth / 2;
y = y * scale + 15; // viewerHeight / 2
d3.select('g').transition()
.duration(duration)
.attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
zoomListener.scale(scale);
zoomListener.translate([x, y]);
}
// Toggle children function
function toggleChildren(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else if (d._children) {
d.children = d._children;
d._children = null;
}
return d;
}
// Toggle children on click.
function click(d) {
if (!d.available) {
// if (d3.event.defaultPrevented) return; // click suppressed
// d = toggleChildren(d);
// update(d);
// centerNode(d, null);
} else {
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxHelper?helperSponsorId=' + d.parentId + '&helperIncomePositionId=' + d.parentIpId + '&helperLineId=' + d.parentLineId,
dataType : 'json',
beforeSend : function() {
disableTree();
$('#wait').foundation('reveal', 'open');
},
complete : function() {
enableTree();
$('#wait').foundation('reveal', 'close');
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null,redirect to login page ");
return;
},
success : function(response) {
$('#tree').foundation('reveal', 'close');
if (response[0] == null && response[1] != null && response[1].length > 0) {
$('#placementSponsorName').val(response[2]);
var option = "";
for (var i = 0; i < response[1].length; i++) {
option += "<option value=" + response[1][i].distIpid + ">" + response[1][i].distIpid + "</option>";
}
$('#incomePositionId').html(option);
option = "";
var available = false;
for (var i = 0; i < response[3].length; i++) {
if (response[3][i].avail == 0) {
available = true;
}
}
if (!available) {
option += "<option value=\"\">No Available Line #</option>";
}
for (var i = 0; i < response[3].length; i++) {
option += "<option value=" + response[3][i].lineid;
if (response[3][i].avail == 1) {
option += " disabled>";
} else {
option += ">";
}
option += response[3][i].lineid + " - ";
if (response[3][i].avail == 1) {
option += "Occupied</option>";
} else {
option += "Available</option>";
}
}
$('#lineId').closest("div").removeClass('error');
$('#lineId').html(option);
$('#placementSponsorId').val(response[4]);
$('#incomePositionId').val(response[5]);
$('#lineId').val(response[6]);
}
}
});
}
}
function dblclick(d) {
if (d.available) {
return;
}
var viewerWidth = 1405;
var viewerHeight = 600;
$("#panel").html('');
var baseSvg = d3.select("#panel").append("svg")
.attr("width", viewerWidth)
.attr("height", viewerHeight)
.attr("overflow", "hidden");
centerNode(d, 1);
$('#treeSponsorId').val(d.distId);
if (treeSponsorIdError) {
$('#treeSponsorIdError').html('Placement Sponsor ID must be a digits.');
$('#treeSponsorId').closest("div").removeClass('error');
treeSponsorIdError = false;
}
if (typeof($('#treeSponsorId').attr('data-invalid'))=='undefined' && $('#treeSponsorId').val() != '') {
$('#treeSponsorName').val('');
treeInvalid = false;
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxIncomePositionList?type=1&sponsorId=' + $('#sponsorId').val() + '&placementSponsorId=' + $('#treeSponsorId').val(),
data : $('#treeSponsorId').val(),
dataType : 'json',
beforeSend : function() {
disableTree();
},
complete : function() {
//enableTree();
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null, redirect to login page.");
return;
},
success : function(response) {
if (response[0] != null) {
$('#treeSponsorIdError').html(response[0]);
$('#treeSponsorId').closest("div").addClass('error');
treeSponsorIdError = true;
treeInvalid = true;
$('#treeSponsorName').val('');
$('#treeIncomePositionId').html('');
$('#treeLineId').html('<option value=\"\">No Available Line #</option>');
}
else if (response[0] == null && response[1] != null && response[1].length > 0) {
$('#treeSponsorName').val(response[2]);
var option = "";
for (var i = 0; i < response[1].length; i++) {
option += "<option value=" + response[1][i].distIpid + ">" + response[1][i].distIpid + "</option>";
}
$('#treeIncomePositionId').html(option);
$('#treeIncomePositionId').val(d.ipId);
$('#nav').val(0);
generatedTree();
} else {
window.location = "/OnlineServices/enroll/login";
console.log("response null, redirect to login page.");
return;
}
}
});
}
if ($('#treeSponsorId').val() == '') {
$('#treeSponsorName').val('');
$('#treeIncomePositionId').html('');
$('#treeLineId').html('');
}
}
function update(source) {
// Compute the new height, function counts total children of root node and sets tree height accordingly.
// This prevents the layout looking squashed when new nodes are made visible or looking sparse when nodes are removed
// This makes the layout more consistent.
var levelWidth = [1];
var childCount = function(level, n) {
if (n.children && n.children.length > 0) {
if (levelWidth.length <= level + 1) levelWidth.push(0);
levelWidth[level + 1] += n.children.length;
n.children.forEach(function(d) {
childCount(level + 1, d);
});
}
};
childCount(0, root);
var newHeight;
if (d3.max(levelWidth) <= 3) {
newHeight = d3.max(levelWidth) * 50; // 50 pixels per line
} else {
newHeight = d3.max(levelWidth) * 25; // 25 pixels per line
}
tree = tree.size([newHeight, viewerWidth]);
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Set widths between levels based on maxLabelLength.
nodes.forEach(function(d) {
d.y = (d.depth * (maxLabelLength * 6)); // maxLabelLength * 10px HEIGH
// alternatively to keep a fixed scale one can set a fixed depth per level
// Normalize for fixed-depth by commenting out below line
// d.y = (d.depth * 500); //500px per level.
});
// Update the nodes…
node = svgGroup.selectAll("g.node")
.data(nodes, function(d) {
return d.id || (d.id = ++i);
});
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
/* .attr("class", function(d) {
if (!d.available) {
return "node anode"
}
return "node"
}) */
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
// .on('click', click)
// .on('dblclick', dblclick)
.attr("distid", function(d) {
return d.distId;
})
.attr("ipid", function(d) {
return d.ipId;
})
.attr("data", function(d) {
return d;
});
/* .on("contextmenu", function(data, index) {
// handle right click
alert('123');

// stop showing browser menu
d3.event.preventDefault();
}); */
nodeEnter.append("title")
.text(function(d) {
/* var title = "report.description.doubleclick\n" +
"report.option.distid: " + d.distId + "\n" +
"Full Name: " + d.name + "\n" +
"report.option.vp: " + d.pv + "\n" +
"report.option.iixcard: " + d.iix + "\n" +
"report.option.goldmember: " + d.gold + "\n" +
"report.option.rank: " + d.rank;
return title; */
return d.available ? "Available" : "Occupied";
// : "Double-click to Drill Down." + "\n" + "Occupied";
});
nodeEnter.append("circle")
// .attr('class', 'nodeCircle')
.attr("r", 0)
.on('click', click)
.on('dblclick', dblclick)
.attr("class", function(d) {
if (!d.available) {
return "nodeCircle anode"
}
return "nodeCircle"
})
.attr("distid", function(d) {
return d.distId;
})
.attr("ipid", function(d) {
return d.ipId;
})
.attr("data", function(d) {
return d;
})
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.append("text")
.attr("x", function(d) {
return d.children || d._children ? -10 : 10;
})
.attr("dy", ".35em")
.attr('class', 'nodeText')
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start";
})
.text(function(d) {
return d.distId;
})
.style("fill-opacity", 0);
// phantom node to give us mouseover in a radius around it
nodeEnter.append("circle")
.attr('class', 'ghostCircle')
.attr("r", 30)
.attr("opacity", 0.2) // change this to zero to hide the target area
.style("fill", "red")
.attr('pointer-events', 'mouseover')
.attr("id", function(d) {
// return "ghostCircle-" + d.distId.split('.')[0] + d.distId.split('.')[1];
})
.on("mouseover", function(node) {
overCircle(node);
})
.on("mouseout", function(node) {
outCircle(node);
});
// Update the text to reflect whether node has children or not.
node.select('text')
.attr("x", function(d) {
return 10;
})
.attr("y", function(d) {
if ($('#type').val() == 0) {
return "-1.65em";
} else {
return "-0.65em";
}
})
.attr("text-anchor", function(d) {
return "start";
})
.text(function(d) {
return "";
});
var dy = 1;
node.select("text").append("tspan")
.attr("x", -12)
.attr("dy", dy + "em")
.attr("class", "nodetext")
.attr("stroke", "blue")
.text(function(d) {
if ($('#type').val() == 0) {
return "" + d.parentLineId;
} else {
return "";
}
});
node.select("text").append("tspan")
.attr("x", 10)
.attr("dy", dy + "em")
.attr("class", "nodetext")
.text(function(d) {
if (!d.available) {
return "" + d.distId + "." + d.ipId;
}
return "Available";
});
node.select("text").append("tspan")
.attr("x", 10)
.attr("dy", dy + "em")
.attr("class", "nodetext")
.text(function(d) {
if (!d.available) {
if (d.romanName.length > 12) {
return "" + d.romanName.substring(0, 12) + "...";
} else {
return "" + d.romanName;
}
}
return "";
});

// Change the circle fill depending on whether it has children and is collapsed
node.select("circle.nodeCircle")
.attr("r", 4.5)
.style("stroke", function(d) {
return d.available ? "#555" : (d.qual == '1' ? "darkgreen" : "darkgray"); // "#368a54" : "#007295"; stroke-dasharray: 1;
})
.style("stroke-dasharray", function(d) {
return d.available ? "2" : "28";
})
.style("fill", function(d) {
return d.available ? "white" :(d.qual == '1' ? "lightgreen" : "lightgray"); // (d.available == 0 ? "#43AC6A" : "#008CBA") : "white";
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
// Fade the text in
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + source.y + "," + source.x + ")";
})
.remove();
nodeExit.select("circle")
.attr("r", 0);
nodeExit.select("text")
.style("fill-opacity", 0);
// Update the links…
var link = svgGroup.selectAll("path.link")
.data(links, function(d) {
return d.target.id;
});
// Enter any new links at the parent's previous position.
link.enter().insert("polyline", "g")
.attr("class", "link")
.attr("points", function(d) {
return d.source.x + "," + d.source.y + " " +
d.source.x + "," + (d.target.y + d.source.y) / 2 + " " +
d.target.x + "," + (d.target.y + d.source.y) / 2 + " " +
// d.source.x + "," + parseInt(d.source.y + (d.target.y - d.source.y) * 2 / 3) + " " +
// d.target.x + "," + parseInt(d.source.y + (d.target.y - d.source.y) * 2 / 3) + " " +
d.target.x + "," + d.target.y;
});
/* .attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
}); */
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("points", function(d) {
return d.source.x + "," + d.source.y + " " +
d.source.x + "," + (d.target.y + d.source.y) / 2 + " " +
d.target.x + "," + (d.target.y + d.source.y) / 2 + " " +
// d.source.x + "," + parseInt(d.source.y + (d.target.y - d.source.y) * 2 / 3) + " " +
// d.target.x + "," + parseInt(d.source.y + (d.target.y - d.source.y) * 2 / 3) + " " +
d.target.x + "," + d.target.y;
})
/* .attr("d", function(d) {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
}) */
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
//
var ajaxUrl = "ajaxTreeViewHelper?treeSponsorId=" + $("#treeSponsorId").val() + "&treeIncomePositionId=" + $("#treeIncomePositionId").val() + "&treeLineId=" + $("#treeLineId").val() + "&nav=" + $("#nav").val();
d3.json(ajaxUrl, function(error, treeData) {
$('#treeSponsorId').val(treeData[1]);
if($('#nav').val() != 0) {
$('#treeSponsorName').val('');
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxIncomePositionList?type=1&sponsorId=' + $('#sponsorId').val() + '&placementSponsorId=' + $('#treeSponsorId').val(),
data : $('#treeSponsorId').val(),
dataType : 'json',
beforeSend : function() {
disableTree();
},
complete : function() {
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null, redirect to login page.");
return;
},
success : function(response) {
enableTree();
if (response[0] == null && response[1] != null && response[1].length > 0) {
$('#treeSponsorName').val(response[2]);
var option = "";
for (var i = 0; i < response[1].length; i++) {
option += "<option value=" + response[1][i].distIpid + ">" + response[1][i].distIpid + "</option>";
}
$('#treeIncomePositionId').html(option);
$('#treeIncomePositionId').val(treeData[2]);
if (treeSponsorIdError) {
$('#treeSponsorIdError').html('Placement Sponsor ID must be a digits.');
$('#treeSponsorId').closest("div").removeClass('error');
treeSponsorIdError = false;
}
} else {
window.location = "/OnlineServices/enroll/login";
console.log("response null, redirect to login page.");
return;
}
}
});
} else {
enableTree();
}
// A recursive helper function for performing some setup by walking through all nodes
function visit(parent, visitFn, childrenFn) {
if (!parent) return;
visitFn(parent);
var children = childrenFn(parent);
if (children) {
var count = children.length;
for (var i = 0; i < count; i++) {
visit(children[i], visitFn, childrenFn);
}
}
}
// Call visit function to establish maxLabelLength
visit(treeData[0], function(d) {
totalNodes++;
maxLabelLength = 8; // Math.max(d.romanName.length, maxLabelLength); HIGH
}, function(d) {
return d.children && d.children.length > 0 ? d.children : null;
});

// Define the root
root = treeData[0];
root.x0 = 0;
root.y0 = viewerWidth / 2;
// Layout the tree initially and center on the root node.
update(root);
centerNode(root, 1);
$('.anode').contextMenu('context-menu-1', {
'Detail Info': {
click: function(element) {
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'refreshUserDetails?profileId=' + element.attr('distid'),
data : element.attr('distid'),
dataType : 'json',
// timeout : ajaxTimeOut,
beforeSend : function() {
$("#wait-dialog").dialog("open");
},
complete : function() {
$("#wait-dialog").dialog("close");
},
success : function(response) {
if (response[0] != null && response[1] != null) {
$('#profile-id').val(response[0].DISTID);
$('#profile-name').val(response[0].NAME);
$('#profile-phone').val(response[0].PHONE);
$('#profile-email').val(response[0].EMAIL);
$('#profile-upline').val(response[0].UPLINE);
$('#profile-entrydate').val(response[0].ENTRYDATE);
$('#profile-addr1').val(response[0].ADDR1);
$('#profile-addr2').val(response[0].ADDR2);
$('#profile-city').val(response[0].CITY);
$('#profile-state').val(response[0].STATE);
$('#profile-zipcode').val(response[0].POSTALCODE);
var selectors = ["order-tablesorter", "order-pager"];
var title = null;
var headers = ["Order Number",
"Order Date",
"Order Total",
"Points",
"Tracking Number"];
var records = new Array(response[1].length);
for (var i = 0; i < response[1].length; i++) {
records[i] = [response[1][i].ORDER_NUMBER, response[1][i].ORDER_DATE, response[1][i].CURRENCY_CODE + ' ' + response[1][i].ORDER_TOTAL, response[1][i].POINTS,
response[1][i].TRACKING_NUMBER];
}
generateContainer($("#order-container"), selectors, title, headers, records, '', 5);
$("#order-tablesorter").tablesorter({
widthFixed : true
}).tablesorterPager({
container : $("#order-pager")
});
$("#order-tablesorter").css('width', '90%');
selectors = ["sponsor-tablesorter", "sponsor-pager"];
title = null;
headers = ["Dist Id",
"Name",
"Country Code",
"Status",
"Entry Date"];
records = new Array(response[2].length);
for (var i = 0; i < response[2].length; i++) {
var statusTemp;
switch (response[2][i].DISTSTATUS){
case "R": statusTemp = "Rep/Renewal Due";
break;
case "P": statusTemp = "Preferred Customer";
break;
case "D": statusTemp = "Representative";
break;
case "T": statusTemp = "Terminated";
break;
case "C": statusTemp = "Retail Customer";
break;
case "S": statusTemp = "Suspended";
break;
case "E": statusTemp = "Pending";
break;
}
records[i] = [response[2][i].DISTID,
response[2][i].COUNTRYCODE=="CHN"?response[2][i].NAME2:response[2][i].NAME1,
response[2][i].COUNTRYCODE,
statusTemp,
response[2][i].ENTRYDATE];
}
generateContainer($("#sponsor-container"), selectors, title, headers, records, '', 5);
$("#sponsor-tablesorter").tablesorter({
widthFixed : true
}).tablesorterPager({
container : $("#sponsor-pager")
});
$("#sponsor-tablesorter").css('width', '90%');
selectors = ["points-tablesorter", "points-pager"];
title = null;
headers = ["Common Week",
"Points"];
records = new Array(response[3].length);
for (var i = 0; i < response[3].length; i++) {
records[i] = [response[3][i].COMM_WEEK, response[3][i].POINTS];
}
generateContainer($("#points-container"), selectors, title, headers, records, '', 5);
$("#points-tablesorter").tablesorter({
widthFixed : true
}).tablesorterPager({
container : $("#points-pager")
});
$("#points-tablesorter").css('width', '90%');
$("#profile-tabs").tabs();
$("#profile-dialog").dialog("open");
$(".ui-dialog-titlebar-close").hide();
$(".ui-button-text").css("font-size", "0.88889rem");
$(".ui-button-text").css("font-weight", "bold");
}
}
});
},
klass: "menu-item-1"
},
'Drill Down': {
click: function(element) {
var viewerWidth = 1405;
var viewerHeight = 600;
$("#panel").html('');
var baseSvg = d3.select("#panel").append("svg")
.attr("width", viewerWidth)
.attr("height", viewerHeight)
.attr("overflow", "hidden");
// centerNode(d, 1);
$('#treeSponsorId').val(element.attr('distid'));
if (treeSponsorIdError) {
$('#treeSponsorIdError').html('Placement Sponsor ID must be a digits.');
$('#treeSponsorId').closest("div").removeClass('error');
treeSponsorIdError = false;
}
if (typeof($('#treeSponsorId').attr('data-invalid'))=='undefined' && $('#treeSponsorId').val() != '') {
$('#treeSponsorName').val('');
treeInvalid = false;
jQuery.ajax({
type : 'post',
contentType : 'application/json',
url : 'ajaxIncomePositionList?type=1&sponsorId=' + $('#sponsorId').val() + '&placementSponsorId=' + $('#treeSponsorId').val(),
data : $('#treeSponsorId').val(),
dataType : 'json',
beforeSend : function() {
disableTree();
},
complete : function() {
enableTree();
},
error : function() {
window.location = "/OnlineServices/enroll/login";
console.log("response null, redirect to login page.");
return;
},
success : function(response) {
if (response[0] != null) {
$('#treeSponsorIdError').html(response[0]);
$('#treeSponsorId').closest("div").addClass('error');
treeSponsorIdError = true;
treeInvalid = true;
$('#treeSponsorName').val('');
$('#treeIncomePositionId').html('');
$('#treeLineId').html('<option value=\"\">No Available Line #</option>');
}
else if (response[0] == null && response[1] != null && response[1].length > 0) {
$('#treeSponsorName').val(response[2]);
var option = "";
for (var i = 0; i < response[1].length; i++) {
option += "<option value=" + response[1][i].distIpid + ">" + response[1][i].distIpid + "</option>";
}
$('#treeIncomePositionId').html(option);
$('#treeIncomePositionId').val(element.attr('ipid'));
$('#nav').val(0);
generatedTree();
} else {
window.location = "/OnlineServices/enroll/login";
console.log("response null, redirect to login page.");
return;
}
}
});
}
if ($('#treeSponsorId').val() == '') {
$('#treeSponsorName').val('');
$('#treeIncomePositionId').html('');
$('#treeLineId').html('');
}
},
klass: "second-menu-item"
}
}, { disable_native_context_menu: false, leftClick: true }
);
});
}
var clickNext = false;
function next() {
// $('#lineId').attr("required", "");
if($("#btnNext").is(":hidden")){
return;
}
if($('#country').val()=='EU' && $('#EUcountry').val() == 'NOCountry'){
$('#EUcountry').closest("div").addClass('error');
$('#EUcountry').css("borderColor","red");
return;
} else if($('#country').val()=='EU'){
$('#EUcountry').closest("div").removeClass('error');
$('#EUcountry').css("borderColor","#CCCCCC");
}
if( $('#country').val() == 'JPN') {
if(invalid || jpnNumberInvalid || placementInvalid) {
if(jpnNumberInvalid) {
clickNext = true;
$('#jpnNumber').blur();
}
return;
}
} else if(invalid || placementInvalid){
return;
}
$('#jpnNumberInvalid').val(jpnNumberInvalid)
$("#applicant-form").submit();
}
</script>
</div>
</div>
<script src="/OnlineServices/static/js/foundation.min.js" type="text/javascript"></script>
<script>
$(document).foundation();
console.log("started foundation");
</script>
<footer class="row" style="font-size: 0.94444rem;">
<div class="large-12 columns"><hr/>
<div class="row">
<div class="large-4 small-12 columns">
<p>&copy; Copyright 2016 Ariix, Inc.</p>
</div>
<div class="large-4 small-12 columns">
<a id="en-lang" href="?lang=en_us"><img src="/OnlineServices/static/images/en.png" width="23" height="23" title="English" /></a>
<a id="ja-lang" href="?lang=ja_jp" style="padding-left: 2px;"><img src="/OnlineServices/static/images/ja.png" width="23" height="23" title="日本語" /></a>
<div style="display: inline-flex;" >
<div style="border: 1px solid gray; float: left; width: 24px; height: 24px;" ><img src="/OnlineServices/static/images/hkg.png" /></div>
<div style="border-top: 1px solid gray; border-bottom: 1px solid gray; float: left; height: 24px; padding-top: 3px;"><a id="zh-hkg-lang" href="?lang=zh_tw">繁體</a></div>
<div style="border: 1px solid gray; float: left; height: 24px; padding-top: 3px;" ><a id="zh-lang" href="?lang=zh_cn"
style="padding-right: 0px;">简体</a></div>
</div>
<a id="zh-tw-lang" href="?lang=zh_tw" style="padding-left: 2px;"><img src="/OnlineServices/static/images/twn.png" width="23" height="23" title="繁體中文" /></a>
<a id="nl-lang" href="?lang=nl_nl" style="padding-left: 2px;"><img src="/OnlineServices/static/images/thenetherlands.png" width="23" height="23" title="Nederlands" /></a>
<a id="es-mx-lang" href="?lang=es_mx" style="padding-left: 2px;"><img src="/OnlineServices/static/images/mexico.png" width="23" height="23" title="Espa&ntilde;ol" /></a>
<a id="ru-lang" href="?lang=ru_ru" style="padding-left: 2px;"><img src="/OnlineServices/static/images/russia.png" width="23" height="23" title="Russsion" /></a>
<!-- <a id="en-lang" href="?lang=en_us"><img src="/OnlineServices/static/images/en.png" width="23" height="23" /></a>
<a id="ja-lang" href="?lang=ja_jp" style="padding-left: 2px;"><img src="/OnlineServices/static/images/ja.png" width="23" height="23" /></a>
<a id="es-mx-lang" href="?lang=es_mx" style="padding-left: 2px;"><img src="/OnlineServices/static/images/mexico.png" width="23" height="23" /></a>
<a id="en-sg-lang" href="?lang=en_sg" style="padding-left: 2px;"><img src="/OnlineServices/static/images/singapore.png" width="23" height="23" /></a>
<a id="en-au-lang" href="?lang=en_au" style="padding-left: 2px;"><img src="/OnlineServices/static/images/australia.png" width="23" height="23" /></a>
<a id="nl-lang" href="?lang=nl_nl" style="padding-left: 2px;"><img src="/OnlineServices/static/images/thenetherlands.png" width="23" height="23" /></a>
<a id="ru-lang" href="?lang=ru_ru" style="padding-left: 2px;"><img src="/OnlineServices/static/images/russia.png" width="23" height="23" /></a>
<a id="ru-ua-lang" href="?lang=ru_ua" style="padding-left: 2px;"><img src="/OnlineServices/static/images/ukraine.png" width="23" height="23" /></a>
<a id="ru-kz-lang" href="?lang=ru_kz" style="padding-left: 2px;"><img src="/OnlineServices/static/images/kazakstan.png" width="23" height="23" /></a> -->
</div>
<div class="large-4 small-12 columns">
<ul class="inline-list right">
<li><a href="https://www.ariix.com">www.ariix.com</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
Comments