<commit_before><script>

    //Size variables
    var selected_size = null;
    var available_sizes = [];
    var render_custom = [];
    var variation_img = false;

    //End variables
    var source_p = '';
    var product_id_e = '';
    var image_id_e = '';
    var width = '';
    var height = '';
    var x = '';
    var y = '';
    var s_w = '';
    var s_h = '';
    var has_logo = '';
    var has_emblem = '';
    var emblem_id = '';
    var user_online = '';
    var position_id = 0;

    //Customization variables
    var elementsBorders = [];
    var elements = [];
    var selected = null;
    var layer;

    //Mid-end custom variables
    var product_id_u = document.getElementById('product_id');
    var image_id_u = document.getElementById('image_id');
    var x_u = document.getElementById('x_u');
    var y_u = document.getElementById('y_u');
    var width_u = document.getElementById('width_u');
    var height_u = document.getElementById('height_u');
    var s_w_u = document.getElementById('s_w');
    var s_h_u = document.getElementById('s_h');


</script>

<div id="items-container" style="overflow: hidden; margin-bottom: 30px">

  <div id="filters">

    <hr class="desktopnot" style="float: left; width: 100%; margin: 0 auto">
    <!-- Large button group -->
    <div class="btn-group filter-element">
      <button id="button_for_drop" style="font-weight: bold" class="btn btn-default btn-enlarge btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Style
        <span style="right: 0; position: absolute; padding: 5px"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
      </button>
      <ul id="style-list-filter" class="dropdown-menu drop-enlarge">

      </ul>
    </div>

    <hr class="desktopnot" style="float: left; width: 100%; margin: 0 auto">

    <!-- Large button group -->
    <div class="btn-group filter-element">
      <button style="font-weight: bold" class="btn btn-default btn-enlarge btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Colors
        <span style="right: 0; position: absolute; padding: 5px"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
      </button>
      <ul id="color-list-filter" class="dropdown-menu drop-enlarge">
        <li><h5>Colors</h5></li>
      </ul>
    </div>

    <hr class="desktopnot" style="float: left; width: 100%; margin: 0 auto">

    <!-- Large button group -->
    <div class="btn-group filter-element">
      <button style="font-weight: bold" class="btn btn-default btn-enlarge btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Material
        <span style="right: 0; position: absolute; padding: 5px"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
      </button>
      <ul id="material-list-filter" class="dropdown-menu drop-enlarge">
        <li><h5>Material</h5></li>
      </ul>
    </div>

    <hr class="desktopnot" style="float: left; width: 100%; margin: 0 auto">

    <% objects = get_products_f_catalog(params) %>
    <div class="filter-element mobilenot"><h5 style="font-weight: bold"><%= objects.length %> products found</h5></div>
  </div>

  <% styles = [] %>
  <% colors = [] %>
  <% materials = [] %>

  <div id="items" style="min-height: 370px">
    <% objects.each do |pr| %>
        <div onclick="open_quick('<%= "#{pr['id']}" %>')" class="catalog-item" id="item<%= pr['id'] %>">
          <img class="img-con-item" style="margin-bottom: 10px" src="<%= pr['images'].first['url']['https'] %>">
          <h5 class="text-uppercase" style="margin-bottom: 10px"><%= pr['title'] %></h5>
          <h5 style="color: #b692a2"> <%= pr['price']['value'] %></h5>
          <button onclick="open_quick('<%= pr['id'] %>')" class="btn btn-sp btn-bottom_fixed" style="width: 100%">Quick
            Shop
          </button>
        </div>

        <% pr['modifiers'].each do |mod| %>
            <% if mod[1]['title'].eql?('Style')
                 unless styles.include?(mod)
                   styles.push(mod)
                 end
               elsif mod[1]['title'].eql?('Color')
                 unless colors.include?(mod)
                   colors.push(mod)
                 end
               elsif mod[1]['title'].eql?('Material')
                 unless materials.include?(mod)
                   materials.push(mod)
                 end
               end %>
        <% end %>
    <% end %>
  </div>

</div>

