/*
                     __                      ___                           __                    
         __         /\ \__                  /\_ \                         /\ \     __            
 __  __ /\_\   _ __ \ \ ,_\  __  __     __  \//\ \       __       __      \_\ \   /\_\     ___   
/\ \/\ \\/\ \ /\`'__\\ \ \/ /\ \/\ \  /'__`\  \ \ \    /'_ `\   /'__`\    /'_` \  \/\ \   / __`\ 
\ \ \_/ |\ \ \\ \ \/  \ \ \_\ \ \_\ \/\ \L\.\_ \_\ \_ /\ \L\ \ /\ \L\.\_ /\ \L\ \  \ \ \ /\ \L\ \
 \ \___/  \ \_\\ \_\   \ \__\\ \____/\ \__/.\_\/\____\\ \____ \\ \__/.\_\\ \___,_\ _\ \ \\ \____/
  \/__/    \/_/ \/_/    \/__/ \/___/  \/__/\/_/\/____/ \/___L\ \\/__/\/_/ \/__,_ //\ \_\ \\/___/ 
                                                         /\____/                  \ \____/       
                                                         \_/__/                    \/___/        
Script : mookitten.js
09/2007 - christopher wait aka virtualgadjo / chris at virtual-gadjo dot com
revue et corrigée 12/2007 pour tourner sur mootools 1.2
revue et corrigée 03/2007 pour mootools 1.2 release du moment (notamment syntaxe de fx tween)

anime une pseudo pop up qui part du lien cliqué, grossit et se centre dans la page
la pop up est alimentée par ajax et va chercher le contenu de l'url indiquée dans le lien
les javascript présent dans la page chargée dans la pop up sont exécutés permettant
d'y inclure une anim flash par ex ou du contenu lui-même intercatif.

Utilisation
new mookitten();

les Options, passées dans un objet à l'instanciation de la classe

- linkClass: permet de choisir la class à attribuer aux liens déclencheurs : chaîne de caractères
- popWidth, popHeight: la taille finale désirée pour le "pop up" : entiers
- popStartHeight, popStartWidth: la taille de la fenêtre au début de l'animation : entier
- duration: la durée du grossissement de la fenêtre en millisecondes : entier
- addmask: true ou false, permet de masquer ou pas le reste du site avec un masque dont on choisit l'opacité
- maskOpacity, flottant, 0 à 1, non, compris par ie6 mais bon, le masque est opaque dans ce cas
- lienfermer: true ou false, affiche ou pas un lien de fermeture au dessus de la nouvelle fenêtre
- fermerCaption: le texte si on en veut un dans le lien de fermeture, 
- fermerHeight: la hauteur du lien de fermeture, utile si on veut y mettre une image

exemple d'utilisation

new mookitten ({ linksClass: 'animlinks', popWidth: 450, popHeight: 450, addmask: false });
(fonctionnera sur les liens portant la class animlinks,
y compris dans le cas de plusieurs class, par ex class="black menu animlinks",
affichera une "pop up" de 450px * 450px et n'affichera pas de masque sur la page)

les trois éléments à styler par les css
#masque { background-color: #000; cursor: pointer; }
#affich { background-color: #fff; }
#closeanim { color: white; cursor: pointer; text-align: right; font-size: 13px; }

Have swing
*/

