// JavaScript Document
/* Popper Class beta 1
by: Jeffrey "Jepoy" T. Go
Global Smartsourcing Inc.

turns a div element into a popup div.

File requirements:
- mootools.js (Mootools core) - see mootools.net for code download
- mootools-more.js (particularly Drag/Drag.Move Plugin) - see mootools.net for code download

syntax:

var mypops = new Popper(el, name, [options]);

parameters:

el (element): Element to turn into popup
name (string): id of the container to be placed with Element (el) specified

[options]:

 - url (string): URL to be loaded in the Element (el)
 - draggable (boolean [default: true]): make the popup draggable
 - resizable (boolean [default: true]): make the popup resizable, you need to specify a css rule "div.resizer" which describes the size of the resize handler (width/height), and the background.
 - loadURLOnInit (boolean [default: false]): loads the indicated url option to load when initialization of this plugin if value is true, otherwise, it won't load the indicated url until this component executes openPop/togglePop method
 - getElCoords (boolean [default: true]): gets the specified Element's coordinates (x,y,width,height) and put it on the popup component when opened
 - centerToScreen (boolean [default: false]): place the popup component on the center of the page when popped up
 - styles (object (css)): customization of your popup component
 	e.g.
		styles: {
			'background-color': '#F0F0F0',
			'border': '1px solid #000'
		}
	Well, you know the idea of css ruling, right? XD
*/
var Popper = new Class({
    Implements: [Options],
	
	options: {
		el: new Element('div'),
		url: '',
		name: '',
		draggable: true,
		resizable: true,
		styles: {
			'background-color': '#EEE',
			'border': 'none',
			'width': '100px',
			'height': '100px'
		},
		loadURLOnInit: false,
		getElCoords: true,
		centerToScreen: false
	},
	
	initialize: function(el, name, options){
		this.setOptions(options);
		this.options.name = name;
		this.options.el = el;
		this.URLisloaded = false;
		//hash tweak
		this.options.styles = new Hash(this.options.styles);
		this.options.styles.extend({'position': 'absolute','overflow': 'hidden', 'z-index': 13000});
		
		//create main container
		
		this.el_inside = new Element('div', {styles: {'padding': '10px', 'overflow': 'hidden'}});
		this.el_container = new Element('div', {id: this.options.name, styles: this.options.styles});
		this.origprops = this.options.el.getCoordinates();

		if (this.options.getElCoords){

			this.el_container.set('styles', {top: this.origprops.top, left: this.origprops.left, width: this.origprops.width, height: (this.origprops.height+31)});
		}

		this.options.el.setStyles({width: "auto", height: "auto", position: "static", top: "auto", left: "auto", right: "auto", bottom: "auto"});
		this.options.el.setStyles({visibility: "visible", display: "block"});
		if(this.options.loadURLOnInit && this.options.url != '') this.loadItIn();

		// add topbar (the one with close button)
		this.topbar = new Element('div', {
			'class': 'mytopbar',
			'styles':{'height': '11px', 'text-align': 'right', 'font-family': "Verdana, Arial, sans, serif", 'font-size': '10px', 'font-weight': 'bold'}
		});
		//assemble

		this.topbar.inject(this.el_inside);
		this.el_container.injectInside(this.options.el.getParent());
		this.origprops = this.el_container.getCoordinates();
		this.options.el.inject(this.el_inside);

		this.el_inside.inject(this.el_container);

		// add resize thingy (the one on the lower right), if activated
		if (this.options.resizable){
			this.draggy = new Element('div', {
				'class': 'resizer',
				'styles':{
					'right': 0,
					'bottom': 0,
					'position': 'absolute',
					'z-index': 13001,
					'line-height': '1px'
				}
			}).appendText(' ');
			this.draggy.injectInside(this.el_container);
		}
		this.myclosebut = new Element('a', {
			'href': 'javascript:',
			'id': 'closeb',
			'styles': {
				'text-decoration': 'none',
				'color': this.el_container.getStyle("color")
			}
		}).set('text', 'x');

		this.myclosebut.inject(this.topbar);
		//this.el_container.setStyle('margin', '0 auto');

		//this.origprops.height += this.topbar.getStyle('padding-top').toInt() * 2;
		//this.elin.injectInside(this.el);

		this.el_container.setStyle("width", 0);
		this.el_container.setStyle("height", 0);

		//this.el_container.setStyle("display", "none");
		this.el_container.setStyle("top", this.origprops.top);
		this.el_container.setStyle("left", this.origprops.left);
		this.miniprops = this.el_container.getCoordinates();
		this.exposed = false;

		this.myeffectA = new Fx.Morph(this.el_container.get('id'), {duration: 700, transition: Fx.Transitions.Back.easeOut});
		this.myeffectB = new Fx.Morph(this.el_container.get('id'), {duration: 700, transition: Fx.Transitions.Expo.easeOut});
		this.myeffect = this.myeffectA;
		var p = this;
		if (this.options.resizable){
			this.el_container.makeResizable({
				handle: this.draggy
			});
		}
		if (this.options.draggable){
			this.myDrag = new Drag(this.el_container.get('id')).detach();
			if (this.options.resizable){
				this.draggy.addEvent('mousedown', function(){
					p.myDrag.detach();
				});
				this.draggy.addEvent('mouseup', function(){
					p.myDrag.attach();
				});
			}
		}
		this.myclosebut.addEvent('click', function(e){
			p.closePop(e.target.id);
		});
		this.el_container.setStyle('display', 'none');
	},
	
	loadItIn: function(){
		if (!this.URLisloaded){
		var p = this;
		this.ajaxhandler = new Request.HTML({url: this.options.url, onSuccess: function(s){
			p.options.el.innerHTML = "";
			p.options.el.adopt(s);
		}}).send();
		this.URLisloaded = true;
		}
	},
	
	togglePop: function(ob){
		if (!this.exposed){
			this.openPop(ob);
		}else{
			this.closePop();
		}
	},
	
	executeTween: function(){
		var p = this;
		this.myeffect.cancel();
		this.myeffect.start({
			'height': this.destheight,
			'width': this.destwidth,
			'top': this.desty,
			'left': this.destx
		}).chain(function(){
			if (!p.exposed){
				p.el_container.setStyle('display', 'none');
			}
		});
	},
	
	openPop: function(ob, url){
		var obj = $(ob);
		var p = this;
		this.el_container.setStyle('display', 'block');
		this.parentobj = obj;
		var objcoords = this.parentobj.getCoordinates();
		this.el_container.setStyles({top: objcoords.top, left: objcoords.left});
		if (this.options.centerToScreen){
			this.destx = (window.getSize().x-this.origprops.width)/2;
			this.desty = 200;
		}else{
			this.destx = this.origprops.left;
			this.desty = this.origprops.top;
		}

		this.destwidth = this.origprops.width;
		this.destheight = this.origprops.height;
		if (this.options.draggable) this.myDrag.attach();
		this.myeffect = this.myeffectA;
		/*this.timm = (function(){
			p.origprops = p.el_container.getCoordinates();
		}).periodical(20);*/
		this.exposed = true;
		if ($chk(url)){
			this.options.url = url;
			this.URLisloaded = false;
		}
		if((!this.options.loadURLOnInit && this.options.url != '') || $chk(url)) this.loadItIn();
		this.executeTween();
	},
	
	closePop: function(){
		var objcoords = this.parentobj.getCoordinates();
		this.destx = objcoords.left;
		this.desty = objcoords.top;
		this.destwidth = this.miniprops.width;
		this.destheight = this.miniprops.height;
		if (this.options.draggable) this.myDrag.detach();
		this.myeffect = this.myeffectB;
		$clear(this.timm);
		this.exposed = false;
		this.executeTween();
	}
});