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

    <div data-role="header" data-inset="true" data-position="fixed">
        <a class="btn-back" href="#" data-rel="back">Back</a>

        <h1>Settings</h1>
        <a id="save_settings" href="#">Save</a>
    </div>

    <div id="settings_content" data-role="content">
        <form id="form_settings" method="post" action="mail/settings/webmailsave">

            <div data-role="fieldcontain" class="user-primary-info">
                <h2>&nbsp;</h2>
            </div>

            <div data-role="fieldcontain">
                <label for="settings_realname">Real Name</label>
                <input type="text" name="fields[RealName]" id="settings_realname" />
            </div>

            <div data-role="fieldcontain">
                <label for="settings_replyto">Reply To</label>
                <input type="text" name="fields[ReplyTo]" id="settings_replyto" />
            </div>
<!--
            <div data-role="fieldcontain">
                <label for="settings_deletetrash">Delete Trash on Logout</label>
                <select name="fields[DeleteTrashOnLogout]" id="settings_deletetrash" data-role="slider">
                    <option value="off">Off</option>
                    <option value="on">On</option>
                </select>
            </div>
						-->

            <div data-role="fieldcontain" class="option">
                <label for="settings_num_per_page" class="select">Messages Per Page</label>
                <select name="fields[MsgNum]" id="settings_num_per_page">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="100">200</option>
                </select>
            </div>
<!--
            <div data-role="fieldcontain" class="option">
                <label for="settings_datedisplay" class="select">Date Display Format</label>
                <select id="settings_datedisplay" name="fields[DateDisplay]">
                    <option value="1">Time Since Delivery</option>
                    <option value="2">DD/MM/YY</option>
                    <option value="3">MM/DD/YY</option>
                </select>
            </div>
-->
            <div data-role="fieldcontain" class="option">
                <label for="settings_timezone" class="select">Time Zone</label>
                <select id="settings_timezone" name="fields[TimeZone]">
                    <?php include('timezone.phtml'); ?>
                </select>
            </div>

            <div data-role="fieldcontain">
                <label for="settings_signature">Signature</label>
                <textarea id="settings_signature" name="fields[Signature]"></textarea>
            </div>

        </form>
    </div>

</div>

<script type="text/javascript">

    var $settings = {

		data : {},

        updateLocal : function(postData) {
            $mobile.loadSettings();
            $mobile.settings['Signature'] = postData["fields[Signature]"];
            $mobile.saveSettings($mobile.settings);
        },

        save : function() {

            var postData = $('#form_settings').serializeObject();

            this.updateLocal(postData);

            postData["fields[Signature]"] = postData["fields[Signature]"].replace(/\n/g, "<br/>");

	        var selector = {'on' : 1, 'off' : 0};
	        postData["fields[DeleteTrashOnLogout]"] = selector[postData["fields[DeleteTrashOnLogout]"]];

            $mobile.postJSON("mail/settings/webmailsave", postData, function() {

	            $('.btn-back', '#mobile_settings').click();

            });

        },

        renderAccount : function(account) {
            $('.user-primary-info h2', '#settings_content').html(account);
        },

        renderRealName : function(name) {
            $('#settings_realname').val(name);
        },

        renderReplyTo : function(value) {
            $('#settings_replyto').val(value);
        },

        renderDeleteTrashOnLogout : function(value) {
	        value = value-0;
            var selection = ["off", "on"];
            $('#settings_deletetrash').val(selection[value]).slider('refresh');
        },

        renderMsgPerPage : function(value) {
            $('#settings_num_per_page').val(value).selectmenu('refresh');
        },

        renderDateFormat : function(value) {
            $('#settings_datedisplay').val(value).selectmenu('refresh');
        },

        renderTimezone : function(value) {
            $('#settings_timezone').val(value).selectmenu('refresh');
        },

        renderSignature : function(value) {
			$('#settings_signature').val(value);
		},

        showSettings : function() {
			var settings = $settings.data;
			
            this.renderAccount(settings.Account);
            this.renderRealName(settings.RealName);
            this.renderReplyTo(settings.ReplyTo);
            this.renderMsgPerPage(settings.MsgNum);
	        this.renderDeleteTrashOnLogout(settings.DeleteTrashOnLogout);
            this.renderDateFormat(settings.DateDisplay);
            this.renderTimezone(settings.TimeZone);
            this.renderSignature(settings.Signature);
        },

        load : function() {
            $mobile.postJSON("api/mobilemail/settings", {}, function(data) {
				$settings.data = data;
                $settings.showSettings();
            });
        },

        pageinit : function() {
            $("#save_settings").bind('click', function(e) {
	            e.preventDefault();
                $settings.save();
	            return false;
            });

            if(isAndroid()) {
                $('.option', '#form_settings').each( function() {
                    var $parent = $(this);
                    $('select', $parent ).click(function() {
                        $('label', $parent ).click();
                    })

                })
            }
        }

    };

    $(document).delegate("#mobile_settings", "pageinit", function() {
        $settings.pageinit();
    });

    $(document).delegate("#mobile_settings", "pagebeforeshow", function() {
        $settings.load();
    });

</script>

