Configurator

/**
 * Authors: Baptiste DULAC, Thomas CACQUEVELLE
 * (c) Add+ Design
 */

// -----------------------------------------------------------------------
// Defines
// -----------------------------------------------------------------------

var $viewGrid   = $('.view_grid');
var $moveGrid   = $('.move_grid');
var $grid       = $('#grid');

var equivalences = {'1515' : 1, '3030' : 2};

// Grid Size
var GRID_SIZE     = 2400 > $viewGrid.width() ? 2400 : $viewGrid.width();
var SQUARE_LIMIT  = 30;
var SQUARE_SIZE   = GRID_SIZE / SQUARE_LIMIT;
var VIEW_HEIGHT   = $viewGrid.height();
var VIEW_WIDTH    = $viewGrid.width();
var MOVE_HEIGHT = (GRID_SIZE * 2) - VIEW_HEIGHT;
var MOVE_WIDTH  = (GRID_SIZE * 2) - VIEW_WIDTH;

// Buttons
var $remove_all  = $('#remove_all');
var $saveGrid    = $('#save_grid');
var $downloadLink = $('#download-link');
var $loginModalButton = $('#login-modal-button');
var $registerModalButton = $('#register-modal-button');
var $saveGridButton = $('#save-grid-button');
var $shareGrid = $('#share');
var $shareGridButton = $('#share-grid-button');
var $noCapsOrderButton = $('#no-caps-order-button');
var $withCapsOrderButton = $('#with-caps-order-button');
var $gridItemPopupColorContainer = $('#grid-item-popup-color-container');

var $li_item= $('.list_item');
var $li_item_href= $('.list_item a');

// Display modules iterator
var onLine = 0;
var id = 0;

var currentIndexColors = 0;

var backup = {
    x: 0,
    y: 0,
    ref: null,
    rotate: 0,
    base: null
};

var ghost = {
    x : 0,
    y : 0,
    item: null
};

var loader_module = {};

var current_save = {
    id : null,
    name : null
};

var see_url_save_delete = {
    hasObject : false
};

var isHoverBin   = false;
var grid                = [];
var product             = {};
var sortModulesBySize   = {};

var colors = ['whitm','blacm','greym','sandm','navym','olivm','browm','watem','yelom','raspm','turqm','redfm'];

var arrayColor = {
    'whitm': '#ECECEC',
    'blacm': '#424242',
    'greym': '#A9A9A9',
    'sandm': '#C6C1AC',
    'navym': '#32627E',
    'olivm': '#7A8975',
    'browm': '#4D3D36',
    'watem': '#B7D7B2',
    'yelom': '#E2C83F',
    'raspm': '#B03244',
    'turqm': '#428891',
    'redfm': '#FF352A'
};

var arrayColorName = {
    blacm: 'Nuit',
    browm: 'Chocolat',
    greym: 'Anthracite',
    navym: 'Marine',
    olivm: 'Olive',
    raspm: 'Framboise',
    redfm: 'Orange pop',
    sandm: 'Silex',
    turqm: 'Azur',
    watem: 'Aqua',
    whitm: 'Neige',
    yelom: 'Capucine'
};

// -----------------------------------------------------------------------
// Functions
// -----------------------------------------------------------------------

function orderButtonClicked(e)
{
    e.preventDefault();
    showModal('#order-modal');
}

function orderComposition(hasCaps)
{
    addLoader($('#order-modal-caps-choice'));
    saveGrid(current_save.name, hasCaps, false, function(data) {
        window.location = ORDER_URL + '?productId=' + data.publicId;
    });
}

function displayGhost()
{
    $('#ghost').remove();
    var $ghost = $('<div id="ghost"></div>');
    $ghost.css({
        'width' : SQUARE_SIZE * ghost.item.base,
        'height' : SQUARE_SIZE * ghost.item.base,
        'position' : 'absolute',
        'border': '1px dashed #AAA',
        'left' : toPosition(ghost.x),
        'top' : toPosition(ghost.y)
    });
    $grid.append($ghost);
}

/**
 * @param item
 * @param code
 * @param rotate
 * @param x
 * @param y
 */
