/*
*   Expand Contract
*   Expand and Contract an Element to a spectific height
*
*   Requires: Trapeze jQuery distribution
*
*   Marcos Abreu - May 07, 2009
*/

$.namespace("trapeze.ExpandContract");

trapeze.ExpandContract = $.Class.extend({
    settings    : null,
    selector    : null,
    jTarget     : null,
    toggle_image: null,

    button_wrapper_template : '<div class="%(button_class)">%(image)</div>',
    button_image_template   : '<img src="%(button_src)" alt="%(button_alt)" />',

    set_behaviour : function() {
        if (this.settings.hide_main_image) {
            $(this.selector).parent().css('background-image', 'url('+this.settings.bg_image+')');
        }

        $(this.selector).each(function(index, obj){
            $(obj).after(trapeze.render_template(this.button_wrapper_template, {
                "button_class" : this.settings.button_class,
                "image"        : trapeze.render_template(this.button_image_template, {
                    "button_src"  : this.settings.btn_src,
                    "button_alt"  : this.settings.btn_collapse_alt
                })
            }));

            $(obj).next('.'+this.settings.button_class).attr('rel',$(obj).parent().height())
            .bind('click', this.on_click.bind(this))
        }.bind(this));
    },

    on_click : function(evt) {
        this.jTarget = $(evt.currentTarget);
        var alt = '';
        var margin_top = '0px';
        if (this.jTarget.parent().height() <= this.settings.final_height) {
            if (this.settings.hide_main_image) {
                this.jTarget.prev('img').animate({opacity: 1}, 300, '', this.expand.bind(this));
            } else {
                this.expand();
            }
            alt = this.settings.btn_collapse_alt;
        } else {
            this.collapse($(evt.currentTarget));
            if (this.settings.hide_main_image) {
                this.jTarget.prev('img').animate({opacity: 0}, {duration:400});
            }
            margin_top = '-' + (this.jTarget.find('img').height() / 2) + 'px';
            alt = this.settings.btn_expand_alt;
        }
        this.jTarget.find('img').css('margin-top',margin_top).attr('alt',alt);
    },

    collapse : function() {
        this.jTarget.animate(
                {top: ((this.jTarget.height() - this.settings.final_height) * -1) + 'px'},
                {duration:this.settings.duration})
        .prev().animate(
                {marginTop: ((this.jTarget.prev().height() - this.settings.final_height) * -1) + 'px'},
                {duration:this.settings.duration})
        .parent().animate(
                {height: this.settings.final_height + 'px'},
                {duration:this.settings.duration});
    },

    expand : function() {
        var initial_height = Number(this.jTarget.attr('rel'));
        this.jTarget.animate(
            {top: ((this.jTarget.height() - initial_height) * -1) + 'px'},
            {duration:this.settings.duration})
        .prev().animate(
            {marginTop: ((this.jTarget.prev().height() - initial_height) * -1) + 'px'},
            {duration: this.settings.duration})
        .parent().animate(
            {height: initial_height + 'px'},
            {duration: this.settings.duration});
    },

    init : function (params) {
        var default_params = {
            hide_main_image  : false,
            button_class     : 'expand-colapse-button',
            btn_src          : trapeze.media_path + 'images/' + trapeze.lang + '/btn-expand-collapse.png',
            btn_expand_src   : trapeze.media_path + 'images/' + trapeze.lang + '/btn-expand.png',
            btn_expand_alt   : 'Expand Image',
            btn_collapse_src : trapeze.media_path + 'images/' + trapeze.lang + '/btn-collapse.png',
            btn_collapse_alt : 'Collapse Image',
            bg_image         : null,
            initial_height   : null,
            final_height     : 100,
            duration         : 1000,
            selector         : null
        };
        this.settings = $.extend({}, default_params, params);
        this.selector = this.settings.selector;

        this.set_behaviour();
    }
});