$j(document).ready(function() {
    $j('body.catalog-product-view').each(function() {
        /*
            Attempt at a purely universal carousel:
            - class driven, no node types required.
            - mostly automatic, only requires two values to be known: width of a single item, number of items per page desired.
            - can be applied to any number of carousels on a page.

            Required HTML structure:
            <foo class="carousel">
                <foo class="carousel-left"></foo>
                <foo class="carousel-right"></foo>

                <foo class="carousel-window">                   <-- relative, overflow hidden
                    <foo class="carousel-list">                 <-- absolute
                        <foo class="carousel-item"></foo>
                        <foo class="carousel-item"></foo>
                    </foo>
                </foo>
            </foo>

            TODO:
            - Replace existing BBB carousels with this carousel system, except for the big home-page carousel.
        */
        $j('.carousel').each(function() {
            var carousel = this;

            var number_of_items = $j('.carousel-item', carousel).length;
            var number_of_pages = Math.ceil(number_of_items / 5) - 1;

            $j('.carousel-list', carousel).css('width', (number_of_items * 56) + 'px');

            $j(this).data('number-of-pages', number_of_pages);
            $j(this).data('page', 0);   // initialise the 'current page'

            $j('.carousel-left', carousel).click(function() {
                var carousel = $j(this).data('carousel');

                var page_number = parseInt($j(carousel).data('page'));
                if (page_number > 0) {
                    $j(carousel).data('page', page_number - 1).trigger('update-position');
                }
            }).data('carousel', carousel);

            $j('.carousel-right', carousel).click(function() {
                var carousel = $j(this).data('carousel');

                var page_number = parseInt($j(carousel).data('page'));
                var number_of_pages = $j(carousel).data('number-of-pages');

                if (page_number < number_of_pages) {
                    $j(carousel).data('page', page_number + 1);
                    $j(carousel).trigger('update-position');
                }
            }).data('carousel', carousel);

        }).bind('update-position', function() {
            /* Custom jQuery event for handling the transitions. */
            $j('.carousel-list').stop();

            var left_offset = $j(this).data('page') * -1 * $j('.carousel-window', this).width();

            $j('.carousel-list', this).animate({
                'left': left_offset + 'px'
            }, 600, 'swing');

            $j('.carousel-item', this).animate({
                'opacity': '0.5'
            }, 300, 'swing').animate({
                'opacity': '1'
            }, 300, 'swing');

            var page_number = parseInt($j(this).data('page'));
            var number_of_pages = $j(this).data('number-of-pages');

            if (page_number > 0) {
                $j('.carousel-left', this).addClass('brandarrow_left_lit');
                $j('.carousel-left', this).removeClass('brandarrow_left');
            } else {
                $j('.carousel-left', this).addClass('brandarrow_left');
                $j('.carousel-left', this).removeClass('brandarrow_left_lit');
            }

            if (page_number < number_of_pages) {
                $j('.carousel-right', this).addClass('brandarrow_right_lit');
                $j('.carousel-right', this).removeClass('brandarrow_right');
            } else {
                $j('.carousel-right', this).addClass('brandarrow_right');
                $j('.carousel-right', this).removeClass('brandarrow_right_lit');
            }
        }).trigger('update-position');

        // Consult here for fancybox API:
        //      http://fancybox.net/api
        $j('.gallery-thumbnail-link, .product-img-box .primary-img-box').fancybox({
            'titleShow'     : false,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic',
            'margin'        : 80,
            'showNavArrows' : true
        });

        $j("#rotate_lnk").fancybox({
            'width': 600,
            'height': 600,
            'autoScale': false,
            'hideOnOverlayClick': false,
            'scrolling': 'no',
            'showNavArrows': false
        });

        $j('#fancybox-img').live('click', function() {
            $j.fancybox.close();
        });

        $j('.more-views a').click(function() {
            return false;
        });
    });
});