{literal}

	<script>
			$(document).ready(function(){
				
				$('.menu-close a, .menu-overlay').click(function(){$('.mobile-menu').removeClass("open");$('.menu-overlay').css("display","none");});
				$('.navbar-toggle').click(function(){$('.mobile-menu').addClass("open");$('.menu-overlay').css("display","block");});
				 $(".menu_li .submenu li:last-child").css("border-bottom", "none");
 $(".rightside-submenu li:last-child").css("border-bottom", "none");

				
				 $(".downarrow").click(function() {
  $(".downarrow").css("background-color", "")
  $(this).css("background-color", "#eee");
  $(this).next('.rightside-submenu').slideToggle();
 });
 
 $('.menu_li a').click(function() {
  $(this).next('ul').slideToggle();
 });
			 window.onload = function () {
				 var position=$(window).scrollTop();
				 if(position < 280){
				 window.setTimeout(function(){
					$("html, body").animate({ scrollTop: $('#signup_section').offset().top + 'px'
							}, 1, 'swing');
							$('html, body').css({'overflow': 'auto'});
					},10); 
				}
				else
				{
					window.setTimeout(function(){
					$("html, body").animate({ scrollTop: position + 'px'
							}, 1, 'swing');
							$('html, body').css({'overflow': 'auto'});
					},10); 
				}
			}
		});
	</script>
{/literal}

<style type="text/css">
{literal}
/* this is an intersting idea for this section */
 .ui-mobile-rendering>*{
   
   visibility: visible;
}

#profile_section div[data-role="content"] input:not([type=submit]), #profile_section div[data-role="content"] select {
    display: block;
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    background: #fff;
    min-height: 32px;
    margin-bottom: 5px;
}

#profile_section input.submit {
    background-color: #cc991a;
    border: 1px solid #cc991a;
    background-image: none;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 25px!important;
}

{/literal}
</style>