<script>

    var received_obj = <%= objects.to_json.html_safe %>;
    var id_s = get_id_s(received_obj);

    function get_id_s(obj_s) {
        id_s = [];
        for (var obj in obj_s) {
            id_s.push(obj_s[obj]['id']);
        }
        return id_s;
    }

    var styles_json = <%= styles.to_json.html_safe %>;
    var colors_json = <%= colors.to_json.html_safe %>;
    var materials_json = <%= materials.to_json.html_safe %>;

    var styles_html = '';
    var colors_html = '';
    var materials_html = '';

    var relations_s = {};
    var relations_c = {};
    var relations_m = {};

    for (var style in styles_json) {
        var style_n = styles_json[style][1];
        var product_id = style_n['product'];
        var variations = style_n['variations'];
        for (var variation in variations) {

            var title = variations[variation]['title'];
            var relation = {};

            if (!(title in relations_s)) {
                relations_s[title] = relation;
            }
            relations_s[title][product_id] = 0;
        }
    }
    for (var color in colors_json) {
        var color_n = colors_json[color][1];
        var product_id = color_n['product'];
        var variations = color_n['variations'];
        for (var variation in variations) {

            var title = JSON.parse(variations[variation]['title'])['title'];
            var relation = {};

            if (!(title in relations_c)) {
                relations_c[title] = relation;
            }
            relations_c[title][product_id] = 0;
        }
    }
    for (var material in materials_json) {
        var material_n = materials_json[material][1];
        var product_id = material_n['product'];
        var variations = material_n['variations'];
        for (var variation in variations) {

            var title = variations[variation]['title'];
            var relation = {};

            if (!(title in relations_m)) {
                relations_m[title] = relation;
            }
            relations_m[title][product_id] = 0;
        }
    }

    var selector_style = document.getElementById('style-list-filter');
    var selector_color = document.getElementById('color-list-filter');
    var selector_material = document.getElementById('material-list-filter');

    for (var s in relations_s) {
        styles_html = styles_html + '<li><a onclick="filter_s(\'' + s + '\')"><h5>' + s + '</h5></a></li>'
    }
    selector_style.innerHTML = styles_html;

    for (var c in relations_c) {
        colors_html = colors_html + '<li><a onclick="filter_c(\'' + c + '\')"><h5>' + c + '</h5></a></li>'
    }
    selector_color.innerHTML = colors_html;

    for (var m in relations_m) {
        materials_html = materials_html + '<li><a onclick="filter_m(\'' + m + '\')"><h5>' + m + '</h5></a></li>'
    }
    selector_material.innerHTML = materials_html;

    console.log(relations_s, relations_c, relations_m);

    var filtered_obj_s = id_s;
    function filter_s(rela) {
        var button_drop = selector_style.previousElementSibling;
        button_drop.innerHTML = rela + '<span style="right: 0; position: absolute; padding: 5px"><i class="fa fa-caret-down" aria-hidden="true"></i></span>';
        filtered_obj_s = [];
        for (var s in relations_s) {
            console.log(s, rela);
            if (rela === s) {
                for (var id in relations_s[s]) {
                    filtered_obj_s.push(id);
                }
            }
        }
        limit_search();
    }

    var filtered_obj_c = id_s;
    function filter_c(rela) {
        var button_drop = selector_color.previousElementSibling;
        button_drop.innerHTML = rela + '<span style="right: 0; position: absolute; padding: 5px"><i class="fa fa-caret-down" aria-hidden="true"></i></span>';
        filtered_obj_c = [];
        for (var c in relations_c) {
            console.log(c, rela);
            if (rela === c) {
                for (var id in relations_c[c]) {
                    filtered_obj_c.push(id);
                }
            }
        }
        limit_search()
    }

    var filtered_obj_m = id_s;
    function filter_m(rela) {
        var button_drop = selector_material.previousElementSibling;
        button_drop.innerHTML = rela + '<span style="right: 0; position: absolute; padding: 5px"><i class="fa fa-caret-down" aria-hidden="true"></i></span>';
        filtered_obj_m = [];
        for (var m in relations_m) {
            console.log(m, rela);
            if (rela === m) {
                for (var id in relations_m[m]) {
                    filtered_obj_m.push(id);
                }
            }
        }
        limit_search()

    }

    Array.prototype.contains = function (element) {
        return this.indexOf(element) > -1;
    };

    function limit_search() {

        var selected_ids = [];
        for (var id in id_s) {
            console.log(id, id_s[id], filtered_obj_s);

            if (filtered_obj_s.contains(id_s[id])) {
                console.log('true');
                if (filtered_obj_c.contains(id_s[id])) {
                    console.log('true');
                    if (filtered_obj_m.contains(id_s[id])) {
                        console.log('true');
                        selected_ids.push(id_s[id])
                    }
                }
            }
        }

        var html_items = '';

        for (var obj in received_obj) {
            var desired_obj = received_obj[obj];
            if (selected_ids.contains(desired_obj['id'])) {
                html_items = html_items + '<div class="catalog-item" id="item' + desired_obj['id'] + '">'
                    + '<img class="img-con-item" style="margin-bottom: 10px" src="' + desired_obj['images'][0]['url']['https'] + '">'
                    + '<h5 class="text-uppercase" style="margin-bottom: 10px">' + desired_obj['title'] + '</h5>'
                    + '<h5 style="color: #b692a2">' + desired_obj['price']['value'] + '</h5>'
                    + '<button onclick="open_quick(\'' + desired_obj['id'] + '\')" class="btn btn-bottom_fixed" style="width: 100%">Quick Shop</button>'
                    + '</div>';
            }
        }

        document.getElementById('items').innerHTML = html_items;
    }

</script>

<!-- The Modal -->
<div id="quick_view" class="modal_quick modal_base">

  <!-- Modal content -->
  <div class="modal-content_quick modal-content_base" style="overflow: hidden; padding: 0;">
    <span id="quick_view_close" class="close" style="z-index: 100; position: fixed">&times;</span>
    <div id="general_p_content" class="g-wrapper">

    </div>

  </div>