function addItemToGrid(item, code, rotate, x, y)
{
    if (!grid.hasOwnProperty(x))
        grid[x] = [];

    grid[x][y] = createItem(code, item.base, rotate, false);

    // Module 3030
    if (item.base == 2)
    {
        if (!grid.hasOwnProperty(x + 1))
            grid[x + 1] = [];

        grid[x +1 ][y] = createItem(code, item.base, rotate, true);
        grid[x][y + 1] = createItem(code, item.base, rotate, true);
        grid[x + 1][y + 1] = createItem(code, item.base, rotate, true);
    }
    Draw();
}

/**
 * @param code
 * @param base
 * @param orientation
 * @param virtual
 * @returns {{code: *, base: *, orientation: *, isVirtual: *}}
 */
function createItem(code, base, orientation, virtual) {
    return {code : code, base: base, orientation: orientation, isVirtual: virtual};
}

/**
 * @param pos
 * @returns {number}
 */
function toGrid(pos) {
    if (pos > (GRID_SIZE - SQUARE_SIZE))
        pos = GRID_SIZE - SQUARE_SIZE;

    return Math.floor(pos / SQUARE_SIZE) + 1;
}

function DisplayMenuAction(){
    $li_item.removeClass('disabled');
    $li_item_href.css({'color':'#000'});
}

/**
 * @param c
 * @returns {number}
 */
function toPosition(c)
{
    return (c - 1) * SQUARE_SIZE;
}

function removeModule_all()
{
    grid = [];
    $grid.empty();
    DisableMenuAction();
    getCompositionPrice(grid);
    Draw();
}


function DisableMenuAction()
{
    $li_item_href.css({'color':'grey'});
    $li_item.addClass('disabled');
}

/**
 * @param objX
 * @param objY
 * @returns {boolean|*}
 */
function itemExistsInGrid(objX, objY)
{
    return grid.hasOwnProperty(objX) && grid[objX].hasOwnProperty(objY) && grid[objX][objY] != null;
}

/**
 * @param item
 * @param x
 * @param y
 * @returns {boolean}
 */
function canDropModule(item, x, y)
{
    if (item.base == 2) {
        return !itemExistsInGrid(x, y) && !itemExistsInGrid(x + 1, y) && !itemExistsInGrid(x ,y + 1) && !itemExistsInGrid(x + 1, y + 1);
    }
    return !itemExistsInGrid(x, y);
}

/**
 * @param ref
 * @param srcX
 * @param srcY
 * @param destX
 * @param destY
 * @param rotate
 * @constructor
 */
function moveItemInGrid(ref, srcX, srcY, destX, destY, rotate)
{

    //if (!product.hasOwnProperty(ref))
    //    return;

    var item = product[ref];

    if (!canDropModule(item, destX, destY))
        addItemToGrid(item, item.code, rotate, srcX, srcY);
    else
        addItemToGrid(item, item.code, rotate, destX, destY);
}

/**
 * @param srcX
 * @param srcY
 * @constructor
 */
function deleteModule(srcX, srcY)
{
    var item = grid[srcX][srcY];
    if (item.base == 2)
    {
        if (!grid.hasOwnProperty(srcX + 1))
            grid[srcX + 1] = [];
        grid[srcX + 1][srcY] = null;
        grid[srcX][srcY + 1] = null;
        grid[srcX + 1][srcY + 1] = null;
    }
    grid[srcX][srcY] = null;
}

/**
 * @param ev
 * @param callback
 */
function handleMouseClick(ev, callback)
{
    var tPos = $('#grid').offset();
    var view_offset = $('.view_grid').offset();
    var mouse_offset = {posX: ev.pageX, posY: ev.pageY};
    var mouse = {posX: ev.pageX, posY: ev.pageY};
    mouse_offset.posX -= view_offset.left;
    mouse_offset.posY -= view_offset.top;
    mouse.posX -= tPos.left;
    mouse.posY -= tPos.top;
    callback(toGrid(mouse.posX), toGrid(mouse.posY), mouse_offset.posX, mouse_offset.posY);
}

function hoverTrash()
{
    $(".trash").hover(function() {
            $('.trash').addClass('trash-active');
        }, function() {
            $('.trash').removeClass('trash-active');
        }
    );
}

function removeModuleInGrid(x, y)
{
    var $module = getModuleInGrid(x, y);
    $module.remove();
}

/**
 * @param x
 * @param y
 * @returns {*|jQuery|HTMLElement}
 */
function getModuleInGrid(x, y)
{
    return $('.grid-item[data-x="' + x + '"][data-y="' + y + '"]');
}

/**
 * @param x
 * @param y
 * @returns {boolean}
 */
