$.fn.extend({
    startConfigurator: function () {
        this.find('.element').elAction();
        $('#pumpCfg').submitForm();
    },
    submitForm: function () {
        this.one('submit', function (evt) {
            evt.preventDefault();
            var CONTROLLER = 'submit';
            var k = ['name', 'adres'],
                good = true;

            $(this).find('[name]').removeClass('error');
            $(this).find('p.ajaxInfo').hide();


            if (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).find('[name="mail"]').val()) == false) {
                $(this).find('[name="mail"]').addClass('error');
                good = false;
            }

            for (var i = 0; i < k.length; i++) {
                var obj = $(this).find('[name="' + k[i] + '"]');

                if (obj.val().length <= 1) {
                    good = false;
                    obj.addClass('error');
                }
            }

            if (good) {
                var fullName = $('#selected .header span').html();

                $('#pdf-modal').addClass('show').find('.loading').html('Trwa generowanie dokumentu PDF');
                $('body').css({
                    overflow: 'hidden'
                });


                generatePDF(fullName, CONTROLLER); // generate PDF and SEND


            } else {
                $('p.ajaxInfo.error').show();
            }
        });
    },
    elAction: function () {
        var once = true;
        this.one("click", function () {
            var $this = $(this);
            var $id = $(this).attr('data-id');
            var $step = $(this).attr('data-group');
            var $stepValue = $(this).attr('data-' + $step.toLowerCase());
            var $stepContent = $('<div class="step loading"><div class="wrapper flex around"></div></div>');
            var container = $('#pumpCfg .steps');

            $stepContent.appendTo(container); //wrapper for step

            $(this).insertInputs($step, $stepValue); // insert values 

            $.get(window.__URL__ + 'ajax/configurator.php?what=loadSteps&id=' + $id + '&step=' + $step, function (data) {
                var target = $('#pumpCfg').find('.step:last');

                target.setSelected($this, $step);
                target.find('.wrapper').html(data).slideDown(300).setHeader();
                target.find('.element').elAction();

            }).then(function () {
                $this.clone().appendTo('#selected .thumbs');
                $('#selected').removeClass('hide').goBack();
                $('#pumpCfg').find('.step:last').endScreen($step, $id);
                $('#pumpCfg').find('.step:last').removeClass('loading');
                scrollToForm($this);
            });



        });
    },
    insertInputs: function ($step, $val) {
        $('input[name=' + $step + ']').val($val);
    },
    clearInputs: function ($step) {
        $('input[name=' + $step + ']').next().val('');
        $('input[name=' + $step + ']').next().next().val('');
        $pos = '';
        /*
            check clicked position;
        */
        $('#selected .thumbs').find('.element').each(function (i) {
            if ($(this).data('group') == $step) {
                $pos = i;
            }
        });
        /* 
            remove all next thumbs
        */
        $('#selected .thumbs').find('.element').each(function (t) {
            if ($pos !== '' && t >= $pos) {
                $(this).remove();
            }
        });
    },
    setHeader: function () {
        var title = $(this).find('.headerTitle');
        var parent = $(this).parents('.step');

        if (!parent.find('.wrapper').prev().hasClass('header')) {
            title.insertBefore(parent.find('.wrapper'));
            title.removeClass('hidden headerTitle').addClass('header');
        }

    },
    setSelected: function ($this, $step) {
        $this.addClass('selected'); //selected item ;
        this.prev().find('.element:not(.selected)').each(function () {
            $(this).remove()
        }); // SPECS LOADED REMOVE REST;

        /*load specs*/
        var url = window.__URL__ + '!data/configurator/specs/wymiary_' + $this.attr('data-specs') + '.jpg';
        console.log(url);
        $.ajax({
            type: "HEAD",
            url: url,
            success: function (message, text, response) {
                if (response.getResponseHeader('Content-Type').indexOf('image') !== -1) {
                    $('<img src="' + url + '" />').appendTo($this.find('.photo'));
                }
            }
        });


        /*set selected header*/
        var headerContent = $this.parents('.step').find('.header').text().replace('Wybierz', 'Wybrano');
        $this.parents('.step').find('.header').html(headerContent + '<span>' + $this.find('.desc').html() + '</span>');


        /*navi header */
        $('#selected .header span').currentName();

    },
    endScreen: function ($step, $id) {
        if ($step == 'directionType') {
            var name = pumpName();
            var $this = $(this);
            var url = window.__URL__ + '!data/configurator/' + name + '.JPG';
            console.log(name);
            $.ajax({
                type: "HEAD",
                url: url,
                success: function (message, text, response) {
                    if (response.getResponseHeader('Content-Type').indexOf('image') !== -1) {
                        $this.find('.final.photo img').attr('src', url);
                    }
                }
            });
            $.get(window.__URL__ + 'ajax/configurator.php?what=getTable&id=' + $id + '&name=' + pumpName(), function (data) {
                var header = $('#pumpTable').html();
                $('#pumpTable').html(header + data);
                $('#pumpTable table').finalPump($this);
            });

        }
    },
    currentName: function () {
        var ret = '';
        var inputs = $(this).parents('form').find('.inputs input');

        inputs.each(function (i) {
            if ($(this).val() !== '' && $(this).attr('name') !== 'fullName') {
                ret = (i++ > 0 ? ret + '-' + $(this).val() : $(this).val());
            }
        });

        $(this).html(ret);

    },
    goBack: function () {
        this.find('.thumbs .element').last().one("click", function () {
            var $this = $(this);
            var $id = $(this).attr('data-id');
            var $step = $(this).attr('data-group');
            var $stepValue = $(this).attr('data-' + $step.toLowerCase());
            var $stepContent = $('<div class="step loading"><div class="wrapper flex around"></div></div>');
            var clickIndex;
            $('#pumpCfg .steps').find('.step').each(function (index, e) {
                var element = $(this).find('.element:first');
                if (element.attr('data-group') == $step) {
                    clickIndex = index;
                }
            });

            $('#pumpCfg .steps').find('.step').each(function (pos, e) {
                if (pos >= clickIndex) {
                    $(this).remove();
                }

            });


            $stepContent.appendTo($('#pumpCfg .steps'));

            $(this).insertInputs($step, $stepValue); // insert values 
            $(this).clearInputs($step); //


            $.get(window.__URL__ + 'ajax/configurator.php?what=loadSteps&id=' + $id + '&step=' + $step + '&goBack=1', function (data) {
                var target = $('#pumpCfg').find('.step:last');


                target.setSelected($this, $step, 'goBack');
                target.find('.wrapper').html(data).slideDown(300).setHeader();

                $('#pumpCfg .steps').find('.step').each(function (pos, e) {
                    if ($(this).find('.wrapper .element').length == 0) {
                        $(this).remove();
                    }
                });

                target.find('.element').elAction();


            }).then(function () {
                $('#pumpCfg').find('.step').each(function () {
                    $(this).removeClass('loading')
                });
                scrollToForm($this);
            });
        });
    },
    finalPump: function ($container) {



        this.find('tbody tr').on('click', function () {
            $container.find('tr').each(function () {
                $(this).removeClass('chosen');
            });


            var tableType = $(this).find('td:first').html();
            var pump = pumpName();
            var direction = $('input[name="directionType"]').val();
            var fullName = tableType + ' ' + direction + ' / ' + pump.replace(/-/g, " ");


            $(this).addClass('chosen');
            $container.parents('form').find('#selected .header span').html(fullName);
            //set input value
            $('#pumpCfg').insertInputs('fullName', fullName);
            //
            $('#buttons').find('.form_group').removeClass('hide');

            if ($(window).width() < 991) {
                $('#genPdf').remove();
            } else {
                $('#genPdf').genPdf(fullName);
            }

            $('html, body').animate({
                scrollTop: $('#buttons').offset().top
            }, 500);
        });
    },
    genPdf: function ($fullname) {
        this.one('click', function () {
            $('#pdf-modal').addClass('show');
            $('body').css({
                overflow: 'hidden'
            });
            generatePDF($fullname);
        });
    }

});

