var SVGData = {
    data: [],
    dataLock: false,
    selected: [],
    currentSelection: [],

    select: function(stone) {
        if(!this.currentSelection['tileset'] ||
            !this.currentSelection['group']) {

            return false;
        }

        var tileset = this.currentSelection['tileset'];
        var group   = this.currentSelection['group'];

        var name = this.getName(tileset, group, stone);

        this.selected[name] = {
            'tileset': tileset,
            'group': group,
            'stone' :stone
        };

        var size = 0, key;
        for (key in SVGData.selected) {
            if (SVGData.selected.hasOwnProperty(key)) size++;
        }
        $('.price-header-nr').html(formatNumbers(size));
        $('.price-header-total').html(formatNumbers(size*Number($('.price-header-value').html().replace("'",""))));

        return true;
    },

    deselect: function(stone) {
        if(!stone) {
            this.selected = [];
        } else {
            if(!this.currentSelection['tileset'] ||
                !this.currentSelection['group']) {

                return false;
            }

            var tileset = this.currentSelection['tileset'];
            var group   = this.currentSelection['group'];

            var name = this.getName(tileset, group, stone);

            if(this.selected[name] == 'undefined') {
                return false;
            }

            delete this.selected[name]
        }


        var size = 0, key;
        for (key in SVGData.selected) {
            if (SVGData.selected.hasOwnProperty(key)) size++;
        }
        $('.price-header-nr').html(formatNumbers(size));
        $('.price-header-total').html(formatNumbers(size*Number($('.price-header-value').html().replace("'",""))));

        return true;
    },

    reset: function() {
        this.currentSelection = [];
    },

    setTileset: function(tileset) {
        this.currentSelection['tileset'] = tileset;
    },

    setGroup: function(group) {
        this.currentSelection['group'] = group;
    },

    getName: function(tileset, group, stone) {
        return tileset + "_" + group + "_" + stone;
    },

    getSelected: function() {
        var stones = [];

        for (var key in this.selected) {
            if (this.selected.hasOwnProperty(key)) {

                var stone = this.selected[key];

                stones.push([stone.tileset, stone.group, stone.stone]);
            }
        }

        return stones;
    }
};

