<?php
include_once('conf/conf.php');
if (isset($_GET['btnCode'])) {
    $btnCode  = preg_replace('/\r|\n/', '', urldecode($_GET['btnCode']));
    $btnIcon  = preg_replace('/\r|\n/', '', urldecode($_GET['btnIcon']));
    $btnStyle = preg_replace('/\r|\n/', '', urldecode($_GET['btnStyle']));
    $btnSize  = preg_replace('/\r|\n/', '', urldecode($_GET['btnSize']));
    $btnTag   = preg_replace('/\r|\n/', '', urldecode($_GET['btnTag']));
    $btnHref  = preg_replace('/\r|\n/', '', urldecode($_GET['btnHref']));
    $btnType  = preg_replace('/\r|\n/', '', urldecode($_GET['btnType']));
    $btnText  = preg_replace('/\r|\n/', '', urldecode($_GET['btnText']));
    $iconPos  = preg_replace('/\r|\n/', '', urldecode($_GET['iconPos']));
} else {
    $btnCode  = '<button type="button" class="btn btn-primary" id="btn-test">' . MY_FANTASTIC_BUTTON . '</button>';
    $btnIcon  = 'glyphicon-none';
    $btnStyle = 'btn-primary';
    $btnSize  = '';
    $btnTag   = 'button';
    $btnHref  = '#';
    $btnType  = 'button';
    $btnText  = MY_FANTASTIC_BUTTON;
    $iconPos  = 'prepend';
}
$iconFont = urldecode($_GET['iconFont']);
$css_icon_file = ''; // default = glyphicon
$js_icon_file = 'iconset-glyphicon.min.js'; // default
if ($iconFont == 'ionicon') {
    $css_icon_file = 'ionicons.min.css';
    $js_icon_file  = 'iconset-ionicon-1.5.2.min.js';
} elseif ($iconFont == 'fontawesome') {
    $css_icon_file = 'font-awesome.min.css';
    $js_icon_file  = 'iconset-fontawesome-4.2.0.min.js';
} elseif ($iconFont == 'weathericon') {
    $css_icon_file = 'weather-icons.min.css';
    $js_icon_file  = 'iconset-weathericon-1.2.0.min.js';
} elseif ($iconFont == 'mapicon') {
    $css_icon_file = 'map-icons.min.css';
    $js_icon_file  = 'iconset-mapicon-2.1.0.min.js';
} elseif ($iconFont == 'octicon') {
    $css_icon_file = 'octicons.min.css';
    $js_icon_file  = 'iconset-octicon-2.1.2.min.js';
} elseif ($iconFont == 'typicon') {
    $css_icon_file = 'typicons.min.css';
    $js_icon_file  = 'iconset-typicon-2.0.6.min.js';
} elseif ($iconFont == 'elusiveicon') {
    $css_icon_file = 'elusive-icons.min.css';
    $js_icon_file  = 'iconset-elusiveicon-2.0.0.min.js';
} elseif ($iconFont == 'materialdesign') {
    $css_icon_file = 'material-design-iconic-font.min.css';
    $js_icon_file  = 'iconset-materialdesign-1.1.1.min.js';
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <link rel="stylesheet" href="<?php echo $bootstrap_css_path; ?>">
    <link rel="stylesheet" href="css/plugin.min.css">
    <link rel="stylesheet" href="css/bootstrap-iconpicker.min.css">
    <!-- Icon Fonts CSS -->
    <?php if (!empty($css_icon_file)) {
    ?>
    <link href="css/iconpicker/css/<?php echo $css_icon_file; ?>" rel="stylesheet">
    <?php
} ?>
    <link href="<?php echo PRISM_CSS; ?>" type="text/css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row margin-bottom-md">
            <div class="choice-title">
                <span><?php echo BUTTON_STYLE; ?></span>
            </div>
            <div class="col-sm-10 col-sm-offset-1">
                <div class="text-center">
                    <div class="choice selector select-style">
                        <button type="button" class="btn btn-default" data-attr="btn-default">default</button>
                    </div>
                    <div class="choice selector select-style">
                        <button type="button" class="btn btn-primary" data-attr="btn-primary">primary</button>
                    </div>
                    <div class="choice selector select-style">
                        <button type="button" class="btn btn-success" data-attr="btn-success">success</button>
                    </div>
                    <div class="choice selector select-style">
                        <button type="button" class="btn btn-info" data-attr="btn-info">info</button>
                    </div>
                    <div class="choice selector select-style">
                        <button type="button" class="btn btn-warning" data-attr="btn-warning">warning</button>
                    </div>
                    <div class="choice selector select-style">
                        <button type="button" class="btn btn-danger" data-attr="btn-danger">danger</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row margin-bottom-md">
            <div class="choice-title">
                <span><?php echo BUTTON_SIZE; ?></span>
            </div>
            <div class="col-sm-10 col-sm-offset-1">
                <div class="text-center">
                    <div class="choice selector select-size">
                        <button type="button" class="btn <?php echo $btnStyle; ?> btn-xs" data-attr="btn-xs">extra-small</button>
                    </div>
                    <div class="choice selector select-size">
                        <button type="button" class="btn <?php echo $btnStyle; ?> btn-sm" data-attr="btn-sm">small</button>
                    </div>
                    <div class="choice selector select-size">
                        <button type="button" class="btn <?php echo $btnStyle; ?>" data-attr="">medium</button>
                    </div>
                    <div class="choice selector select-size">
                        <button type="button" class="btn <?php echo $btnStyle; ?> btn-lg" data-attr="btn-lg">large</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row margin-bottom-md">
            <div class="choice-title">
                <span><?php echo TAG; ?></span>
            </div>
            <div class="col-sm-4 col-sm-offset-2">
                <div id="button-select" class="choice selector select-tag" data-target="btn-input-type">
                    <span>&lt;button&gt;</span>
                </div>
                <div id="link-select" class="choice selector select-tag" data-target="btn-link">
                    <span>&lt;a&gt;</span>
                </div>
                <div id="input-select" class="choice selector select-tag" data-target="btn-input-type">
                    <span>&lt;input&gt;</span>
                </div>
            </div>
            <div class="col-sm-6 target-wrapper">
                <div id="btn-link" class="target">
                    <?php echo LINK; ?> : <input type="text" name="btn-link-text" value="<?php echo $btnHref; ?>" placeholder="http://">
                </div>
                <div id="btn-input-type" class="target">
                    <div class="form-group margin-bottom-zero">
                          <label class="radio-inline">
                            <input type="radio" name="options-input-type" value="button">
                            button
                          </label>
                          <label class="radio-inline">
                            <input type="radio" name="options-input-type" value="submit">
                            submit
                          </label>
                          <label class="radio-inline">
                            <input type="radio" name="options-input-type" value="cancel">
                            cancel
                          </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="choice-title">
                <span><?php echo OTHERS; ?></span>
            </div>
            <div class="text-center">
                <div class="choice">
                    <label><?php echo DISABLED; ?> : </label>
                    <div class="btn-group btn-toggle" id="disabled">
                        <button class="btn btn-sm btn-success active" data-attr="false"><?php echo NO; ?></button>
                        <button class="btn btn-sm btn-default" data-attr="true"><?php echo YES; ?></button>
                    </div>
                </div>
                <div class="choice">
                    <label><?php echo WIDTH; ?> 100% : </label>
                    <div class="btn-group btn-toggle" id="width100">
                        <button class="btn btn-sm btn-success active" data-attr="false"><?php echo NO; ?></button>
                        <button class="btn btn-sm btn-default" data-attr="true"><?php echo YES; ?></button>
                    </div>
                </div>
                <div class="choice">
                    <div id="btn-text" class="autoheight margin-bottom-md form-inline form-group">
                        <label id="text-label"><?php echo TEXT; ?> :</label> <input type="text"  class="form-control" name="btn-text" value="<?php echo $btnText; ?>">
                    </div>
                </div>
            </div>
        </div>
        <div class="alert alert-warning text-center" id="disabled-warning">
            <span class="glyphicon glyphicon-warning-sign"></span> <?php echo DISABLED_ELEMENTS_WILL_NOT_BE_EDITABLE_IN_TINYMCE_EDITOR; ?>
        </div>
        <div class="row margin-bottom-md" id="icon-choice">
            <div class="text-center">
                <div class="choice">
                    <?php echo ICON; ?> :
                    <button class="btn btn-default" id="iconpicker"></button>
                </div>
                <div class="choice">
                    <label class="radio-inline">
                        <input type="radio" name="icon-pos" value="prepend">
                        <?php echo PREPEND; ?>
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="icon-pos" value="append">
                        <?php echo APPEND; ?>
                    </label>
                </div>
            </div>
        </div>
        <div class="row" id="preview">
            <div id="preview-title" class="margin-bottom-md">
                <span class="btn-primary"><?php echo PREVIEW; ?></span>
            </div>
            <div class="col-sm-12 text-center margin-bottom-md" id="test-wrapper">
                <?php echo $btnCode ?>
            </div>
        </div>
        <div class="row">
            <div id="code-title">
                <a href="#" id="code-slide-link"><?php echo CODE; ?> <i class="glyphicon glyphicon-arrow-up"></i></a>
            </div>
            <div class="col-sm-12" id="code-wrapper">
                <pre><?php
                    echo htmlspecialchars($btnCode);
                    ?></pre>
            </div>
        </div>
    </div>
<script type="text/javascript" src="<?php echo JQUERY_JS ?>"></script>
<script type="text/javascript" src="<?php echo BOOTSTRAP_JS ?>"></script>
<script type="text/javascript" src="js/utils.min.js"></script>
<script type="text/javascript" src="js/jquery.htmlClean.min.js"></script>
<script type="text/javascript" src="js/iconset/<?php echo $js_icon_file; ?>"></script>
<script type="text/javascript" src="js/bootstrap-iconpicker.min.js"></script>
<script type="text/javascript" src="<?php echo PRISM_JS; ?>"></script>
<script type="text/javascript">
console.log(decodeURIComponent('btnCode=%3Cbutton%20class%3D%22btn%20btn-info%22%20type%3D%22button%22%3E%09%3Cspan%20class%3D%22md-receipt%22%3E%3C%2Fspan%3E%20My%20Fantastic%20Button%3C%2Fbutton%3E'));
    var btnCode  = '<?php echo $btnCode; ?>';
    var iconFont = '<?php echo $iconFont; ?>';
    var btnIcon  = '<?php echo $btnIcon; ?>';
    var btnStyle = '<?php echo $btnStyle; ?>';
    var btnSize  = '<?php echo $btnSize; ?>';
    var btnTag   = '<?php echo $btnTag; ?>';
    var btnHref  = '<?php echo $btnHref; ?>';
    var btnType  = '<?php echo $btnType; ?>';
    var btnText  = '<?php echo $btnText; ?>';
    var iconPos  = '<?php echo $iconPos; ?>';
    var btnWidth = '';
    var iconMainClass = '';
    if(iconFont == 'glyphicon') {
        iconMainClass = 'glyphicon ';
    } else if(iconFont == 'fontawesome') {
        iconMainClass = 'fa ';
    } else if(iconFont == 'weathericon') {
        iconMainClass = 'wi ';
    } else if(iconFont == 'octicon') {
        iconMainClass = 'octicon ';
    } else if(iconFont == 'typicon') {
        iconMainClass = 'typcn';
    }
    $.noConflict();
    jQuery(document).ready(function ($) {

        makeResponsive();
        getBootstrapStyles();

        /* add ID to button test if btn code has been received from php */

        if (!$('#test-wrapper #btn-test')[0]) {
            $('#test-wrapper .btn').attr('id', 'btn-test');
        }

        btnWidth = $('#btn-test').outerWidth();
        $('#btn-link').hide();
        $('#disabled-warning').hide();
        $('#iconpicker').iconpicker({
            arrowClass: 'btn-success',
            arrowPrevIconClass: 'glyphicon glyphicon-chevron-left',
            arrowNextIconClass: 'glyphicon glyphicon-chevron-right',
            cols: 5,
            icon: btnIcon,
            iconset: iconFont,
            labelHeader: '<?php echo ZERO_OF_1_PAGES; ?>',
            labelFooter: '<?php echo ZERO_1_OF_2_ICONS; ?>',
            placement: 'top',
            rows: 6,
            cols: 20,
            search: false,
            selectedClass: 'btn-success',
            unselectedClass: ''
        }).on('change', function (e) {
            changeBtnText();
        });

        /* button style */

        $('.selector.select-style').each(function (event, element) {

            /* set style on load */

            if ($(element).find('button').hasClass(btnStyle)) {
                $(element).addClass('active');
            }

            $(element).on('click', function (event) {
                $('.selector.select-style').removeClass('active');
                $(this).addClass('active');
                $('#btn-test').removeClass(btnStyle);
                $('.selector.select-size button').removeClass(btnStyle);
                btnStyle = $(this).find('button').attr('data-attr');
                $('#btn-test').addClass(btnStyle);
                $('.selector.select-size button').addClass(btnStyle);
                updateCode();
            });
        });

        /* button size */

        $('.selector.select-size').each(function (event, element) {

            /* set size on load */

            if ($(element).find('button').hasClass(btnSize)) {
                $(element).addClass('active');
            }

            $(element).on('click', function (event) {
                $('.selector.select-size').removeClass('active');
                $(this).addClass('active');
                $('#btn-test').removeClass(btnSize);
                btnSize = $(this).find('button').attr('data-attr');
                $('#btn-test').addClass(btnSize);
                btnWidth = $('#btn-test').outerWidth();
                updateCode();
            });
        });

        /* set default size active on load if no other activated */

        if (!$('.selector.select-size.active')[0]) {
            $('.selector.select-size > button[data-attr=""]').parent().addClass('active');
        }

        /* button tag */

        $('.selector.select-tag').each(function (event, element) {

            /* set tag on load */

            if (btnTag == 'button' && $(element).attr('id') == 'button-select') {
                $(element).addClass('active');
            } else if (btnTag == 'a' && $(element).attr('id') == 'link-select') {
                $(element).addClass('active');
                $('.target').each(function () {
                    if ($(this).css('display') == 'block') {
                        $(this).fadeOut(200).removeClass('active');
                    }
                }).promise().done(function () {
                    $('#btn-link').fadeIn(200);
                $('#btn-link').addClass('active');
                });
            } else if (btnTag == 'input' && $(element).attr('id') == 'input-select') {
                $(element).addClass('active');
                $('#text-label').text('<?php echo VALUE; ?> : ');
            }

            $(element).on('click', function (event) {
                var target = $(this).attr('data-target');

                /* add/remove active class */

                $('.selector.select-tag').removeClass('active');
                $(this).addClass('active');

                /* show/hide target */

                if (!$('#' + target).hasClass('active')) {
                    $('.target').each(function () {
                        if ($(this).css('display') == 'block') {
                            $(this).fadeOut(200).removeClass('active');
                        }
                    }).promise().done(function () {
                        $('#' + target).fadeIn(200);
                        $('#' + target).addClass('active');
                    });
                }

                /* change button test tag */

                changeBtnTag(target);
            });
        });

        /* set type on load */

        $('input[name="options-input-type"]').each(function () {
            if ($(this).val() == btnType) {
                $(this).attr('checked', true);
            }
        });

        /* set icon position on load */

        $('input[name="icon-pos"]').each(function () {
            if ($(this).val() == iconPos) {
                $(this).attr('checked', true);
            }
        });

        $('input[name="options-input-type"]').on('change', function () {
            changeBtnTag('btn-input-type');
        });
        $('#btn-text').on('keyup', changeBtnText);
        $('input[name="btn-link-text"]').on('keyup', changeBtnLink);
        $('#disabled').on('click', changeBtnState);
        $('#width100').on('click', changeBtnWidth);

        /* set width100 on load */

        if ($('#btn-test').hasClass('btn-block')) {
            $('#width100').trigger('click');
        }
        $('input[name="icon-pos"]').on('change', changeBtnText);
        updateCode();
        /* change button test tag */

        function changeBtnTag(target)
        {
            var btnClass = $('#btn-test').attr('class');
            var btnType = $('input[name="options-input-type"]:checked').val();
            var link;
            var html;
            if ($('#btn-test').is('input')) {
                btnText = $('#btn-test').prop('value');
            } else {
                btnText = $('#btn-test').html();
            }
            if (target == 'btn-link') {
                link = $('input[name="btn-link-text"]').val();
                if (link === '') {
                    link = '#';
                }
                html = '<a href="' + link + '" class="' + btnClass + '" id="btn-test"></a>';
                $('#text-label').text('text : ');
                $('#iconpicker').removeAttr('disabled');
            } else if (target == 'btn-input-type') {                    // button or input
                if ($('#input-select').hasClass('active')) {            // input
                    html = '<input type="' + btnType + '" class="' + btnClass + '" id="btn-test" value="">';
                    $('#text-label').text('<?php echo VALUE; ?> : ');
                    $('#iconpicker').attr('disabled', true);
                } else if ($('#button-select').hasClass('active')) {    // button
                    html = '<button type="' + btnType + '" class="' + btnClass + '" id="btn-test"></button>';
                    $('#text-label').text('text : ');
                    $('#iconpicker').removeAttr('disabled');
                }
            }
            $('#test-wrapper').html(html);
            changeBtnText();
        }

        /* change button test link */

        function changeBtnLink()
        {
            var link = $('input[name="btn-link-text"]').val();
            if (link === '') {
                link = '#';
            }
            $('#btn-test').attr('href', link);
            updateCode();
        }

        /* change button state (enabled/disabled) */

        function changeBtnState()
        {
            var checked = toggleBtn(this);
            if (checked) {
                $('#btn-test').attr('disabled', true);
                $('#disabled-warning').show(500);
            } else {
                $('#btn-test').removeAttr('disabled');
                $('#disabled-warning').hide(500);
            }
            updateCode();
        }

        /* change button width (class btn-block) */

        function changeBtnWidth()
        {
            var wrapperWidth = $('#test-wrapper').width;
            var checked = toggleBtn(this);
            $('#test-wrapper').addClass('no-transition');
            if (checked) {
                btnWidth = $('#btn-test').outerWidth();
                $('#btn-test').css('width', btnWidth + 'px').addClass('btn-block').animate({'width': '100%'}, 500, function () {
                    $(this).css({'width': '', 'overflow': ''});
                    updateCode();
                    $('#test-wrapper').removeClass('no-transition');
                });
            } else {
                $('#btn-test').css('width', '100%').removeClass('btn-block').animate({'width': btnWidth + 'px'}, 500, function () {
                    $(this).css({'width': '', 'overflow': ''});
                    updateCode();
                    $('#test-wrapper').removeClass('no-transition');
                });
            }
        }

        /* change button text */

        function changeBtnText()
        {
            btnText = $('input[name="btn-text"]').prop('value');
            btnIcon = $('#iconpicker').find('input[type="hidden"]').prop('value');
            iconPos = $('input[name="icon-pos"]:checked').val();
            if ($('#btn-test').is('input')) {
                $('#btn-test').attr('value', btnText);
            } else {
                if (btnIcon == 'glyphicon-none') {
                    $('#btn-test').html(btnText);
                } else {
                    if (iconPos == 'prepend') {
                        $('#btn-test').html('<span class="' + iconMainClass + btnIcon + '"></span> ' + btnText);
                    } else {
                        $('#btn-test').html(btnText + ' <span class="' + iconMainClass + btnIcon + '"></span>');
                    }
                }
            }
            updateCode();
        }
    });

</script>
</body>
</html>
