/**
     * @author      Copin Grégory & Plou Clément (gcopin@inouit.com)
     * @version     1.1
     * @param
     */

(function ($){
    jQuery.fn.styleIt = function(options) {
        /* Options par defaults du plugin */
        jQuery.fn.styleIt.defaults = {
            checkboxWidth   : 26,
            checkboxHeight  : 26,
            radioWidth      : 25,
            radioHeight     : 25,
            selectWidth     : 238,
            selectWPadding  : 10,
            selectHeight    : 25,
            selectHPadding  : 3,
            listWidht       : 238,
            elemClass       : 'Styled',
            wrap            : 0
        };
        var opts = jQuery.extend({}, jQuery.fn.styleIt.defaults, options);
        //initialisation pour chaque élément
        return this.each(function() {

            var elemStyled = jQuery(this)
            var checkboxWidth   = opts.checkboxWidth;
            var checkboxHeight  = opts.checkboxHeight;
            var radioWidth      = opts.radioWidth;
            var radioHeight     = opts.radioHeight;
            var selectWidth     = opts.selectWidth;
            var selectWPadding  = opts.selectWPadding;
            var selectHeight    = opts.selectHeight;
            var selectHPadding  = opts.selectHPadding;
            var ulWidth         = opts.listWidht;
            var elemClass       = opts.elemClass;
            var wrap            = opts.wrap;

            var currentId = (new Date).getTime();

            var Custom = {
                init: function() {
                        elemStyled.each(function(){
                        var elem = jQuery(this);
                        var id = elem.attr('id');
                        var span,jSpan;
                        var ul,jUl,li,jLi;
                        var option;
                        var position = '0 0';

                        if(!id) {
                            currentId ++;
                            elem.attr('id','styled_'+currentId);
                        }
                        id = elem.attr('id');

                        switch(elem.attr('nodeName')) {
                            case 'INPUT': {
                                elem.css({'position' : 'absolute', 'left' : '-9999px'});
                                elem.addClass('styled');
                                span = document.createElement('span');
                                jSpan = jQuery(span);
                                jSpan.html(' ');
                                jSpan.attr('id','span_'+id);
                                jSpan.attr('checked',false);
                                jSpan.addClass(elem.attr('class'));
                                jSpan.addClass(elem.attr('type')+'Styled');
                                jSpan.addClass(elemClass);

                                if(elem.attr('type') == 'checkbox') {
                                    if(elem.attr('checked'))
                                        position = '0 -' + (checkboxHeight*2) + 'px';
                                    jSpan.css({width:checkboxWidth+'px',height:checkboxHeight+'px',backgroundPosition:position});
                                } else if(elem.attr('type') == 'radio') {
                                    if(elem.attr('checked'))
                                        position = '0 -' + (radioHeight*2) + 'px';
                                    jSpan.css({width:radioWidth+'px',height:radioHeight+'px',backgroundPosition:position});
                                }

                                elem.change(Custom.clear);
                                if(!elem.attr('disabled')) {
                                    jSpan.mousedown(Custom.pushed);
                                    jSpan.mouseup(Custom.check);
                                } else {
                                    jSpan.addClass('disabled');
                                }

                                elem.after(span);
                            }break;

                            case 'SELECT': {
                                elem.css({'position' : 'absolute', 'left' : '-9999px', 'opacity' : '0', 'filter' : 'alpha(opacity=0)', 'z-index' : '5'});
                                if ( wrap == 1 ){
                                    elem.wrap('<div class="selectWrap"></div>');
                                    elem.parent().attr('id','wrap_'+id);
                                    elem.parent().addClass(elemClass);
                                    elem.parent().css('position', 'relative');
                                }

                                span = document.createElement('span');
                                jSpan = jQuery(span);
                                jSpan.attr('id','span_'+id);
                                jSpan.addClass(elem.attr('class'));
                                jSpan.addClass(elem.attr('type')+'Styled');
                                jSpan.addClass(elemClass);
                                jSpan.css({width:(selectWidth-(2*selectWPadding))+'px',height:(selectHeight-2*selectHPadding)+'px',padding:selectHPadding+'px '+selectWPadding+'px'});
                                jSpan.click(Custom.pushed);

                                ul = document.createElement('ul');
                                jUl = jQuery(ul);
                                jUl.attr('id','ul_'+id);
                                jUl.addClass('ulStyled');
                                jUl.css({width:(ulWidth)+'px',padding:selectHPadding+'px '+selectWPadding+'px'});

                                option = elem.children('option');
                                for(i = 0; i < option.length ; i++) {
                                    li = document.createElement('li');
                                    jLi = jQuery(li);
                                    jLi.attr('id',jQuery(option[i]).attr('id'));
                                    jLi.attr('class',jQuery(option[i]).attr('class'));
                                    jLi.attr('position',i);
                                    if(jQuery(option[i]).attr('selected')) {
                                        jSpan.html(jQuery(option[i]).html());
                                        jLi.attr('selected',jQuery(option[i]).attr('selected'));
                                    }
                                    jLi.html(jQuery(option[i]).html());
                                    jLi.click(Custom.choose);

                                    jUl.append(li);
                                }

                                elem.after(span);
                                jSpan.after(ul);

                                elem.parent().mouseleave(Custom.leave);
                            }break;
                        }
                    })
                },
                pushed: function() {
                    var elem = jQuery(this).prev();
                    var height = 0;

                    switch(elem.attr('nodeName')) {
                        case 'INPUT': {
                            if(elem.attr('checked')) {

                                if(elem.attr('type') == 'checkbox') {
                                    height = checkboxHeight * 3;
                                    jQuery(this).attr('checked',false);
                                } else {
                                    height = radioHeight * 3;
                                }
                            } else {
                                if(elem.attr('type') == 'checkbox') {
                                    height = checkboxHeight;
                                    jQuery(this).attr('checked',true);
                                } else {
                                    height = radioHeight;
                                }
                            }

                            jQuery(this).css('backgroundPosition','0 -'+height+'px');
                        }break;

                        case 'SELECT': {
                            var jUl = jQuery(this).next('ul');
                            if(jUl.css('display') == 'none') {
                                jUl.show();
                            } else {
                                jUl.hide();
                            }
                        }break;
                    }
                },
                check: function() {
                    var elem = jQuery(this).prev('input');
                    var height = 0;

                    if(elem.attr('checked')) {
                        if(elem.attr('type') == 'checkbox') {
                            elem.attr('checked',false);
                            jQuery(this).css('backgroundPosition','0 0');
                            jQuery(this).attr('checked',false);
                            elem.trigger('change');
                        }
                    } else {
                        elem.attr('checked',true);
                        if(elem.attr('type') == 'checkbox') {
                            height = checkboxHeight * 2;
                        } else {
                            height = radioHeight * 2;
                        }
                        jQuery(this).css('backgroundPosition','0 -'+height+'px');
                        jQuery(this).attr('checked',true);
                        elem.trigger('change');
                    }
                },
                clear: function() {
                    jQuery('.styled').each(function() {
                        var elem = jQuery(this);

                        switch(elem.attr('nodeName')) {
                            case 'INPUT': {
                                var height = 0;

                                if(elem.attr('checked')) {
                                    if(elem.attr('type') == 'checkbox') {
                                        height = checkboxHeight * 2;
                                    } else {
                                        height = radioHeight * 2;
                                    }
                                }

                                elem.next('span').css('backgroundPosition','0 -'+height+'px');
                            }break;

                            case 'SELECT': {
                                var select = jQuery(this);
                                var jSpan = select.next('span');
                                var select = jSpan.prev('select')
                                var option = select.children('option:selected');
                                jSpan.html(option.html());
                            }break;
                        }
                    });
                },
                leave: function() {
                    var elem = jQuery(this).children('ul');
                    elem.hide();
                },
                choose: function() {
                    var jLi = jQuery(this);
                    var jUl = jLi.parent();
                    var select = document.getElementById(jUl.attr('id').replace('ul_',''));
                    select.selectedIndex = jLi.attr('position');

                    var jSpan = jUl.prev('span');
                    var elem = jSpan.prev('select')
                    var option = elem.children('option');
                    for(i = 0; i < option.length ; i++) {
                        if(jQuery(option[i]).attr('selected')) {
                            jSpan.html(jQuery(option[i]).html());
                            elem.trigger('change');
                        }
                    }

                    jUl.hide();
                    if(select.onchange)
                        select.onchange();
                }
            }
            jQuery(document).ready(Custom.init);
            jQuery(document).mouseup(Custom.clear);
        });
    };
})(jQuery);