/*
Script:
  multiple_select.js

License:
  MIT-style license
  
Group: HTML Widgets
  provides customizable multiple select widgets

Based on:
  comboBoo.js by Bruno Torrinha, <http://www.torrinha.com>

Credits:
  wollzelle GmbH, <http://www.wollzelle.com>
  Michael Aufreiter
  
*/



/*
Class: MultipleSelect
  collects functions for multiple select widgets

Note:
  static class
*/

var MultipleSelect = new Class({

    Implements: [Options],

    options: {
        className: 'multiple_select',
        callBack: '',
        multiSelectIdName:'',
	heightLi: '',
	maxHeightEl: ''
    },

    /*
  Property: initialize
    initializes a new multiple select widget
  */
  
    initialize: function(el, options) {
        this.setOptions(options);
        this.oldSelect = $(el);
        var pos = this.oldSelect.getCoordinates();
        
        this.oldSelect.setStyle('display', 'none');
	
	
	var heightUl=pos.height+'px';
	if(this.options.heightLi != '') heightUl= (this.options.heightLi * el.length) +'px';
	if(this.options.maxHeightEl != '') {
	    if((this.options.heightLi * el.length)>(this.options.heightLi * this.options.maxHeightEl))
		heightUl= (this.options.heightLi * this.options.maxHeightEl) +'px';
	    else
		heightUl= (this.options.heightLi * el.length) +'px';
	}

        // selectList
        this.selectList = new Element('ul', {
            'class': this.options.className + '_list',
            'id': el.name+'_choices'
        }).setStyles({
            width: pos.width +'px',
            height: heightUl,
            'overflow': 'auto'
        }).injectAfter(this.oldSelect);
		    
        this.build(el);
    },

    /*
  Property: build
    builds the HTML that is needed for displaying the multiple select
    widget instead of the normal select box
  */

    build: function(el) {
        for(i = 0; i < el.length; i++) {
            var el2 = new Element('li', {
                'id': el.name+'_'+i
                }).set('html', el.options[i].text);
            if (this.oldSelect.options[i].selected)
                el2.addClass('choice_selected');
            this.addChoiceEvents(el2);
            el2.injectInside(this.selectList);
        };
    },
   
    /*
  Property: choiceSelect
    selects or deselects the clicked list items
  */

    choiceSelect: function(el) {
        
        el.toggleClass('choice_selected');
        var id = el.id.substring(el.id.lastIndexOf('_')+1).toInt();
        this.oldSelect.options[id].selected ? this.oldSelect.options[id].selected = '' : this.oldSelect.options[id].selected = 'selected';
        el.fireEvent('change');
		
        idGridJS=this.oldSelect.id;
//        console.log(idGridJS);
        selectedValues = new Array();
        for (i=0;i<$(idGridJS).length;i++) {
            if ($(idGridJS).options[i].selected) {
                selectedValues[selectedValues.length]=$(idGridJS).options[i].value;
            }
        }

        //this.options.callBack();
        multiSelectIdName = idGridJS + "_multiselectValues";
        $(idGridJS+"_multiselectValues").value=selectedValues.join(",");
        
        if (this.options.callBack!='') {
					eval(this.options.callBack+'()');                                        
                                       }
        

       
    },

    /*
  Property: addChoiceEvents
    registers the mouse events
  */

    addChoiceEvents: function(el) {
        return el.addEvents({
            mouseover: function() {
                el.addClass('choice_hover');
            },
            mouseout: function() {
                el.removeClass('choice_hover');
            },
            mousedown: this.choiceSelect.bind(this, [el])
        });
    }
});

MultipleSelect.implement(new Events, new Options);