function moduleIsPresent(x, y)
{
    return getModuleInGrid(x, y).length > 0;
}

/**
 * @param x
 * @param y
 * @param inverse
 */
function rotateModuleInGrid(x, y, inverse)
{
    var gridItem = grid[x][y];
    var $module = getModuleInGrid(x, y);
    var oldRotate = gridItem.orientation;
    var rotate = 0;

    if (inverse == true)
        rotate = oldRotate - 90 < 0 ? 270 : oldRotate - 90;
    else
        rotate = oldRotate + 90 > 270 ? 0 : oldRotate + 90;

    // Save to front
    $module.removeClass('rotate-' + oldRotate).addClass('rotate-' + rotate);
    $module.data('rotate', rotate);
    grid[x][y].orientation = rotate;
}

/**
 * @param ref
 * @param x
 * @param y
 * @param rotate
 * @constructor
 */
function addModule(ref, x, y, rotate)
{

    if (!product.hasOwnProperty(ref))
        return;

    var item = product[ref];

    DisplayMenuAction();

    var $div = $('<div class="grid-item"></div>');
    $div.attr('data-x', x);
    $div.attr('data-y', y);
    $div.attr('data-ref', ref);
    $div.attr('data-rotate', rotate);
    $div.addClass('rotate-' + rotate);
    $div.css({
        'width': SQUARE_SIZE * item.base,
        'height': SQUARE_SIZE * item.base,
        'background': 'url("' + item.imageConfigurator +'")',
        'top': toPosition(y),
        'left': toPosition(x)
    });

    $('#grid').append($div);

    $('.grid-item').draggable({
        cursorAt: {top:  20, left: 20},
        start: function(event, ui)
        {
            // Remove tooltips
            $('.grid-item-popup-container.active').remove();

            // Create backup module
            backup.x = parseInt($(this).data('x'));
            backup.y = parseInt($(this).data('y'));
            backup.ref = $(this).data('ref');
            backup.rotate = parseInt($(this).data('rotate'));
            backup.binned = false;

            var item = product[backup.ref];
            ghost.item = item;

            // A bit of css for current drag item
            $(this).css({
                'opacity' : 0.5,
                'z-index': 115
            });

            ui.helper.css({
                'width': SQUARE_SIZE * item.base,
                'height': SQUARE_SIZE * item.base
            });
            deleteModule(backup.x, backup.y);
        },
        drag: function(ev)
        {
            hoverTrash();
            handleMouseClick(ev, function(x, y) {
                ghost.x = x;
                ghost.y = y;
                $('#ghost').remove();
                if (canDropModule(ghost.item, x, y))
                    displayGhost();
            });
        },
        stop: function(ev)
        {
            $(this).remove();
            $('#ghost').remove();
            if (!isHoverBin)
                handleMouseClick(ev, function(x, y, mouseX, mouseY)
                {
                    if (mouseX > 0 && mouseX < VIEW_WIDTH && mouseY > 0 && mouseY < VIEW_HEIGHT)
                    {
                        moveItemInGrid(backup.ref, backup.x, backup.y, x, y, backup.rotate);
                    }
                    else if (product.hasOwnProperty(backup.ref))
                    {
                        addItemToGrid(product[backup.ref], backup.ref, backup.rotate, backup.x, backup.y);
                    }
                });
            else
                Draw();
            getCompositionPrice();
        }
    });
}

/**
 * @param GRID_SIZE
 * @param VIEW_WIDTH
 * @param VIEW_HEIGHT
 * @param MOVE_WIDTH
 * @param MOVE_HEIGHT
 */
function createGrid(GRID_SIZE,VIEW_WIDTH, VIEW_HEIGHT, MOVE_WIDTH, MOVE_HEIGHT)
{
    $grid.css({
        'position': 'absolute',
        'width' : GRID_SIZE,
        'height' : GRID_SIZE,
        'top': (MOVE_HEIGHT - GRID_SIZE) / 2,
        'left': (MOVE_WIDTH - GRID_SIZE) / 2,
        'background-color': '#ffffff',
        'cursor':'move'
    });
    $viewGrid.css({
        'width' : VIEW_WIDTH,
        'height' : VIEW_HEIGHT,
        'border' : '1px solid #D4D4D5'
    });
    $moveGrid.css({
        position: 'relative',
        top : - (MOVE_HEIGHT - VIEW_HEIGHT) / 2,
        left :  - (MOVE_WIDTH - VIEW_WIDTH) / 2,
        'width' : MOVE_WIDTH,
        'height' : MOVE_HEIGHT,
        'background' : 'blue'
    });
}

