/*
	Moognify v. 2.0 

	Author:
		Tobias Wallin, Gravita. www.gravita.se
		
	License:
		MIT-style license
		
	Class: 
		Moognify
		
	Description:
		Enlarges images with an OS X style effect.
		
	Requirements:
		Mootools 1.2 or later, use EnlargeImage.js for previous mootools versions.
	
	Arguments:
		element - the image to enlarge
		options - the options
		
	Options:
		duration: miliseconds, duration of the enlarge effect. Defaults to 300.
		borderDuration: miliseconds, duration of the border effect. Defaults to 200.
		borderOpacity: opacity of the image border, defaults to 0.8.
		source: path to the large image. Optional.
		altText: The alt text will be used as image descrition if set to true. Defaults to true.
		text: Image description, overrides altText. Optional.
		
	CSS:
		The border styling is controlled via the css class ".moognifyBorder". 
		The borde has no default styling and will appear transparent til you set a background color.
		
	Example:
		<img src='imageThumb.jpg' alt='' onclick='new Moognify(this,{duration: 500, source: "imageLarge.jpg", text: "This is one of my pictures."});' />
*/
var thumb = "";
var Moognify = new Class({
	options:  {
		duration: 300,
		borderDuration: 200,
		borderOpacity: 0.5,
		altText: true
	},
	initialize: function(element,options) {
		this.element = $(element);
		this.setOptions(options);
		this.defineText();
		this.storeCoordinates();
		this.setSource();
		this.create();
		this.loader();
	},
	initializeLoaded: function() {
		this.setPosition();
		this.zoom();
		this.createBorder.bind(this).delay(this.options.duration);
		if(thumb == "") thumb = this.element;
    this.frame = new Element('iframe').setStyles({
      'position': 'absolute',
      'top': this.imageTop-10+"px",
      'left': this.imageLeft-10+"px",
      'width': this.imageWidth+20+"px",
      'height': this.imageHeight+20+"px",
      'display': 'none'
    }).setProperties({ 'id':'iframehack','frameBorder': 0, 'scrolling': 'no' }).injectAfter(this.overlay);
    this.frame.setStyle('display','block');
		this.image.addEvent('click', this.minimize.bind("",[this.image,this.element,"",this.options]));
    this.overlay.addEvent('click', function() {
      $('moognifyObject').fireEvent('click');
    });
    this.closelink.addEvent('click', function(e) {
      new Event(e).stop();
      $('moognifyObject').fireEvent('click');
    });
	},
	storeCoordinates: function() {
    var ec = $(this.element).getCoordinates();
		this.elementTop = ec.top;
		this.elementLeft = ec.left;
		this.elementWidth = ec.width;
		this.elementHeight = ec.height;
		this.browserWidth = window.getWidth();
		this.browserHeight = window.getHeight();
		this.browserScrollTop = window.getScrollTop();
	},
	setSource: function() {
		if(this.options.source) this.source = this.options.source;
		else this.source = this.element.src;
	},
	create: function() {
		if($("moognifyObject")) {
			this.minimize($("moognifyObject"),thumb,this.element,this.options);
		}
    this.overlay = new Element('div', {'id': 'lbOverlay'}).injectInside(document.body);
    this.overlay.setStyles({'height': window.getScrollHeight(),'opacity':0.01});
    this.closelink = new Element('a', {'id': 'lbCloseLink', 'href': '#'}).injectInside(document.body);
		this.image = new Element('img', {
			'styles': {
				'position': 'absolute',
				'top': '0px',
				'cursor': 'pointer',
				'z-index': '-99',
				'display': 'none'
			},
			'src': this.source,
			'id': 'moognifyObject'
		});
	},
	loader: function() {
		if(this.checkLoad() == true) {
			this.initializeLoaded.delay(100,this);
		} else {
			this.element.setStyle('opacity',0.5);
			this.loader.delay(100,this,this.image);
		}
	},
	checkLoad: function() {
		if(this.image.width > 0) {
			return true;
		}
	},
	setPosition: function() {
		this.imageWidth = this.image.width;
		this.imageHeight = this.image.height;
		if(this.imageHeight > this.browserHeight-60) {
			var divider = this.imageHeight / (this.browserHeight-60);
			this.imageWidth = this.imageWidth/divider;
			this.imageHeight = this.browserHeight-60;
		}
		if(this.imageWidth > this.browserWidth-20) {
			var divider = this.imageWidth / (this.browserWidth-20);
			this.imageHeight = this.imageHeight/divider;
			this.imageWidth = this.browserWidth-20;
		}
		this.imageTop = ((this.browserHeight-this.imageHeight)/2)+this.browserScrollTop;
		this.imageLeft = ((this.browserWidth/2)-(this.imageWidth/2));
		if(this.options.text) this.imageTop -= 20;
		
		this.image.setStyles({
			'top': this.elementTop+"px",
			'left': this.elementLeft+"px",
			'width': this.elementWidth+"px",
			'height': this.elementHeight+"px",
			'z-index': '99',
			'display': 'inline'
		})
		document.body.appendChild(this.image);
	},
	zoom: function() {
		new Fx.Style(this.element,'opacity').set(0.2);
		var zoomImage = new Fx.Styles(this.image,{duration:this.options.duration});
		zoomImage.start({
			'top': [this.imageTop],
			'left': [this.imageLeft],
			'width': [this.imageWidth],
			'height': [this.imageHeight]
		});
	},
	defineText: function() {
		if(this.options.text) this.text = this.options.text;
		else if(this.options.altText == true) this.text = this.element.alt;
	},
	createBorder: function() {
		this.moognifyBorder = new Element('div', {
			'styles': {
				'position': 'absolute',
				'z-index': '98',
				'opacity': '0',
        'background-color': '#000',
				'top': this.imageTop-10+"px",
				'left': this.imageLeft-10+"px",
				'width': this.imageWidth+"px",
        'height': this.imageHeight+'px',
				'padding': '10px'
			},
			'class': 'moognifyBorder',
			'id': 'moognifyBorder'
		});
		document.body.appendChild(this.moognifyBorder);
		if(this.text) this.moognifyBorder.setText(this.text);
		new Fx.Style(this.moognifyBorder,'opacity',{duration: this.options.borderDuration}).start(this.options.borderOpacity);
    this.closelink.setStyles({
      'top': (this.imageTop-24)+"px",
      'left': (this.imageLeft+this.imageWidth)+"px"
    });
    new Fx.Style(this.closelink,'opacity',{duration: this.options.borderDuration}).start(1);
	},
	minimize: function(image,element,thisElement,options) {
		var moognifyBorder = $("moognifyBorder");
    new Fx.Style(moognifyBorder,'opacity',{duration: 200}).start(0).chain(function(){
		  moognifyBorder.remove();
    });
		var zoomImage = new Fx.Styles(image,{duration:options.duration,onComplete: function() {
			new Fx.Style(element,'opacity').set(1);
			if(thisElement) {
				thumb = thisElement;
			} else {
				thumb = "";
			}
			(function() { image.remove() }).delay(10);
		}});
		zoomImage.start({
			'top': [element.getCoordinates().top],
			'left': [element.getCoordinates().left],
			'width': [element.getCoordinates().width],
			'height': [element.getCoordinates().height]
		});
    $('lbOverlay').remove();
    $('lbCloseLink').remove();
    $('iframehack').remove();
	}
});
Moognify.implement(new Options);

window.addEvent('domready', function(){
  $$('.zoom').each(function(zoomel){
    zoomel.addEvent('click',function(e){
      new Event(e).stop();
      var imgsrc = zoomel.getProperty('href');
      var imgel = $E('img',$('resultat_fiche_img'));
      new Asset.images([imgsrc], {
        onComplete: function() {
          if (window.webkit419) {
            zoomel.setProperty('target','_blank');
          } else {
            new Moognify(zoomel.getChildren()[0],{duration:500, source: imgsrc, altText:false});
          }
        }
      });
    });
  });
});