rlm@3: /*
rlm@3: Script: Additions.js
rlm@3: 	MooTools Additions - Various Helpers, Overlay-Class, Dialog-Class
rlm@3: 
rlm@3: License:
rlm@3: 	MIT-style license.
rlm@3: 
rlm@3: Copyright:
rlm@3: 	Copyright (c) 2009 [Christoph Pojer](http://og5.net/christoph).
rlm@3: 
rlm@3: Dependencies:
rlm@3: 	- MooTools Core 1.2.2
rlm@3: 	- MooTools More 1.2.2.1 or newer: Tips.js
rlm@3: 
rlm@3: Contains:
rlm@3: 	- FileManager.Tips: Augmented version of Tips for use within the FileManager
rlm@3: 	- FileManager.Request: Simple extension to request to always use the loader-icon specified by the FileManager instance
rlm@3: 	- Element.appearOn: Can be used to show an element when another is hovered: $(myElement).appearOn(myWrapper)
rlm@3: 	- Element.center: Centers an element
rlm@3: 	- Dialog, Overlay: Nice Classes used by the FileManager
rlm@3: */
rlm@3: 
rlm@3: if(!window.FileManager) var FileManager = {};
rlm@3: 
rlm@3: FileManager.Tips = new Class({
rlm@3: 	
rlm@3: 	Extends: Tips,
rlm@3: 	
rlm@3: 	options: {
rlm@3: 		offsets: {x: 15, y: 0},
rlm@3: 		text: null,
rlm@3: 		onShow: function(tip, el){
rlm@3: 			if(tip.get('opacity')==0.8 && tip.getStyle('visibility')=='visible') return;
rlm@3: 			
rlm@3: 			tip.get('tween').pause();
rlm@3: 			tip.set({
rlm@3: 				opacity: 0,
rlm@3: 				tween: {
rlm@3: 					duration: 200,
rlm@3: 					link: 'cancel'
rlm@3: 				}
rlm@3: 			}).fade(0.8);
rlm@3: 		},
rlm@3: 		
rlm@3: 		onHide: function(tip, el){
rlm@3: 			tip.get('tween').pause().start('opacity', 0).chain(function(){
rlm@3: 				tip.setStyle('left', 0);
rlm@3: 			});
rlm@3: 		}
rlm@3: 	},
rlm@3: 	
rlm@3: 	initialize: function(el, options){
rlm@3: 		this.parent(el, options);
rlm@3: 		this.tip.addClass('tip-filebrowser');
rlm@3: 	}
rlm@3: 	
rlm@3: });
rlm@3: 
rlm@3: FileManager.Request = new Class({
rlm@3: 	
rlm@3: 	Extends: Request.JSON,
rlm@3: 	
rlm@3: 	initialize: function(options, filebrowser){
rlm@3: 		this.parent(options);
rlm@3: 		
rlm@3: 		if(filebrowser)	this.addEvents({
rlm@3: 			request: filebrowser.onRequest.bind(filebrowser),
rlm@3: 			complete: filebrowser.onComplete.bind(filebrowser)
rlm@3: 		});
rlm@3: 	}
rlm@3: 	
rlm@3: });
rlm@3: 
rlm@3: Element.implement({
rlm@3: 	
rlm@3: 	appearOn: function(el, opacity, options){
rlm@3: 		opacity = $type(opacity) == 'array' ? [opacity[0] || 1, opacity[1] || 0] : [opacity || 1, 0];
rlm@3: 		
rlm@3: 		this.set({
rlm@3: 			opacity: opacity[1],
rlm@3: 			tween: options || {duration: 200}
rlm@3: 		});
rlm@3: 		
rlm@3: 		$(el).addEvents({
rlm@3: 			mouseenter: this.fade.bind(this, opacity[0]),
rlm@3: 			mouseleave: this.fade.bind(this, opacity[1])
rlm@3: 		});
rlm@3: 		
rlm@3: 		return this;
rlm@3: 	},
rlm@3: 	
rlm@3: 	center: function(offsets){
rlm@3: 		var scroll = document.getScroll(),
rlm@3: 			offset = document.getSize(),
rlm@3: 			size = this.getSize(),
rlm@3: 			values = {x: 'left', y: 'top'};
rlm@3: 		
rlm@3: 		if(!offsets) offsets = {};
rlm@3: 		
rlm@3: 		for(var z in values){
rlm@3: 			var style = scroll[z]+(offset[z]-size[z])/2+(offsets[z] || 0);
rlm@3: 			this.setStyle(values[z], style < 10 ? 10 : style);
rlm@3: 		}
rlm@3: 		
rlm@3: 		return this;
rlm@3: 	}
rlm@3: 	
rlm@3: });
rlm@3: 
rlm@3: var Dialog = new Class({
rlm@3: 	
rlm@3: 	Implements: [Options, Events],
rlm@3: 	
rlm@3: 	options: {
rlm@3: 		/*onShow: $empty,
rlm@3: 		onOpen: $empty,
rlm@3: 		onConfirm: $empty,
rlm@3: 		onDecline: $empty,
rlm@3: 		onClose: $empty,*/
rlm@3: 		request: null,
rlm@3: 		buttons: ['confirm', 'decline'],
rlm@3: 		language: {}
rlm@3: 	},
rlm@3: 	
rlm@3: 	initialize: function(text, options){
rlm@3: 		this.setOptions(options);
rlm@3: 		
rlm@3: 		this.el = new Element('div', {
rlm@3: 			'class': 'dialog dialog-engine-'+Browser.Engine.name+(Browser.Engine.trident ? Browser.Engine.version : ''),
rlm@3: 			opacity: 0,
rlm@3: 			tween: {duration: 250}
rlm@3: 		}).adopt([
rlm@3: 			$type(text)=='string' ? new Element('div', {text: text}) : text
rlm@3: 		]);
rlm@3: 		
rlm@3: 		if(this.options.content) this.el.getElement('div').adopt(this.options.content);
rlm@3: 		
rlm@3: 		Array.each(this.options.buttons, function(v){
rlm@3: 			new Element('button', {'class': 'dialog-'+v, text: this.options.language[v]}).addEvent('click', (function(e){
rlm@3: 				if(e) e.stop();
rlm@3: 				this.fireEvent(v).fireEvent('close');
rlm@3: 				this.overlay.hide();
rlm@3: 				this.destroy();
rlm@3: 			}).bind(this)).inject(this.el);
rlm@3: 		}, this);
rlm@3: 		
rlm@3: 		this.overlay = new Overlay({
rlm@3: 			'class': 'overlay overlay-dialog',
rlm@3: 			events: {click: this.fireEvent.bind(this, ['close'])},
rlm@3: 			tween: {duration: 250}
rlm@3: 		});
rlm@3: 		
rlm@3: 		this.bound = {
rlm@3: 			scroll: (function(){
rlm@3: 				if(!this.el) this.destroy();
rlm@3: 				else this.el.center();
rlm@3: 			}).bind(this),
rlm@3: 			keyesc: (function(e){
rlm@3: 				if(e.key=='esc') this.fireEvent('close').destroy();
rlm@3: 			}).bind(this)
rlm@3: 		};
rlm@3: 		
rlm@3: 		this.show();
rlm@3: 	},
rlm@3: 	
rlm@3: 	show: function(){
rlm@3: 		this.overlay.show();
rlm@3: 		var self = this.fireEvent('open');
rlm@3: 		this.el.setStyle('display', 'block').inject(document.body).center().fade(1).get('tween').chain(function(){
rlm@3: 			self.fireEvent('show');
rlm@3: 		});
rlm@3: 		
rlm@3: 		window.addEvents({
rlm@3: 			scroll: this.bound.scroll,
rlm@3: 			resize: this.bound.scroll,
rlm@3: 			keyup: this.bound.keyesc
rlm@3: 		});
rlm@3: 	},
rlm@3: 	
rlm@3: 	destroy: function(){
rlm@3: 		if(this.el) this.el.fade(0).get('tween').chain((function(){
rlm@3: 			this.overlay.destroy();
rlm@3: 			this.el.destroy();
rlm@3: 		}).bind(this));
rlm@3: 		
rlm@3: 		window.removeEvent('scroll', this.bound.scroll).removeEvent('resize', this.bound.scroll).removeEvent('keyup', this.bound.keyesc);
rlm@3: 	}
rlm@3: 	
rlm@3: }),
rlm@3: Overlay = new Class({
rlm@3: 	
rlm@3: 	initialize: function(options){
rlm@3: 		this.el = new Element('div', $extend({
rlm@3: 			'class': 'overlay'
rlm@3: 		}, options)).inject(document.body);
rlm@3: 	},
rlm@3: 	
rlm@3: 	show: function(){
rlm@3: 		this.objects = $$('object, select, embed').filter(function(el){
rlm@3: 			return el.id=='SwiffFileManagerUpload' || el.style.visibility=='hidden' ? false : !!(el.style.visibility = 'hidden');
rlm@3: 		});
rlm@3: 		
rlm@3: 		this.resize = (function(){
rlm@3: 			if(!this.el) this.destroy();
rlm@3: 			else this.el.setStyles({
rlm@3: 				width: document.getScrollWidth(),
rlm@3: 				height: document.getScrollHeight()
rlm@3: 			});
rlm@3: 		}).bind(this);
rlm@3: 		
rlm@3: 		this.resize();
rlm@3: 		
rlm@3: 		this.el.setStyles({
rlm@3: 			opacity: 0,
rlm@3: 			display: 'block'
rlm@3: 		}).get('tween').pause().start('opacity', 0.5);
rlm@3: 		
rlm@3: 		window.addEvent('resize', this.resize);
rlm@3: 		
rlm@3: 		return this;
rlm@3: 	},
rlm@3: 	
rlm@3: 	hide: function(){
rlm@3: 		this.el.fade(0).get('tween').chain((function(){
rlm@3: 			this.revertObjects();
rlm@3: 			this.el.setStyle('display', 'none');
rlm@3: 		}).bind(this));
rlm@3: 		
rlm@3: 		window.removeEvent('resize', this.resize);
rlm@3: 		
rlm@3: 		return this;
rlm@3: 	},
rlm@3: 	
rlm@3: 	destroy: function(){
rlm@3: 		this.revertObjects().el.destroy();
rlm@3: 	},
rlm@3: 	
rlm@3: 	revertObjects: function(){
rlm@3: 		if(this.objects && this.objects.length)
rlm@3: 			this.objects.each(function(el){
rlm@3: 				el.style.visibility = 'visible';	
rlm@3: 			});
rlm@3: 		
rlm@3: 		return this;
rlm@3: 	}
rlm@3: 	
rlm@3: });