var mookitten = new Class ({

	Implements: [Events, Options],

	options: {
		linksClass      : "afflink",
		popWidth        : 800,
		popHeight       : 600,
		popStartHeight  : 0,
		popStartWidth   : 0,
		duration        : 800,
		addmask         : true,
		maskOpacity     : 0.7,
		maskDuration    : 800,
		lienfermer      : true,
		fermerCaption   : "fermer l'animation",
		fermerHeight    : 20,
		fermerWidth     : 0,
		fermerPosition  : top
	},

	initialize: function(options, anchors) {

		this.setOptions(options)
		this.anchors = anchors || [];

		$$('a').each(function(el){
			if (el.getProperty('class').contains(this.options.linksClass))
			this.anchors.push(el);
		}.bind(this));

		$$(this.anchors).each(function(el){
			el.addEvent('click', function(e){

				new Event(e).stop();
				this.closeall();

				this.departx       = el.getCoordinates().left + ( el.getCoordinates().width / 2 );
				this.departy       = el.getCoordinates().top  + ( el.getCoordinates().height / 2 );
				this.topposition   = document.getScroll().y + ((document.getCoordinates().height - this.options.popHeight) / 2) +'px';
				this.leftposition  = document.getScroll().x + ((document.getCoordinates().width - this.options.popWidth) / 2) +'px';
				this.topclose      = (document.getScroll().y + ((document.getCoordinates().height - this.options.popHeight) / 2)) - 20 +'px';

				this.ajurl         = el.getProperty('href');

				if (this.options.addmask == true) {
					this.maskAppear();
				}

				this.animdiv();

			}.bind(this));
		}.bind(this));

		//fermer avec escape, bah, c'est un peu la tradition...
		window.document.addEvent('keydown',function(e){
			if(e.key == 'esc'){ this.closeall(); };
		}.bind(this));
	},

	maskAppear: function(){
		this.masque = new Element('div', {
			'id'     : 'masque',
			'styles' : {
				'height'   : window.getScrollSize().y,
				'width'    : window.getScrollSize().x,
				'position' : 'absolute',
				'top'      : 0,
				'left'     : 0,
				'z-index'  : 50
			},
			'events'       : {
				'click'    : this.closeall.bind(this)
			}
		});
		this.masqueappear = new Fx.Tween(this.masque, { duration: this.options.maskDuration }).set('opacity', 0);
		this.masque.inject(document.body, 'top');
		this.masqueappear.start('opacity', 0, 0.7);

		//this.masque.addEvent('click', this.closeall);
	},

	animdiv: function(){
		this.affich = new Element('div', {
			'id'      : 'affich',
			'styles'  : {
				'width'    : this.options.popStartWidth,
				'height'   : this.options.popStartHeight,
				'position' : 'absolute',
				'top'      : this.departy,
				'left'     : this.departx,
				'z-index'  : '100',
				'overflow' : 'hidden'
			}
		});
		this.affich.inject(document.body, 'top');

		this.diveffect = new Fx.Morph(this.affich, {
			duration   : this.options.duration,
			onComplete : function(){

				if (this.options.lienfermer == true) {
					this.fermeture();
				}

				this.contenu = new Request.HTML({
					url         : this.ajurl,
					method      : 'get',
					evalScripts : true,
					update      : this.affich
				}).send();

			}.bind(this)
		});

		this.diveffect.start({
			'height' : this.options.popHeight,
			'width'  : this.options.popWidth,
			'top'    : this.topposition,
			'left'   : this.leftposition
		});
	},

	fermeture: function(){
		this.fermer = new Element('div', {
			'id'      : 'closeanim',
			'styles'  : {
				'width'    : this.options.popWidth,
				'height'   : 0,
				'position' : 'absolute',
				'top'      : this.topclose,
				'left'     : this.leftposition,
				'z-index'  : '100',
				'overflow' : 'hidden'
			},
			'events'    : {
				'click' : this.closeall.bind(this)
			}
		}).inject(document.body, 'top');

		this.fermer.set('html', this.options.fermerCaption);
		this.voirfermer = new Fx.Tween($('closeanim'), { duration: 400 }).start('height', this.options.fermerHeight);
	},

	closeall: function(){
		if ($('masque')){
			this.masqueappear.start('opacity', 0);
			(function(){ $('masque').dispose(); }).delay(this.options.maskDuration);
		}

		if ($('affich')){
			$('affich').empty();
			$('affich').dispose();
		}

		if ($('closeanim'))
		$('closeanim').dispose();
	}

});