function hideLoaderGrid()
{
    $('#grid-load').removeClass('ui active inverted dimmer').css({'opacity':1}); // Hide loader grid
    $('#grid-load-text').remove(); // Hide loader grid
}

function checkDataLoad()
{
    var data = $('.module-line').data('load');
    if(data == false)
        $('.module-line').attr('data-load', 'true').removeClass('ui loader active');
}

/**
 * @param $line
 * @param item
 * @param orientation
 */
function newImage(item, orientation)
{
    return $('<img class="dragme lazy rotate-' + orientation + ' size-' + item.size + '">')
        .attr('data-code', item.code)
        .attr('data-src', item.imageConfigurator)
        .attr('data-rotate', orientation)
        .attr('data-content', item.name)
        .attr('data-variation', 'tiny')
        .attr('data-position', 'top center')
        ;
}

function loadImages(color)
{
    var $groupColor = $('.group-color[data-color="' + color + '"]');
    var loaded = $groupColor.data('loaded');

    if (!loaded)
    {
        $groupColor.data('loaded', true);
        var $lazyLoadImages = $groupColor.find('img.lazy');
        $lazyLoadImages.lazy({
            bind: "event",
            delay: 0,
            skip_invisible: false,
            onFinishedAll: function() {
                $groupColor.find('.active.inverted.dimmer').remove();
                ++currentIndexColors;
                if (colors.hasOwnProperty(currentIndexColors))
                    loadImages(colors[currentIndexColors]);
            }
        });
    }
}

function loadImagesBackground()
{
    for (var i in colors)
        addLoader($('.group-color[data-color="' + colors[i] + '"]'));

    if (colors.hasOwnProperty(currentIndexColors))
        loadImages(colors[currentIndexColors]);
}

/**
 * @param color
 */
function displayColorGroup(color)
{
    $('#square-color .square.square-color.border-select').removeClass('border-select');
    $('.hide-off').removeClass('hide-off').addClass('hide-on');
    $('#square-color .square.square-color[data-color="' + color + '"]').addClass('border-select');
    var $groupColor = $('.group-color[data-color="' + color + '"]');
    $groupColor.removeClass('hide-on').addClass('hide-off');
}

/**
 * @param $square
 * @param color
 */
function applySquareColorProperties($square, color)
{
    $square
        .attr('data-color', color)
        .attr('data-tooltip', arrayColorName[color])
        .attr('data-position', 'top center')
        .css({'background-color' : arrayColor[color], 'cursor' : 'pointer'})
    ;
}

function initDisplayColors()
{
    var $squarePosition = $('<div class="square-position"></div>');
    for (var value in arrayColor)
    {
        if (arrayColor.hasOwnProperty(value))
        {
            var $square = $('<div class="square square-color"></div>');
            var $tooltipSquare = $('<div class="square square-color"></div>');
            applySquareColorProperties($square, value);
            applySquareColorProperties($tooltipSquare, value);
            $squarePosition.append($square);
            $gridItemPopupColorContainer.append($tooltipSquare);
        }
    }
    $('#square-color').append($squarePosition);

    displayColorGroup('whitm');
    checkDataLoad();
}

/**
 * @param $colorContainer
 * @param item
 * @param orientation
 */
function processItem($colorContainer, item, orientation)
{
    $colorContainer.prepend(newImage(item, orientation));
}

