/**
* @file elSelect.js

*
*/

var elSelect = new Class({
    options: {
        container: false,
        baseClass : 'selectSkinned'
    },
    source : false,
    selected : false,
    _select : false,
    current : false,
    selectedOption : false,
    dropDown : false,
    optionsContainer : false,
    hiddenInput : false,
    /*
	pass the options,
	create html and inject into container
	*/
    initialize: function(options){
        this.setOptions(options);
        this.allOptions = [];
        if ( !this.options.container ) return

        this.selected = false;
        this.source = $(this.options.container).getElement('select');

        //console.log(this.source)

        this.buildFrameWork()

        $(this.source).getElements('option').each( this.addOption, this )
        //on cache le select
        $(this.options.container).addClass('hiddenSelect');
        this._select.injectInside($(this.options.container))

        this.bindEvents()

    },

    buildFrameWork : function() {
        this._select = new Element('div').addClass( this.options.baseClass )
        this.current = new Element('div').addClass('selected').injectInside($(this._select))
        this.selectedOption = new Element('div').addClass('selectedOption').injectInside($(this.current))
        this.dropDown = new Element('div').addClass('dropDown').injectInside($(this.current))
        new Element('div').addClass('clear').injectInside($(this._select))
        this.optionsContainer = new Element('div').addClass('optionsContainer').injectInside($(this._select))
        var t = new Element('div').addClass('optionsContainerTop').injectInside($(this.optionsContainer))
        var o = new Element('div').injectInside($(t))
        new Element('div').injectInside($(o))
        var a = new Element('div').addClass('optionsContainerBottom').injectInside($(this.optionsContainer))
        var b = new Element('div').injectInside($(a))
        new Element('div').injectInside($(b))

        this.hiddenInput = new Element('input').setProperties({
            type  : 'hidden',
            name  : this.source.getProperty('name')
        });
        this.hiddenInput .injectInside($(this._select));

    },

    bindEvents : function() {
        document.addEvent('click', function() {
            if ( this.optionsContainer.getStyle('display') == 'block')
                this.onDropDown()
        }.bind(this));

        $(this.options.container).addEvent( 'click', function(e) {
            new Event(e).stop();
        } )
        this.current.addEvent('click', this.onDropDown.bindWithEvent(this) )

    },

    //add single option to select
    addOption: function( option ){
        var o = new Element('div').addClass('option').setProperty('value',option.value)
        if ( option.disabled ) {
            o.addClass('disabled')
        } else {
            o.addEvents( {
                'click': this.onOptionClick.bindWithEvent(this),
                'mouseout': this.onOptionMouseout.bindWithEvent(this),
                'mouseover': this.onOptionMouseover.bindWithEvent(this)
            })
        }

        if ( $defined(option.getProperty('class')) && $chk(option.getProperty('class')) )
            o.addClass(option.getProperty('class'))


        if ( option.selected ) {
            if ( this.selected) this.selected.removeClass('selected');
            this.selected = o
            o.addClass('selected')
            this.selectedOption.setText(option.text);
            this.hiddenInput.setProperty('value',option.value);
        }
        o.setText(option.text)
        o.injectBefore($(this.optionsContainer).getLast())
        this.allOptions.push(o);
    },

    onDropDown : function( e ) {

        if ( this.optionsContainer.getStyle('display') == 'block') {
            this.optionsContainer.setStyle('display','none')
        } else {
            this.optionsContainer.setStyle('display','block')
            this.selected.addClass('selected')
            //needed to fix min-width in ie6
            var width =  this.optionsContainer.getStyle('width').toInt() > this._select.getStyle('width').toInt() ? this.optionsContainer.getStyle('width') : this._select.getStyle('width')
            this.optionsContainer.setStyle('width', width)
            this.optionsContainer.getFirst().setStyle('width', width)
            this.optionsContainer.getLast().setStyle('width', width)
        }
    },
    onOptionClick : function(e) {
        var event = new Event(e)
        if ( this.selected != event.target ) {
            this.selected.removeClass('selected')
            event.target.addClass('selected')
            this.selected = event.target
            this.selectedOption.setText(this.selected.getText());
            this.hiddenInput.setProperty('value',this.selected.getProperty('value'));
        }
        var naturalIndex = this.allOptions.indexOf(this.selected);
        this.source.selectedIndex = naturalIndex;
        this.source.fireEvent('change');
        this.onDropDown()
    },
    onOptionMouseover : function(e){
        var event = new Event(e)
        this.selected.removeClass('selected')
        event.target.addClass('selected')
    },
    onOptionMouseout : function(e){
        var event = new Event(e)
        event.target.removeClass('selected')
    }

});
elSelect.implement(new Events);
elSelect.implement(new Options);