<script type="text/javascript"><!--
var countriesStates = {$countries_states};
{literal}
$(document).ready(function(){
setCountriesStates({/literal}
"#billing_country", "{$user.country|htmlspecialchars}",
"#billing_state", "{$user.state|htmlspecialchars}",
"#billing_province", "{$user.province|htmlspecialchars}",
countriesStates
{literal});
$("#billing_country select,#billing_state select").selectmenu('refresh');
});
{/literal}
--></script>
{literal}
	<script>
		
		$(document).ready(function(){
			 window.onload = function () {
				 var position=$(window).scrollTop();
				 if(position < 270){
				 window.setTimeout(function(){
					$("html, body").animate({ scrollTop: $('#profile_section').offset().top + 'px'
							}, 1, 'swing');
							$('html, body').css({'overflow': 'auto'});
					},10); 
				}
				else
				{
					window.setTimeout(function(){
					$("html, body").animate({ scrollTop: position + 'px'
							}, 1, 'swing');
							$('html, body').css({'overflow': 'auto'});
					},10); 
				}
			}
		});
	</script>
{/literal}
{include file="templates/panels/panel-catalog-categories.html"}
<div id="profile_section">
<div data-role="header">
<h1>{$msg.account.my_profile}</h1>
</div>
<div data-role="content">
<div class="ui-corner-all ui-shadow msg-notice">{$msg.account.form_agreement}</div>
{if $user_errors}
<div class="ui-corner-all ui-shadow msg-error">
{$msg.account.profile_update_error}
<ul class="list">
{foreach from=$user_errors item="user_error"}
<li>{$user_error}</li>
{/foreach}
</ul>
</div>
{/if}
{if $update_msg}<div class="msg-notice">{$update_msg}</div>{/if}
</div>
<form name="frmProfile" action="{$url_https}p=profile" method="post" onsubmit="return CheckProfileForm(this, '{$FormsBillingCompany}', '{$FormsBillingAddressLine2}', '{$FormsBillingPhone}')">
<input type="hidden" name="ua" value="{$USER_UPDATE_PROFILE}"/>
<div class="ui-header" data-role="header" role="banner"><h2>{$msg.billing.billing_information}</h2></div>
<div data-role="content">
<div data-role="fieldcontain" class="required">
<label for="billing_first_name">{$msg.billing.first_name}</label>
<input id="billing_first_name" maxlength="24" type="text" name="form[fname]" value="{$user.fname|htmlspecialchars}"/>
</div>
<div data-role="fieldcontain" class="required">
<label for="billing_last_name">{$msg.billing.last_name}</label>
<input id="billing_last_name" class="formControlText" maxlength="24" type="text" name="form[lname]" value="{$user.lname|htmlspecialchars}"/>
</div>
{if $FormsBillingCompany != "Invisible"}
<div data-role="fieldcontain"{if $FormsBillingCompany == "Required"} class="required"{/if}>
<label for="billing_company">{$msg.billing.company}</label>
<input id="billing_company" class="formControlText" maxlength="50" type="text" name="form[company]" value="{$user.company|htmlspecialchars}"/>
</div>
{else}
<input id="billing_company" type="hidden" name="form[company]" value="{$user.company|htmlspecialchars}"/>
{/if}
<div data-role="fieldcontain" class="required">
<label for="billing_address_line1">{$msg.billing.address_line1}</label>
<input id="billing_address_line1" class="formControlText" maxlength="125" type="text" name="form[address1]" value="{$user.address1|htmlspecialchars}" />
</div>
{if $FormsBillingAddressLine2 != "Invisible"}
<div data-role="fieldcontain" {if $FormsBillingAddressLine2 == "Required"}class="required"{/if}">
<label for="billing_address_line2">{$msg.billing.address_line2}</label>
<input id="billing_address_line2" maxlength="125" type="text" name="form[address2]" value="{$user.address2|htmlspecialchars}"/>
</div>
{else}
<input id="billing_address_line2" type="hidden" name="form[address2]" value="{$user.address2|htmlspecialchars}"/>
{/if}
<div data-role="fieldcontain" class="required">
<label for="billing_city">{$msg.billing.city}</label>
<input id="billing_city" maxlength="24" type="text" name="form[city]" value="{$user.city|htmlspecialchars}" />
</div>
<div id="billing_country" data-role="fieldcontain" class="required">
<label for="billing_country_select">{$msg.billing.country}</label>
<select id="billing_country_select" name="form[country]"></select>
</div>
<div id="billing_state" data-role="fieldcontain" class="required invisible">
<label for="billing_state_select">{$msg.billing.state_province}</label>
<select id="billing_state_select" name="form[state]"></select>
</div>
<div id="billing_province" data-role="fieldcontain" class="required invisible">
<label for="billing_province_input">{$msg.billing.state_province}</label>
<input id="billing_province_input" maxlength="24" type="text" name="form[province]"/>
</div>
<div data-role="fieldcontain" class="required">
<label for="billing_postal_code">{$msg.billing.postal_code}</label>
<input id="billing_postal_code" maxlength="24" type="text" name="form[zip]" value="{$user.zip|htmlspecialchars}" />
</div>
{if $FormsBillingPhone != "Invisible"}
<div data-role="fieldcontain"{if $FormsBillingPhone == "Required"} class="required"{/if}>
<label for="billing_phone_number">{$msg.billing.phone_number}</label>
<input id="billing_phone_number" maxlength="24" type="text" name="form[phone]" value="{$user.phone|htmlspecialchars}" />
</div>
{else}
<input type="hidden" name="form[phone]" value="{$user.phone|htmlspecialchars}" />
{/if}
{if $cf_billing}
{foreach from=$cf_billing item="cfield"}
<div data-role="fieldcontain"{if $cfield.is_required} class="required"{/if}>
{if $cfield.field_type != "radio"}
<label for="cf{$cfield.field_id}">{$cfield.field_caption}</label>
{cfield field=$cfield mobile=true}
{else}
<fieldset data-role="controlgroup">
<legend>{$cfield.field_caption}</legend>
{cfield field=$cfield mobile=true}
</fieldset>
{/if}
</div>
{/foreach}
{/if}
</div>
<div class="ui-header" data-role="header" role="banner"><h2>{$msg.account.account_information}</h2></div>
<div data-role="content">
<div data-role="fieldcontain" class="required">
<label for="account_email_address">{$msg.account.email_address}</label>
<input id="account_email_address" type="text" name="form[email]" value="{$user.email|htmlspecialchars}"/>
</div>
<div data-role="fieldcontain">
<label for="email_updates">{$msg.account.subscribe_updates}</label>
<input type="checkbox" name="form[updates]" id="email_updates" value="Yes" {if $user.updates == "Yes"}checked="checked"{/if}/>
<label for="email_newsletters">{$msg.account.subscribe_newsletter}</label>
<input type="checkbox" name="form[newsletters]" id="email_newsletters" value="Yes" {if $user.newsletters == "Yes"}checked="checked"{/if}/>
</div>
<div data-role="fieldcontain">
<label for="email_mode">{$msg.account.email_mode}</label>
<select id="email_mode" name="form[email_mode]">
<option value="html">{$msg.account.email_html}</option>
<option value="text" {if $form.email_mode == "text"} selected="selected"{/if}>{$msg.account.email_text}</option>
</select>
</div>
{if !$user.facebook_user}
<div data-role="fieldcontain" class="required">
<label for="account_password">{$msg.account.password} ({$msg.account.password_note})</label>
<input id="account_password" maxlength="24" type="password" name="form[password]" value=""/>
</div>
<div data-role="fieldcontain" class="required">
<label for="account_password_confirm">{$msg.account.password_confirm}</label>
<input id="account_password_confirm" maxlength="24" type="password" name="form[password2]" value=""/>
</div>
{/if}
{if $cf_account}
{foreach from=$cf_account item="cfield"}
<div data-role="fieldcontain"{if $cfield.is_required} class="required"{/if}>
{if $cfield.field_type != "radio"}
<label for="cf{$cfield.field_id}">{$cfield.field_caption}</label>
{cfield field=$cfield mobile=true}
{else}
<fieldset data-role="controlgroup">
<legend>{$cfield.field_caption}</legend>
{cfield field=$cfield mobile=true}
</fieldset>
{/if}
</div>
{/foreach}
{/if}
</div>
<div data-role="content">
<input type="submit" class="button-save submit" data-role="button" data-icon="check" data-theme="b" value="{$msg.buttons.buttonSave}">
<input type="reset" class="button-save submit" data-role="button" value="{$msg.buttons.buttonReset}">
</div>
</form>
</div>