<div id="mobile_login" data-role="page">

	<div data-role="header" data-inset="true" data-theme="l" data-inline="true">
		<div class="logo" style="margin-bottom:10px;"></div>
	</div>

	<div data-role="content" class="main">

        <div data-role="content" data-inset="true">
<?php if(Zend_Registry::get('config')->global['demo'] == 1) :?>
<p style="text-align:center; margin-bottom: 20px;">Enter the username <b>demo@demo.atmail.com</b> password <b>demo</b> to access the mobile UI interface</p>
<?php else :?>
<p style="text-align:center; margin-bottom: 20px;">Enter your email and password to access mobile webmail.</p>
<?php endif ?>
 
		<form id="form_login" action="" method="POST">
                <fieldset>
                    <input class="login-input" type="email" name="email" id="email" value="chartertestemail2@charter.net" placeholder="Email"/>
                    <input class="login-input" type="password" name="password" id="password" value="Welcome1" placeholder="Password"/>

	                <div class="hidden_more_field" style="display: none;">
		                <input id="login_server" class="login-input" type="url" name="requestedServer" value="" placeholder="Mailserver"/>
		                <select id="login_protocal" name="MailType">
			                <option value="IMAP">IMAP</option>
			                <option value="IMAPS">IMAP SSL</option>
		                </select>
	                </div>

	                <div class="login-button-container">
		                <a id="login_more" data-icon="arrow-d" data-role="button">Options</a>
		                <!--		                <input id="login_submit" type="submit" value="Login" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right"/>-->
		                <input id="login_submit" type="submit" value="Login" data-role="button" data-inline="true" data-theme="b"/>
	                </div>

                </fieldset>
            </form>

            <div class="message-panel" data-role="collapsible" data-theme="c" data-content-theme="e" data-collapsed="false" style="display: none;">
                <h3></h3>
                <p>Logged out</p>
            </div>
		</div>
    </div><!-- /content -->
</div>

<script type="text/javascript">

    var appBaseUrl = "<?php echo $this->appBaseUrl; ?>";

    var login = {
	    showMore : function() {
			$(".hidden_more_field", "#mobile_login").show();
		    $('#login_more').hide();
		    $('#login_submit').parent().width('97%');
	    },

	    clearFields : function() {
		    $('.login-input', '#mobile_login').val('');
	    }
    };

	//wait for the correct page to initialize
	$(document).delegate('#mobile_login', 'pageinit', function () {
		$mobile.reload();

		$('#login_more').bind('click', function(e) {
			e.stopPropagation();
			login.showMore();
			return false;
		});
	});

	$(document).delegate("#mobile_login", "pageshow", function() {
        setMaillistRefreshFlag(true);
		login.clearFields();
    });

    function checkCookieEnabled() {
        if(!$mobile.isCookieEnabled() ) {
            var message = "Cannot login because Cookie not enabled. " +
                "Please go to Settings > Safari > Accept Cookies, Choose 'From visited' or 'Always'";
            alert(message);
        }
    }

    $(function() {

<?php if(Zend_Registry::get('config')->global['demo'] == 1) :?>
$(function() {
$("#email").val("demo@demo.atmail.com");
$("#password").val("demo");
});
<?php endif; ?>

        checkCookieEnabled();

        $("INPUT[type=submit]", "#form_login").bind('click', function(e) {
            e.preventDefault();

            $mail.clearCache();
            $contact.clearCache();
            setMaillistRefreshFlag(true);

	        var loginData = $("#form_login").serializeObject();

            var _this = $(this);

	        if(loginData.email.indexOf('@')<0) {
		        alert('Invalid email address. Please check again.');
		        return false;
	        }

	        if(!loginData.password) {
		        alert('Password cannot be empty. Please check again.');
		        return false;
	        }

            $mobile.login(
                loginData,
                function(json) {
                    document.body.style.cursor = 'pointer';

                    if(json && json['auth'] == 'success') {
                        $mobile.saveSettings( json['settings'] );
												
	                    setCurrentPageNo(1);
	                    var folder = getCurrentFolder();
	                    $("#list_group_mail").empty();
	                    $('#icon_no_message').hide();

	                    setHeaderCaption("#mobile_maillist", $mobile.getCurrentFolderLocalName());
	                    emptyMaillist();

	                    $mobile.listEmails(folder, getCurrentPageNo(), function(response) {
							$mail.loaded = true;
		                    $.mobile.changePage("#mobile_maillist", {transition:'slide'});
		                    renderMaillist(response, folder);
	                    });
                    }
                    else {
                        var fail_message = json && json['auth'] == 'fail' ? json.error : 'Communication Error. Please retry again.';

						if(fail_message.indexOf('cannot connect to host')>=0) {
							fail_message = "Domain " + email.split('@')[1] +" is not responding, please check it or try again later";
						}
                        alert(fail_message);
                    }
                }
            )

	        return false;

        });

    });

</script>
