$(function () {
    var f = $('#ac_background'),
        $ac_bgimage = f.find('.ac_bgimage'),
        $ac_loading = f.find('.ac_loading'),
        $ac_content = $('#ac_content'),
        $title = $ac_content.find('h1'),
        $menu = $ac_content.find('.ac_menu'),
        $mainNav = $menu.find('ul:first'),
        $menuItems = $mainNav.children('li'),
        totalItems = $menuItems.length,
        $ItemImages = new Array();
    $menuItems.each(function (i) {
        $ItemImages.push($(this).children('a:first').attr('rel'))
    });
    $ItemImages.push($ac_bgimage.attr('src'));
    var g = (function () {
        var d = function () {
                loadPage();
                initWindowEvent()
            },
            loadPage = function () {
                $ac_loading.show();
                $.when(loadImages()).done(function () {
                    $.when(showBGImage()).done(function () {
                        $ac_loading.hide();
                        $.when(slideOutMenu()).done(function () {
                            $.when(toggleMenuItems('up')).done(function () {
                                initEventsSubMenu()
                            })
                        })
                    })
                })
            },
            showBGImage = function () {
                return $.Deferred(function (a) {
                    adjustImageSize($ac_bgimage);
                    $ac_bgimage.fadeIn(1000, a.resolve)
                }).promise()
            },
            slideOutMenu = function () {
                var b = $(window).width() - $title.outerWidth(true);
                return $.Deferred(function (a) {
                    $menu.stop().animate({
                        width: b + 'px'
                    }, 700, a.resolve)
                }).promise()
            },
            toggleMenuItems = function (c) {
                return $.Deferred(function (b) {
                    $menuItems.each(function (i) {
                        var a = $(this).children('a:first'),
                            marginTop, opacity, easing;
                        if (c === 'up') {
                            marginTop = '0px';
                            opacity = 1;
                            easing = 'easeOutBack'
                        } else if (c === 'down') {
                            marginTop = '60px';
                            opacity = 0;
                            easing = 'easeInBack'
                        }
                        a.stop().animate({
                            marginTop: marginTop,
                            opacity: opacity
                        }, 200 + i * 200, easing, function () {
                            if (i === totalItems - 1) b.resolve()
                        })
                    })
                }).promise()
            },
            initEventsSubMenu = function () {
                $menuItems.each(function (i) {
                    var a = $(this),
                        $el_title = a.children('a:first'),
                        el_image = $el_title.attr('rel'),
                        $sub_menu = a.find('.ac_subitem'),
                        $ac_close = $sub_menu.find('.ac_close');
                    $el_title.bind('click.Menu', function (e) {
                        $.when(toggleMenuItems('down')).done(function () {
                            openSubMenu(a, $sub_menu, el_image)
                        });
                        return false
                    });
                    $ac_close.bind('click.Menu', function (e) {
                        closeSubMenu($sub_menu);
                        return false
                    })
                })
            },
            openSubMenu = function (a, b, c) {
                b.stop().animate({
                    height: '370px',
                    marginTop: '-200px'
                }, 400, function () {
                    showItemImage(c)
                })
            },
            showItemImage = function (a) {
                if ($ac_bgimage.attr('src') === a) return false;
                var b = $('<img src="' + a + '" alt="Background" class="ac_bgimage"/>');
                b.insertBefore($ac_bgimage);
                adjustImageSize(b);
                $ac_bgimage.fadeOut(1500, function () {
                    $(this).remove();
                    $ac_bgimage = b
                });
                b.fadeIn(1500)
            },
            closeSubMenu = function (a) {
                a.stop().animate({
                    height: '0px',
                    marginTop: '0px'
                }, 400, function () {
                    toggleMenuItems('up')
                })
            },
            initWindowEvent = function () {
                $(window).bind('resize.Menu', function (e) {
                    adjustImageSize($ac_bgimage);
                    var a = $(window).width() - $title.outerWidth(true);
                    $menu.css('width', a + 'px')
                })
            },
            adjustImageSize = function (a) {
                var b = $(window).width(),
                    w_h = $(window).height(),
                    r_w = w_h / b,
                    i_w = a.width(),
                    i_h = a.height(),
                    r_i = i_h / i_w,
                    new_w, new_h, new_left, new_top;
                if (r_w > r_i) {
                    new_h = w_h;
                    new_w = w_h / r_i
                } else {
                    new_h = b * r_i;
                    new_w = b
                }
                a.css({
                    width: new_w + 'px',
                    height: new_h + 'px',
                    left: (b - new_w) / 2 + 'px',
                    top: (w_h - new_h) / 2 + 'px'
                })
            },
            loadImages = function () {
                return $.Deferred(function (a) {
                    var b = $ItemImages.length,
                        loaded = 0;
                    for (var i = 0; i < b; ++i) {
                        $('<img/>').load(function () {
                            ++loaded;
                            if (loaded === b) a.resolve()
                        }).attr('src', $ItemImages[i])
                    }
                }).promise()
            };
        return {
            init: d
        }
    })();
    g.init()
});