
<script type="application/javascript">

    full_loaded = true; // Disable product categories ajax loading.

</script>
{$add_jquery_block}
{$css_block}
{$js_block}
<form id="category_form" class="defaultForm form-horizontal AdminCategories" novalidate="">

    <input id="images" class="form_item" type="hidden" name="images" value="">

    {if $edit_clipart_id}
        <input class="form_item" type="hidden" name="clipart_id" value="{$edit_clipart_id}">
    {/if}

    <div id="fieldset_0" class="panel">
        <div class="panel-heading">
            <i class="icon-tags"></i>
            {l s="Clipart" mod="myswissstyle"}
        </div>
        <div class="form-wrapper">
            <div class="form-group">
                <label class="control-label col-lg-3">
                    {l s="Displayed" mod="myswissstyle"}
                </label>
                <div class="col-lg-9 ">
                    <span class="switch prestashop-switch fixed-width-lg">
                        <input id="active_on" class="form_item" type="radio" {if $clipart_details->status === "1"}checked="checked"{/if} value="1" name="active" />
                        <label for="active_on">{l s="Yes"}</label>
                        <input id="active_off" class="form_item" type="radio" {if $clipart_details->status === "0"}checked="checked"{/if} value="0" name="active" />
                        <label for="active_off">{l s="No"}</label>
                        <a class="slide-button btn"></a>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <div class="clipart_adder_preview" style="background: url(/{$clipart_details->url.medium}) scroll 0 0 / contain #fff no-repeat"></div>
            </div>

            <div class="form-group">
                <label class="control-label col-lg-3">
                    {l s="Image"}
                </label>
                <div class="col-lg-9 ">
                    <div class="form-group">
                        <div class="col-sm-6">
                            <input id="image" class="hide" type="file" name="image" />
                            <div class="dummyfile input-group">
                                <span class="input-group-addon">
                                    <i class="icon-file"></i>
                                </span>
                                <input id="image-name" type="text" readonly="" name="filename" />
                                <span class="input-group-btn">
                                    <button id="image-selectbutton" class="btn btn-default" name="submitAddAttachments" type="button">
                                        <i class="icon-folder-open"></i>
                                        {l s="Add file"}
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {if $edit_clipart_id && $clipart_ext=='svg'}
                <div class="form-group">
                    <label for="color_item" class="control-label col-lg-3">
                        {l s="Replace Colors"}
                    </label>
                    <div id="color_selector_controller_over"></div>
                    <div id="color_selector_controller">
                        <canvas id="color_checker_body" width="300" height="300" class="color_checker_body"></canvas>
                        <div class="color_checker_preview">
                            <div class="ball"></div>
                        </div>
                        <div class="color_controller_cancel">{l s="Done" mod="myswissstyle"}</div>
                        <div class="remove_button">{l s="Remove" mod="myswissstyle"}</div>
                    </div>
                    <div id="color_selector" class="col-lg-9 lh27">
                        {foreach $colors as $color}
                            <div id="color{$color@iteration}" class="color_item edit vam" style="background-color: {$color};"></div>
                        {/foreach}
                        <a href="#" id="color0" class="color_item add vam">{l s="Add" mod="myswissstyle"}</a>
                    </div>
                </div>
            {/if}

            <div class="form-group">
                {$form}
            </div>

        </div>
        <div class="panel-footer">
            <button id="category_form_submit_btn" class="btn btn-default pull-right" name="submitAddcategoryAndBackToParent" value="1" type="submit">
                <i class="process-icon-save"></i>
                {l s="Save"}
            </button>
            <a class="btn btn-default" onclick="window.history.back();" href="{$action_url}">
                <i class="process-icon-cancel"></i>
                {l s="Cancel"}
            </a>
        </div>
    </div>
</form>

