Element.Events.extend({
	'wheelup': {
		type: Element.Events.mousewheel.type,
		map: function(event){
			event = new Event(event);
			if (event.wheel >= 0) this.fireEvent('wheelup', event)
		}
	},
 
	'wheeldown': {
		type: Element.Events.mousewheel.type,
		map: function(event){
			event = new Event(event);
			if (event.wheel <= 0) this.fireEvent('wheeldown', event)
		}
	}
});

var MM_Bezuege = {
   stoff:  {glatt: [], strukturiert: []}
  ,leder:  {glatt: [], strukturiert: []}
  ,holz:   {std: {}}
  ,metall: {std: {}}
};




var MM_Blend = {
  statics: {
    instance: null
  }
  
  ,initialize: function()
  {
    
  }
  
  ,getInstance: function()
  {
    if (!this.statics.instance)
    {
      this.statics.instance = new MM_Blend();
    }
    
    return this.statics.instance;
  }
};
MM_Blend = new Class(MM_Blend);


window.getSizes = function()
{
  var coords = window.getSize();
  var coords2 = Client.viewportSize();
  var coords3 = document.getElement('body').getSize();
  coords.height = coords2.height;
  coords.size.bodyY = coords3.height;
  return coords;
}

var Client = {
  viewportWidth: function() {
    return self.innerWidth || (document.documentElement.clientWidth || document.body.clientWidth);
  },

  viewportHeight: function() {
    return self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight);
  },
  
  viewportSize: function() {
    return { width: this.viewportWidth(), height: this.viewportHeight() };
  }
};

function scalerImage(url, opt)
{
  url = url.replace(/\.(\w+)$/, '.' + opt + '.$1');
  url = url.replace(/media/, 'media/_generate');
	return url;
}


var MM_SlickForm_Select = {
   sel: null
  ,el: null
  ,elIn: null
  ,elVals: null
  ,elBorder: null
  ,itemContainer: null
  
  ,displayValue: function()
  {
    this.elBorder.set('text', this.sel.options[this.sel.options.selectedIndex].text);
  }
  
  ,initialize: function(sel)
  {
    this.sel       = sel;
    
    // Elements 
    var elContainer= new Element('div');
    this.el        = new Element('div');
    this.elIn      = new Element('div');
    this.elVals    = new Element('div');
    this.elBorder  = new Element('div');
    
    // Adoptions
    var theTd = this.sel.getParent();
    elContainer.adopt(this.el);
    this.el.adopt(this.sel);
    theTd.empty();
    theTd.adopt(elContainer);
    this.el.adopt(this.elIn);
    this.elIn.adopt(this.elVals);
    this.el.adopt(this.elBorder);
    
    // Styles A
    elContainer.addClass('select-container');
    this.el.addClass('select');
    this.elIn.addClass('vals');
    
    
    theTd.setStyles({
        position: 'relative'
       ,zIndex: 100
    });
    
    this.el.setStyles({    
    });
    
    this.elIn.setStyles({
       position: 'absolute'
      ,overflow: 'hidden'
    });
    
    this.elVals.setStyles({
       overflow: 'hidden'    
    });
    
    
    
    this.itemContainer = this.elVals;
    

    // Effects
    this.Scroller  = new Fx.Scroll(this.itemContainer);
    this.Fx        = new Fx.Morph(this.elIn, {
       duration: 200
      ,onStart: function()
      {
        this.elIn.style.zIndex = 20;
        this.elBorder.style.borderRightWidth = 0;
        this.elBorder.style.zIndex = 21;
      }.bind(this)
      ,onComplete: function()
      {
      }.bind(this)
    });
    this.Fx2       = new Fx.Morph(this.elIn, {
       duration: 200
      ,onStart: function()
      {
        this.elBorder.style.borderRightWidth = 1 + 'px';
      }.bind(this)
      ,onComplete: function()
      {
        this.elIn.style.zIndex = 20;
        this.elBorder.style.zIndex = 11;
        
        this.elIn.style.zIndex = 9;
      }.bind(this)
    });
    
    this.displayValue();
    
    
    // Styles
    this.sel.style.display = 'none';
    
    this.el.addClass('input');
    this.elBorder.addClass('number');
    
    this.elIn.setStyles({
       width: 80
      ,height: 0
      ,opacity: 0
      ,top: 0
    });
    
    this.elBorder.setStyles({
      zIndex: 11
    });
    
    var end = this.sel.options.length;
    for (var i = 0; i < end; i ++)
    {
      var item = new Element('div', {style: 'width: 100%; height: 16px;'});
      item.addClass('option');
      if (this.sel.options.selectedIndex == i)
      {
        item.addClass('act');
      }
      item.set('html', '<div style="padding-right: 10px;">' + this.sel.options[i].text + '</div>');
      item.addClass('forIndex-' + i);
      item.addEvents({
        click: function()
        {
          this.mySel.options.selectedIndex = this.myIndex;
          this.mySel.onchange();
          
          for (var i = 0, child; (child = this.ctrl.itemContainer.childNodes[i]); i ++)
          {
            child.removeClass('act');
          }
          
          this.me.addClass('act');
          this.ctrl.displayValue();
        }.bind({myIndex: i, mySel: this.sel, me: item, ctrl: this})
      });
      this.elVals.adopt(item);
    }
    
    this.el.addEvents({
       mousewheel: function(e)
       {
          e;
          var asdf = this.itemContainer.getSize();
          this.itemContainer.scrollTop = asdf.scroll.y + ((e.wheel * 16) * -1);
       }.bindWithEvent(this)
      
      ,mouseenter: function()
      {
        this.el.addClass('hv');
        var varItemHeight  = 16;
        var probeHeight    = this.sel.options.length * varItemHeight;
        var maxHeight      = 20 * varItemHeight;
        
        this.elIn.style.zIndex = 100;
        this.Fx2;
        var newHeight = Math.min(maxHeight, probeHeight);
        
        var coords = window.getSize();
        var coords2 = this.el.getCoordinates();
        var probe = coords.size.y + coords.scroll.y;
        var probe2 = coords2.top + newHeight;
        var newTop = 10;
        
        if (probe2 + 10 > probe)
        {
          newTop = 10 - 10 - (probe2 - probe);
        }
        
        this.elVals.setStyles({
          height: newHeight
        });
        this.Fx.set({
           top: newTop
        })
        this.Fx.start({
           height: newHeight
          ,opacity: 1
        });
      }.bind(this)
      
      ,mouseleave: function()
      {
        this.el.removeClass('hv');
        this.Fx;
        this.Fx2.set({
           top: 0
        })
        this.Fx2.start({
           height: 0
          ,opacity: 0
        });
      }.bind(this)
    });
  }
};
MM_SlickForm_Select = new Class(MM_SlickForm_Select);




window.addEvent('domready', function()
{
  document.getElements('input[type=text]').each(function(el)
  {
    
    el.addClass('number');
    el.addEvents({
      keyup: function()
      {
        if (-1 != this.value.search(/\D/))
        {
          this.value = this.value.replace(/\D/g, '');
        }
      }
      ,focus: function()
      {
        this.lock = true;
        this.addClass('hv');
      }
      ,mouseenter: function()
      {
        this.addClass('hv');
      }
      ,blur: function()
      {
        this.lock = false;
        this.removeClass('hv');
      }
      ,mouseleave: function()
      {
        if (!this.lock)
        {
          this.removeClass('hv');
        }
      }
    })
  });
  
//  MM_TP.startViewer('coat');
//  document.getElements('select').each(function(el)
//  {
//    new MM_SlickForm_Select(el);
//  });
});