function initDisplayModules()
{
    var $sizeContainer = $('#size-container');
    for (var size in sortModulesBySize)
    {
        $sizeContainer.append('<a id="button-' + size + '" class="item" data-tab="' + size.substring(0, 2) + "x" + size.substring(0, 2) + '" style="left: 22.5%;">' + size.substring(0, 2) + "x" + size.substring(0, 2) + '</button>');
        var $moduleContainer = $('<div id="modules-' + size + '" class="ui bottom attached tab segment objectDrag" data-tab="' + size + '" style="border-top: 0;border-bottom: 0;position: static;"></div>');
        $('#contain-size-product').append($moduleContainer);

        for (var color in sortModulesBySize[size])
        {
            var $colorContainer = $('<div class="group-color hide-on" data-color="' + color + '" data-loaded="false"></div>');
            $moduleContainer.append($colorContainer);
            onLine = 0;
            for (var type in sortModulesBySize[size][color])
            {
                for (var ref in sortModulesBySize[size][color][type])
                {
                    var item = sortModulesBySize[size][color][type][ref];
                    loader_module[item.id] = true;
                    if (item.hasOwnProperty('imageConfigurator'))
                    {
                        processItem($colorContainer, item, 0);
                        if (item.canRotate != false)
                        {
                            for (var rotate = 90; rotate < 360; rotate += 90)
                            {
                                processItem($colorContainer, item, rotate);
                            }
                        }
                    }
                }
            }
        }
    }

    $('#contain-size-product img.dragme').popup({
        on: 'hover',
        delay: {
            show: 500,
            hide: 0
        }
    });

    $('#button-1515').addClass('active');
    $('#modules-1515').addClass('active');

    if (loadComposition()) {
        Draw();
        getCompositionPrice();
        DisplayMenuAction();
    }
    else
        DisableMenuAction();

    //if (!is_safari) {
    loadImagesBackground();
    //}

    hideLoaderGrid();
}


function Draw() {
    for (var x in grid)
    {
        if (grid.hasOwnProperty(x))
        {
            for (var y in grid[x])
            {
                if (grid[x].hasOwnProperty(y) && itemExistsInGrid(x, y))
                {
                    if (!moduleIsPresent(x, y))
                    {
                        var item = grid[x][y];
                        if (!item.isVirtual)
                        {
                            see_url_save_delete.hasObject = 1;
                            addModule(item.code, x, y, item.orientation);
                        }
                    }
                }
            }
        }
    }
}

/**
 * @param name_compo
 * @param hasCaps
 */
function compositionToJson(name_compo, hasCaps)
{

    var result = {
        data : {},
        hasCaps : hasCaps,
        name : name_compo
    };

    for (var x in grid) {
        if (grid.hasOwnProperty(x)) {
            for (var y in grid[x]) {
                if (grid[x].hasOwnProperty(y))
                {
                    var key = x + ':' + y;
                    var item = grid[x][y];
                    if (itemExistsInGrid(x, y) && !item.isVirtual)
                        result['data'][key] = item;
                }
            }
        }
    }
    return JSON.stringify(result);
}

/**
 * @param compositionName
 * @param hasCaps
 * @param isSave
 * @param callback
 */
function saveGrid(compositionName, hasCaps, isSave, callback)
{
    var json = compositionToJson(compositionName, hasCaps);

    var endpoint = API_URL + '/compositions/save';
    if (current_save.id != null && IS_EDIT)
        endpoint = endpoint + '/' + current_save.id;

    $.post(
        endpoint,
        {
            data: json,
            isSave: isSave
        },
        null,
        'json'
    ).done(callback);
}

/**
 * @param price
 * @param currencyCode
 * @returns {string}
 */
function formatPrice(price, currencyCode)
{
    return parseFloat((Math.round(price) / 100)).toFixed(2) + ' ' + currencyCode;
}

/**
 * @param $list
 * @param product
 * @param quantity
 * @param currencyCode
 */
function addProductInPriceList($list, product, quantity, currencyCode)
{
    var $line = $('<div class="module-line"></div>');

    var $name = $('<span class="left floated"><span class="square-color" style="background-color: ' + arrayColor[product.color] + ';"></span> ' + product.name + ' x' + quantity + ' </div>');
    var $price = $('<span class="right floated">' + formatPrice((product.price * quantity), currencyCode) + '</div>');

    $line.append($name);
    $line.append($price);
    $list.append($line);
}

function handleProducts($list, products, currencyCode)
{
    for (var key in products)
    {
        if (products.hasOwnProperty(key))
        {
            var productQuantity = products[key];
            addProductInPriceList($list, productQuantity.product, productQuantity.quantity, currencyCode);
        }
    }
}

function addTotalPrice($list, trans, formattedPrice)
{
    $list.append('<div class="total-line"><span class="left floated">' +  trans + '</span><span class="right floated">' + formattedPrice + '</span></div>');

}