<script>
    (function($){

        /* Background Hook */
        $.cssHooks.backgroundColor = {
            get: function(elem) {
                if (elem.currentStyle)
                    var bg = elem.currentStyle["backgroundColor"];
                else if (window.getComputedStyle)
                    var bg = document.defaultView.getComputedStyle(elem,
                            null).getPropertyValue("background-color");
                if (bg.search("rgb") == -1)
                    return bg;
                else {
                    bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
                    function hex(x) {
                        return ("0" + parseInt(x).toString(16)).slice(-2);
                    }
                    return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
                }
            }
        };

        var ctx;
        var canvas;
        var $document = $(document);

        var error_messages = {
            'no_file': '{l s="No file selected" mod="myswissstyle"}',
            'no_created' : '{l s="Server error" mod='myswissstyle'}'
        };

        $document.ready (
                function(){
                    $document.trigger( "UpdateImportFiles" );

                    $document.off('click','#image-selectbutton');
                    $document.on('click','#image-selectbutton', function(event) {
                        event.stopPropagation();
                        $('#image').click();
                    });

                    $document.off('change', '#image');
                    $document.on('change', '#image', function(element) {
                        var files = element.target.files;
                        $("#image-name").val($(this).val());

                        $document.trigger('StartUploading',[files]);
                        return false;
                    });

                    $document.off('click', '#category_form_submit_btn');
                    $document.on('click', '#category_form_submit_btn', function() {

                        var form_data = new FormData();
                        var $form_items = $('.form_item');

                        form_data.append('parent_id', $('input[name="id_parent"]:checked').val());

                        $.each($form_items, function(key, item){
                            var $item = $(item);

                            switch($item.attr('type')) {
                                case 'hidden':
                                case 'text':
                                        form_data.append($item.attr('name'), $item.val());
                                    break;
                                case 'radio':
                                        if($item.attr('checked')) {
                                            form_data.append($item.attr('name'), $item.val());
                                        }
                                    break;
                            }
                        });

                        var $colors = $('#color_selector').find('.color_item.edit');
                        if ($colors.length) {
                            $.each($colors, function(key, item){
                                form_data.append('colors[]', $(item).css('backgroundColor'));
                            });
                        }

                        $.ajax({
                            url: '{$ajax_route}?subject=Admin&action=add_clipart&token={$token}',
                            type: 'POST',
                            data: form_data,
                            cache: false,
                            dataType: 'json',
                            processData: false,
                            contentType: false,
                            success: function(data) {
                                if (data.status == 'success') {
                                    if (data.message !== undefined && data.message != '') {

                                        var text_message = $.parseJSON(data.message);

                                        if (text_message.status == 'success') {
                                            document.location = '{$location}'
                                        } else {
                                            $.fancybox.open([
                                                        {
                                                            type: 'inline',
                                                            autoScale: true,
                                                            minHeight: 30,
                                                            content: '<p class="fancybox-error">' + error_messages[text_message.message] + '</p>'
                                                        }],
                                                    {
                                                        padding: 0
                                                    });
                                        }
                                    }
                                } else {
                                    $.fancybox.open([
                                                {
                                                    type: 'inline',
                                                    autoScale: true,
                                                    minHeight: 30,
                                                    minWidth: 300,
                                                    content: '<p class="fancybox-error">{l s="Server error" mod="myswissstyle"}</p>'
                                                }],
                                            {
                                                padding: 0
                                            });
                                }
                            }
                        });

                        return false;
                    });
                }
        );
        $document.on(
                'StartUploading',
                function(event, files) {
                    event.stopPropagation();
                    event.preventDefault();
                    var data = new FormData();
                    $.each(files, function(key, value)
                    {
                        data.append(key, value);
                    });

                    $.ajax({
                        url: '{$ajax_route}?subject=Admin&action=add_file_to_image_storage&token={$token}',
                        type: 'POST',
                        data: data,
                        cache: false,
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            if (data.status == 'success') {
                                data = $.parseJSON(data.message);

                                if (data.message != 'false') {
                                    $('#images').val(data.message);
                                }
                            } else {
                                console.log('Error: file no uploaded');
                            }
                        }
                    });
                });

        {if $edit_clipart_id && $clipart_ext=='svg'}
            var $controller = $('#color_selector_controller');
            var $over = $('#color_selector_controller_over');
            var $preview = $controller.find('.color_checker_preview');
            var $body = $controller.find('.color_checker_body');
            var $remove = $controller.find('.remove_button');
            var $cancel = $controller.find('.color_controller_cancel');
            var $ball = $preview.find('.ball');


            $document.off('click', '#color_selector .color_item');
            $document.on('click', '#color_selector .color_item', function(e){
                e.stopPropagation();

                var $this = $(this);

                $cancel.css('left', '50%');

                $body.removeClass('edit').removeClass('add');

                $body.attr('item_id', $this.attr('id'));

                $remove.hide();
                if ($this.hasClass('edit')) {
                    $preview.css('background-color', $this.css('background-color'));
                    $ball.css('background-color', $this.css('background-color'));
                    $cancel.css('left', '25%');
                    $remove.show();

                    $body.addClass('edit');
                } else if($this.hasClass('add')) {
                    $preview.css('background-color', '#ffffff');
                    $body.addClass('add');
                }
                $controller.show();
                $over.show();

                return false;
            });

            var image = new Image();
                image.onload = function () {
                    ctx.drawImage(image, (300 - image.width)/2, (300 - image.height)/2,  image.width, image.height);
                };
            image.src = '/{$clipart_details->url.medium}';

            canvas = document.getElementById('color_checker_body');
            ctx = canvas.getContext('2d');

            $document.off('mousemove', $body);
            $document.on('mousemove', $body, function(e) {

                var canvasOffset = $(canvas).offset();
                var canvasX = Math.floor(e.pageX - canvasOffset.left);
                var canvasY = Math.floor(e.pageY - canvasOffset.top);

                var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
                var pixel = imageData.data;

                var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
                $ball.css('backgroundColor', pixelColor);
            });

            $document.off('click', $body);
            $document.on('click', $body, function(e) {

                e.stopPropagation();

                var canvasOffset = $(canvas).offset();
                var canvasX = Math.floor(e.pageX - canvasOffset.left);
                var canvasY = Math.floor(e.pageY - canvasOffset.top);

                var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
                var pixel = imageData.data;

                var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];

                dColor = '#' + (dColor===0 ? '000000' : dColor.toString(16));

                if ($body.hasClass('add')) {

                    var item_id = $('.color_item.edit').length + 1;
                    var html = '<div id="color' + item_id + '" class="color_item edit vam" style="background-color: ' + dColor + ';"></div>';

                    $('.color_item.add').before(html);
                }

                if ($body.hasClass('edit')) {
                    $('#' + $body.attr('item_id')).css('background-color', dColor);
                    $controller.hide();
                    $over.hide();
                }
            });

            $document.off('click', '#color_selector_controller .color_controller_cancel');
            $document.on('click', '#color_selector_controller .color_controller_cancel', function(e){
                e.stopPropagation();

                $controller.hide();
                $over.hide();
            });

            $document.off('click', '#color_selector_controller .remove_button');
            $document.on('click', '#color_selector_controller .remove_button', function(e){
                e.stopPropagation();

                $('#' + $body.attr('item_id')).remove();

                $controller.hide();
                $over.hide();
            });
        {/if}

    })(jQuery);
