/*
Script: moofilm.js
Mootools based Tooltip Fader for Images
MooTools 1.2 Beta 2 required

License:
 MIT-style license.

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

Changelog:

v.0.42 Version [23 Mar. 08]
- FX-options: update fx_text and fx_text_prepare renamed to slidein
- new effect: slideout 
- linkname as option

v.0.4 Beta Version [20 Mar. 08]
- the intern construct class to generate the film html "on the fly" to prevent some hide bugs
- useaslink and grabtitle options

v.0.3 Version [17 Feb. 08]
- alpha as option
- Effects
- beforeShow-Event

v.0.1 Basic Version [10 Feb. 08]
- Shows a Pane with Image Title, Link and Info
- Panelink option valueing the target property
- Show/Hide Events
*/


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.80,												
      fx_alpha_fade: { duration:120, transition:'linear' },		
      slidein: { duration:300, transition:'cubic:out', top:20, left:0, opacity:0 },  //prepare the slidein/slideout-directions for the contents
      slideout: { duration:250, transition:'quad:in', top:10, left:0, opacity:0 },     
      
      useaslink: true, // keep a href								//use the filmpane as link
      linkname: '  ',                        //the name of the link (can be emtpy)
      grabtitle: true											//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 ($E('.'+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 ($E('.'+this.options.pane)) $$('.'+this.options.pane).destroy();
      this.fireEvent('onHide', this.active, event);
   }	
});


window.addEvent('domready', function() {
	var credits = new MooFilm();
	});
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}