</div>

<script>
    // Get the modal
    var modal_quick = document.getElementById('quick_view');

    // Get the <span> element that closes the modal
    var span_quick = document.getElementById('quick_view_close');

    // When the user clicks on <span> (x), close the modal
    span_quick.onclick = function () {
        modal_quick.style.display = "none";
        $("body").removeClass("modal-open")
    };

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target === modal_quick) {
            modal_quick.style.display = "none";
            $("body").removeClass("modal-open")
        }

        if (event.target === modal) {
            modal.style.display = "none";
        }
    };

    var stage_ov = null;

    function fitStageIntoParentContainer() {
        var container = document.querySelector('#wrapper-img-1');
        // now we need to fit stage into parent
        var containerWidth = container.offsetWidth;
        // to do this we need to scale the stage
        var scale = containerWidth / 1000;
        console.log(containerWidth);
        if (1000 * scale < 440) {
            stage_ov.width(1000 * scale);
            stage_ov.height(1000 * scale);
            stage_ov.scale({x: scale, y: scale});
            stage_ov.draw();
        } else {
            stage_ov.width(440);
            stage_ov.height(440);
            stage_ov.scale({x: (440 / 1000), y: (440 / 1000)});
            stage_ov.draw();
        }
    }

    function load_p1(data, pr) {
        //Array of customs for that product initialize
        render_custom = [];
        source_p = pr;
        product_id_e = pr;

        if (data['product_id_e']) {
            product_id_e = data['product_id_e'];
        }

        image_id_e = data['image_id'];
        width = data['width_u'];
        height = data['height_u'];
        x = data['x_u'];
        y = data['y_u'];
        s_w = data['s_w'];
        s_h = data['s_h'];
        has_logo = data['has_image'];
        has_emblem = data['has_emblem'];
        emblem_id = data['emblem_id'];
        position_id = data['position_id'];
        user_online = '<%= user_signed_in? %>';


        var variations = ['', '', ''];
        for (var variation in data['modifiers']) {
            if (data['modifiers'].hasOwnProperty(variation)) {

                if (data['modifiers'][variation]['title'] === 'Color') {
                    variations[2] = data['modifiers'][variation];
                } else if (data['modifiers'][variation]['title'] === 'Size') {
                    variations[1] = data['modifiers'][variation];
                } else if (data['modifiers'][variation]['title'] === 'Logo preset') {
                    variations[0] = data['modifiers'][variation];
                }

            }
        }

        document.getElementById('general_p_content').innerHTML =
            '<div id="wrapper-img-1" class="wrapper-img">' +
            '<div class="image-container-quick" id="image-container-quick-1" style="padding: 0">' +
            '   <img id="image_loader" style="max-width: 400px; max-height: 400px; width: 100%" src="' + image_handler(data) + '">' +
            '</div>' +
            '</div>' +
            '<div class="content-part" style="padding: 0">' +
            '   <div class="wrap">' +
            '       <h5>' + data['title'] + '</h5>' +
            '       <h6>' + data['price']['value'] + '</h6>' +
            '   </div>' +
            '<div class="wrap">' +
            '   <span>' + data['description'].substr(0, 30) + '</span><span id="dots">...</span><span class="complete">' + data['description'].substr(30) + '</span>' +
            '   <div style="text-align: end; padding-top: 9px">' +
            '       <span id="more-toggle">Read more</span>' +
            '   </div>' +
            '</div>' +
            '<hr style="margin-bottom: 0">' +
            '<div style="margin-bottom: 10px">' +
            '   <div id="icon-show" class="hidden"><h6><i class="fa fa-angle-down" aria-hidden="true"></i> SIZE</h6></div>' +
            '   <div id="icon-hide"><h6><i class="fa fa-angle-up" aria-hidden="true"></i> SIZE</h6></div>' +
            '</div>' +
            get_variation_size(variations) +
            '<hr style="margin-bottom: 0">' +
            '<div style="margin-bottom: 10px">' +
            '   <div id="icon-show-logo" class="hidden"><h6><i class="fa fa-angle-down" aria-hidden="true"></i> CUSTOMIZED</h6></div>' +
            '   <div id="icon-hide-logo"><h6><i class="fa fa-angle-up" aria-hidden="true"></i> CUSTOMIZED</h6></div>' +
            '</div>' + get_variation_customized(variations) +
            '<div>' +
            '   <button style="width: 100%; margin-top: 10px" class="btn btn-default" onclick="load_p2_ker(\'' + pr.toString() + '\')">CUSTOMIZE IT</button>' +
            '   <button style="width: 100%; margin-top: 10px" class="btn btn-sp" onclick="addToCart()">ADD TO CART</button>' +
            '</div>' +
            '</div>';

        //Creates the image in case it is a variation
        if (variation_img) {
            var container = $('#image-container-quick-1');

            var stageWidth = 1000;
            var stageHeight = 1000;

            stage_ov = new Konva.Stage({
                container: 'image-container-quick-1',
                width: stageWidth,
                height: stageHeight
            });
            var layer = new Konva.Layer();
            stage_ov.add(layer);

            var baseImg = new Konva.Image({
                width: stage_ov.width(),
                height: stage_ov.height(),
                draggable: false
            });

            var logoImg = new Konva.Image({
                width: stage_ov.width() * width / s_w,
                height: stage_ov.height() * height / s_h
            });

            var logoGroup = new Konva.Group({
                x: stage_ov.width() * x / s_w,
                y: stage_ov.height() * y / s_h
            });

            layer.add(baseImg);
            layer.add(logoGroup);
            logoGroup.add(logoImg);

            var imageObj1 = new Image();
            imageObj1.onload = function () {
                baseImg.image(imageObj1);
                layer.draw();
            };
            imageObj1.src = data['images'][0]['url']['https'];

            var imageObj2 = new Image();
            imageObj2.onload = function () {
                logoImg.image(imageObj2);
                layer.draw();
                imageObj2.width = stage_ov.width() * width / s_w;
                imageObj2.height = stage_ov.height() * height / s_h;
            };

            $.ajax({
                type: "get",
                url: "/catalog/get_image?id=" + image_id_e + "&style=thumb",
                data: {},
                dataType: "html",
                success: function (data) {
                    imageObj2.src = data;
                    layer.draw();
                },
                error: function (data) {
                }
            });

            fitStageIntoParentContainer();
            window.addEventListener('resize', fitStageIntoParentContainer);
        }

        var state = true;
        $("#more-toggle").on('click', function () {
            if (state) {
                $(this).text("Read less");
                $(".complete").show();
                $("#dots").hide();
            } else {
                $(this).text("Read more");
                $(".complete").hide();
                $("#dots").show();
            }
            state = !state;
        });

        var innerHTML22 = {};

        $(document).ready(function () {
            innerHTML22.heightTT = $("#icon_loader").height();
          /*
            var img_load = $('#image_loader');

            if (size_x === 0) {
                size_x = img_load.width();
                size_y = img_load.height();
            }

           console.log(size_x, size_y);*/
        });

        var iconShow = $("#icon-show");
        var iconHide = $("#icon-hide");
        var loader = $("#icon_loader");

        iconShow.click(function () {
            loader.animate({
                height: innerHTML22.heightTT
            }, 400, function () {
                loader.css({
                    overflow: 'visible'
                });
            });
            iconShow.addClass(" hidden");
            iconHide.removeClass(" hidden");
        });

        iconHide.click(function () {
            loader.animate({
                height: 0
            }, 400, function () {
                loader.css({
                    overflow: 'hidden'
                });
            });
            iconHide.addClass(" hidden");
            iconShow.removeClass(" hidden");
        });

        for (var i = 0; i < render_custom.length; i++) {

            var object_json_main = render_custom[i];
            var object_json = JSON.parse(object_json_main['title']);
            console.log(object_json);

            createShape(object_json['image_id'], object_json_main['id'], object_json['width'], object_json['height'], object_json['x'], object_json['y'], object_json['s_w'], object_json['s_h'], data, pr);
        }

        //Photo slider
        (function ($) {
            $(function () {
                $('.jcarousel').jcarousel();

                $('.jcarousel-control-prev')
                    .on('jcarouselcontrol:active', function () {
                        $(this).removeClass('inactive');
                    })
                    .on('jcarouselcontrol:inactive', function () {
                        $(this).addClass('inactive');
                    })
                    .jcarouselControl({
                        target: '-=1'
                    });

                $('.jcarousel-control-next')
                    .on('jcarouselcontrol:active', function () {
                        $(this).removeClass('inactive');
                    })
                    .on('jcarouselcontrol:inactive', function () {
                        $(this).addClass('inactive');
                    })
                    .jcarouselControl({
                        target: '+=1'
                    });

                $('.jcarousel-pagination')
                    .on('jcarouselpagination:active', 'a', function () {
                        $(this).addClass('active');
                    })
                    .on('jcarouselpagination:inactive', 'a', function () {
                        $(this).removeClass('active');
                    })
                    .jcarouselPagination();
            });
        })(jQuery);
    }

    function send_variations(pr) {
        $.ajax({
            type: "get",
            url: "/catalog/item/" + pr,
            data: {
                variation_ma: false,
                source_p: pr,
                m_id: pr,
                logo_id: image_id_u,
                dim_x: selected.x(),
                dim_y: selected.y(),
                relation_x: s_w_u,
                relation_y: s_h_u,
                width: selected.get('.image')[0].width(),
                height: selected.get('.image')[0].height(),
                has_logo: true,
                has_emblem: false,
                emblem_id: '',
                user_signed: '<%= user_signed_in? %>',
                position_id: 0

            },
            success: function (data) {
                load_p1(data, data['source_p'])
            }
        });
    }
