var MainOver = new Class({
  Implements: Options,
  options: {
    id: 'nav',//the id of the main menu (ul or ol)
    scrollContainerId:'mloM2HomeGraphEl',
    roContainerId:'subMenusContainer',
    delay: 1000,
    morphtime: 600
  },
  hidetimer: null,
  scrollContainer: null,
  hidden: true,
	initialize: function(options) {
		if(Browser.loaded){
			this.setup(options);
		} else{
			window.addEvent('domready', this.setup.pass([options],this));
		}
	},
	setup: function(options) {   
	      
    this.scrollContainer = new Fx.Morph(this.options.scrollContainerId,{duration: this.options.morphtime});
    this.scrollContainer.addEvent('complete', function() {
         // alert('Scrollcontainer isOpen');
    });  
    
    $(this.options.roContainerId).addEvents({
        mouseenter: function(event){
         $clear(this.hidetimer);
        }.bind(this),
        mouseleave: function(){
          this.hidetimer = this.hideImage.delay(this.options.delay, this);
        }.bind(this)
      });	
    
    var links = $(this.options.id).getElements('a');
    links.each(function(item,index){
      item.addEvents({
        mouseenter: function(event){
         this.openImage('t'+item.id);
         $clear(this.hidetimer);
        }.bind(this),
        mouseleave: function(){
          this.hidetimer = this.hideImage.delay(this.options.delay, this);
        }.bind(this)
      });	
		}.bind(this));
	},
	openImage: function(id) {
	  var img = $(this.options.scrollContainerId).getElements('div');
    img.each(function(item,index){
      if (item.id == id) item.setStyle("display","block");
      else item.setStyle("display","none");
    });
	
	  // set image to top
	  // $(id).inject($(this.options.scrollContainerId), 'top');

	  
	  // Get height of image;
	  var dim = $(id).getSize();
	  if (dim.y > 0 && $(this.options.scrollContainerId).getSize().y != dim.y) {
      this.scrollContainer.start({
      	height: dim.y + 'px'
      });
    }
  },
  hideImage: function(){ 
    this.hidden = true;
    this.scrollContainer.start({
    			height: '0px'
    });
    	
  }
});

