var dpbox = new Class({
	getOptions: function(){
		return {
			'width': 400,
			'height': 200,
			'overlay': false,
			'draggable': true,
			'resizable': false,
			'centerOnResize': false,
			'type': 'element',
			'alertType': 'warning',
			'alertTitle': 'Aviso',
			'title': '',
			'element': '',
			'url': '',
			'text': '',
			'acceptText': 'Aceptar',
			'cancelText': 'Cancelar',
			'onAccept': function() { alert('ok') },
			'onCancel': function() {}
		}
	},
	
	initialize: function(options) {
		this.setOptions(this.getOptions(), options);
		
		if (this.options.type == 'element') {
			this.content = this.options.element;
			this.content.show();
		} else if (this.options.type == 'alert') {
			if (this.options.title == '') {
				this.options.title = this.options.alertTitle;
			};
			this.content = new Element('div').setProperties({
				'id': 'dpBoxContainer',
				'class': 'alert dpbox_'+this.options.alertType,
				'html': this.options.text
			});
			this.buttons = new Element('div').addClass('buttons').inject(this.content);
			if (this.options.alertType == 'warning') {
				this.aceptbtn = new Element('input').setProperties({
					'type': 'button',
					'value': this.options.acceptText,
					'class': 'button accept'
				}).inject(this.buttons);
				this.cancelbtn = new Element('input').setProperties({
					'type': 'button',
					'value': this.options.cancelText,
					'class': 'button cancel'
				}).inject(this.buttons);
				this.aceptbtn.addEvent('click', this.acept.bind(this));
				this.cancelbtn.addEvent('click', this.cancel.bind(this));
			} else {
				this.accept = new Element('input').setProperties({
					'type': 'button',
					'value': this.options.acceptText,
					'class': 'button accept'
				}).inject(this.buttons);
				this.accept.addEvent('click', this.close.bind(this));
			}
		} else if (this.options.type == 'iframe') {
			this.content = new Element('iframe').setProperties({
				'id': 'dpBoxContainer',
				'class': 'dpBoxIframe',
				'src': this.options.url,
				'height': this.options.height,
				'width': this.options.width,
				'frameborder': 0
			}).setStyles({
				'margin': 0,
				'padding': 0
			})
		} else if (this.options.type == 'request') {
			this.content = new Element('div').addClass('loading').setProperties({
				'id': 'dpBoxContainer'
			});
			var request = new Request({
				'method': 'get',
				'url': this.options.url,
				'onSuccess': function(responseText, responseXML) {
					$('dpBoxContainer').removeClass('loading');
					$('dpBoxContainer').set('html', responseText);
				},
				'onFailure': function(xhr) {
					alert(xhr);
				}
			});
			request.send();
		} else {
			alert('Tipo incorrecto');
			return false;
		}
		
		this.build();
		this.content.inject(this.container);
		
		this.open();
	},
	
	build: function() {
		this.box = new Element('div').addClass('dpbox').injectInside(document.body);
		this.box.fade('hide');
		
		this.leftside = new Element('div').addClass('left').inject(this.box);
		this.center = new Element('div').addClass('center').inject(this.box);
		this.rightside = new Element('div').addClass('right').inject(this.box);
		
		/* Izquierda */
		this.cornertopleft = new Element('div').addClass('top').inject(this.leftside);
		this.middleleft = new Element('div').addClass('middle').setStyle('height', this.options.height).inject(this.leftside);
		this.cornerbottomleft = new Element('div').addClass('bottom').inject(this.leftside);
		
		/* Derecha */
		this.cornertopright = new Element('div').addClass('top').inject(this.rightside);
		this.middleright = new Element('div').addClass('middle').setStyle('height', this.options.height).inject(this.rightside);
		this.cornerbottomright = new Element('div').addClass('bottom').inject(this.rightside);
		
		/* Centro */
		this.title = new Element('div').addClass('titlebar').setStyle('width', this.options.width).inject(this.center);
		this.container = new Element('div').addClass('content').setStyles({height: this.options.height, width: this.options.width}).inject(this.center);
		this.bottom = new Element('div').addClass('bottom').setStyle('width', this.options.width).inject(this.center)
		
		this.closebtn = new Element('div').addClass('closebutton').inject(this.title);
		this.title.appendText(this.options.title);
		
		this.box.position('center');
		
		this.closebtn.addEvent('click', this.close.bind(this));
		
		if (this.options.draggable == true) {
			this.box.makeDraggable({
				handle: this.title
			})
		};
		
		if (this.options.resizable) {
			this.cornerbottomright.addClass('resizable');
			this.box.makeResizable({
				handle: this.cornerbottomright,
				onDrag: resize.bind(this)
			})
		};
		
		function resize() {
			var size = this.box.getSize();
			this.title.setStyle('width', size.x-30);
			this.bottom.setStyle('width', size.x-30);
			this.middleleft.setStyle('height', size.y-60);
			this.middleright.setStyle('height', size.y-60);
			this.container.setStyles({width: size.x-30, height: size.y-60});
			this.content.setStyles({width: size.x-30, height: size.y-60});
			if (this.options.centerOnResize == true || this.options.draggable == false) {
				this.box.position('center');
			};
		}
		
	},
	
	request: function(url) {
		
	},
	
	open: function() {
		// OVERLAY
		this.overlay = this.options.overlay;
		if (this.overlay != false) {
			this.overlay.show();
			this.overlay.setOnClick(this.close.bind(this));
		}
		this.box.fade('in');
	},
	
	close: function(){
		if (this.overlay) {
			this.overlay.hide();
		};
		this.box.fade('out');
		
		this.remove.bind(this).delay('500');
	},
	
	remove: function(){
		if (this.options.type == 'element') {
			this.content.setStyle('display', 'none');
			this.content.inject(document.body);
		}
		this.box.dispose();
	},
	
	cancel: function(){
		this.options.onCancel();
		this.close(this);
	},
	
	acept: function(){
		this.options.onAccept();
		this.close(this);
	}
})
dpbox.implement(new Options);