<commit_msg>Styles<commit_after><script>

    //Size variables
    var selected_size = null;
    var available_sizes = [];
    var render_custom = [];
    var variation_img = false;

    //End variables
    var source_p = '';
    var product_id_e = '';
    var image_id_e = '';
    var width = '';
    var height = '';
    var x = '';
    var y = '';
    var s_w = '';
    var s_h = '';
    var has_logo = '';
    var has_emblem = '';
    var emblem_id = '';
    var user_online = '';
    var position_id = 0;

    //Customization variables
    var elementsBorders = [];
    var elements = [];
    var selected = null;
    var layer;

    //Mid-end custom variables
    var product_id_u = document.getElementById('product_id');
    var image_id_u = document.getElementById('image_id');
    var x_u = document.getElementById('x_u');
    var y_u = document.getElementById('y_u');
    var width_u = document.getElementById('width_u');
    var height_u = document.getElementById('height_u');
    var s_w_u = document.getElementById('s_w');
    var s_h_u = document.getElementById('s_h');


</script>

<div id="items-container" style="overflow: hidden; margin-bottom: 30px">

  <div id="filters">

    <hr class="desktopnot" style="float: left; width: 100%; margin: 0 auto">
    <!-- Large button group -->
    <div class="btn-group filter-element">
      <button id="button_for_drop" style="font-weight: bold" class="btn btn-default btn-enlarge btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Style
        <span style="right: 0; position: absolute; padding: 5px"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
      </button>
      <ul id="style-list-filter" class="dropdown-menu drop-enlarge">

      </ul>
    </div>

    <hr class="desktopnot" style="float: left; width: 100%; margin: 0 auto">

    <!-- Large button group -->
    <div class="btn-group filter-element">
      <button style="font-weight: bold" class="btn btn-default btn-enlarge btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Colors
        <span style="right: 0; position: absolute; padding: 5px"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
      </button>
      <ul id="color-list-filter" class="dropdown-menu drop-enlarge">
        <li><h5>Colors</h5></li>
      </ul>
    </div>

    <hr class="desktopnot" style="float: left; width: 100%; margin: 0 auto">

    <!-- Large button group -->
    <div class="btn-group filter-element">
      <button style="font-weight: bold" class="btn btn-default btn-enlarge btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Material
        <span style="right: 0; position: absolute; padding: 5px"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
      </button>
      <ul id="material-list-filter" class="dropdown-menu drop-enlarge">
        <li><h5>Material</h5></li>
      </ul>
    </div>

    <hr class="desktopnot" style="float: left; width: 100%; margin: 0 auto">

    <% objects = get_products_f_catalog(params) %>
    <div class="filter-element mobilenot"><h5 style="font-weight: bold"><%= objects.length %> products found</h5></div>
  </div>

  <% styles = [] %>
  <% colors = [] %>
  <% materials = [] %>

  <div id="items" style="min-height: 370px">
    <% objects.each do |pr| %>
        <div onclick="open_quick('<%= "#{pr['id']}" %>')" class="catalog-item" id="item<%= pr['id'] %>">
          <img class="img-con-item" style="margin-bottom: 10px" src="<%= pr['images'].first['url']['https'] %>">
          <h5 class="text-uppercase" style="margin-bottom: 10px"><%= pr['title'] %></h5>
          <h5 style="color: #b692a2"> <%= pr['price']['value'] %></h5>
          <button onclick="open_quick('<%= pr['id'] %>')" class="btn btn-sp btn-bottom_fixed" style="width: 100%">Quick
            Shop
          </button>
        </div>

        <% pr['modifiers'].each do |mod| %>
            <% if mod[1]['title'].eql?('Style')
                 unless styles.include?(mod)
                   styles.push(mod)
                 end
               elsif mod[1]['title'].eql?('Color')
                 unless colors.include?(mod)
                   colors.push(mod)
                 end
               elsif mod[1]['title'].eql?('Material')
                 unless materials.include?(mod)
                   materials.push(mod)
                 end
               end %>
        <% end %>
    <% end %>
  </div>

