/*
	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({
	Implements: Options,
	options:  {
		duration: 300,
		borderDuration: 200,
		borderOpacity: 0.8,
		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.image.addEvent('click', this.minimize.bind("",[this.image,this.element,"",this.options]));
	},
	storeCoordinates: function() {
		this.elementTop = $(this.element).getPosition().y;
		this.elementLeft = $(this.element).getPosition().x;
		this.elementWidth = $(this.element).getSize().x;
		this.elementHeight = $(this.element).getSize().y;
		this.browserWidth = document.getSize().x;
		this.browserHeight = document.getSize().y;
		this.browserScrollTop = document.getScroll().y;
	},
	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.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 {
			new Fx.Tween(this.element).set('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.Tween(this.element).set('opacity',0.2);
		var zoomImage = new Fx.Morph(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',
				'top': this.imageTop-10+"px",
				'left': this.imageLeft-10+"px",
				'width': this.imageWidth+"px",
				'padding': this.imageHeight+20+'px 10px 10px 10px'
			},
			'class': 'moognifyBorder',
			'id': 'moognifyBorder'
		});
		document.body.appendChild(this.moognifyBorder);
		if(this.text) this.moognifyBorder.set('text',this.text);
		new Fx.Tween(this.moognifyBorder,{duration: this.options.borderDuration}).start('opacity',this.options.borderOpacity);
	},
	minimize: function(image,element,thisElement,options) {
	
		var moognifyBorder = $("moognifyBorder");
		moognifyBorder.dispose();
		var zoomImage = new Fx.Morph(image,{duration:options.duration,onComplete: function() {
			new Fx.Tween(element).set('opacity',1);
			if(thisElement) {
				thumb = thisElement;
			} else {
				thumb = "";
			}
			(function() { image.dispose() }).delay(10);
		}});
		zoomImage.start({
			'top': [element.getPosition().y],
			'left': [element.getPosition().x],
			'width': [element.getSize().x],
			'height': [element.getSize().y]
		});
	}
});