var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
(function () {
    document.write('<style>#spe-content01 h2, #spe-content01 .spe-lanEnTtl, #spe-content01 .spe-firstTxt {opacity:0} </style>');
})();
var brother_ScanCutDX;
(function (brother_ScanCutDX) {
    var $win = $(window);
    var isMobile;
    var Section = (function () {
        function Section() {
            this._initView();
            this._initTitle();
            this._initEvent();
        }
        Section.prototype._initTitle = function () {
            this.$title = this.$view.find('h2, .spe-lanEnTtl');
            TweenMax.set(this.$title, { opacity: 0, y: 50 });
            if (this.$lead) {
                TweenMax.set(this.$lead, { opacity: 0, y: 50 });
            }
        };
        Section.prototype._initView = function () { };
        Section.prototype._initEvent = function () { };
        Section.prototype._showTitle = function () {
            TweenMax.staggerTo(this.$title, 0.8, { opacity: 1, y: 0, ease: Cubic.easeOut }, 0.06);
            if (this.$lead) {
                TweenMax.to(this.$lead, 0.8, { opacity: 1, y: 0, delay: 0.2, ease: Cubic.easeOut });
            }
        };
        return Section;
    }());
    var AboutSection = (function (_super) {
        __extends(AboutSection, _super);
        function AboutSection() {
            _super.apply(this, arguments);
        }
        AboutSection.prototype._initView = function () {
            this.$view = $('#spe-content01');
            this.$lead = this.$view.find('.spe-firstTxt');
        };
        AboutSection.prototype._initEvent = function () {
            var _this = this;
            var pos = $('.spe-kv').height() * 0.7;
            $win.on('scroll._about', function () {
                var st = $win.scrollTop();
                if (st > pos) {
                    $win.off('scroll._about');
                    _this._showTitle();
                }
            });
        };
        return AboutSection;
    }(Section));
    var PointSection = (function (_super) {
        __extends(PointSection, _super);
        function PointSection() {
            _super.apply(this, arguments);
        }
        PointSection.prototype._initView = function () {
            this.$view = $('#spe-content02');
            this._pos = [];
            this._initPoint(this.$view.find('.spe-point01'), true);
            this._initPoint(this.$view.find('.spe-point02'), false);
            this._initPoint(this.$view.find('.spe-point03'), true);
            this._initPoint(this.$view.find('.spe-point04'), false);
        };
        PointSection.prototype._initPoint = function ($point, isOdd) {
            var $num = $point.find('.spe-pointNumber');
            var $ttl = $point.find('.spe-pointTtl');
            var $txt = $point.find('.spe-pointTxt');
            var $img = $point.find('.spe-pointPh');
            var $exp = $point.find('.spe-pointExample .spe-pointExamplePiece');
            var dir = (isOdd ? -1 : 1) * (isMobile ? 1 : 1.2);
            dir = isMobile ? Math.abs(dir) : dir;
            TweenMax.set([$num, $ttl, $txt], { opacity: 0, x: 80 * dir });
            TweenMax.set($img, { opacity: 0, x: -50 * dir });
            TweenMax.set($exp, { opacity: 0, scale: 0.8 });
            this._pos.push({
                pos1: $point.offset().top,
                pos2: $img.offset().top,
                $num: $num, $ttl: $ttl, $txt: $txt, $img: $img, $exp: $exp
            });
        };
        PointSection.prototype._initEvent = function () {
            var _this = this;
            var pos = this.$view.offset().top;
            $win.on('scroll._point', function () {
                var st = $win.scrollTop();
                if (st > pos - window.innerHeight * 0.5) {
                    pos = Number.MAX_VALUE;
                    _this._showTitle();
                }
                var cnt = 0;
                _this._pos.forEach(function (o, i) {
                    if (!o.isDone) {
                        _this._showPoint(st, o);
                    }
                    else {
                        cnt++;
                        if (cnt == _this._pos.length) {
                            $win.off('scroll._point');
                        }
                    }
                });
            });
        };
        PointSection.prototype._showPoint = function (st, o) {
            if (st > o.pos1 - window.innerHeight * 0.4) {
                o.pos1 = Number.MAX_VALUE;
                TweenMax.staggerTo([o.$num, o.$ttl, o.$txt], 1.6, { opacity: 1, x: 1, ease: Expo.easeOut }, 0.1);
                TweenMax.delayedCall(0.8, function () {
                    TweenMax.staggerTo(o.$exp, 1.6, { opacity: 1, scale: 1, ease: Elastic.easeOut }, 0.1);
                });
                if (!isMobile) {
                    o.isDone = true;
                    TweenMax.to(o.$img, 1.6, { opacity: 1, x: 1, delay: 0.6, ease: Expo.easeOut });
                }
            }
            if (isMobile && st > o.pos2 - window.innerHeight * 0.5) {
                o.pos2 = Number.MAX_VALUE;
                o.isDone = true;
                TweenMax.to(o.$img, 1.5, { opacity: 1, x: 1, ease: Expo.easeOut });
            }
        };
        return PointSection;
    }(Section));
    var GallerySection = (function (_super) {
        __extends(GallerySection, _super);
        function GallerySection() {
            _super.apply(this, arguments);
        }
        GallerySection.prototype._initView = function () {
            this.$view = $('#spe-content03');
            this.$lead = this.$view.find('.spe-galleryLeadTxt');
            this.$more = this.$view.find('.spe-galleryBtn');
            this.$gallery = this.$view.find('.spe-galleryPieceArea').eq(0).find('.spe-galleryPiece > dl');
            TweenMax.set(this.$more, { opacity: 0, scale: 0.6 });
            TweenMax.set(this.$gallery, { opacity: 0, x: -20 });
        };
        GallerySection.prototype._initEvent = function () {
            var _this = this;
            var pos = this.$view.offset().top;
            var pos2 = this.$gallery.offset().top;
            $win.on('scroll._gallery', function () {
                var st = $win.scrollTop();
                if (st > pos - window.innerHeight * 0.5) {
                    pos = Number.MAX_VALUE;
                    _this._showTitle();
                }
                if (st > pos2 - window.innerHeight * 0.5) {
                    $win.off('scroll._gallery');
                    _this._showGallery();
                }
            });
        };
        GallerySection.prototype._showGallery = function () {
            new TimelineMax()
                .staggerTo(this.$gallery, 0.7, { opacity: 1, x: 0, ease: Cubic.easeOut }, 0.1)
                .to(this.$more, 0.6, { opacity: 1, scale: 1, ease: Elastic.easeOut });
        };
        return GallerySection;
    }(Section));
    var HowtoSection = (function (_super) {
        __extends(HowtoSection, _super);
        function HowtoSection() {
            _super.apply(this, arguments);
        }
        HowtoSection.prototype._initView = function () {
            this.$view = $('#spe-content04');
            this.$peace = this.$view.find('.spe-howtoPiece');
            TweenMax.set(this.$peace.find('>*'), { opacity: 0 });
        };
        HowtoSection.prototype._initEvent = function () {
            var _this = this;
            var pos = this.$view.offset().top;
            var pos2 = this.$peace.offset().top;
            $win.on('scroll._howto', function () {
                var st = $win.scrollTop();
                if (st > pos - window.innerHeight * 0.5) {
                    pos = Number.MAX_VALUE;
                    _this._showTitle();
                }
                if (st > pos2 - window.innerHeight * 0.5) {
                    $win.off('scroll._howto');
                    _this._showSteps();
                }
            });
        };
        HowtoSection.prototype._showSteps = function () {
            var $num = this.$peace.find('.spe-howtoNumber');
            var $pic = this.$peace.find('.spe-howtoPh');
            var $txt = this.$peace.find('dl');
            TweenMax.set($num, { y: isMobile ? -15 : -30, zIndex: 2 });
            TweenMax.set($pic, { y: 5, zIndex: 1 });
            TweenMax.set($txt, { y: -5 });
            TweenMax.staggerTo($num, 0.4, { opacity: 1, y: 0, ease: Bounce.easeOut }, 0.0);
            TweenMax.staggerTo($pic, 0.4, { opacity: 1, y: 0, delay: 0.4, ease: Cubic.easeOut }, 0.0);
            TweenMax.staggerTo($txt, 0.4, { opacity: 1, y: 0, delay: 0.4, ease: Cubic.easeOut }, 0.0);
        };
        return HowtoSection;
    }(Section));
    var CustomerSection = (function (_super) {
        __extends(CustomerSection, _super);
        function CustomerSection() {
            _super.apply(this, arguments);
        }
        CustomerSection.prototype._initView = function () {
            var _this = this;
            this._pos = [];
            this.$view = $('#spe-content05');
            this.$sec = this.$view.find('.spe-cvComingsoon, .spe-cvPiece');
            TweenMax.set(this.$sec, { opacity: 0, y: 100 });
            this.$sec.each(function (i, o) {
                _this._pos.push($(o).offset().top);
            });
        };
        CustomerSection.prototype._initEvent = function () {
            var _this = this;
            var pos = this.$view.offset().top;
            $win.on('scroll._customer', function () {
                var st = $win.scrollTop();
                if (st > pos - window.innerHeight * 0.5) {
                    pos = Number.MAX_VALUE;
                    _this._showTitle();
                }
                var cnt = 0;
                _this.$sec.each(function (i, o) {
                    if (st > _this._pos[i] - window.innerHeight * 0.5) {
                        cnt++;
                        _this._pos[i] = Number.MAX_VALUE;
                        TweenMax.to(_this.$sec.eq(i), 0.6, { opacity: 1, y: 0, ease: Cubic.easeOut });
                    }
                    if (cnt == _this.$sec.length) {
                        $win.off('scroll._customer');
                    }
                });
            });
        };
        return CustomerSection;
    }(Section));
    var main = (function () {
        function main() {
        }
        main.start = function () {
            isMobile = $('.st-blueBar_menu').is(':visible');
            new AboutSection();
            new PointSection();
            new GallerySection();
            new HowtoSection();
            new CustomerSection();
        };
        return main;
    }());
    brother_ScanCutDX.main = main;
})(brother_ScanCutDX || (brother_ScanCutDX = {}));
$(function () {
    brother_ScanCutDX.main.start();
});