<?php
global $guest_options;

static $cnt_displayed = 0;
?>

<?php
if (++$cnt_displayed < 1) : ?>

<style type="text/css">
.clear {clear:both;}

.guest-settings-dialog * { font-size:13px !important; }
.taRadioSelector { width: 100%; height: auto; }
.taRadioItem { display:inline-block; margin-left: 5px; border: 1px solid transparent;}
.taRadioItem.selected {border: 1px solid #4ba220;}

.btn-o, .btn-oo a, input.btn-o.taSubmitButton { 
	border:1px solid #fff; padding:15px 20px; width:100px; display:inline-block; 
	font-family: 'Open Sans', Montserrat,Arial,sans-serif;
	background:none; font-size:14px; color:#fff; 
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align:center; 
}
.btn-o:active, .btn-o:hover, .btn-oo a:hover, .btn-oo a:active, input.btn-o.taSubmitButton:hover { 
	border:1px solid #fff; background: rgba(255,255,255,.3); 
}
hr { height:0; border:0; background:none; background-color:none; }

.blur { 
    display:block;
	position:absolute;
	top:0;
	left:0;
	z-index: -9999999999;
	background: url(/static/images/bgblur.jpg);
	background-size:cover;
	width:100%;
	height:100%;
    /*
	-webkit-filter: blur(20px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
	*/
    opacity: 1;
}

@media screen and (max-device-width:  320px), screen and (max-width:  320px) {
}
</style>

<script type="text/javascript">
$(document).ready(function()
{
    $(".taRadioSelector").each(function()
    {
        var groupElm = $(this);
        var unique   = groupElm.attr("data-unique");
        var field_n  = groupElm.attr("data-name");
        var groupSel = ".taRadioSelector[data-unique='" + unique + "']";
        var inputElm = $("input[name='" + field_n + "']");

        var items    = groupElm.find(".taRadioItem");

        items.off("click");
        items.on("click", function(e)
        {
            var this_item = $(this);
            var this_val  = $(this).attr("data-value");

            $(groupSel + " .taRadioItem.selected").removeClass("selected");
            this_item.addClass("selected");
            inputElm.val(this_val);

            e.preventDefault();
            return false;
        });
    });

    $(".displaySettings").off("click");
    $(".displaySettings").click(function(e)
    {
        $(".guest-settings-dialog").fadeIn("slow").delay(400).show();
        $(".guest-settings-dialog .settings-wrapper").show();
        $(".guest-settings-box").show();

        e.preventDefault();
        return false;
    });

    $(".guest-settings-dialog .close").off("click");
    $(".guest-settings-dialog .close").on("click", function(e)
    {
        $(".guest-settings-dialog").fadeOut("slow").delay(400).hide();
        $(".guest-settings-dialog .settings-wrapper").hide();
        $(".guest-settings-box").hide();
        $("#mask").hide();

        e.preventDefault();
        return false;
    });

    $("input.taSubmitButton").click(function(e)
    {
        var form = $(this).parents("form.taSettingsForm").first();
        var data = form.serialize();

        $.ajax({
            url: "/profile/saveSettings",
            type: "POST",
            data: data,
            success: function(d) {
                $(".guest-settings-dialog").fadeOut("slow").delay(400).hide();
                $(".guest-settings-dialog .settings-wrapper").hide();
                $(".guest-settings-box").hide();
                $("#mask").hide();
            }
        });

        e.preventDefault();
        return false;
    });
});
</script>

<?php
endif; /* $cnt_displayed == 1 */ ?>

<div class="boxes guest-settings-box">
<?php if (!$_GET['show_settings'] && $guest_options['last_configured']) : ?>
    <div class="window guest-settings-dialog" style="display: none !important;">
        <div class="overlaystyle settings-wrapper" 
		style="display: none; z-index:9999999999 !important; text-align:center; 
		position:absolute; top:0; min-height:100%; height:auto; width:100%;
		padding: 0; color:#ccc; ">
<?php else : ?>
    <div class="window guest-settings-dialog" style="display: block !important;">
        <div class="overlaystyle settings-wrapper" style="z-index:999999 !important; text-align:center; 
		position:absolute; top:0; min-height:100%; height:auto; width:100%;
		padding: 0; color:#ccc;">
<?php endif; ?>
			<div class="blur"></div>
			<h3 style="margin-top:30px; color:#fff; text-shadow:0px -1px 0px rgba(0,0,0,.4); font-size:17px !important;
			font-weight:300;">
				<img src="/<?= $website_options['mobile_logo'] ?>"
				style="width: auto; max-width: 170px; height: 50px; margin-top:-8px;" 
				alt="Visitor Preferences" /> CHOOSE PREFERENCES (Optional)
			</h3>

                <div class="form" style="padding-bottom:0px; color:#ccc; text-shadow:0px -1px 0px rgba(0,0,0,.4);
				width:100%;">
                    <form class="taSettingsForm" action="/profile/saveSettings" method="post"
					style="width:100%; padding-bottom:10px; overflow:hidden;">

                    <!-- begin: taRadioSelectorGroup
                    To copy this: Copy block until end: taRadioSelectorGroup
                    * change all 'favorite_hand' by the NAME of the preference. (favorite_hand, controls_type, text_size,..)
                    * add/delete/edit "data-value" attributes > each taRadioItem is one option that can be selected.
                    -->
                    <span style="color:#fff;"><strong>Top Menu Icon</strong></span> - Which side?<br />
					<hr />
                    <?php
                    $sel_lefthanded  = $guest_options['favorite_hand'] && $guest_options['favorite_hand'] == "LeftHanded" ? " selected" : "";
                    $sel_righthanded = $guest_options['favorite_hand'] && $guest_options['favorite_hand'] == "RightHanded" ? " selected" : "";
                    ?>
                    <div class="taRadioSelector" data-unique="favorite_hand-<?= time() ?>" data-name="guest_settings[favorite_hand]">
                        <center>
						<div class="taRadioItem<?= $sel_lefthanded ?>" data-value="LeftHanded">
                            <img style="width: auto; height: 40px;" src="/static/images/menu-icon-left.png" />
                        </div>
                        <div class="taRadioItem<?= $sel_righthanded ?>" data-value="RightHanded">
                            <img style="width: auto; height: 40px;" src="/static/images/menu-icon-right.png" />
                        </div>
						</center>
                        <div class="clear"></div>
                    </div><br />
                    <input type="hidden" name="guest_settings[favorite_hand]" value="<?= $guest_options['favorite_hand'] ?>" />
                    <!--end: taRadioSelectorGroup -->

                    <!-- begin: taRadioSelectorGroup
                    To copy this: Copy block until end: taRadioSelectorGroup
                    * change all 'controls_type' by the NAME of the preference. (favorite_hand, controls_type, text_size,..)
                    * add/delete/edit "data-value" attributes > each taRadioItem is one option that can be selected.
                    -->
					<span style="color:#fff; font-weight:bold;">&lsaquo; &rsaquo; Arrows</span> (in bottom Menu Tray)<br />
					<hr />
                    <?php
                    $sel_leftc  = $guest_options['controls_type'] && $guest_options['controls_type'] == "LeftControls" ? ' selected' : "";
                    $sel_oppc   = $guest_options['controls_type'] && $guest_options['controls_type'] == "OppositeControls" ? ' selected' : "";
                    $sel_rightc = $guest_options['controls_type'] && $guest_options['controls_type'] == "RightControls" ? ' selected' : "";
                    ?>
                    <div class="taRadioSelector" data-unique="controls_type-<?= time() ?>" data-name="guest_settings[controls_type]">
                        <div class="taRadioItem<?= $sel_leftc ?>" data-value="LeftControls">
                            <img style="width: 60px; height: 60px; margin:3px;" src="/static/images/align-left-300.png" />
                        </div>
                        <div class="taRadioItem<?= $sel_oppc ?>" data-value="OppositeControls">
                            <img style="width: 60px; height: 60px; margin:3px;" src="/static/images/align-center-300.png" />
                        </div>
                        <div class="taRadioItem<?= $sel_rightc ?>" data-value="RightControls">
                            <img style="width: 60px; height: 60px; margin:3px;" src="/static/images/align-right-300.png" />
                        </div>
                        <div class="clear"></div>
                    </div><br />
                    <input type="hidden" name="guest_settings[controls_type]" value="<?= $guest_options['controls_type'] ?>" />
                    <!--end: taRadioSelectorGroup -->

                    <!-- begin: taRadioSelectorGroup
                    To copy this: Copy block until end: taRadioSelectorGroup
                    * change all 'controls_type' by the NAME of the preference. (favorite_hand, controls_type, text_size,..)
                    * add/delete/edit "data-value" attributes > each taRadioItem is one option that can be selected.
                    -->
                    <span style="color:#fff; font-weight:bold;">Change Text Sizes?</span> (red is default):<br />
                    <?php
                    $sel_smallest = $guest_options['text_size'] && $guest_options['text_size'] == "Smallest" ? ' selected' : "";
                    $sel_smaller  = $guest_options['text_size'] && $guest_options['text_size'] == "Smaller" ? ' selected' : "";
                    $sel_small    = $guest_options['text_size'] && $guest_options['text_size'] == "Small" ? ' selected' : "";
                    $sel_normal   = $guest_options['text_size'] && $guest_options['text_size'] == "Normal" ? ' selected' : "";
                    $sel_large    = $guest_options['text_size'] && $guest_options['text_size'] == "Large" ? ' selected' : "";
                    $sel_larger   = $guest_options['text_size'] && $guest_options['text_size'] == "Larger" ? ' selected' : "";
                    $sel_largest  = $guest_options['text_size'] && $guest_options['text_size'] == "Largest" ? ' selected' : "";
                    ?>
                    <div class="taRadioSelector" data-unique="text_size-<?= time() ?>" data-name="guest_settings[text_size]">
                        <div class="taRadioItem<?= $sel_smallest ?>" data-value="Smallest">
                            <img style="width: 16px; height: 16px;" src="/static/images/font-size-300.png" />
                        </div>
                        <div class="taRadioItem<?= $sel_smaller ?>" data-value="Smaller">
                            <img style="width: 22px; height: 22px;" src="/static/images/font-size-300.png" />
                        </div>
                        <div class="taRadioItem<?= $sel_small ?>" data-value="Small">
                            <img style="width: 28px; height: 28px;" src="/static/images/font-size-300.png" />
                        </div>
                        <div class="taRadioItem<?= $sel_normal ?>" data-value="Normal">
                            <img style="width: 32px; height: 32px; border:1px solid #ff0000;" src="/static/images/font-size-300.png" />
                        </div>
                        <div class="taRadioItem<?= $sel_large ?>" data-value="Large">
                            <img style="width: 42px; height: 42px;" src="/static/images/font-size-300.png" />
                        </div>
                        <div class="taRadioItem<?= $sel_larger ?>" data-value="Larger">
                            <img style="width: 50px; height: 50px;" src="/static/images/font-size-300.png" />
                        </div>
                        <div class="taRadioItem<?= $sel_largest ?>" data-value="Largest">
                            <img style="width: 56px; height: 56px;" src="/static/images/font-size-300.png" />
                        </div>
                        <div class="clear"></div>
                    </div><br />
                    <input type="hidden" name="guest_settings[text_size]" value="<?= $guest_options['text_size'] ?>" />
                    <!--end: taRadioSelectorGroup -->
                    <br />

                    <label style="">Menu Tray BG:</label>&nbsp;<input class="jscolor txt" type="text" name="guest_settings[bg_tray_color]"
                    placeholder="Pick a color" style="width:75px;" value="<?= $guest_options['bg_tray_color'] ?>"> &nbsp;&nbsp;
                    <label style="">Button Color:</label>&nbsp;<input class="jscolor txt" type="text" name="guest_settings[menu_button_color]"
                    placeholder="Pick a color" style="width:75px;" value="<?= $guest_options['menu_button_color'] ?>"><br />
					<br />
                    <p style="text-align:center;">
                        <?php
                        $u_hash  = $_SESSION['loggedin'] && $_SESSION['user_id']
                                 ? sha1($_SESSION['user_id'])
                                 : sha1($_SERVER['HTTP_USER_AGENT'] . "@" . $_SERVER['REMOTE_ADDR']);
                        ?>
                        <input type="hidden" name="user_hash" value="<?= $u_hash ?>" />
                        <input type="hidden" name="guest_settings[sid]" value="<?= session_id() ?>" />
                        <input type="hidden" name="guest_settings[last_configured]" value="<?= time() ?>" />
                        <input type="submit" name="save_guest_settings" class="btn-o taSubmitButton" 
						value="Save Preferences" style="width:145px; margin-top:-2px; margin-right:7px; padding-top:16px; padding-bottom:16px;" />
                        <a href="#" class="btn-o close" style="width:100px;">Skip</a>
                    </p>

                    </form>
                </div>

                <div class="clear"></div>
        <!--</div>
        <div class="clear"></div>-->
        </div>
        <div id="mask"></div>
    </div>
</div>
