(function($) {

    $.brandDetail = function(options) {
        return $.brandDetail.impl.init(options);
    };

    $.fn.brandDetail = function(options) {
        return $.brandDetail.impl.init(this, options);
    };

    /*
    * default options
    */
    $.brandDetail.defaults = {
        res: {}
    };

    $.brandDetail.impl = {

        /*
        * options
        */
        opts: null,

        /*
        * helper
        */
        helper: {},

        /*
        * Initialize the page
        */
        init: function(options) {

            var self = this;

            this.opts = $.extend({}, $.brandDetail.defaults, options);

            // helpers
            self.helper.container = $('div.page-branddetail');
            self.helper.background = self.helper.container.find('ul.background-collection img');
            self.helper.nav = self.helper.container.find('div.nav-container');
            self.helper.tray = self.helper.container.find('div.tray-container');
            self.helper.link = self.helper.container.find('a.collection-link');

            // show the background
            $(new Image()).load(function() {

                self.helper.background
                    .fadeIn(1000, function() {
                        self.initCarousel();
                        self.initTray();

                        var $tip = $('<div>' + self.helper.link.attr('title') + '</div>');

                        self.helper.link
                            .tooltip({
                                id: 'imagelist-tooltip',
                                track: true,
                                showURL: false,
                                delay: 0,
                                bodyHandler: function() {
                                    return $tip;
                                }
                            })
                            ;

                    })
                    ;

            }).attr('src', self.helper.background.attr('src'));



            // initialize the nav
            self.initNav();

            return self;
        },

        /*
        * Initializes the nav
        */
        initNav: function() {

            var self = this;
            var $list = self.helper.container.find('ul#nav-branddetail');
            var $selected = $('<a class="category-selected" href="#">' + $list.find('.li-1-active').text() + '</a>').insertBefore($list);

            $selected.click(function(e) {
                e.preventDefault();

                if (!$list.hasClass('ul-1-open')) {
                    $list
		                .addClass('ul-1-open')
		                ;

                    $selected
		                .text($list.find('.li-1-active').text())
		                ;

                    // blur
                    self.helper.nav.find('a')
		                .blur(function() {
		                    $list
	                            .removeClass('ul-1-open')
	                            ;
		                })
	                    ;

                    // click
                    $list.find('a')
	                    .click(function() {

	                        $(this).parent()
	                            .addClass('li-1-active')
	                            .siblings()
	                                .removeClass('li-1-active')
	                                ;

	                        $selected
		                        .text($(this).text())
		                        ;

	                        $list
	                            .removeClass('ul-1-open')
	                            ;
	                    })
	                    ;

                    // hover
                    self.helper.nav.find('a')
		                .hover(
		                    function() {
		                        self.helper.nav.find('a').unbind('blur');
		                    },
		                    function() {
		                        self.helper.nav.find('a').blur(function() {
		                            $list
	                                    .removeClass('ul-1-open')
	                                    ;
		                        });
		                    }
		                )
		                ;
                }
                else {
                    $list
		                .removeClass('ul-1-open')
		                ;

                    $selected
		                .text($list.find('.li-1-active').text())
		                ;
                }
            });

            self.helper.nav
		        .fadeIn(1000)
		        ;

            return;
        },

        /*
        * Initialize the carousel
        */
        initCarousel: function() {

            var self = this;
            var $list = self.helper.tray.find('ul.carouselitem-collection');
            var $trayList = self.helper.tray.find('ul.trayitem-collection');
            var w = 0;
            var index = 0;


            self.helper.tray.find('.brand-logo img').pngFix();

            if ($list.children().length < 4) {
                $trayList
		        .css({
		            display: 'none'
		        })
		        ;
                return;
            }




            $list
		        .wrap('<div class="carousel-container"><div class="carousel-clip"></div></div>')
		        ;

            $list.children().each(function(i, item) {
                w += $(item).width() + 10;
            });

            if (w <= $list.width()) {


                $list
		        .css({
		            width: w + 'px',
		            left: 0
		        })
		        ;

                $trayList
		        .css({
		            display: 'none'
		        })
		        ;
                return;
            }

            var $container = self.helper.tray.find('.carousel-container');

            self.helper.prev = $('<a class="carousel-prev carousel-prev-disabled" href="#">' + self.opts.res.previous + '</a>').appendTo($container);
            self.helper.next = $('<a class="carousel-next" href="#">' + self.opts.res.next + '</a>').appendTo($container);

            self.helper.prev.click(function(e) {
                e.preventDefault();

                if (index == 0)
                    return;

                index = 0;

                $(this).addClass('carousel-prev-disabled');
                self.helper.next.removeClass('carousel-next-disabled');

                animate('neg');

            });

            self.helper.next.click(function(e) {
                e.preventDefault();

                if (index == 1)
                    return;

                index = 1;

                $(this).addClass('carousel-next-disabled');
                self.helper.prev.removeClass('carousel-prev-disabled');

                animate('pos');

            });

            function animate(dir) {

                if (dir == 'pos') {
                    $list.animate({
                        left: $container.width() - $list.width() + 'px'
                    }, 500, 'easeOutQuad')
		                ;
                }
                else {
                    $list.animate({
                        left: 0
                    }, 500, 'easeOutQuad')
		                ;
                }

            }

            $list
		        .css({
		            width: w + 'px',
		            left: 0
		        })
		        ;

            $trayList
		        .css({
		            display: 'none'
		        })
		        ;

            return;
        },

        /*
        * Initialize the tray
        */
        initTray: function() {

            var self = $.brandDetail.impl;
            var trayHeight = 200;

            // show the tray
            self.helper.tray
		        .animate({
		            height: trayHeight + 'px'
		        }, 3500, 'easeOutExpo', initScrollFollow)
		        ;

            // show the tray items
            setTimeout(show, 250);
            function show() {

                self.helper.tray.find('ul.trayitem-collection')
		            .fadeIn(3000, function() {

		                self.events();

		            })
		            ;

            }

            // init the scroll follow
            function initScrollFollow() {

                // skip it if screen is big enough
                if (parseInt($(document).height() - $(window).height()) < $('#footer').outerHeight())
                    return;

                self.helper.tray
                    .css({
                        top: self.helper.container.outerHeight() - trayHeight + 'px',
                        bottom: 'auto'
                    })
                    .scrollFollow({
                        relativeTo: 'bottom',
                        speed: 1000,
                        easing: 'easeOutExpo',
                        offset: $('#header').outerHeight()
                    })
                    ;

            }

            return;
        },

        /*
        * Events
        */
        events: function() {

            var self = this;

            self.helper.tray.find('ul.carouselitem-collection').children()
		        .hover(
		            function() {
		                $(this)
		                    .addClass('carouselitem-hover')
		                    ;
		            },
		            function() {
		                $(this)
		                    .removeClass('carouselitem-hover')
		                    ;
		            }
		        )
		        ;

            return;
        }

    };
})(jQuery);