# Source: ui/succession.info/sample/ui/main.reel/main.js

    "use strict";

    var Component = require("montage/ui/component").Component,
        Montage = require("montage/core/core").Montage,
        Foo = require("ui/foo.reel").Foo,
        Bar = require("ui/bar.reel").Bar,
        observe = require("montage/frb/observe");

    exports.Main = Component.specialize({
        /**
         * Starts with 1 because 1 Foo is declared in serialization as default content for succession1
         */
        fooCount: {
            value: 1
        },

        succession1: {
            value: undefined
        },

        foo: {
            get: function () {
                this.fooCount++;

                var component = new Foo();

                // enable logger to work
                Montage.getInfoForObject(this).objectName = 'Foo';

                component.identifier = 'Foo' + this.fooCount;
                component.title = component.title + this.fooCount;

                //component.buildInCssClass = null;
                //component.buildInTransitionCssClass = null;
                //component.buildOutCssClass = null;

                //component.buildInCssClass = "zoomInDown";
                //component.buildInTransitionCssClass = null;
                //component.buildOutCssClass = "zoomOutDown";

                //component.classList.add("absolute");

                //Object.observe(component, function (changes) {
                //    changes.forEach(function (change) {
                //        if (change.name === '_inDocument') {
                //            console.log("Property " + '_inDocument' + " changed");
                //            console.log(change);
                //            debugger;
                //        }
                //    });
                //})
                return component;
            }
        },

        barCount: {
            value: 0
        },

        bar: {
            get: function () {
                this.barCount++;

                var component = new Bar();

                // enable logger to work
                Montage.getInfoForObject(this).objectName = 'Bar';

                //component.identifier = 'Bar' + this.barCount;
                component.title = component.title + this.barCount;

                //component.buildInCssClass = null;
                //component.buildInTransitionCssClass = null;
                //component.buildOutCssClass = null;

                return component;
            }
        },

        handlePushAction: {
            value: function () {
                var component;
                if (this.succession1.content) {
                    component = this.succession1.content instanceof Foo ?
                        this.bar : this.foo;
                } else {
                    component = this.foo;
                }
                this.succession1.history.push(component);
            }
        },

        //handlePushAction: {
        //    value: function () {
        //        var source, destination;
        //
        //        if (this.succession1.content) {
        //            source = this.succession1.content.destination;
        //            destination = this.succession1.content.destination instanceof Foo ?
        //                this.bar : this.foo;
        //        } else {
        //            source = null;
        //            destination = this.foo;
        //        }
        //
        //        var passage = new Passage();
        //        passage.identifier = generateUUID();
        //        passage.source = source;
        //        passage.destination = destination;
        //        //passage.buildInCssClass = "zoomInDown";
        //        //passage.buildInTransitionCssClass = null;
        //        //passage.buildOutCssClass = "zoomOutDown";
        //        passage.sourceData = {};
        //
        //        this.succession1.history.push(passage);
        //    }
        //},

        handlePopAction: {
            value: function () {
                this.succession1.history.pop();
            }
        },

        handleContentComponentAction: {
            value: function () {
                this.succession1.content = this.foo;
            }
        },

        handleContentNullAction: {
            value: function () {
                this.succession1.content = null;
            }
        },

        handleMultiOpAction: {
            value: function () {
                var numberOfPushes = 10,
                    numberOfPops = 5,
                    self = this;

                var pushInterval = setInterval(function () {
                    self.handlePushAction();
                    numberOfPushes--;

                    if (numberOfPushes === 0) {
                        clearInterval(pushInterval);
                    }
                }, 500);

                setTimeout(function () {
                    var popInterval = setInterval(function () {
                        self.handlePopAction();
                        numberOfPops--;

                        if (numberOfPops === 0) {
                            clearInterval(popInterval);
                        }
                    }, 750);
                }, 900);

            }
        },

        handlePushx5Action: {
            value: function () {
                var numberOfPushes = 10,
                    self = this;

                var pushInterval = setInterval(function () {
                    numberOfPushes--;

                    self.handlePushAction();

                    if (numberOfPushes === 0) {
                        clearInterval(pushInterval);
                    }
                }, 50);
            }
        },

        handlePopx5Action: {
            value: function () {
                var numberOfPops = 5,
                    self = this;

                var popInterval = setInterval(function () {
                    numberOfPops--;

                    self.handlePopAction();

                    if (numberOfPops === 0) {
                        clearInterval(popInterval);
                    }
                }, 750);

            }
        },

        handleToggleOverflowAction: {
            value: function () {
                this.succession1.classList.toggle("overflow-hidden");
            }
        },

        handleSetSuccessionBuildInOutAction: {
            value: function () {
                var suffix = this.succession1.contentBuildInAnimation && this.succession1.contentBuildInAnimation.cssClass === "buildIn" ? "2" : "";

                this.succession1.contentBuildInAnimation = {
                    fromCssClass: "buildInFrom" + suffix,
                    cssClass: "buildIn" + suffix
                };
                this.succession1.contentBuildOutAnimation = {
                    cssClass: "buildOut" + suffix,
                    toCssClass: "buildOutTo" + suffix,
                };
            }
        },

        handleClearSuccessionBuildInOutAction: {
            value: function () {
                this.succession1.contentBuildInAnimation = {};
                this.succession1.contentBuildOutAnimation = {};
            }
        },

        handleDisableSuccessionBuildInOutAction: {
            value: function () {
                this.succession1.contentBuildInAnimation = null;
                this.succession1.contentBuildOutAnimation = null;
            }
        },

        handleDetachAction: {
            value: function () {
                this.templateObjects.Bar2._shouldBuildOut = true;
                this.templateObjects.text._shouldBuildOut = true;
                this.templateObjects.Bar3._shouldBuildOut = true;
                this.templateObjects.Container.domContent = this.templateObjects.innerText.element;
            }
        },

        handleSubstitutionMultiOpAction: {
            value: function () {
                var self = this;

                self.templateObjects.substitution.switchValue =
                    self.templateObjects.substitution.switchValue === 'Foo' ? 'Bar' : 'Foo';

                /*setTimeout(function () {
                    self.templateObjects.substitution.switchValue =
                        self.templateObjects.substitution.switchValue === 'Foo' ? 'Bar' : 'Foo';
                }, 500)

                setTimeout(function () {
                    self.templateObjects.substitution.switchValue =
                        self.templateObjects.substitution.switchValue === 'Foo' ? 'Bar' : 'Foo';
                }, 1000)*/
            }
        },

        handleConditionToggleAction: {
            value: function () {
                this.templateObjects.condition.condition = !this.templateObjects.condition.condition;
            }
        },

        handleBuildInEnd: {
            value: function (event) {
                this.lastBuildInComponentIdentifier = event.target.identifier;
            }
        },

        handleBuildOutEnd: {
            value: function (event) {
                this.lastBuildOutComponentIdentifier = event.target.identifier;
            }
        }
    });