{if $step==1}
{include file="header.html"}

<div class="wait"></div>

<script type="text/javascript" src="{$live_site}/libs/nicEdit/nicEdit.min.js"></script>
<script type="text/javascript" src="{$live_site}/libs/jQuery/plugins/jquery.form.js"></script>
<script type="text/javascript" src="{$live_site}/libs/jQuery/plugins/jquery.number.min.js"></script>

<link rel="stylesheet" href="{$live_site}/libs/jQuery/plugins/intlTelInput/intlTelInput.css">
<script src="{$live_site}/libs/jQuery/plugins/intlTelInput/intlTelInput.min.js"></script>


{if $groups_array|@count>2}{assign var="rw" value="1000"}{else}{assign var="rw" value="660"}{/if}

<style type="text/css">
{literal}

.regcontainer {  }

@media all and (min-width: 700px)
{

.regcontainer { width: {/literal}{$rw}{literal}px; }

}

{/literal}
</style>

<div class="main1 box">

{if $no_groups>1 && !$only_group}
<div class="pt30 centered regcontainer" id="select_group">

{foreach name=groups from=$groups_array item=v}

		<div class="regbox regbox{$smarty.foreach.groups.index} {if $smarty.foreach.groups.index%3!=2 && !($smarty.foreach.groups.index==1 && $groups_array|@count==2)}mr20{/if}">
				<div class="btitle">{$v.name}</div>
				<div class="rcontent">{$v.description}</div>
				<div class="p20 pb30">
				<a href="javascript:;" class="select_group" id="select_group{$v.id}" alt="{$v.id}^{$v.name}"><div class="regbutton">{$lng.register.select_group}</div></a>
				</div>

		</div>

{/foreach}

<div class="clearfix"></div>

</div> {* end select_group *}

<div id="group_selected" class="pt30" style="display: none;" >
	<div class="left_form">{$lng.register.group}:</div>

	<div class="right_form clearfix">
	<div class="lfloat btn10-right-arrow">
		<a href="javascript:;" id="change_group"><span class="tag"></span>&nbsp;&nbsp;<strong>|&nbsp;{$lng.register.change_group}</strong></a>
	</div>
	</div>
	<div class="clearfix"></div>
</div> {* end group_selected *}

{/if}

<form name="users_form" id="users_form" method="post" action="register.php?step=3" enctype="multipart/form-data">

<input type="hidden" name="group" id="group" value="{if isset($only_group) && $only_group}{$only_group}{/if}" />

<div id="register_form"></div>

</form>

<div id="registered" class="mb300 pdiv2" style="display: none">
<div class="info"><p>{if isset($info)}{$info}{/if}</p></div>
</div> {* end registered *}

</div> {* end main *}


{literal}
<script type="text/javascript">
//<![CDATA[

function usernameChecker() {

	//var username_enc = base64_encode($("#username").val());
//var username_enc = $("#username").val();
	$.post("{/literal}{$live_site}{literal}/include/username_checker.php", $( "#users_form" ).serialize() , function(data){ 

		data_split = data.split("|");
		var error = data_split[0];
		var info = data_split[1];
		if(info) {
			$("#username_available").html(info);
			$("#username_available").show();
			$("#username_error").hide();
		}
		else if(error) {
			$("#username_error").html(error);
			$("#username_error").show();
			$("#username_available").hide();
		}

	});

}



