{% extends "admin/cms/page/plugin/change_form.html" %}
{% load staticfiles %}


{% block field_sets %}
    <div class="well-wrapper">
        <div class="well img-preview js-img-preview text-center clearfix">
            <p class="text-center text-muted"><span class="fa fa-fw fa-eye"></span> Preview</p>

            <div class="img-wrapper js-img-wrapper" style="background-image: url('{% static 'aldryn_bootstrap3/img/img-placeholder.png' %}');"></div>
        </div>
    </div>

    {# Styling #}
    <style>
        #content-main {
            margin-top: 80px;
        }

        .collapse {
            visibility: visible !important;
            display: block;
        }

        .well {
            position: fixed;
            text-align: center;
            z-index: 1000;
            height: 240px;
            width: inherit;
            border-radius: 0;
            top: 0;
            left: 0;
        }

        .well-wrapper {
            height: 140px;
            float: left;
            position: relative;
            margin: 0%;
            width: 100%;
        }

        .img-preview img {
            height: 180px;
            width: 180px;
        }

        .img-wrapper {
            margin: auto;
            overflow: hidden;
            background-size: 180px 180px;
            background-position: center;
        }

        {# add the thumbnail effect to the wrapper #}
        .img-wrapper.img-thumbnail {
            border: 3px solid #F5F5EE !important;
            box-shadow: 0 0 1px #333;
        }

        input[type=checkbox], input[type=radio] {
            margin: 0 0 2px 0;
        }

        {# Info: Moves thumbnail next to shapes  #}
        .form-row.field-thumbnail {
            float: left;
            margin-top: -43px;
            margin-left: 200px;
            border-bottom: none;
        }

        .form-row.field-thumbnail p.help {
            display: none;
        }

        .img-1x1 {
            width: 180px !important;
            height: 180px !important;
            margin-top: 0 !important;
        }

        .img-4x3 {
            width: 180px !important;
            height: 135px !important;
            margin-top: 22px !important;
        }

        .img-16x9 {
            width: 180px !important;
            height: 101px !important;
            margin-top: 40px !important;
        }

        .img-16x10 {
            width: 180px !important;
            height: 112px !important;
            margin-top: 34px !important;
        }

        .img-21x9 {
            width: 180px !important;
            height: 77px !important;
            margin-top: 51px !important;
        }

        .img-3x4 {
            height: 180px !important;
            width: 135px !important;
            margin-top: 0 !important;
        }

        .img-9x16 {
            height: 180px !important;
            width: 101px !important;
            margin-top: 0 !important;
        }

        .img-10x16 {
            height: 180px !important;
            width: 112px !important;
            margin-top: 0 !important;
        }

        .img-9x21 {
            height: 180px !important;
            width: 77px !important;
            margin-top: 0 !important;
        }


    </style>

    {{ block.super }}

    {# Javascript for preview (must be after the rest of the fields, because we rely on global variables set there. #}
    <script>
        if (!$) {
            $ = django.jQuery;
        }
        $(document).ready(function () {
            var previewImageWrapper = $('.js-img-wrapper');
            var previewImage = $('.js-img-preview img');

            // Move helptext to tooltip for thumbnail
            var thumbnail = $('#id_thumbnail');
            var thumbnailTooltipText = thumbnail.parent().find('p.help').text();

            thumbnail.parent().append('<span class="fa fa-question-circle" data-toggle="tooltip" data-placement="right" title="' + thumbnailTooltipText + '"></span>');

            var aspectRatioSwitch = $('#id_aspect_ratio');
            var shapeSwitch = $('#id_shape');

            // Init defaults
            var currentAspectRatio;
            var currentShape;
            var currentThumbnail;

            // Title
            var title = $('#id_title');
            previewImageWrapper.attr('title', title.val());

            // Update class of preview button based on classes
            var extraClasses = $("#id_classes");
            previewImageWrapper.addClass(extraClasses.val());

            extraClasses.on('input', function () {
                previewImageWrapper.attr('class', 'img-wrapper js-img-wrapper ' + currentAspectRatio + ' ' + currentShape + ' ' + currentThumbnail + ' ' + $(this).val());
            });

            var setImage = function () {
                //console.log(currentAspectRatio + '/' + currentShape + '/' + currentThumbnail);
                previewImageWrapper.addClass(currentAspectRatio);
                previewImageWrapper.addClass(currentShape);
                previewImageWrapper.addClass(currentThumbnail);
            };

            // Initial values
            currentAspectRatio = 'img-' + aspectRatioSwitch.val();
            currentShape = 'img-' + shapeSwitch.val();

            if (thumbnail.is(':checked')) {
                currentThumbnail = 'img-thumbnail';
            } else {
                currentThumbnail = '';
            }

            setImage();

            // Set Aspect Ratio
            aspectRatioSwitch.on('change', function () {
                previewImageWrapper.removeClass(currentAspectRatio);
                currentAspectRatio = 'img-' + $(this).val();
                setImage();
            });

            // Set Shape
            shapeSwitch.on('change', function () {
                previewImageWrapper.removeClass(currentShape);
                currentShape = 'img-' + $(this).val();
                setImage();
            });

            // Set Thumbnail option
            thumbnail.on('change', function () {
                previewImageWrapper.removeClass(currentThumbnail);
                if ($(this).is(':checked')) {
                    currentThumbnail = 'img-thumbnail';
                } else {
                    currentThumbnail = '';
                }
                setImage();
            });

            // Set title
            title.on('input', function () {
                previewImageWrapper.attr('title', $(this).val());
            });

        });
    </script>


{% endblock %}