</div>

<script>

    var received_obj = <%= objects.to_json.html_safe %>;
    var id_s = get_id_s(received_obj);

    function get_id_s(obj_s) {
        id_s = [];
        for (var obj in obj_s) {
            id_s.push(obj_s[obj]['id']);
        }
        return id_s;
    }

    var styles_json = <%= styles.to_json.html_safe %>;
    var colors_json = <%= colors.to_json.html_safe %>;
    var materials_json = <%= materials.to_json.html_safe %>;

    var styles_html = '';
    var colors_html = '';
    var materials_html = '';

    var relations_s = {};
    var relations_c = {};
    var relations_m = {};

    for (var style in styles_json) {
        var style_n = styles_json[style][1];
        var product_id = style_n['product'];
        var variations = style_n['variations'];
        for (var variation in variations) {

            var title = variations[variation]['title'];
            var relation = {};

            if (!(title in relations_s)) {
                relations_s[title] = relation;
            }
            relations_s[title][product_id] = 0;
        }
    }
    for (var color in colors_json) {
        var color_n = colors_json[color][1];
        var product_id = color_n['product'];
        var variations = color_n['variations'];
        for (var variation in variations) {

            var title = JSON.parse(variations[variation]['title'])['title'];
            var relation = {};

            if (!(title in relations_c)) {
                relations_c[title] = relation;
            }
            relations_c[title][product_id] = 0;
        }
    }
    for (var material in materials_json) {
        var material_n = materials_json[material][1];
        var product_id = material_n['product'];
        var variations = material_n['variations'];
        for (var variation in variations) {

            var title = variations[variation]['title'];
            var relation = {};

            if (!(title in relations_m)) {
                relations_m[title] = relation;
            }
            relations_m[title][product_id] = 0;
        }
    }

    var selector_style = document.getElementById('style-list-filter');
    var selector_color = document.getElementById('color-list-filter');
    var selector_material = document.getElementById('material-list-filter');

    for (var s in relations_s) {
        styles_html = styles_html + '<li><a onclick="filter_s(\'' + s + '\')"><h5>' + s + '</h5></a></li>'
    }
    selector_style.innerHTML = styles_html;

    for (var c in relations_c) {
        colors_html = colors_html + '<li><a onclick="filter_c(\'' + c + '\')"><h5>' + c + '</h5></a></li>'
    }
    selector_color.innerHTML = colors_html;

    for (var m in relations_m) {
        materials_html = materials_html + '<li><a onclick="filter_m(\'' + m + '\')"><h5>' + m + '</h5></a></li>'
    }
    selector_material.innerHTML = materials_html;

    console.log(relations_s, relations_c, relations_m);

    var filtered_obj_s = id_s;
    function filter_s(rela) {
        var button_drop = selector_style.previousElementSibling;
        button_drop.innerHTML = rela + '<span style="right: 0; position: absolute; padding: 5px"><i class="fa fa-caret-down" aria-hidden="true"></i></span>';
        filtered_obj_s = [];
        for (var s in relations_s) {
            console.log(s, rela);
            if (rela === s) {
                for (var id in relations_s[s]) {
                    filtered_obj_s.push(id);
                }
            }
        }
        limit_search();
    }

    var filtered_obj_c = id_s;
    function filter_c(rela) {
        var button_drop = selector_color.previousElementSibling;
        button_drop.innerHTML = rela + '<span style="right: 0; position: absolute; padding: 5px"><i class="fa fa-caret-down" aria-hidden="true"></i></span>';
        filtered_obj_c = [];
        for (var c in relations_c) {
            console.log(c, rela);
            if (rela === c) {
                for (var id in relations_c[c]) {
                    filtered_obj_c.push(id);
                }
            }
        }
        limit_search()
    }

    var filtered_obj_m = id_s;
    function filter_m(rela) {
        var button_drop = selector_material.previousElementSibling;
        button_drop.innerHTML = rela + '<span style="right: 0; position: absolute; padding: 5px"><i class="fa fa-caret-down" aria-hidden="true"></i></span>';
        filtered_obj_m = [];
        for (var m in relations_m) {
            console.log(m, rela);
            if (rela === m) {
                for (var id in relations_m[m]) {
                    filtered_obj_m.push(id);
                }
            }
        }
        limit_search()

    }

    Array.prototype.contains = function (element) {
        return this.indexOf(element) > -1;
    };

    function limit_search() {

        var selected_ids = [];
        for (var id in id_s) {
            console.log(id, id_s[id], filtered_obj_s);

            if (filtered_obj_s.contains(id_s[id])) {
                console.log('true');
                if (filtered_obj_c.contains(id_s[id])) {
                    console.log('true');
                    if (filtered_obj_m.contains(id_s[id])) {
                        console.log('true');
                        selected_ids.push(id_s[id])
                    }
                }
            }
        }

        var html_items = '';

        for (var obj in received_obj) {
            var desired_obj = received_obj[obj];
            if (selected_ids.contains(desired_obj['id'])) {
                html_items = html_items + '<div class="catalog-item" id="item' + desired_obj['id'] + '">'
                    + '<img class="img-con-item" style="margin-bottom: 10px" src="' + desired_obj['images'][0]['url']['https'] + '">'
                    + '<h5 class="text-uppercase" style="margin-bottom: 10px">' + desired_obj['title'] + '</h5>'
                    + '<h5 style="color: #b692a2">' + desired_obj['price']['value'] + '</h5>'
                    + '<button onclick="open_quick(\'' + desired_obj['id'] + '\')" class="btn btn-bottom_fixed" style="width: 100%">Quick Shop</button>'
                    + '</div>';
            }
        }

        document.getElementById('items').innerHTML = html_items;
    }

