//Some globals
var elSelectBoxes = []; 
/**
* @file elSelect.js
* @downloaded from http://www.cult-f.net/2007/12/14/elselect/
* @author Sergey Korzhov aka elPas0
* @site  http://www.cult-f.net
* @date December 14, 2007
* 
*/
var elSelect = new Class({
    options: {
        container: false,
        baseClass : 'elSelect'
    },
    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)
        if ( !this.options.container ) return
        this.selected = false
        this.source = $(this.options.container).getElement('select')
        this.buildFrameWork()
        $(this.source).getElements('option').each( this.addOption, this )
        $(this.options.container).set('html','')
        this._select.injectInside($(this.options.container))
        this.bindEvents()
  },
    buildFrameWork : function() {
        var className = this.source.className;
        this._select = new Element('div').addClass( this.options.baseClass )
        this.current = new Element('div').addClass('selected').injectInside($(this._select))
        new Element('img' , {'src':'/js/select_' + className + 'arrow.gif' , 'class':'right'}).injectInside($(this.current));
        new Element('img' , {'src':'/js/select_' + className + 'left.gif' , 'class':'left'}).injectInside($(this.current));
        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').setStyle('display','none').injectInside($(this._select))

        var t = new Element('div').addClass('optionsContainerTop').injectInside($(this.optionsContainer))

        var o = new Element('div').injectInside($(t))

        var p = new Element('div').injectInside($(o))

        var t = new Element('div').addClass('optionsContainerBottom').injectInside($(this.optionsContainer))

        var o = new Element('div').injectInside($(t))

        var p = new Element('div').injectInside($(o))

        

        this.hiddenInput = new Element('input',{

            type  : 'hidden',

            name  : this.source.getProperty('name'),
            'id':this.source.id,
            'class': this.source.className
        }).injectInside($(this._select))
    },
    bindEvents : function() { 
       document.addEvent('click', function() { 
        elSelectBoxes.each(function(elSelect){ 

                if(elSelect.optionsContainer != this.optionsContainer)

                {

                    //good stuff works here again! i start to believe in god!;

                    elSelect.optionsContainer.setStyle('display','none');  

                }

            });

                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("with_icon");

            o.setProperty('frame' , option.getProperty('class'));

            o.setStyle("background-image" , "url('/frames/" + option.getProperty('class') + "/image.gif')");

        }

            /*o.addClass(option.getProperty('class'))*/

                                                            

    

        if ( option.selected ) { 

            if ( this.selected) this.selected.removeClass('selected');

            this.selected = o

            o.addClass('selected')

            this.selectedOption.set('text',option.text);

            this.hiddenInput.setProperty('value',option.value);

        }

        o.set('text',option.text)        

        o.injectBefore($(this.optionsContainer).getLast())

    },

    

    onDropDown : function( e ) {

    

            elSelectBoxes.each(function(elSelect){ 

                if(elSelect.optionsContainer != this.optionsContainer)

                {

                    //good stuff;

                    elSelect.optionsContainer.setStyle('display','none');  

                }

            });

            

            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.toInt() - 3) + "px" )

                this.optionsContainer.getFirst().setStyle('width', width)

                this.optionsContainer.getLast().setStyle('width', width)

            }                        

    },

    onOptionClick :function(e) {
         this.optionsContainer.setStyle('display',"none" );   
         var event = new Event(e)   
        if ( this.selected != event.target ) {

            this.selected.removeClass('selected');

            event.target.addClass('selected');

            this.selected = event.target;

            this.selectedOption.set('text',this.selected.get('text'));
            this.hiddenInput.rel = this.selected.get('text');
            
            if(this.source.get('class','ONLY_QUANTITY')) {
              foo = $$('form.elSelect')[0].getElement('input[name*="amount"]');
              amount = this.hiddenInput.rel.toInt()
              //foo.set('value',amount);
              foo.value=amount;
              //log(this.hiddenInput.rel.toInt()+" to "+ foo);//ONLY_QUANTITY
              //log(foo);
            }
            var field = this.source.id.split("_");

            field = field[field.length - 1];

            if($('options_value_' + field))

                $('options_value_' + field).set('text' , this.selected.get('text'));

               

            this.hiddenInput.setProperty('value',this.selected.getProperty('value'));

            this.source.value = this.selected.getProperty('value');

            var dummy = {value:this.selected.getProperty('value')};

            this.hiddenInput.setProperty('class',this.selected.getProperty('frame'));

                                             

            if(this.source.onchange)

            {

                this.source.onchange.bind(dummy)(); 

                 

              }      

        }

          

        //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);



window.addEvent('domready' , function(){

    $$('.elSelect select').each(function(el){

        var mySelect = new elSelect( {container : el.getParent()} );

        elSelectBoxes.push(mySelect);

    });

});







function update_readonly(elm){
    //return false;
    var field = elm.id.split("_");
    field = field[field.length - 1];
        if($('options_value_' + field))
            $('options_value_' + field).set('text' , elm.value);
}