/*
*	Carousel with Fisheye Effect
*	Generates a carousel with the fisheye effect
*	
*	Requires: Trapeze jQuery distribution
*             custom jQuery Interface with fisheye included
*	          jCarousel lite
*             jquery-easing
*             jquery-mousewheel
*
*	Marcos Abreu - March 27, 2009
*/

$.namespace("trapeze.ProductCarousel");

trapeze.ProductCarousel = $.Class.extend({
    carousel : null,

    carousel_template : '<div id="Carousel"></div>',
    control_template  : ('<div class="carousel-%(direction) %(status)">%(img)</div>'),
    ctrl_img_template : '<img src="%(media_path)images/btn-carousel-%(direction)%(img_status).png" alt="%(direction)" />',

    render_ctrl_img : function(direction, status) {
        return trapeze.render_template(this.ctrl_img_template, {
                "media_path" : trapeze.media_path,
                "direction"  : direction,
                "img_status" : status
        });
    },

    render_control : function(direction, status) {
        return trapeze.render_template(this.control_template, {
                    "media_path" : trapeze.media_path,
                    "direction"  : direction,
                    "status"     : status,
                    "img"        : this.render_ctrl_img(direction, '')
                });
    },

    check_controls : function() {
        var img_status = '';
        if ((this.carousel.next('.carousel-next').hasClass('disabled')) ||
            (this.carousel.find('ul li').length <= 1)) img_status = '-off';
        this.carousel.next('.carousel-next').find('img').replaceWith(this.render_ctrl_img('next', img_status));

        img_status = '';
        if ((this.carousel.prev('.carousel-prev').hasClass('disabled')) ||
            (this.carousel.find('ul li').length <= 1)) img_status = '-off';
        this.carousel.prev('.carousel-prev').find('img').replaceWith(this.render_ctrl_img('prev', img_status));
    },

    fisheye_effect : function(jObj) {
        jObj.parents('li').removeClass('apply-fisheye-effect');

        jObj.Fisheye({
            maxWidth: 40,
            items: 'a',
            itemsText: 'span',
            container: '.fisheyeContainter',
            itemWidth: 100,
            proximity: 90,
            halign : 'center'
        });
    },

    apply_effect : function(element) {
        if (element.hasClass('apply-fisheye-effect')) {
            this.fisheye_effect(element.find('.fisheye'));
        }
        this.check_controls();
    },

    set_next_block : function(element) {
        var next_obj = $(element).next('.apply-fisheye-effect');
        
        if (!$(element).hasClass('last-child')) {
            items = next_obj.find('.fisheyeContainter a');
            margin_left = (next_obj.width() - (items.length * items.eq(0).width())) / 2;
            next_obj.find('.fisheyeContainter').css('left', margin_left+'px');
        }
    },

    include_controls : function() {
        this.carousel.before(this.render_control('prev', 'disabled'));
        this.carousel.after(this.render_control('next', ''));
        trapeze.preloadImages([this.render_ctrl_img('prev', ''), this.render_ctrl_img('next', '-off')], null);
        this.check_controls();
    },

    init : function(jProductList) {
        jProductList.removeClass('without-effect').wrap(trapeze.render_template(this.carousel_template, {}));

        //jProductList.removeClass('without-effect').wrap(trapeze.render_template(this.carousel_template, {})).find('.fisheyeItem span').text('');
        this.carousel = jProductList.parents('div#Carousel');
        this.include_controls();

        this.carousel.jCarouselLite({
            btnNext: ".carousel-next",
            btnPrev: ".carousel-prev",
            visible: 1,
            circular: false,
            visible: 1,
            easing: "easeout",
            speed: 900,
            mouseWheel: true,
            beforeStart: this.set_next_block.bind(this),
            afterEnd: this.apply_effect.bind(this)
        });

        this.fisheye_effect(jProductList.find('.apply-fisheye-effect:first .fisheye'));

        $('#Carousel a.active').parents('div#Carousel').find("a:not(.active) img").fadeTo("fast", 0.58);
    }
});