var SVG = {

    init: function() {
        $('#svg-square .tileset').on('click', this.chooseTileset);
        $('.svg-square-tileset .tile').on('click', this.chooseGroup);
        $('.square-group.group-hundred .tile').on('click', this.selectStone);
        $('.square-group.group-arch .tile').on('click', this.selectStone);


        $('.square-tileset .btn-close').on('click', this.closeTileset);
        $('.square-group .btn-close').on('click', this.closeGroup);

        $('.srsly-add-to-cart').on('click', this.addToCart);

        $('#orderSearch').keyup(function(){ SVG.search();});

        SVG.render();
    },

    addToCart: function() {
        var url  = '/wp-admin/admin-ajax.php';
        var data = {
            'action' :'Srsly_KlosterShop::addToCart',
            'selected': SVGData.getSelected()
        };

        $.ajax({
            type: "POST",
            url: url,
            data: data,

            success: function (url) {

                SVGData.deselect();
                $('.srsly-add-to-cart').html('Weiterleiten…');

                if(url) {
                    document.location.href = url;
                }
            }
        });
    },

    render: function(tileset, group) {
        var tileset = tileset || false;
        var group = group || false;

        if (SVGData.data.length == 0) {
            if(!SVGData.dataLock || SVGData.dataLock + 5 * 1000 < Date.now()) {
                SVGData.dataLock = Date.now();

                var url = '/wp-content/plugins/srsly-kloster/shop/stones.json.php?66289229590d2';

                $.ajax({
                    url: url,
                    dataType: 'json',
                    context: this,
                    success: function (data) {
                        SVGData.data = data;

                        if(tileset || group) {
                            SVG.highlight(tileset, group);
                        }
                    },
                    complete: function () {
                        SVGData.dataLock = false;
                    }
                });
            } else {
                setTimeout(function() {SVG.render(tileset, group);}, 1000);
            }
        } else  {
            SVG.highlight(tileset, group);
        }
    },

    search: function() {
        var searchField = $('#orderSearch').val();
        if (searchField.length > 2) {
            var regex = new RegExp(searchField, "i");
            var output = '<div class="row">';
            var count = 1;
            var resultObject = new Object();
            $.each(SVGData.data, function(tilesetname, tileset){
                $.each(tileset.data, function(tilesetkey, group) {
                    $.each(group.bought, function(stone, name) {

                        if(typeof name != "string") {
                            return false;
                        }

                        if ((name.search(regex) != -1 && name != "Anonym")) {

                            tilesetstring = "'"+ tilesetname + "'";
                            if (typeof resultObject[name] == "undefined") {
                                resultObject[name] = new Object();
                                resultObject[name]['data'] = new Array();
                            }
                            var pushStone = new Object();
                            pushStone['tileset'] = tilesetstring;
                            pushStone['group'] = tilesetkey;
                            pushStone['stone'] = stone;
                            resultObject[name]['data'].push(pushStone);
                        }
                    });
                });
            });

            if (Object.keys(resultObject).length === 0 && resultObject.constructor === Object) {
                $('#resultSearch').html('<div class="well"><h5>No Result</h5></div>');
            } else {
                $.each(resultObject, function(key, value) {
                    output += '<div class="col-xs-12">';
                    //output += '<div class="col-md-3"><img class="img-responsive" src="'+val.avatar+'" alt="'+ val.name +'" /></div>';
                    output += '<div class="well">';
                    output += '<h5>' + key + '</h5>';
                    $.each(value.data, function(key, value) {
                        output += '<button class="btn btn-default" onclick="SVG.closeGroup();SVG.closeTileset();SVG.chooseTileset(0, ' + value.tileset + ');SVG.chooseGroup(0, ' + value.tileset + ', ' + value.group + ');SVG.jumptoStone(' + value.stone + ');"><i class="fa fa-chevron-right" aria-hidden="true"></i> Zum Stein</button>'
                    });
                    output += '</div>';
                    output += '</div>';
                    if (count % 2 == 0) {
                        output += '</div><div class="row">'
                    }
                    count++;
                });
                output += '</div>';

                $('#resultSearch').html(output);
            }
        }
    },

    debug: function(message) {
            },

    highlight: function(tileset, group) {
    var tileset = tileset || false;
    var group   = group || false;

    if(SVGData.data.length == 0) {
        return this.render(tileset, group);
    }

    SVG.highlightTileset(tileset);
    SVG.highlightGroup(tileset, group);
},

highlightTileset: function(tileset) {
    if(!tileset) {
        return false;
    }

    var data = SVGData.data;

    if(data.length == 0) {
        return SVG.render(tileset);
    }

    if(!(tileset in data)) {
        SVG.debug('Missing Tileset : ' + tileset);

        return false;
    }

    $('[id^=tileset-' + tileset + '-item]').removeClass('item-sold');
    // $('[id^=tileset-' + tileset + '-item]').css('opacity', 1);

    $('.price-header-value').html(formatNumbers(data[tileset]['price']));

    $.each(data[tileset]['data'], function(groupNr, value){
        if (value.free == 0) {
            $('#tileset-' + tileset + '-item' + groupNr).addClass('item-sold');
        }
        else {
            var percentage = value.free/value.total;
            // $('#tileset-' + tileset + '-item' + groupNr).css('opacity', percentage);
        }
    });
},

highlightGroup: function(tileset, group) {
    if(!tileset || !group) {
        return false;
    }

    var data = SVGData.data;

    if(data.length == 0) {
        return SVG.render(tileset, group);
    }

    if(!(tileset in data)) {
        SVG.debug('Missing Tileset : ' + tileset);

        return false;
    }

    if(!(group in data[tileset]['data'])) {
        SVG.debug('Missing Group : ' + tileset + group);

        return false;
    }

    $('[id^=group-hundred-item]').removeClass('item-sold').tooltip('destroy');
    $('[id^=group-arch-item]').removeClass('item-sold').tooltip('destroy');

    $.each(data[tileset]['data'][group]['bought'], function(stoneNr, value){
        $('#group-hundred-item' + stoneNr)
            .addClass('item-sold')
            .tooltip({
                placement: 'top',
                title: '' + value,
                container:'body'
            })
        ;
        $('#group-arch-item' + stoneNr)
            .addClass('item-sold')
            .tooltip({
                placement: 'top',
                title: '' + value,
                container:'body'
            })
        ;
    });

    $('[id^=group-hundred-item]').removeClass('item-reserved');
    $('[id^=group-arch-item]').removeClass('item-reserved');

    $.each(data[tileset]['data'][group]['reserved'], function(stoneNr, _value){
        $('#group-hundred-item' + stoneNr).addClass('item-reserved');
        $('#group-arch-item' + stoneNr).addClass('item-reserved');
    });
},

chooseTileset: function(e, tileset) {
    if ($('#svg-square').hasClass('zoomed') && !$(this).hasClass('selected')) {
        // Zoomed in & click on not selected
        return false;
    } else if ($('#svg-square').hasClass('zoomed') && $(this).hasClass('selected')) {
        // Zoomed & click on selected
        $(this).removeClass('selected');
        $('#svg-square').removeClass('zoomed');
        $('.square-tileset').hide();
        $('.square-tileset .selected').removeClass('selected');
    } else if (!$('#svg-square').hasClass('zoomed') && !$(this).hasClass('selected')) {
        // Not zoomed & click on not selected
        if (tileset !== undefined) {
            // argument passed and not undefined
        } else {
            var tileset = $(this).attr('id');
        }

        $('#svg-square').addClass('zoomed');
        $('#'+tileset).addClass('selected');

        $('.tileset-' + tileset).show();

        SVG.render(tileset);

    } else {
        SVG.debug('error tileset:' + e);
    }
},

chooseGroup: function(e, tileset, group) {
    if ($(this).closest('.svg-square-zoom').hasClass('zoomed') && !$(this).hasClass('selected')) {
        // Zoomed in & click on not selected
        return false;
    } else if ($(this).closest('.svg-square-zoom').hasClass('zoomed') && $(this).hasClass('selected')) {
        // Zoomed & click on selected
        $(this).removeClass('selected');
        $(this).closest('.svg-square-zoom').removeClass('zoomed');
        $('.square-group').hide();
        $('.square-group .selected').removeClass('selected');

    } else if (!$(this).closest('.svg-square-zoom').hasClass('zoomed') && !$(this).hasClass('selected')) {
        // Not zoomed & click on not selected
        if (tileset !== undefined && group !== undefined) {
            // argument passed and not undefined
        } else {
            var id      = $(this).attr('id');
            var tileset = id.substr(8, id.indexOf("-item") - 8);
            var group = id.substr(id.indexOf("-item") + 5);
        }

        var domid = '#tileset-' + tileset + '-item' + group;

        $(domid).attr('data-tileset', tileset);
        $(domid).attr('data-group', group);

        $(domid).closest('.svg-square-zoom').addClass('zoomed');
        $(domid).addClass('selected');

        if (tileset == "left-arcades" || tileset == "right-arcades") {
            $('.square-group.group-arch').show();
        } else {
            $('.square-group.group-hundred').show();
        }

        SVGData.setTileset(tileset);
        SVGData.setGroup(group);
        SVG.render(tileset, group);
    } else {
        SVG.debug('error group: ' + e);
    }
},


selectStone: function() {
    if ($(this).hasClass('item-sold') || $(this).hasClass('item-reserved') ) {
        return false;
    }

    var id      = $(this).attr('id');
    var stone   = id.substr(id.indexOf("-item") + 5);

    if ($(this).hasClass('selected')) {

        if(SVGData.deselect(stone)) {
            $(this).removeClass('selected');
        }
    } else {
        if(SVGData.select(stone)) {
            $(this).addClass('selected');
        }
    };
},


jumptoStone: function(stoneNr) {

    $('#group-hundred-item' + stoneNr).addClass('item-jumpto');
    $('#group-hundred-item' + stoneNr).tooltip('show');

    $('#group-arch-item' + stoneNr).addClass('item-jumpto');
    setTimeout(function(){
        $('#group-arch-item' + stoneNr).tooltip('show');
    },1000)

    setTimeout(function(){ $('.tile').tooltip('hide'); }, 5000)

},

closeTileset: function() {
    // Zoomed in & click on selected
    $('#svg-square .tileset').removeClass('selected');
    $('#svg-square').removeClass('zoomed');
    $('.square-tileset').hide();
    $('.square-tileset .selected').removeClass('selected');
},

closeGroup: function() {
    // Zoomed & click on selected
    $('.svg-square-tileset .tile').removeClass('selected');
    $('.svg-square-tileset .tile').closest('.svg-square-zoom').removeClass('zoomed');
    $('.square-group').hide();
    $('.square-group .selected').removeClass('selected');
    $('.square-group .item-jumpto').removeClass('item-jumpto');

    SVGData.reset();
    SVGData.deselect();
}
};

$(document).ready(function() {

    SVG.init();

    /* Jump to Stone if query parameter is there */
    var queryStone = GetQueryStringParams('stone');
    if (queryStone !== undefined) {
        var paramArray = queryStone.split('_');
        SVG.chooseTileset(0, paramArray[0]);
        SVG.chooseGroup(0, paramArray[0], paramArray[1]);
        SVG.jumptoStone(paramArray[2]);
    }

    /* Jump to Search if query parameter is there */
    var querySearch = GetQueryStringParams('search');
    if (querySearch !== undefined) {
        $('#searchModal').modal('show');
    }
    if ($('html').hasClass('no-svg')) {
        $('#svgModal').modal('show');
    }

});



/* Helper functions
 * -----------------------*/
// Get URL Parameter
function GetQueryStringParams(sParam) {
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
}
// Format Numbers
function formatNumbers(x) {
    x = x.toString();
    var pattern = /(-?\d+)(\d{3})/;
    while (pattern.test(x))
        x = x.replace(pattern, "$1'$2");
    return x;
}