/*
*   Style Form Elements
*   Style form elements
*
*   Requires: Trapeze jQuery distribution
*
*   Marcos Abreu - May 21, 2009
*/

$.namespace("trapeze.StyleFormElements");

trapeze.StyleFormElements = $.Class.extend({
    settings : null,
    forms    : null,

    wrap_template : '<%(wrap_tag) class="%(wrap_class)"></%(wrap_tag)>',
    text_corner_template : '<div class="%(tag_class)" %(add_attr)><!-- --></div>',
    select_fake_template : '<div class="fake-select"><div class="%(select_fake_class)">%(selected_option)</div></div>',
    checkbox_radio_fake_template : '<span class="%(fake_class)"><!-- --></span>',

    render_corner : function(tag_class, top, left, bg_top, bg_left) {
        if (!$.support.opacity) {
            top += 1;
        }
        return trapeze.render_template(this.text_corner_template, {
            'tag_class' : tag_class,
            'add_attr'  : 'style="top:'+top+'px;left:'+left+'px;background-position:'+bg_left+'px '+bg_top+'px;"'
        });
    },

    style_textfield : function(obj) {
        if ($(obj).attr('type') == "text") {
            corner_width = this.settings.input_text_corner;
            tag = 'div';
            tag_class = this.settings.input_text_wrap;
        } else {
            corner_width = this.settings.textarea_corner;
            tag = 'div';
            tag_class = this.settings.textarea_wrap;
        }
        $(obj).wrap(trapeze.render_template(this.wrap_template, {
            'wrap_tag'  : tag,
            'wrap_class': tag_class
        }))
        .before(this.render_corner(this.settings.textfield_corner_tl, 0, 0, 0, 0))
        .before(this.render_corner(this.settings.textfield_corner_tr, 0, ($(obj).outerWidth() - corner_width), 0, (corner_width * -1)))
        .after(this.render_corner(this.settings.textfield_corner_br, ($(obj).outerHeight() - corner_width), ($(obj).outerWidth() - corner_width), (corner_width * -1), (corner_width * -1)))
        .after(this.render_corner(this.settings.textfield_corner_bl, ($(obj).outerHeight() - corner_width), 0, (corner_width * -1), 0));
    },

    style_checkbox_radio : function(obj) {
        var wrap_class = $(obj).attr('type')+'-'+this.settings.checkbox_radio_wrap_class;
        var fake_class = this.settings.checkbox_radio_fake_class +'-'+$(obj).attr('type');
        var initial_position = ($(obj).attr('type') == 'checkbox') ? this.settings.checkbox_height : this.settings.radio_height;
        $(obj).wrap(trapeze.render_template(this.wrap_template, {
            'wrap_tag'   : 'span',
            'wrap_class' : wrap_class
        }))
        .before(trapeze.render_template(this.checkbox_radio_fake_template, {
            'fake_class': fake_class
        }))
        .hide()
        .parent().find('.'+fake_class)
        .bind('mousedown', this.checkbox_radio_push.bind(this))
        .bind('mouseup', this.checkbox_radio_push.bind(this))
        .css('background-position', '0 -'+ (initial_position * ($(obj).attr('checked') ? 2 : 0)) + 'px');
    },

    checkbox_radio_push : function(evt) {
        var element = $(evt.currentTarget).next('input');
        var fake_class = this.settings.checkbox_radio_fake_class +'-'+$(element).attr('type');

        if (evt.type=='mouseup') {
            if (element.attr('type')=='checkbox') {
                element.attr('checked', (element.attr('checked') ? false : true));
            } else {
                element.parents('form').find('input:radio[name="'+element.attr('name')+'"]').each(function() {
                    $(this).attr('checked',false).parent().find('.'+fake_class).css('background-position','0 -0');
                });
                element.attr('checked',true);
            }
        }
        var top_position = (element.attr('type') == 'checkbox') ? this.settings.checkbox_height : this.settings.radio_height;
        top_position *= (evt.type=='mouseup' ? (element.attr('checked') ? 2 : 0) : (element.attr('checked') ? 3 : 1));
        $(evt.currentTarget).css('background-position','0 -'+(top_position+1)+'px');
        if (evt.type =='mouseup')
            element.trigger('change'); 
    },

    style_select : function(obj) {
        $(obj).wrap(trapeze.render_template(this.wrap_template, {
            'wrap_tag'   : 'div',
            'wrap_class' : this.settings.select_wrap_class
        }))
        .before(trapeze.render_template(this.select_fake_template, {
            'select_fake_class': this.settings.select_fake_class,
            'selected_option'  : $(obj).find('option').eq(obj.selectedIndex).text()
        }))
        .css('height', ($(obj).parent().find('.'+this.settings.select_fake_class).outerHeight() + 'px'))
        .fadeTo(0, 0.0)
        .bind('change', this.select_click.bind(this))
        .parent().css('height',$(obj).height() + 'px')
        .find('.fake-select')
        .prepend(trapeze.render_template(this.text_corner_template, {
            'tag_class' : this.settings.select_left,
            'add_attr'  : ''
        }))
        .append(trapeze.render_template(this.text_corner_template, {
            'tag_class' : this.settings.select_right,
            'add_attr'  : ''
        }))
        //.bind('click', function(){ 
        //    $(obj).trigger('click'); 
        //})
        .parent().find('.'+this.settings.select_fake_class)
        .css('width', ($(obj).width() - ($(obj).parent().find('.'+this.settings.select_left).width() + $(obj).parent().find('.'+this.settings.select_right).width())) +'px');
    },

    select_click : function(evt) {
        $(evt.currentTarget).parent().find('.'+this.settings.select_fake_class)
            .text($(evt.currentTarget).find('option').eq(evt.currentTarget.selectedIndex).text());
    },

    style_forms : function() {
        //style input text
        if (this.settings.style_input) {
            this.forms.find('input:text')
            .not(this.forms.find('.'+this.settings.input_text_wrap + ' input:text')) // remove alredy styled objs
            .each(function(index, obj) {
                this.style_textfield(obj);
            }.bind(this));
        }

        //style textarea
        if (this.settings.style_textarea) {
            this.forms.find('textarea')
            .not(this.forms.find('.'+this.settings.textarea_wrap + ' textarea')) // remove alredy styled objs
            .each(function(index, obj) {
                this.style_textfield(obj);
            }.bind(this));
        }

        //Style checkbox
        if (this.settings.style_checkbox) {
            this.forms.find('input:checkbox')
            .not(this.forms.find('.checkbox-'+this.settings.checkbox_radio_wrap_class + ' input:checkbox')) // remove alredy styled objs
            .each(function(index, obj) {
                this.style_checkbox_radio(obj);
            }.bind(this));
        }

        //Style radio
        if (this.settings.style_radio) {
            this.forms.find('input:radio')
            .not(this.forms.find('.radio-'+this.settings.checkbox_radio_wrap_class + ' input:radio')) // remove alredy styled objs
            .each(function(index, obj) {
                this.style_checkbox_radio(obj);
            }.bind(this));
        }

        //Style Select
        if (this.settings.style_select) {
            this.forms.find('select')
            .not(this.forms.find('.'+this.settings.select_wrap_class + ' select')) // remove alredy styled objs
            .each(function(index, obj) {
                this.style_select(obj);
            }.bind(this));
        }

        this.settings.on_complete();
    },

    init : function(params) {
        var default_options = {
            checkbox_height : '19',
            radio_height    : '18',
            select_width    : '200',

            style_checkbox  : true,
            style_radio     : true,
            style_select    : true,
            style_input     : true,
            style_textarea  : true,
            style_image     : false,
            style_submit    : false,

            textfield_corner_tl    : 'textfield-corner-tl',
            textfield_corner_tr    : 'textfield-corner-tr',
            textfield_corner_br    : 'textfield-corner-br',
            textfield_corner_bl    : 'textfield-corner-bl',


            input_text_wrap  : 'input-text-wrapper',
            input_text_corner: 4,

            textarea_wrap    : 'textarea-wrapper',
            textarea_corner  : 4,

            select_wrap_class: 'select-wrapper',
            select_fake_class: 'select-active-item',
            select_left      : 'fake-select-left',
            select_right     : 'fake-select-right',

            checkbox_radio_wrap_class : 'wrapper',
            checkbox_radio_fake_class : 'fake',

            on_complete      : function(){},

            selector     : null
        };

        this.settings = $.extend({}, default_options, params);
        this.forms = $(this.settings.selector);
        this.style_forms();
    }
});