$(document).ready(function() {

$('.tooltip').powerTip({
	placement: 'n'
});

var options = { 
       // target:        '#output1',   // target element(s) to be updated with server response 
	beforeSerialize: beforeSerialize,
        beforeSubmit:  beforeSubmit,  // pre-submit callback 
        success:       successResponse  // post-submit callback 
 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 

function beforeSerialize(jqForm, options) {

$("body").addClass("loading"); 

	{/literal}{if $htmlarea_exists}{literal}
	// capturing nicEditor content
	for(var i=0;i<data_htmlarea.nicInstances.length;i++){data_htmlarea.nicInstances[i].saveContent();}
	{/literal}{/if}{literal}

	// international phones errors
	var extra_phone_error = recheckIntlPhone();
	if(extra_phone_error.length>0) {

		// clean all fields possible err class
		$(".err").removeClass("err");
		// remove all err_labels
		$(".err_label").remove();
			
		for (var i = 0, len = extra_phone_error.length; i < len; i++) {

			$("#"+extra_phone_error[i]).addClass("err");
			// add as child to first right_form
			$("#"+extra_phone_error[i]).closest( ".right_form").prepend('<label class="err_label">{/literal}{$lng.listings.errors.invalid_phone}{literal}</label>');
			
		}

		$("body").removeClass("loading"); 

		// move the page to the first err_label element
		$('html,body').animate({scrollTop:$(".err:first").offset().top-60}, 'slow');

		return false;
			
	} // end international phone error

	// return false to cancel submit

}

// pre-submit callback 
function beforeSubmit(formData, jqForm, options) { 

    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 
    var queryString = $.param(formData); 
 
    // jqForm is a jQuery object encapsulating the form element.  To access the 
    // DOM element for the form do this: 
    // var formElement = jqForm[0]; 
 
    //alert('About to submit: \n\n' + queryString); 
 
    // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the form submit to continue 
    
    return true; 
} 

// post-submit callback 
function successResponse(responseText, statusText, xhr, $form)  { 

    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 
 
    // if the ajaxForm method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 
 
    // if the ajaxForm method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 
 
    //alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
    //    '\n\nThe output div should have already been updated with the responseText.'); 

//alert(responseText);
			var ret = JSON.parse(responseText);
    
			// ad saved correctly
			if(ret.response==1) {

				// clean all fields possible err class
				$(".err").removeClass("err");
				// remove all err_labels
				$(".err_label").remove();

				// show info message and hide form
				$("#register_form").slideUp();
				$("#group_selected").slideUp();
				$(".info").html("<p>"+ret.info+"</p>");
				$("#registered").slideDown();

				// move the page to the info label
				$('html,body').animate({scrollTop:$("#register_form").offset().top}, 'slow');

				$("body").removeClass("loading"); 

				return;
			}

			if(ret.response==2) { // REDIRECT
			
				location.href=ret.redirect;
				return;
			
			}

			// response = 0 -> there are errors in submit ad process 
			var no_err = ret.error.length;
			var err_field, err_string;

			// clean all fields possible err class
			$(".err").removeClass("err");

			// remove all err_labels
			$(".err_label").remove();

			// mark each field with error 
			for (var idx=0;idx<no_err;idx++) { 

				err_field = ret.error[idx].field;
				err_string = ret.error[idx].error;

				if(err_field=="alert_window") { alert(err_string); $("body").removeClass("loading"); $('input[type="submit"]').prop('disabled', true); break; }
				
				$("#"+err_field).addClass("err");
				// add as child to first right_form
				$("#"+err_field).closest( ".right_form").prepend('<label class="err_label">'+err_string+'</label>');

			}

			// move the page to the first err_label element
			$('html,body').animate({scrollTop:$(".err:first").offset().top-60}, 'slow');

			$("body").removeClass("loading"); 

			{/literal}{if $settings.register_captcha && $settings.enable_recaptcha}
			// reload recaptcha
			gReCaptchaReset();
			{/if}{literal}


} 

//initialize the AJAX form
$('#users_form').ajaxForm(options);
$('a.imgfield').magnificPopup({type:'image', image: { cursor: null } });

{/literal}
{if $only_group}

	loadRegistrationForm({$only_group});


{/if}
{literal}
/*
{/literal}
var gmaps_on = {if $gmaps}1{else}0{/if};
// initialize google maps
if (gmaps_on) load_gmaps();
{literal}
*/
// ----------- SELECT GROUP ----------
$(document).on("click", ".select_group", function(){ 

	// get current selected group
	var group_no = parseInt(jQuery(this).attr("id").substr(12));

	var det = jQuery(this).attr("alt");
	var split_res=det.split("^");
	var group_id = split_res[0];
	var group_name = split_res[1];

	// set value for selected plan
	$("#group").val(group_id);

	$("#select_group").slideUp();

	$("#group_selected span.tag").html(group_name);
	$("#group_selected").slideDown();

	loadRegistrationForm(group_id);

}); // end select_plan click	
	
$(document).on("click", "#change_group", function(){ 

	// empty plan value
	$("#group").val(0);

	// show plans box
	$("#group_selected").slideUp();
	$("#select_group").slideDown();

	// hide registration form
	$("#register_form").html("");
	$("#register_form").show();

}); // end change plan
	
});

function loadRegistrationForm(group_id) {

	var str = "";
	if(group_id>0) str+="&group="+group_id;
	// get custom fields
	$.ajax({
		type		: "GET",
		cache		: false,
		url		: "{/literal}{$live_site}{literal}/register.php?step=2"+str,
		data		: $(this).serializeArray(),
		success: function(data) {
			$("#register_form").html(data);
			load_gmaps();
		}// end data
	}); // end ajax

}


//]]>
</script>
{/literal}

{include file="footer.html"}
{/if} {* end if step==1 *}

{if $step==2}

<input type="hidden" name="access" id="access" />

<div class="page_title heading"><h1>{$lng.navbar.register}{if $no_groups>1} {$lng.general.as} {$group_settings.name}{/if}</h1></div>

<div class="form_container pt30">

{include file="data/form_includes.html" fields_array=$user_fields user_fields=[]}

{if $group_settings.affiliates}
<div class="clearfix">
	<div class="left_form"><img src="{$template_path}images/info.png"  class="tooltip" title="{$lng.users.info.affiliate_paypal_email}" />{$lng.users.affiliate_paypal_email}<span class="mandatory"> *</span></div>
	<div class="right_form"><input type="text" size="30" name="affiliate_paypal_email" id="affiliate_paypal_email"  value="{if isset($tmp.affiliate_paypal_email)}{$tmp.affiliate_paypal_email}{/if}" />
	</div>
</div>
{/if}

{include file="custom_fields_form.html" fields_array=$user_fields user_fields=[] type="user"}

{if $group_settings.store == 2}
<div class="clearfix">
	<div class="left_form">{$lng.users.store_banner}</div>
	<div class="right_form"><input type="file" name="store_banner"/>&nbsp;<span class="info_message">{$lng.users.info.store_banner}</span></div>
</div>
{/if}

<div class="clearfix">
<div class="left_form">&nbsp;</div>
<div class="right_form">
{if $settings.register_captcha}
{if $settings.enable_recaptcha}
{include file="data/recaptcha.html"}
{else}
{include file="data/random_image.html"}
{/if}
{/if}
</div>
</div>

<div class="form_footer">
<div class="buttons rfloat">
	<input type="submit" class="button positive" name="Submit" id="Submit" value="{$lng.navbar.register}" />
</div>
<div class="clearfix"></div>
</div>

</div>{* end form_container *}

{/if} {* end if step=2 *}