</script>
<style>
    .color_item.edit {
        display: inline-block;
        position: relative;
        content: " ";
        width: 40px;
        height: 40px;
        cursor: pointer;
        border: 1px solid #aaa;
        margin-right: 3px;

    }
    .lh27 {
        line-height: 27px;
    }
    .vam {
        vertical-align: middle;
    }

    #color_selector_controller_over {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.7;
        z-index: 5;
        top: 0;
        left: 0;
    }
    #color_selector_controller{
        display: none;
        position: fixed;
        width: 300px;
        height: 300px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 15px;
        z-index: 9;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -150px;
    }
    #color_selector_controller .color_checker_body{
        border-radius: 15px;
        cursor: crosshair;
    }
    #color_selector_controller .color_checker_preview .ball{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 25px;
    }
    #color_selector_controller .color_checker_preview{
        display: block;
        position: absolute;
        left: -25px;
        top: -25px;
        width: 50px;
        height: 50px;
        border: 1px solid #fff;
        border-radius: 25px;
        box-shadow: 2px 2px 6px #111;
    }
    #color_selector_controller .color_controller_cancel {
        display: block;
        position: absolute;
        background-image: linear-gradient(#EDEEFA, #C1C3E6) !important;
        cursor: pointer;
        font-size: 20px;
        font-weight: bold;
        padding: 2px 15px;
        border: 1px solid #fff;
        border-radius: 10px;
        left: 50%;
        margin-left: -50px;
        width: 100px;
        text-align: center;
        bottom: -23px;
        box-shadow: 2px 2px 6px #111;

    }
    #color_selector_controller .color_controller_cancel:hover {
        background-image: linear-gradient(#C1C3E6, #EDEEFA) !important;
    }

    #color_selector_controller .remove_button {
        display: none;
        position: absolute;
        background-image: linear-gradient(#F7DFE3, #F5BAC5) !important;
        cursor: pointer;
        font-size: 20px;
        font-weight: bold;
        padding: 2px 15px;
        border: 1px solid #fff;
        border-radius: 10px;
        right: 25%;
        margin-right: -50px;
        width: 100px;
        text-align: center;
        bottom: -23px;
        box-shadow: 2px 2px 6px #111;

    }
    #color_selector_controller .remove_button:hover {
        background-image: linear-gradient(#F5BAC5, #F7DFE3) !important;
    }

</style>