function getCompositionPrice()
{
    var $loader = $('<div class="ui active inverted dimmer"><div class="ui mini loader"></div></div>');
    $('#configurator-composition-menu').append($loader);
    var json = compositionToJson();
    $.post(API_URL + '/compositions/price', { data: json }, null, 'json')
        .done(function(success) {
            if (success.success)
            {
                var $list = $('#configurator-composition-menu-list');
                var transPriceNoCaps = $list.data('trans-price-no-caps');
                var transPriceWithCaps = $list.data('trans-price-with-caps');
                var transOrder = $list.data('trans-order');

                var data = success.data;
                var currencyCode = data.currencyCode;

                $list.empty();

                handleProducts($list, data.modules, currencyCode);
                if(data.priceNoCaps > 0)
                    addTotalPrice($list, transPriceNoCaps, formatPrice(data.priceNoCaps, currencyCode));

                $('#order-modal-no-caps-price').empty().append(formatPrice(data.priceNoCaps, currencyCode));

                handleProducts($list, data.caps, currencyCode);
                if(data.priceWithCaps > 0)
                    addTotalPrice($list, transPriceWithCaps, formatPrice(data.priceWithCaps, currencyCode));

                $('#order-modal-with-caps-price').empty().append(formatPrice(data.priceWithCaps, currencyCode));

                var $orderButton = $('<button class="small fluid ui red button" id="configurator-order-button">' + transOrder + '</button>');
                $list.prepend($orderButton);
                $orderButton.click(orderButtonClicked);

                $('#configurator-composition-menu-price').empty().append(formatPrice(data.priceNoCaps, currencyCode));
                $loader.remove();
            }
        })
}

/**
 * @returns {boolean}
 */
function loadComposition()
{
    if (!IS_LOAD)
        return false;

    if (IS_EDIT)
    {
        current_save.id = COMPOSITION_ID;
        current_save.name = COMPOSITION_NAME;
    }

    for (var posRaw in COMPOSITION_GRID)
    {
        if ( COMPOSITION_GRID.hasOwnProperty(posRaw)) {
            var data =  COMPOSITION_GRID[posRaw];
            var code = data.code;
            if (product.hasOwnProperty(code) && data.isVirtual == false)
            {
                var pos = posRaw.split(':');
                addItemToGrid(product[code], code , data.orientation, pos[0], pos[1]);
            }
        }
    }
    return true;
}

/**
 * @param target
 * @returns {string}
 */
function addLoader(target)
{
    var $loader = $('<div class="ui active inverted dimmer"><div class="ui text loader">Loading</div></div>');
    target.append($loader);
    return $loader;
}

/**
 * @param loader
 */
function removeLoader(loader)
{
    loader.remove();
}

/**
 * @param id
 * @param onApproveCallback
 * @param onDenyCallback
 * @returns {jQuery}
 */
function showModal(id, onApproveCallback, onDenyCallback)
{
    return $(id).modal({
        blurring: true,
        inverted: true,
        selector    : {
            close: '.close',
            approve: '.actions .positive',
            deny: '.actions .negative'
        },
        onDeny: onDenyCallback !== undefined ? onDenyCallback : function () {},
        onApprove: onApproveCallback !== undefined ? onApproveCallback : function () {}
    }).modal('setting', 'transition', 'vertical flip').modal('show');
}

function hideModal(id)
{
    $(id).modal('setting', 'transition', 'vertical flip').modal('hide');
}

/**
 * @param data
 */
function loginModalHandleError(data)
{
    if (data.hasOwnProperty('responseJSON'))
    {
        var error = data.responseJSON.error;
        $('#login-modal-content').prepend('<div class="ui negative message" id="login-modal-error-message"><div class="header">' + error + '</div></div>');
    }
}


function loginModalHandleSuccess()
{
    hideModal('#login-modal');
    showModal('#save-modal');
}

/**
 * @param e
 * @returns {string}
 */
function loginModalButtonClicked(e)
{
    e.preventDefault();
    $('#login-modal-error-message').remove();
    return addLoader($('#login-modal-content'));
}

/**
 * @param $target
 * @param x
 * @param y
 * @param ref
 * @param callback
 */
function handleInPopUpClick($target, x, y, ref, callback)
{
    $target.data('x', x);
    $target.data('y', y);
    $target.data('code', ref);
    $target.click(callback);
}

