define('package/quiqqer/tour/bin/guides/Media', [

    'qui/QUI',
    'package/quiqqer/tour/bin/classes/Tour',
    'utils/Panels',
    'Locale',
    'Projects'

], function (QUI, Tour, PanelUtils, QUILocale, Projects) {
    "use strict";

    var Media = new Tour();
    var lg = 'quiqqer/tour';

    var SitePanel;
    var ProjectPanel;
    var erstellterOrdner;
    var BildbearbeitungsPanel;
    var ImageNode;

    var anzahlBreadCrumbsVorher;
    var anzahlBreadCrumbsNacher;

    var imageVorhanden = false;

    Media.addStep({
        title  : QUILocale.get(lg, 'Media.Step1.Title'),
        text   : QUILocale.get(lg, 'Media.Step1.Text'),
        buttons: [{
            text  : QUILocale.get(lg, 'Media.Button.Abbruch'),
            action: function () {
                Media.cancel();
            }
        }, {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                var ProjektBar = document.getElements('.project-container');
                var Panel = QUI.Controls.getById(
                    ProjektBar.getParent('.qui-panel').get('data-quiid')
                );
                ProjectPanel = Panel;
                Panel.open(function () {
                    Projects.getList(function (result) {
                        var keys        = Object.keys(result),
                            project     = result[keys[0]],
                            projectName = keys[0],
                            projectLang = project.default_lang;

                        Panel.setAttribute('project', projectName);
                        Panel.setAttribute('lang', projectLang);
                        Panel.openProject();

                        PanelUtils.openMediaPanel(projectName, {}).then(function (CreatedPanel) {
                            SitePanel = CreatedPanel;
                            Media.next.delay(500);
                        });
                    });
                });
            }
        }]
    });

    Media.execute(
        function () {
            var BreadCrumbs = SitePanel.$Breadcrumb.children[0].children;
            BreadCrumbs[0].click();
            Media.next();
        }
    );

    Media.addStep({
        title  : QUILocale.get(lg, 'Media.Step1.Title'),
        text   : QUILocale.get(lg, 'Media.Step2.Text'),
        buttons: [{
            text  : QUILocale.get(lg, 'Media.Button.?'),
            action: function () {
                Media.next();
            }
        }, {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.skip(1);
            }
        }],
        when   : {
            hide: function () {
                SitePanel.$children.filter(function (obj) {
                    return obj.type === "folder";
                }).sort(function (obj1, obj2) {
                    var date1 = new Date(obj1.e_date);
                    var date2 = new Date(obj2.e_date);
                    return date1 - date2;
                });
                anzahlBreadCrumbsVorher = document.getElements('.qui-breadcrumb-item-icon.fa.fa-folder-o').length;
            }
        }
    });

    Media.addStep({
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        text    : QUILocale.get(lg, 'Media.Step3.Text'),
        attachTo: {
            element: function () {
                return document.getElement('button[title="Media"]');
            },
            on     : 'right'
        },
        buttons : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        }
    });

    Media.addStep({
        title        : QUILocale.get(lg, 'Media.Step1.Title'),
        text         : QUILocale.get(lg, 'Media.Step4.Text'),
        tetherOptions: {
            constraints: null
        },
        buttons      : {
            text  : QUILocale.get(lg, 'Media.Button.Fertig'),
            action: function () {
                anzahlBreadCrumbsNacher = document.getElements('.qui-breadcrumb-item-icon.fa.fa-folder-o').length;

                if (anzahlBreadCrumbsVorher > 0 && anzahlBreadCrumbsNacher === 0 || anzahlBreadCrumbsVorher >= 0 && anzahlBreadCrumbsNacher > anzahlBreadCrumbsVorher) {
                    Media.next();
                } else {
                    alert(QUILocale.get(lg, 'Media.Alert.1'));
                }
            }
        },
        attachTo     : {
            element: function () {
                return SitePanel.getElm().getElement('[name= "create_folder"]');
            },
            on     : 'right'
        }
    });

    Media.addStep({
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        text    : QUILocale.get(lg, 'Media.Step5.Text'),
        buttons : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        },
        attachTo: {
            element: function () {
                var BreadCrumbs = SitePanel.$Breadcrumb.children[0].children;
                return BreadCrumbs[BreadCrumbs.length - 1];
            },
            on     : 'right'
        }
    });

    Media.addStep({
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        text    : QUILocale.get(lg, 'Media.Step6.Text'),
        buttons : false,
        attachTo: {
            element: function () {
                var BreadCrumbs = SitePanel.$Breadcrumb.children[0].children;
                BreadCrumbs[0].addEvent('click', Media.next);
                return BreadCrumbs[0];
            },
            on     : 'right'
        }
    });

    Media.addStep({
        title  : QUILocale.get(lg, 'Media.Step1.Title'),
        text   : QUILocale.get(lg, 'Media.Step7.Text'),
        buttons: {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        }
    });

    Media.addWaitingStepByCSSClass(document, '[name="upload"]');

    Media.addStep({
        title        : QUILocale.get(lg, 'Media.Step1.Title'),
        text         : QUILocale.get(lg, 'Media.Step8.Text'),
        tetherOptions: {
            attachment      : 'top left',
            targetAttachment: 'top right'
        },
        buttons      : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        },
        attachTo     : {
            element: function () {
                return SitePanel.getElm().getElement('[name= "upload"]');
            },
            on     : 'bottom'
        }
        //@todo Überprüfung ob Bild vorhanden einfügen
    });

    Media.addStep({
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        text    : QUILocale.get(lg, 'Media.Step9.Text'),
        attachTo: {
            element: function () {
                //Bekomme den letzt-hinzugefügten Ordner
                var Last = SitePanel.$children.filter(function (obj) {
                    return obj.type === "folder";
                }).sort(function (obj1, obj2) {
                    var date1 = new Date(obj1.e_date);
                    var date2 = new Date(obj2.e_date);
                    return date1 - date2;
                }).getLast();
                erstellterOrdner = Last;

                return SitePanel.getContent().getElement('[data-id="' + Last.id + '"]');
            },
            on     : 'left'
        },
        when    : {
            show: function () {
                // Abwarten bis Ordner Aktiviert wurde
                var iter = 0;
                var testActivation = function () {
                    iter++;
                    if (iter > 100) {
                        alert('Zeit abgelaufen ... bitte starte die Tour von vorne');
                        return;
                    }
                    var ordner = SitePanel.getContent().getElement('[data-id="' + erstellterOrdner.id + '"]');

                    //@todo ... die variable active schaltet nicht um ... bug für hen ...
                    if (erstellterOrdner.active || ordner.getAttribute('class').includes('qmi-active')) {
                        Media.next();
                        return true;
                    }
                    testActivation.delay(1000);
                };
                testActivation();
            }
        }
    });

    Media.addStep({
            title   : QUILocale.get(lg, 'Media.Step1.Title'),
            text    : QUILocale.get(lg, 'Media.Step10.Text'),
            buttons : {
                text  : QUILocale.get(lg, 'Media.Button.Weiter'),
                action: function () {
                    var Content = SitePanel.$children;
                    var filterFolders = function (obj) {
                        return obj.type === "image";
                    };
                    Content = Content.filter(filterFolders);

                    var sortDates = function (obj1, obj2) {
                        var date1 = new Date(obj1.e_date);
                        var date2 = new Date(obj2.e_date);
                        return date1 - date2;
                    };

                    Content = Content.sort(sortDates);

                    if (Content.length) {
                        ImageNode = SitePanel.getContent().getElement('[data-id="' + Content[Content.length - 1].id + '"]');
                        ImageNode.click();
                    }
                    Media.next();
                }
            },
            attachTo: {
                element: function () {
                    var Content = SitePanel.$children;
                    var filterFolders = function (obj) {
                        return obj.type === "image";
                    };
                    Content = Content.filter(filterFolders);

                    var sortDates = function (obj1, obj2) {
                        var date1 = new Date(obj1.e_date);
                        var date2 = new Date(obj2.e_date);
                        return date1 - date2;
                    };

                    Content = Content.sort(sortDates);

                    if (Content.length) {
                        imageVorhanden = true;
                        ImageNode = SitePanel.getContent().getElement('[data-id="' + Content[Content.length - 1].id + '"]');
                        return ImageNode;
                    } else {
                        alert(QUILocale.get(lg, 'Media.Alert.KeinImage'));
                        return SitePanel.getElm();
                    }
                },
                on     : 'right'
            },
            when    : {
                show: function () {
                    if (imageVorhanden) {
                        ImageNode.addEvent('click', Media.next);
                    }

                }
            }
        }
    );

    Media.addWaitingStepByType('controls/projects/project/media/FilePanel');

    Media.wait(5);

    Media.addStep({
        text    : QUILocale.get(lg, 'Media.Step11.Text'),
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        buttons : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        },
        attachTo: {
            element: function () {
                BildbearbeitungsPanel = QUI.Controls.getByType('controls/projects/project/media/FilePanel');
                BildbearbeitungsPanel = BildbearbeitungsPanel[BildbearbeitungsPanel.length - 1];

                return BildbearbeitungsPanel.getElm().getElement('[name = "status"]');
            },
            on     : 'right'
        }
    });

    Media.addStep({
        text    : QUILocale.get(lg, 'Media.Step12.Text'),
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        buttons : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        },
        attachTo: {
            element: function () {
                return BildbearbeitungsPanel.getElm().getElement('[name="upload"]');
            },
            on     : 'right'
        }
    });

    Media.addStep({
        text    : QUILocale.get(lg, 'Media.Step13.Text'),
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        buttons : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        },
        attachTo: {
            element: function () {
                return BildbearbeitungsPanel.getElm().getElement('[name="save"]');
            },
            on     : 'right'
        }
    });

    Media.addStep({
        text    : QUILocale.get(lg, 'Media.Step14.Text'),
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        buttons : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        },
        attachTo: {
            element: function () {
                return BildbearbeitungsPanel.getElm().getElement('[name="delete"]');
            },
            on     : 'right'
        }
    });

    Media.addStep({
        text    : QUILocale.get(lg, 'Media.Step15.Text'),
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        buttons : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        },
        attachTo: {
            element: function () {
                var details = BildbearbeitungsPanel;
                var categories = BildbearbeitungsPanel.getCategory();

                categories.forEach(function (category) {
                    if (category.options.name === "details") {
                        details = category;
                    }
                });

                return details.getElm();
            },
            on     : 'right'
        }
    });

    Media.addStep({
        text    : QUILocale.get(lg, 'Media.Step16.Text'),
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        buttons : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        },
        attachTo: {
            element: function () {
                return BildbearbeitungsPanel.getElm().getElement('[name = "download_file"]');
            },
            on     : 'right'
        },
        scrollTo: true,
        when    : {
            hide: function () {
                var effects = BildbearbeitungsPanel;
                var categories = BildbearbeitungsPanel.getCategory();

                categories.forEach(function (category) {
                    if (category.options.name === "imageEffects") {
                        effects = category;
                    }
                });

                effects.click();
            }
        }
    });

    Media.addStep({
        text    : QUILocale.get(lg, 'Media.Step17.Text'),
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        buttons : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        },
        attachTo: {
            element: function () {
                var effects = BildbearbeitungsPanel;
                var categories = BildbearbeitungsPanel.getCategory();

                categories.forEach(function (category) {
                    if (category.options.name === "imageEffects") {
                        effects = category;
                    }
                });
                return effects.getElm();
            },
            on     : 'left'
        },
        when    : {
            hide: function () {
                var preview = BildbearbeitungsPanel;
                var categories = BildbearbeitungsPanel.getCategory();

                categories.forEach(function (category) {
                    if (category.options.name === "preview") {
                        preview = category;
                    }
                });

                preview.click();
            }
        }
    });

    Media.addStep({
        text    : QUILocale.get(lg, 'Media.Step18.Text'),
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        buttons : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        },
        attachTo: {
            element: function () {
                var preview = BildbearbeitungsPanel;
                var categories = BildbearbeitungsPanel.getCategory();

                categories.forEach(function (category) {
                    if (category.options.name === "preview") {
                        preview = category;
                    }
                });

                return preview.getElm();
            },
            on     : 'left'
        }
    });

    Media.addStep({
        text         : QUILocale.get(lg, 'Media.Step19.Text'),
        title        : QUILocale.get(lg, 'Media.Step1.Title'),
        tetherOptions: {
            constraints: null // this disables pinning (which breaks the arrows)
        },
        buttons      : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                BildbearbeitungsPanel.getElm().getElement('[name = "close"]').fireEvent('click');
                Media.next();
            }
        },
        attachTo     : {
            element: function () {
                return BildbearbeitungsPanel.getElm().getElement('[name = "close"]');
            },
            on     : 'left'
        },
        when         : {
            show: function () {
                BildbearbeitungsPanel.getElm().getElement('[name = "close"]').addEvent('click', Media.next);
            }
        }
    });

    Media.addWaitingStepByCSSClass(document, '[name="view"]');

    Media.addStep({
        text    : QUILocale.get(lg, 'Media.Step20.Text'),
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        buttons : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        },
        attachTo: {
            element: function () {
                return SitePanel.getElm().getElement('[name = "view"]');
            },
            on     : 'right'
        }
    });

    Media.addStep({
        text    : QUILocale.get(lg, 'Media.Step21.Text'),
        title   : QUILocale.get(lg, 'Media.Step1.Title'),
        buttons : {
            text  : QUILocale.get(lg, 'Media.Button.Weiter'),
            action: function () {
                Media.next();
            }
        },
        attachTo: {
            element: function () {
                return SitePanel.getElm().getElement('[name = "left-sitemap-media-button"]');
            },
            on     : 'right'
        }
    });

    Media.addStep({
        text   : QUILocale.get(lg, 'Media.Step22.Text'),
        title  : QUILocale.get(lg, 'Media.Step1.Title'),
        buttons: {
            text  : QUILocale.get(lg, 'Media.Button.Ende'),
            action: function () {
                Media.cancel();
            }
        }
    });


    return Media;
});