/*
Script : mooVcombo.js
massacred by christopher wait aka virtualgadjo
styler des selects/comboboxes de formulaires
tourne avec mootools 1.2
*/

var mooVcombo = new Class ({

	Implements: [Events, Options],

	options: {
		onChange        : Class.empty,
		width           : 150,
		height          : null,
		scroller        : {
			scrollTrack : "", //css class
			scrollKnob  : "", //css class
			trackWidth  : 15,
			trackTop    : 0,
			trackRight  : 1,
			nbSteps     : 20
		},
		comboClass      : "vSelectReplace",
		listClass       : "vSelectList",
		liClass         : "vLiClass",
		selectClass     : "vSelectItem",
		listDivClass    : "vListDiv",
		scrollDivClass  : "vScrollDiv",
		listWidth       : null,
		hideDelay       : 1000,
		zIndex          : 20
	},

	initialize: function(ziSelect, ziContainer, options) {
		this.setOptions(options);

		this.zs = $(ziSelect);
		this.divId   = this.zs.get('id') + 'mooR';
		this.ulDiv   = this.zs.get('id') + 'mooC';
		this.ulDivC  = this.zs.get('id') + 'mooCC';
		this.ulId    = this.zs.get('id') + 'mooUl';

		this.optNum  = this.zs.getChildren('option').length;
		this.zw      = $(ziContainer);

		this.zs.setStyle('visibility', 'hidden');
		this.zs.addEvent('blur', function(){
			this.list.setStyle('display', 'none');
		}.bind(this));

		this.zw.setStyle('position', this.zw.getStyle('position') == "absolute" ? 'absolute' : 'relative');
		this.zw.setStyle('z-index', this.options.zIndex);
		this.coord  = this.zs.getCoordinates(this.zw);
		this.vDiv   = new Element('div', {
			'id'    : this.divId,
			'styles' : {
				'position' : 'absolute',
				'left'     : this.coord.left,
				'top'      : (this.coord.top > 2 ? this.coord.top : 2),
				'width'    : this.options.width != null ? this.options.width : this.coord.width,
				'z-index'  : this.options.zIndex
			}
		}).inject(this.zw, 'top');

		this.buildTop();
		this.buildList();
		this.setSelect();
	},

	buildTop: function(){
		this.topValue = new Element ('a', {
			'href'   : '#',
			'class'  : this.options.comboClass,
			'styles' : {
				'display': 'block'
			},
			'events' : {
				'click': function(e){
					e.stop();
					if (this.listDiv.getStyle('display') == 'none'){
						this.listDiv.setStyle('display', 'block');
						if (this.options.height != null) {
							this.listDiv.setStyles({
								'height'   : this.options.height,
								'overflow' : 'hidden'
							});
							if (this.listDivC.getSize().y - this.options.height > 0) this.buildScroll();
						}
					}
					else {
						this.hideList();
					}
				}.bind(this),
				'mouseleave' : function(){
					this.hide = this.hideList.delay(this.options.hideDelay, this);
				}.bind(this),
				'mouseover' : function(e){
          if(this.options.showOnMouseOver)
          {
            e.stop();
            if (this.listDiv.getStyle('display') == 'none'){
              this.listDiv.setStyle('display', 'block');
              if (this.options.height != null) {
                this.listDiv.setStyles({
                  'height'   : this.options.height,
                  'overflow' : 'hidden'
                });
                if (this.listDivC.getSize().y - this.options.height > 0) this.buildScroll();
              }
            }
          }

					$clear(this.hide);
				}.bind(this)
			}
		}).inject(this.vDiv, 'top');
	},

	buildList: function(){
		this.listWidth = this.options.listWidth == null ? this.options.width : this.options.listWidth;
		//premier div de contenu
		this.listDiv = new Element ('div', {
			'id'     : this.ulDiv,
			'class'  : this.options.listDivClass,
			'styles'  : {
				'position' : 'absolute',
				'width'    : this.listWidth,
				'display'  : 'none',
				'overflow' : 'hidden'
			},
			'events' : {
				'mouseover' : function(){
					$clear(this.hide);
				}.bind(this),
				'mouseleave' : function(){
					this.hide = this.hideList.delay(this.options.hideDelay, this);
				}.bind(this)
			}
		}).inject(this.vDiv, 'bottom');

		//deuxi�me div de contenu
		this.listDivC = new Element ('div', {
			'id'      : this.ulDivC,
			'class'   : this.options.scrollDivClass,
			'styles'  : {
				'position'      : this.options.height != null ? 'absolute' : 'relative'
			}
		}).inject(this.listDiv, 'inside');
		if (this.options.height != null) this.listDivC.setStyle('width', this.listWidth - this.options.scroller.trackWidth);

		//liste d'items
		this.list = new Element('ul', {
			'id'     : this.ulId,
			'class'  : this.options.listClass
		});

		for (i = 0; i < this.optNum; i++) {
			var newLi = new Element('li', {
        'id'     : 'el_id_' + this.zs.getChildren('option')[i].get('value'),
				'text'   : this.zs.getChildren('option')[i].get('text'),
				'class'  : this.options.liClass,
				'styles' : { 'cursor': 'pointer' }
			}).inject(this.list, 'bottom');
			if (this.zs.options[i].getProperty('selected') == true) {
				this.list.getChildren('li')[i].addClass(this.options.selectClass);

        var txt =  this.zs.options[i].get('text');
        if(txt.length > 22)
          txt = txt.substr(0,20) + '...';
				this.topValue.set('text', txt);
			}
		}
		this.list.inject(this.listDivC, 'inside');
	},

  // Thomas ...qui se met à mootools, bien obligé ... GRRRR
  updateList: function(h, reset) {
    this.list.set('html', '');
    var selected = 0;
    if(typeof(h) != 'undefined' && h)
    {
      h.each(function(e, j) {
        if(j == this.zs.options[this.zs.selectedIndex].value) selected = this.zs.selectedIndex + (this == familleCombo ? 1 : 0);
        var newLi = new Element('li', {
          'id'     : 'el_id_' + j,
          'text'   : e,
          'title'  : j,
          'class'  : this.options.liClass,
          'styles' : { 'cursor': 'pointer' }
        }).inject(this.list, 'bottom');
      }, this);
    }

    this.setSelect();

    if(!reset)
    {
      this.fireEvent('onChange');
    }
    else
    {
      this.list.getElements('li').each(function(el)
      {
        if(el.getProperty('id') == 'el_id_' + selected)
        {
          el.fireEvent('click');
        }
      });

      if(typeof(this.list.getElements('li')[selected]) != 'undefined')
      {
        this.topValue.set('text', "Sélectionnez...");
        this.zs.getElements('option').removeProperty('selected');
        produitCombo.topValue.set('text', "Sélectionnez...");
        produitCombo.zs.getElements('option').removeProperty('selected');
        //this.list.getElements('li')[selected].fireEvent('click');
      }

    }
  },

  getValue : function(){
    return this.zs.getProperty('value');
  },

	buildScroll: function(){
		this.ratio = this.options.height / this.listDivC.getSize().y;
		this.hidePart = this.listDivC.getCoordinates().height - this.options.height;
		this.track = new Element ('div', {
			'class'  : this.options.scroller.scrollTrack,
			'styles' : {
				'position'  : 'absolute',
				'top'       : this.options.scroller.trackTop,
				'right'     : this.options.scroller.trackRight,
				'z-index'   : this.options.zIndex + 2
			}
		});
		this.track.inject(this.listDivC, 'before');
		this.knob = new Element ('div', {
			'class'  : this.options.scroller.scrollKnob,
			'styles' : {
				'position'  : 'absolute'
			}
		});
		this.knob.inject(this.track, 'top');
		this.knobHeight = this.track.getSize().y * this.ratio;
		this.knob.setStyle('height', this.knobHeight);
		this.knobDrag();
		this.wheelScroll();
	},

	knobDrag: function(){
		this.kDrag = new Slider (this.track, this.knob, {
			mode: "vertical",
			wheel: true,
			snap : true,
			steps: this.options.scroller.nbSteps,
			onChange: function(step){
				this.listDivC.setStyle('top', - Math.ceil(this.hidePart / (this.options.scroller.nbSteps - 1) * step));
			}.bind(this)
		});
	},

	wheelScroll: function(){
		var unCran = Math.round(this.hidePart / this.options.scroller.nbSteps);
		this.listDiv.addEvent('mousewheel', function(e){
			e.stop();
			if (e.wheel < 0) {
				if (this.listDivC.getCoordinates(this.listDiv).top > - (this.hidePart)) {
					this.listDivC.setStyle('top', this.listDivC.getCoordinates(this.listDiv).top + e.wheel * unCran);
					this.kDrag.set( - Math.round(this.listDivC.getCoordinates(this.listDiv).top / unCran));
				}
			}
			else {
				if (this.listDivC.getCoordinates(this.listDiv).top < 0) {
					this.listDivC.setStyle('top', this.listDivC.getCoordinates(this.listDiv).top + e.wheel * unCran);
					this.kDrag.set( - Math.round(this.listDivC.getCoordinates(this.listDiv).top / unCran));
				}
			}
		}.bind(this));
	},

	setSelect: function(){
		$$(this.list.getChildren('li')).each(function(el, i){
			el.addEvent('click', function(){
				el.addClass(this.options.selectClass);
        this.zs.set('value', el.getProperty('id').substr(6));
        var txt = '';
        for(j = 0; j < this.optNum; j++){
          if (el.getProperty('id').substr(6) == this.zs.options[j].getProperty('value')) {
            this.zs.options[j].setAttribute('selected', 'selected');
            txt = this.zs.options[j].get('text');
          } else {
            this.zs.options[j].removeAttribute('selected');
          }
        }
        if(txt.length > 22)
          txt = txt.substr(0,20) + '...';
        this.topValue.set('text', txt);
/*
				this.zs.options[i].setAttribute('selected', 'selected');
				this.zs.set('value', this.zs.options[i].getProperty('value'));
				for(j = 0; j < this.optNum; j++){
					if (j != i){
            if (this.list.getChildren('li')[j])
              this.list.getChildren('li')[j].removeClass(this.options.selectClass);
						this.zs.options[j].removeAttribute('selected');
					}
				}
				this.topValue.set('text', this.zs.options[i].get('text'));
*/
				this.fireEvent('onChange');
				this.hideList();
        if (this.options.tgOnChange) this.options.tgOnChange(this.zs.options[i].getProperty('value'));
			}.bind(this));
		}.bind(this));
	},

	destroyScroll: function(){
		if(this.track){
			this.track.dispose();
			this.knob.dispose();
			this.listDivC.setStyle('top', 0);
		}
	},

	hideList: function(){
		if (this.listDiv.getStyle('display') == 'block') this.listDiv.setStyle('display', 'none');
		if (this.options.height != null) {
			this.destroyScroll();
		}
	}

});