window.addEvent('domready', function(){
	var el = $('nav_supp').getElements('a'); 
	
	$('nav_supp').getElements('a').set('opacity', 0.9).addEvents({
		mouseenter: function(){

			this.morph({
				'opacity': 1,
				'border-bottom':'3px solid #f57300'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				'opacity': 0.9,
				'border-bottom':'0px solid #232323'
			});
		}
	});
});

window.addEvent('domready', function(){
	//First Example
	var el = $('menu').getElements('a'); 
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('menu').getElements('a').addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'margin-top': '5px'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				'margin-top': '0px'
			});
		}
	});
});

// Author: janlee <email@webhike.de> <http://webhike.de/scripts/dd/moofilm.html><http://webhike.de/moo>

var MooFilm = new Class ({

   Implements: [Events, Options, Chain],

   options: {
      pane: 'moofilm',										   //the class of the generated film-container
      items: 'use_film',										//class of the element, thet will be extendet with MooFilm
      infoclass: 'use_credits',								//grab the inner html/text that will appear on the filmpane

      beforeShow: $empty,										
      onShow: $empty,
      onHide: $empty,
      
      alpha: 0.8,												
      fx_alpha_fade: { duration:500, transition:'cubic:out' },		
      slidein: { duration:500, transition:'cubic:out', top:-40, left:0, opacity:0 },  //prepare the slidein/slideout-directions for the contents
      slideout: { duration:500, transition:'linear', top:5, left:0, opacity:0 },     
      
      useaslink: true, // keep a href								//use the filmpane as link
      linkname: '',                        //the name of the link (can be emtpy)
      grabtitle: false											//set true to use the title-property of the link as title
   },
   

   initialize: function (options) {	
      this.setOptions (options);
      this.fx = [];
      this.active = $empty;		
      $$('.'+this.options.items+' img').addEvent ('mouseenter', this.show.bind(this));
   },


   cunstruct: function () {
      
      this.subpane = new Element ('div', {'class':this.options.pane, 
         'styles': {position:'absolute', 'z-index':999, left:-1000, top:-1000, display:'none', opacity:0}});
      this.pane = this.subpane.clone();
      this.pane.setStyles ({ 'background-color':'transparent', 'border':'0px none' });
      this.pane.adopt ([
         new Element ('div', {'class':'film_title'}),
         new Element ('div', {'class':'film_info'}),
         new Element ('a', {'class':'film_link', 'href':'#', 'html':this.options.linkname})
      ]);
      
      $(document.body).adopt (this.subpane, this.pane);
      this.pane.addEvent ('mouseleave', this.hide.bind(this));
   },


   show: function (event) {  //console.log (event);

      event.stop();
      if ($(event.target).get('tag')!='a') {
         var itemPar = $(event.target).getParent();
         var item = $(event.target);
      }
      else {
         var itemPar = $(event.target);
         var item = $(event.target).getChildren()[0];
      }
      this.active = itemPar;
      
      if ($$('.'+this.options.pane)) $$('.'+this.options.pane).destroy();
      this.cunstruct();
      
      this.fireEvent('beforeShow', this.active, itemPar, event);
      
      // ! getPosition Mootools beta 2 buggy width css-borders in ie  //console.log (item.getPosition().x, item.getCoordinates().left);
      
      this.subpane.setStyles ({
         left: item.getCoordinates().left,
         top: item.getCoordinates().top,
         height: item.getSize().y,
         width: item.getSize().x
      });
      
      this.pane.setStyles ({
         left: item.getCoordinates().left - item.getStyle('margin-left').toInt(),
         top: item.getCoordinates().top - item.getStyle('margin-top').toInt(),
         height: item.getSize().y + item.getStyle('margin-right').toInt(),
         width: item.getSize().x + item.getStyle('margin-bottom').toInt()
      });

      //linkin
      if (this.options.useaslink && itemPar.get('href')) {
         this.pane.setStyle('cursor','pointer');
         this.pane.onclick = function () { 
            if (!itemPar.get('target')) itemPar.set('target', '_self');
            window.open(itemPar.get('href'),itemPar.get('target'));
         };
      }
      else this.pane.onclick = function () { return false; };

      //console.log (itemPar, itemPar.getProperties('title', 'href', 'target', 'info'));		
      var properties = itemPar.getProperties('title', 'href');
      
      if (this.options.grabtitle && properties.title && this.pane.getElement('.film_title')) {
         this.pane.getElement('.film_title').set('text', properties.title);
         this.pane.getElement('.film_title').setStyle('display', 'block');
         //itemPar.removeProperty('title');
      } 
      else if (this.pane.getElement('.il_title')) 
         this.pane.getElement('.il_title').setStyle('display', 'none');
      
      if (properties.href && this.pane.getElement('.film_link')) {         
         this.pane.getElement('.film_link').set('href', properties.href);
         this.pane.getElement('.film_link').set('target', properties.target);
         this.pane.getElement('.film_link').setStyle('display', 'inline');
      } 
      else if (this.pane.getElement('.film_link')) 
         this.pane.getElement('.film_link').setStyle('display', 'none');
      
      if (itemPar.getElement('.'+this.options.infoclass) && this.pane.getElement('.film_info')) {
         this.pane.getElement('.film_info').set('html', itemPar.getElement('.'+this.options.infoclass).get('html'));
         this.pane.getElement('.film_info').setStyle('display', 'block');
      } 
      else if (this.pane.getElement('.film_info')) 
         this.pane.getElement('.film_info').setStyle('display', 'none');
      
      
      //fade effects
      this.subpane.style.display = 'block';
      this.pane.style.display = 'block';		
      var coords = this.pane.getCoordinates(); 
      this.fx[0] = new Fx.Morph(this.subpane, this.options.fx_alpha_fade).set({opacity:0}).start({opacity:this.options.alpha});
      this.fx[1] = new Fx.Morph(this.pane, this.options.slidein).set 
         ({top:coords.top + this.options.slidein.top, left:coords.left + this.options.slidein.left, opacity:this.options.slidein.opacity}).start
         ({top:coords.top, left:coords.left, opacity:1});

      this.fireEvent('onShow', this.active, itemPar, event);
   },


   hide: function (event) {  //console.log (event, this.pane);

      this.fx[0].cancel(); this.fx[1].cancel();
      this.pane.removeEvent ('mouseleave', this.hide.bind(this));      

      var coords = this.pane.getCoordinates(); 
      this.fx[2] = new Fx.Morph(this.subpane, this.options.slideout).start({opacity:this.options.slideout.opacity});
      this.fx[3] = new Fx.Morph(this.pane, this.options.slideout).start(
         {top:coords.top + this.options.slideout.top, left:coords.left + this.options.slideout.left, opacity:this.options.slideout.opacity});
      
      //if ($$('.'+this.options.pane)) $$('.'+this.options.pane).destroy();
      this.fireEvent('onHide', this.active, event);
   }	
});