function pumpName() {
    var pump = $('#pumpCfg').find('input[name=mountType]').val();
    var roller = $('#pumpCfg').find('input[name=rollerType]').val().replace('Typ ', '');
    var flank = $('#pumpCfg').find('input[name=flankType]').val();

    return pump + '-' + roller + '-' + flank
}

function generatePDF($fullname, CONTROLLER = 'click') {

    //alert("gen pdf");
    var main = 'configurator/' + pumpName() + '.JPG';
    var roller = 'configurator/specs/wymiary_' + $('div[data-group="rollerType"]').attr('data-specs') + '.jpg';
    var flank = 'configurator/specs/wymiary_' + $('div[data-group="flankType"]').attr('data-specs') + '.jpg';
    var mount = 'configurator/specs/wymiary_' + $('div[data-group="mountType"]').attr('data-specs') + '.jpg';
    var direction = $('input[name="directionType"]').val();
    var fullname = $fullname;
    var group_id = $('div[data-group="pumpType"]').attr('data-id');
    var date = Date.now();
    var tableBASE = '';

    html2canvas(document.querySelector('#pumpTable table')).then(function (canvas) {
        //first generate canvas
        var main_canvas = document.createElement('canvas');
        var element = $('#pumpTable').find('table');
        var width = parseInt(element.width() + 4);
        var height = parseInt(element.height() + 4);
        var margin = parseInt(element.css('marginTop'));

        main_canvas.width = width;
        main_canvas.height = height;

        var ctx = main_canvas.getContext('2d');

        //draw CANVAS
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, main_canvas.width, main_canvas.height);
        ctx.drawImage(canvas, margin, margin, width, height, 0, 0, width, height);

        //CONVERT canvas to base64
        tableBASE = main_canvas.toDataURL('image/jpeg', 1);

        $.ajax({
            async: false,
            type: "POST",
            url: window.__URL__ + 'ajax/configurator.php?what=genPdf',
            data: {
                imgMain: main,
                imgRoller: roller,
                imgFlank: flank,
                imgMount: mount,
                fullname: fullname,
                groupname: pumpName(),
                direcion: direction,
                tableBase: tableBASE,
                date: date
            },
            succes: function (data) {
                return data;
            },
            error: function (err) {
                return err;
            }
        }).done(function (o) {
            name = fullname.replace(/\s+/g, '_');
            name = name.replace(/\//g, '-');
            var pdf = window.__URL__ + '!data/configurator/pdf/' + name + '_' + date + '.pdf';

            //no async/await support 
            // This is FIX
            if (CONTROLLER == 'click') {
                $('#pdf-modal .header').removeClass('loading')
                    .addClass('flex column center')
                    .html('<div class="header" style="margin-bottom:20px">Twoja konfiguracja</div><a href="' + pdf + '" class="button" target="_blank">Pobierz plik PDF</a>');
                $('#pdf-modal a').click(function () {
                    $(this).parents('#pdf-modal').removeClass('show');
                    $('body').css({
                        overflow: 'unset'
                    });
                    $('#genPdf').addClass('disabled').click(function (evt) {
                        evt.preventDefault();
                    });

                    //DELETE GENERATED PDF AFTER CLICK ON BUTTON ON MODAL
                    /*setTimeout(function () {

                        $.ajax({
                            type: "POST",
                            url: window.__URL__ + 'ajax/configurator.php?what=delPdf',
                            data: {
                                pdf: '!data/configurator/pdf/' + name + '_' + date + '.pdf'
                            }
                        }).done(function () {
                            console.log('usunieto PDF');
                        });

                    }, 3000);
					*/

                });
            } else if (CONTROLLER == 'submit') {
                $.ajax({
                    async: false,
                    type: "POST",
                    url: window.__URL__ + 'ajax/configurator.php?what=sendOrderConfigurator',
                    data: {
                        pdf: 'configurator/pdf/' + name + '_' + date + '.pdf',
                        fullName: fullname,
                        company: $('input[name=company]').val(),
                        name: $('input[name=name]').val(),
                        mail: $('input[name=mail]').val(),
                        adres: $('input[name=adres]').val()
                    }
                }).done(function () {
                    $('body').css({
                        overflow: 'auto'
                    });
                    $('#pdf-modal').removeClass('show');

                    $('p.ajaxInfo.ok').show().html('Wysłano formularz. Formularz odświeży się za 5s');
                    setTimeout(function () {
                        location.reload();
                    }, 5000);
                });
            }


        });
    });

}

function scrollToForm(target) {
    var where = target.parents('.step').next();
    $('html, body').animate({
        scrollTop: where.offset().top
    }, 500);
}



$(function () {
    $('.configurator').startConfigurator();

});