$(function () {

    $('#composition-name-input').val(COMPOSITION_NAME);

    // -----------------------------------------------------------------------
    // Events
    // -----------------------------------------------------------------------

    $.getJSON(API_URL + '/products', function(json)
    {

        $.each(json, function (i, item) {
            if (item.hasOwnProperty('imageConfigurator') && item.hasOwnProperty('code') && item.hasOwnProperty('size') && item.imageConfigurator != null) {
                if (!(sortModulesBySize.hasOwnProperty(item.size)))
                    sortModulesBySize[item.size] = {};
                if (!((sortModulesBySize[item.size]).hasOwnProperty(item.color)))
                    sortModulesBySize[item.size][item.color] = {};
                if (!((sortModulesBySize[item.size][item.color]).hasOwnProperty(item.type)))
                    sortModulesBySize[item.size][item.color][item.type] = {};
                sortModulesBySize[item.size][item.color][item.type][item.code] = item;

                if (equivalences.hasOwnProperty(item.size))
                    item['base'] = equivalences[item.size];
                else
                    item['base'] = 1;

                product[item.code] = item;
            }
        });

        initDisplayModules();
        initDisplayColors();

        $('.square-color').click(function() {
            displayColorGroup($(this).data('color'));
        });

        $('#button-1515').click(function(){
            $('#modules-1515').addClass('active');
            $('#button-1515').addClass('active');
            $('.product-configurator').addClass('hide-on');
            $('#modules-3030').removeClass('active');
            $('#button-3030').removeClass('active');
        });

        $('#button-3030').click(function(){
            $('#button-1515').removeClass('active');
            $('#modules-1515').removeClass('active');
            $('.product-configurator').addClass('hide-on');
            $('#modules-3030').addClass('active');
            $('#button-3030').addClass('active');
        });

        var $dragImg = $('.objectDrag img');

        $dragImg.draggable({
            helper: 'clone',
            cursorAt: {top:  SQUARE_SIZE / 2, left: SQUARE_SIZE / 2},
            start: function (event, ui) {
                var code = $(this).data('code');
                if (product.hasOwnProperty(code)) {
                    var item = product[code];
                    ghost.item = item;
                    ui.helper.css({
                        'width': SQUARE_SIZE * item.base,
                        'height': SQUARE_SIZE * item.base,
                        'opacity' : .5,
                        'z-index' : 115
                    });
                }
            },

            drag: function(ev)
            {
                hoverTrash();
                handleMouseClick(ev, function(x, y)
                {
                    ghost.x = x;
                    ghost.y = y;
                    $('#ghost').remove();
                    if (canDropModule(ghost.item, x, y))
                        displayGhost();
                });
            },

            stop: function (ev) {
                $('#ghost').remove();
                var $this = $(this);
                if (!isHoverBin)
                    handleMouseClick(ev, function(x, y, mouseX, mouseY)
                    {
                        var code = $this.data('code');
                        if (product.hasOwnProperty(code))
                        {
                            var item = product[code];
                            var rotate = $this.data('rotate');
                            if (mouseX > 0 && mouseX < GRID_SIZE && mouseY > 0 && mouseY < GRID_SIZE)
                            {
                                if (canDropModule(item, x, y))
                                    addItemToGrid(item, code, rotate, x, y);
                            }
                        }
                    });
                getCompositionPrice();
            }
        });
        createGrid(GRID_SIZE,VIEW_WIDTH, VIEW_HEIGHT, MOVE_WIDTH, MOVE_HEIGHT);
        checkDataLoad();
    });

    $('.trash').hover(
        function() { isHoverBin = true },
        function () { isHoverBin = false }
    );


    $noCapsOrderButton.click(function () {
        orderComposition(false);
    });
    $withCapsOrderButton.click(function () {
        orderComposition(true);
    });



    $loginModalButton.click(function(e) {
        var $loader = loginModalButtonClicked(e);
        $.post(API_URL + '/users/login', {
            email: $('#email-login-input').val(),
            password: $('#password-login-input').val()
        }, function () { loginModalHandleSuccess() ; }, 'json')
            .fail(function (data) {
                loginModalHandleError(data)
            })
            .always(function() {
                removeLoader($loader);
            })
    });


    $registerModalButton.click(function (e) {
        var $loader = loginModalButtonClicked(e);
        $.post(API_URL + '/users/register', {
            email: $('#email-register-input').val(),
            password: $('#password-register-input').val(),
            passwordConfirmation : $('#password-confirmation-register-input').val()
        }, function () { loginModalHandleSuccess() ; }, 'json')
            .fail(function (data) {
                loginModalHandleError(data)
            })
            .always(function() {
                removeLoader($loader);
            })
    });

    $downloadLink.click(function(){
        var pdfLink = $('#download-pdf-link');
        pdfLink.addClass('loading');
        showModal('#download-modal', null, null);
        saveGrid(null, false, false, function(data) {
            pdfLink
                .attr('href', API_URL + '/compositions/download/pdf/composition_' + data.publicId + '.pdf')
                .removeClass('loading')
            ;
        });

    });

    $saveGridButton.click(function (e) {
        e.preventDefault();
        $saveGridButton.addClass('loading');
        saveGrid($('#composition-name-input').val(), false, true, function(data) {
            current_save.id = data.id;
            current_save.name = data.name;
            IS_EDIT = true;
            $saveGridButton.removeClass('loading');
            hideModal('#save-modal');
        });
    });

    $shareGrid.click(function () {
        showModal('#share-modal');
    });

    $shareGridButton.click(function(e) {
        e.preventDefault();

        $('#share-modal-error-message').remove();
        $shareGridButton.addClass('loading');

        saveGrid(current_save.name, false, false, function(data) {
            $.post(API_URL + '/compositions/share/' + data.id, {
                email: $('#share-email-input').val(),
                message: $('#share-message-textarea').val()
            }, function() {
                hideModal('#share-modal');
            }, 'json')
                .fail(function (data) {
                    if (data.hasOwnProperty('responseJSON'))
                    {
                        var error = data.responseJSON.error;
                        $('#share-modal-content').prepend('<div class="ui negative message" id="share-modal-error-message"><div class="header">' + error + '</div></div>');
                    }
                })
                .always(function () {
                    $shareGridButton.removeClass('loading');
                })
            ;
        });
    });

    $saveGrid.click(function(e){
        if (IS_LOGGED)
        {
            $('#composition-name-input').val(current_save.name);
            showModal('#save-modal');
        }
        else
            showModal('#login-modal');
        return e.preventDefault();
    });

    $remove_all.click(function(){
        showModal('#delete-modal', function() {
            removeModule_all();
        });
    });

    $grid.draggable({
        containment: '.move_grid'
    });

    $(document).on('click', '.grid-item', function(ev) {

        var $popUp = $('#grid-item-popup-container').clone();
        $popUp.addClass('active');
        var $target = $(this);
        var $gridItemPopupColorContainer = $popUp.find('#grid-item-popup-color-container');

        var x = $target.data('x');
        var y = $target.data('y');

        if (itemExistsInGrid(x, y))
        {
            var item = grid[x][y];
            var p = product[item.code];
            $popUp.data('code', item.code);

            // Change color
            $gridItemPopupColorContainer.find('.square-color[data-color="' + p.color + '"]').addClass('border-select');

            // Hide rotate icons
            if (!p.canRotate)
            {
                $popUp.find('.rotate').remove();
                $popUp.find('.rotate-inverse').remove();
            }

            $('.grid-item-popup-container.active').remove();
            $grid.prepend($popUp);

            var popup = $target.popup({
                popup: $popUp,
                exclusive: true,
                hoverable: true,
                on: 'manual',
                inline: true,
                variation: 'wide',
                position: 'top center'
            }).popup('show');

            handleInPopUpClick($('.grid-item-popup-container.active button.rotate'), x, y, item.code, function () {
                var $this = $(this);
                rotateModuleInGrid($this.data('x'), $this.data('y'), false);
            });

            handleInPopUpClick($('.grid-item-popup-container.active button.rotate-inverse'), x, y, item.code, function () {
                var $this = $(this);
                rotateModuleInGrid($this.data('x'), $this.data('y'), true);
            });

            handleInPopUpClick($('.grid-item-popup-container.active button.delete'), x, y, item.code, function () {
                var $this = $(this);
                var x = $this.data('x');
                var y = $this.data('y');
                popup.popup('hide');
                deleteModule(x, y);
                removeModuleInGrid(x ,y);
                Draw();
                getCompositionPrice();
            });

            handleInPopUpClick($('.grid-item-popup-container.active .square.square-color'), x, y, item.code, function() {
                var $this = $(this);
                var code = $this.data('code');
                var color = $this.data('color');
                var rotate = (getModuleInGrid(x ,y)).data('rotate');
                var newRef = (p.size + '-' + p.type + '-' + color).toUpperCase();
                $gridItemPopupColorContainer.find('.square-color').removeClass('border-select');
                $gridItemPopupColorContainer.find('.square-color[data-color="' + color + '"]').addClass('border-select');
                deleteModule(x, y);
                removeModuleInGrid(x, y);
                addItemToGrid(p, newRef, rotate, x, y);
                Draw();
                getCompositionPrice();
            });
        }
    });

});