</script>

<!-- The Modal -->
<div id="quick_view" class="modal_quick modal_base">

  <!-- Modal content -->
  <div class="modal-content_quick modal-content_base" style="overflow: hidden; padding: 0;">
    <span id="quick_view_close" class="close" style="z-index: 100; position: fixed">&times;</span>
    <div id="general_p_content" class="g-wrapper">

    </div>

  </div>

</div>

<script>
    // Get the modal
    var modal_quick = document.getElementById('quick_view');

    // Get the <span> element that closes the modal
    var span_quick = document.getElementById('quick_view_close');

    // When the user clicks on <span> (x), close the modal
    span_quick.onclick = function () {
        modal_quick.style.display = "none";
        $("body").removeClass("modal-open")
    };

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target === modal_quick) {
            modal_quick.style.display = "none";
            $("body").removeClass("modal-open")
        }

        if (event.target === modal) {
            modal.style.display = "none";
        }
    };

    var stage_ov = null;

    function fitStageIntoParentContainer() {
        var container = document.querySelector('#wrapper-img-1');
        // now we need to fit stage into parent
        var containerWidth = container.offsetWidth;
        // to do this we need to scale the stage
        var scale = containerWidth / 1000;
        console.log(containerWidth);
        if (1000 * scale < 440) {
            stage_ov.width(1000 * scale);
            stage_ov.height(1000 * scale);
            stage_ov.scale({x: scale, y: scale});
            stage_ov.draw();
        } else {
            stage_ov.width(440);
            stage_ov.height(440);
            stage_ov.scale({x: (440 / 1000), y: (440 / 1000)});
            stage_ov.draw();
        }
    }

    function load_p1(data, pr) {
        //Array of customs for that product initialize
        render_custom = [];
        source_p = pr;
        product_id_e = pr;

        if (data['product_id_e']) {
            product_id_e = data['product_id_e'];
        }

        image_id_e = data['image_id'];
        width = data['width_u'];
        height = data['height_u'];
        x = data['x_u'];
        y = data['y_u'];
        s_w = data['s_w'];
        s_h = data['s_h'];
        has_logo = data['has_image'];
        has_emblem = data['has_emblem'];
        emblem_id = data['emblem_id'];
        position_id = data['position_id'];
        user_online = '<%= user_signed_in? %>';


        var variations = ['', '', ''];
        for (var variation in data['modifiers']) {
            if (data['modifiers'].hasOwnProperty(variation)) {

                if (data['modifiers'][variation]['title'] === 'Color') {
                    variations[2] = data['modifiers'][variation];
                } else if (data['modifiers'][variation]['title'] === 'Size') {
                    variations[1] = data['modifiers'][variation];
                } else if (data['modifiers'][variation]['title'] === 'Logo preset') {
                    variations[0] = data['modifiers'][variation];
                }

            }
        }

        document.getElementById('general_p_content').innerHTML =
            '<div id="wrapper-img-1" class="wrapper-img">' +
            '<div class="image-container-quick" id="image-container-quick-1" style="padding: 0">' +
            '   <img id="image_loader" style="max-width: 400px; max-height: 400px; width: 100%" src="' + image_handler(data) + '">' +
            '</div>' +
            '</div>' +
            '<div class="content-part" style="padding: 0">' +
            '   <div class="wrap">' +
            '       <h5>' + data['title'] + '</h5>' +
            '       <h6>' + data['price']['value'] + '</h6>' +
            '   </div>' +
            '<div class="wrap">' +
            '   <span>' + data['description'].substr(0, 30) + '</span><span id="dots">...</span><span class="complete">' + data['description'].substr(30) + '</span>' +
            '   <div style="text-align: end; padding-top: 9px">' +
            '       <span id="more-toggle">Read more</span>' +
            '   </div>' +
            '</div>' +
            '<hr style="margin-bottom: 0">' +
            '<div style="margin-bottom: 10px">' +
            '   <div id="icon-show" class="hidden"><h6><i class="fa fa-angle-down" aria-hidden="true"></i> SIZE</h6></div>' +
            '   <div id="icon-hide"><h6><i class="fa fa-angle-up" aria-hidden="true"></i> SIZE</h6></div>' +
            '</div>' +
            get_variation_size(variations) +
            '<hr style="margin-bottom: 0">' +
            '<div style="margin-bottom: 10px">' +
            '   <div id="icon-show-logo" class="hidden"><h6><i class="fa fa-angle-down" aria-hidden="true"></i> CUSTOMIZED</h6></div>' +
            '   <div id="icon-hide-logo"><h6><i class="fa fa-angle-up" aria-hidden="true"></i> CUSTOMIZED</h6></div>' +
            '</div>' + get_variation_customized(variations) +
            '<div>' +
            '   <button style="width: 100%; margin-top: 10px" class="btn btn-default" onclick="load_p2_ker(\'' + pr.toString() + '\')">CUSTOMIZE IT</button>' +
            '   <button style="width: 100%; margin-top: 10px" class="btn btn-sp" onclick="addToCart()">ADD TO CART</button>' +
            '</div>' +
            '</div>';

        //Creates the image in case it is a variation
        if (variation_img) {
            var container = $('#image-container-quick-1');

            var stageWidth = 1000;
            var stageHeight = 1000;

            stage_ov = new Konva.Stage({
                container: 'image-container-quick-1',
                width: stageWidth,
                height: stageHeight
            });
            var layer = new Konva.Layer();
            stage_ov.add(layer);

            var baseImg = new Konva.Image({
                width: stage_ov.width(),
                height: stage_ov.height(),
                draggable: false
            });

            var logoImg = new Konva.Image({
                width: stage_ov.width() * width / s_w,
                height: stage_ov.height() * height / s_h
            });

            var logoGroup = new Konva.Group({
                x: stage_ov.width() * x / s_w,
                y: stage_ov.height() * y / s_h
            });

            layer.add(baseImg);
            layer.add(logoGroup);
            logoGroup.add(logoImg);

            var imageObj1 = new Image();
            imageObj1.onload = function () {
                baseImg.image(imageObj1);
                layer.draw();
            };
            imageObj1.src = data['images'][0]['url']['https'];

            var imageObj2 = new Image();
            imageObj2.onload = function () {
                logoImg.image(imageObj2);
                layer.draw();
                imageObj2.width = stage_ov.width() * width / s_w;
                imageObj2.height = stage_ov.height() * height / s_h;
            };

            $.ajax({
                type: "get",
                url: "/catalog/get_image?id=" + image_id_e + "&style=thumb",
                data: {},
                dataType: "html",
                success: function (data) {
                    imageObj2.src = data;
                    layer.draw();
                },
                error: function (data) {
                }
            });

            fitStageIntoParentContainer();
            window.addEventListener('resize', fitStageIntoParentContainer);
        }

        var state = true;
        $("#more-toggle").on('click', function () {
            if (state) {
                $(this).text("Read less");
                $(".complete").show();
                $("#dots").hide();
            } else {
                $(this).text("Read more");
                $(".complete").hide();
                $("#dots").show();
            }
            state = !state;
        });

        var innerHTML22 = {};

        $(document).ready(function () {
            innerHTML22.heightTT = $("#icon_loader").height();
          /*
            var img_load = $('#image_loader');

            if (size_x === 0) {
                size_x = img_load.width();
                size_y = img_load.height();
            }

           console.log(size_x, size_y);*/
        });

        var iconShow = $("#icon-show");
        var iconHide = $("#icon-hide");
        var loader = $("#icon_loader");

        iconShow.click(function () {
            loader.animate({
                height: innerHTML22.heightTT
            }, 400, function () {
                loader.css({
                    overflow: 'visible'
                });
            });
            iconShow.addClass(" hidden");
            iconHide.removeClass(" hidden");
        });

        iconHide.click(function () {
            loader.animate({
                height: 0
            }, 400, function () {
                loader.css({
                    overflow: 'hidden'
                });
            });
            iconHide.addClass(" hidden");
            iconShow.removeClass(" hidden");
        });

        for (var i = 0; i < render_custom.length; i++) {

            var object_json_main = render_custom[i];
            var object_json = JSON.parse(object_json_main['title']);
            console.log(object_json);

            createShape(object_json['image_id'], object_json_main['id'], object_json['width'], object_json['height'], object_json['x'], object_json['y'], object_json['s_w'], object_json['s_h'], data, pr);
        }

        //Photo slider
        (function ($) {
            $(function () {
                $('.jcarousel').jcarousel();

                $('.jcarousel-control-prev')
                    .on('jcarouselcontrol:active', function () {
                        $(this).removeClass('inactive');
                    })
                    .on('jcarouselcontrol:inactive', function () {
                        $(this).addClass('inactive');
                    })
                    .jcarouselControl({
                        target: '-=1'
                    });

                $('.jcarousel-control-next')
                    .on('jcarouselcontrol:active', function () {
                        $(this).removeClass('inactive');
                    })
                    .on('jcarouselcontrol:inactive', function () {
                        $(this).addClass('inactive');
                    })
                    .jcarouselControl({
                        target: '+=1'
                    });

                $('.jcarousel-pagination')
                    .on('jcarouselpagination:active', 'a', function () {
                        $(this).addClass('active');
                    })
                    .on('jcarouselpagination:inactive', 'a', function () {
                        $(this).removeClass('active');
                    })
                    .jcarouselPagination();
            });
        })(jQuery);
    }

    function send_variations(pr) {
        $.ajax({
            type: "get",
            url: "/catalog/item/" + pr,
            data: {
                variation_ma: false,
                source_p: pr,
                m_id: pr,
                logo_id: image_id_u,
                dim_x: selected.x(),
                dim_y: selected.y(),
                relation_x: s_w_u,
                relation_y: s_h_u,
                width: selected.get('.image')[0].width(),
                height: selected.get('.image')[0].height(),
                has_logo: true,
                has_emblem: false,
                emblem_id: '',
                user_signed: '<%= user_signed_in? %>',
                position_id: 0

            },
            success: function (data) {
                console.log(data)
                load_p1(data, data['source_p'])
            }
        });
    }

{'fraction_non_alphanumeric': 0.1598159441667951, 'fraction_numerical': 0.009907311595957816, 'mean_word_length': 1.8098979276214042, 'pattern_counts': {'":': 0, '<': 413, '<?xml version=': 0, '>': 411, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2112048', 'n_tokens_mistral': 13782, 'n_tokens_neox': 13039, 'n_words': 2649}