/*
*   Dropdown Navigation
*   Generates a drop-down navigation
*
*   Requires: Trapeze jQuery distribution
*
*   Marcos Abreu - April 18, 2009
*/

$.namespace("trapeze.ContentSlider");

trapeze.ContentSlider = $.Class.extend({
    settings    : null,
    slider      : null,
    wrapper     : null,
    index       : null,
    next_index  : null,
    controls    : null,
    total_items : 0,
    item_height : 0,

    wrapper_template     : '<div id="%(wrapper_id)"></div>',
    control_template     : '<div class="%(control_class) contentslider-control">%(control)</div>',
    img_control_template  : '<img src="%(image_src)" alt="%(image_alt)" />',

    render_control : function(control_class, item_path, item_text) {
        return trapeze.render_template(this.control_template, {
            'control_class' : control_class,
            'control'       : (item_path ? trapeze.render_template(this.img_control_template, {
                                    'image_src' : item_path,
                                    'image_alt' : item_text})
                              : item_text)
        });
    },

    build_controls : function() {
        var str_controls = (this.settings.show_first_last
            ? this.render_control(this.settings.first_class,this.settings.first_img,this.settings.first_text)
            : '');
        str_controls += this.render_control(this.settings.prev_class,this.settings.prev_img,this.settings.prev_text);
        str_controls += this.render_control(this.settings.next_class,this.settings.next_img,this.settings.next_text);
        str_controls += (this.settings.show_first_last
            ? this.render_control(this.settings.last_class,this.settings.last_img,this.settings.last_text)
            : '');

        this.wrapper.prepend(str_controls);
        this.controls = this.wrapper.find('.contentslider-control');
        this.controls.hide();

        this.wrapper.find('.'+this.settings.first_class)
            .bind('click', {next_step:'first'}, this.goto_item.bind(this));
        this.wrapper.find('.'+this.settings.prev_class)
            .bind('click', {next_step:'previous'}, this.goto_item.bind(this));
        this.wrapper.find('.'+this.settings.next_class)
            .bind('click', {next_step:'next'}, this.goto_item.bind(this));
        this.wrapper.find('.'+this.settings.last_class)
            .bind('click', {next_step:'last'}, this.goto_item.bind(this));
    },

    set_controls : function() {
        this.controls.hide();
        if ((this.settings.carousel) || (this.index > 0)) {
            this.wrapper.find('.'+this.settings.prev_class).show();
            if (this.settings.show_first_last) {
                this.wrapper.find('.'+this.settings.first_class).show();
            }
        }
        if ((this.settings.carousel) || (this.index < (this.total_items -1))) {
            this.wrapper.find('.'+this.settings.next_class).show();
            if (this.settings.show_first_last) {
                this.wrapper.find('.'+this.settings.last_class).show();
            }
        }
    },

    goto_item : function(index) {
        if (typeof index == "object") {
            switch(index.data.next_step) {
                case 'first':
                    this.next_index = 0;
                    break;
                case 'previous':
                    this.next_index = this.index - 1;
                    break;
                case 'next':
                    this.next_index = this.index + 1;
                    break;
                case 'last':
                    this.last_index = this.total_items -1;
                    break;
                default:
                    this.next_index = index.data.index;
            }
        } else {
            this.next_index = index;
        }
        this.transition_out(this.index, this.transition_in.bind(this));
    },

    transition_in  : function(index, callback) {
        if (callback === undefined) callback = function(){};
        if ((index === undefined) && (this.next_index === null)) this.next_index = this.index + 1;
        else if (index) this.next_index = index;

        if (this.next_index < 0) {
            this.next_index = this.total_items -1;
        } else if (this.next_index >= this.total_items) {
            this.next_index = 0;
        }

        var item = this.slider.find('.'+this.settings.item_class+':eq('+this.next_index+')');
        var caption = item.find('.' + this.settings.caption_class);
        item.animate({opacity:1}, this.settings.speed_in, '', function(){
                caption.css('opacity','0.7').animate({marginTop: (( caption.outerHeight() * -1)+'px')}, this.settings.caption_spped_in)
            }.bind(this)
        );

        this.index = this.next_index;
        this.next_index = null;
        if (this.settings.show_controls) this.set_controls();
    },

    transition_out : function(index, callback) {
        if (index === undefined) index = this.index;
        if (callback === undefined) callback = function(){};

        var item = this.slider.find('.'+this.settings.item_class+':eq('+index+')');
        var caption = item.find('.'+ this.settings.caption_class);
        if (caption.size() > 0) {
            caption.animate({marginTop:0}, this.settings.caption_speed_out, '', function(){
                caption.css('opacity','0');
                item.animate({opacity:0}, this.settings.speed_out, '', function(){
                    this.slider.css('margin-top', (this.next_index * this.item_height * -1) + 'px');
                    callback.call();
                }.bind(this));
            }.bind(this));
        } else {
            item.animate({opacity:0}, this.settings.speed_out, '', function() {
                this.slider.css('margin-top', (this.next_index * this.item_height * -1) + 'px');
                callback.call();
            }.bind(this));
        }
    },

    setup : function() {
        this.slider.css('position','relative')
            .wrap(trapeze.render_template(this.wrapper_template, {
                    'wrapper_id': this.settings.wrapper_id
            }));
        this.wrapper = $('#'+this.settings.wrapper_id);
        this.slider.find('.'+this.settings.item_class).fadeTo(0,0);

        if (this.settings.show_controls) this.build_controls();

        if (this.settings.auto) { //Setup timer if auto = true
            //TODO
        } else this.goto_item(this.index);
    },

    init : function(params) {
        var default_options = {
            wrapper_id       : 'ContentSlider',

            item_class       : 'contentslider-item',
            caption_class    : 'image-caption',

            prev_class       : 'control-previous',
            prev_text        : 'Previous',
            prev_img         : null,
            next_class       : 'control-next',
            next_text        : 'Next',
            next_img         : null,

            last_class       : 'control-last',
            last_text        : 'Last',
            last_img         : null,
            first_class      : 'control-first',
            first_text       : 'First',
            first_img        : null,

            show_first_last  : false,
            show_controls    : true,
            auto_hide        : false, //TODO
            auto             : false, //TODO
            carousel         : false,
            start_index      : 0,

            speed_in         : 600,
            speed_out        : 200,
            caption_speed_in : 500,
            caption_speed_out: 300,

            transition_effect: 'fadein-fadeout', //TODO
            caption_effect   : 'bottom-top', //TODO

            selector : null
        };
        this.settings = $.extend({}, default_options, params);
        this.slider = $(this.settings.selector);
        this.index  = this.settings.start_index;
        this.total_items = this.slider.find('.'+this.settings.item_class).size();
        this.item_height = this.slider.find('.'+this.settings.item_class).eq(0).height();

        this.setup();
    }
});