var elSelect2 = new Class({
    options: {
        container: false,
        baseClass : 'selectSkinned'
    },
    source : false,
    selected : false,
    _select : false,
    current : false,
    selectedOption : false,
    dropDown : false,
    optionsContainer : false,
    hiddenInput : false,
    /*
	pass the options,
	create html and inject into container
	*/
    initialize: function(options){
        this.setOptions(options);
        this.allOptions = [];
        if ( !this.options.container ) return

        this.selected = false;
        this.source = $(this.options.container).getElement('select');

        //console.log(this.source)

        this.buildFrameWork()

        $(this.source).getElements('option').each( this.addOption, this )
        //on cache le select
        $(this.options.container).addClass('hiddenSelect');
        this._select.injectInside($(this.options.container))
        this.bindEvents()
		var selectStyle = $(this._select).getCoordinates();
		
		$(this.optionsContainer).setStyle("top",selectStyle.top+selectStyle.height );
		$(this.optionsContainer).setStyle("left",selectStyle.left );
		$(this.optionsContainer).setStyle("width",selectStyle.width);
		$(this.optionsContainer).setStyle("position","absolute");

    },

    buildFrameWork : function() {
        this._select = new Element('div').addClass( this.options.baseClass )
        this.current = new Element('div').addClass('selected').injectInside($(this._select))
        this.selectedOption = new Element('div').addClass('selectedOption').injectInside($(this.current))
        this.dropDown = new Element('div').addClass('dropDown').injectInside($(this.current))
        new Element('div').addClass('clear').injectInside($(this._select))
		
        this.optionsContainer = new Element('div').addClass('optionsContainer').addClass('optionsContainer2').injectInside($(document.body))
	
		$(this._select).optionsContainer =  this.optionsContainer; 
		
        var t = new Element('div').addClass('optionsContainerTop').injectInside($(this.optionsContainer))
		
        var o = new Element('div').injectInside($(t))
        new Element('div').injectInside($(o))
        var a = new Element('div').addClass('optionsContainerBottom').injectInside($(this.optionsContainer))
        var b = new Element('div').injectInside($(a))
        new Element('div').injectInside($(b))
		

        this.hiddenInput = new Element('input').setProperties({
            type  : 'hidden',
            name  : this.source.getProperty('name')
        });
        this.hiddenInput .injectInside($(this._select));
		

    },

    bindEvents : function() {
        document.addEvent('click', function() {
            if ( this.optionsContainer.getStyle('display') == 'block')
                this.onDropDown()
        }.bind(this));

        $(this.options.container).addEvent( 'click', function(e) {
            new Event(e).stop();
        } )
        this.current.addEvent('click', this.onDropDown.bindWithEvent(this) )

    },

    //add single option to select
    addOption: function( option ){
        var o = new Element('div').addClass('option').setProperty('value',option.value)
        if ( option.disabled ) {
            o.addClass('disabled')
        } else {
            o.addEvents( {
                'click': this.onOptionClick.bindWithEvent(this),
                'mouseout': this.onOptionMouseout.bindWithEvent(this),
                'mouseover': this.onOptionMouseover.bindWithEvent(this)
            })
        }

        if ( $defined(option.getProperty('class')) && $chk(option.getProperty('class')) )
            o.addClass(option.getProperty('class'))


        if ( option.selected ) {
            if ( this.selected) this.selected.removeClass('selected');
            this.selected = o
            o.addClass('selected')
            this.selectedOption.setText(option.text);
            this.hiddenInput.setProperty('value',option.value);
        }
        o.setText(option.text)
        o.injectBefore($(this.optionsContainer).getLast())
        this.allOptions.push(o);
    },

    onDropDown : function( e ) {

        if ( this.optionsContainer.getStyle('display') == 'block') {
            this.optionsContainer.setStyle('display','none')
        } else {
            this.optionsContainer.setStyle('display','block')
            this.selected.addClass('selected')
            //needed to fix min-width in ie6
            /* var width =  this.optionsContainer.getStyle('width').toInt() > this._select.getStyle('width').toInt() ? this.optionsContainer.getStyle('width') : this._select.getStyle('width')
            this.optionsContainer.setStyle('width', width)
            this.optionsContainer.getFirst().setStyle('width', width)
            this.optionsContainer.getLast().setStyle('width', width) */
        }
    },
    onOptionClick : function(e) {
        var event = new Event(e)
        if ( this.selected != event.target ) {
            this.selected.removeClass('selected')
            event.target.addClass('selected')
            this.selected = event.target
            this.selectedOption.setText(this.selected.getText());
            this.hiddenInput.setProperty('value',this.selected.getProperty('value'));
        }
        var naturalIndex = this.allOptions.indexOf(this.selected);
        this.source.selectedIndex = naturalIndex;
        this.source.fireEvent('change');
        this.onDropDown()
    },
    onOptionMouseover : function(e){
        var event = new Event(e)
        this.selected.removeClass('selected')
        event.target.addClass('selected')
    },
    onOptionMouseout : function(e){
        var event = new Event(e)
        event.target.removeClass('selected')
    }

});
elSelect2.implement(new Events);
elSelect2.implement(new Options);





/* Skinnage des radio ET checkbox */

var elRadioCheck = new Class({
    options: {
        element : false,
        activeClass : 'skinnedCheckActive',
        baseClassLabel : 'checkedSkinned',
        notClassLabel : 'notCheckedSkinned'
    },
    initialize: function(options){
        this.setOptions(options);
        var _this = this;
        if ( !this.options.element ) return
        var mySkinnedCheckRadio = $(document.body).getElements("."+this.options.element);
        if(mySkinnedCheckRadio.length != 0){
            mySkinnedCheckRadio.each(function(el){
                el.addClass(""+_this.options.activeClass);
                var myElInput = el.getElement("input");
                var myEllabel = el.getElement("label");

                if(myElInput.checked == true){
                    myEllabel.addClass(""+_this.options.baseClassLabel);
                }else{
                    myEllabel.addClass(""+_this.options.notClassLabel);
                }


                myElInput.addEvent("click",function(){
				
                    var myName = this.getProperty("name");
                    var myInputsBlock = $(document.body).getElements("."+_this.options.element);
                    myInputsBlock.each(function(el){
                        if(el.getElement("input").getProperty("name") == myName){
                            el.getElement("label").removeClass(""+_this.options.baseClassLabel);
                            el.getElement("label").addClass(""+_this.options.notClassLabel);
                        }
                    });
                    if(this.checked == true){
                        myEllabel.addClass(""+_this.options.baseClassLabel);
                    }else{
                        myEllabel.addClass(""+_this.options.notClassLabel);
                    }
                })
            });
        }
    }
});
elRadioCheck.implement(new Events);
elRadioCheck.implement(new Options);