var DialogBox = new Class({
	Implements: [Options, Events],
	options: {
		'width': 640,
		'height': 480,
		'overlay': {
			'opacity': 0.5,
			'background': '#000'
		},
		'limit': {x: [320, 800], y: [320,600]},
		'onShow': $empty,
		'onClose': $empty,
		'resizable': true,
		'url': '',
		'bottomGap': 0
	},
	initialize: function(element, options) {
		this.setOptions(options);
		
		this.element = element;
		if(this.options.url != '') {
			this.url = this.options.url;
		} else {
			this.url = this.element.get('href');
		}
		/* add show on click event*/
		this.element.addEvent('click', function() {
			this.show();
			return false;
		}.bind(this));
	},
	create: function() { // create the dialog box
		this.created = true;

		/* create overlay */
		this.overlay = new Element('div', {
			'class': 'overlay',
			'styles': {
				'position': 'absolute',
				'top': '0',
				'left': '0',
				'width': '100%',
				'background': this.options.overlay.background,
				'opacity': '0',
				'display': 'none',
				'zIndex': '1000'
			}
		}).inject(document.body);

		/* create container */
		this.container = new Element('div',{
			'class': 'dbox-container'
		}).inject(document.body);

		

		// add event to close (call fireEvent('close') on the div.dbox-container element
		this.container.addEvent('close', function() {
			this.close();
		}.bind(this));
		


		/* create top bar */
		this.bar = new Element('div', {
			'class': 'dbox-bar'
		}).inject(this.container);

		/* make it draggable */
		var myDrag = new Drag.Move(this.container, {
			handle: this.bar,
		
			onDrag: function(el) {
				el.setStyle('opacity','0.5');
			},
			onComplete: function(el) {
				el.setStyle('opacity','1');
			}
		});


		if(this.options.resizable) {
			/* create resize corner */
			this.resizer = new Element('div', {
				'class': 'dbox-resizer'
			}).inject(this.container);

			/* make it resizable */
			var myResize = this.container.makeResizable({
				handle: this.resizer,
				limit: this.options.limit,
				onStart: function(el) {
					el.setStyle('opacity','0.5');
					this.content.setStyle('opacity','0');
				}.bind(this),
				onComplete: function(el){
					el.setStyle('opacity','1');
					this.content.fade('in');
					this.reposition();
				}.bind(this)
			});
		}

		/* add close button */
		this.closeButton = new Element('a', {
			'class': 'dbox-bar-button dbox-close',
			'href': '#'			
		}).inject(this.container);
		this.closeButton.addEvent('click', this.close.bind(this));


		/* add close button */
		/*this.hideButton = new Element('a', {
			'class': 'dbox-bar-button dbox-hide',
			'href': '#'			
		}).inject(this.container);
		this.hideButton.addEvent('click', this.hide.bind(this));
*/
		/* create content box */
		this.content = new Element('div', {
			'class': 'dbox-content',
			'html': ''
		}).inject(this.container);
		
		/* position overlay */
		this.reposition();		

		/* add event on window resizing */
		 window.addEvent('resize', this.reposition.bind(this));
	},
	show: function() { // show the dialog box
		/* if dbox not created yet, do it */
		if(!this.created) {
			this.create();
		}
		

		this.active = true;

		/* show the loader */
		this.showLoader();

		this.startDim = this.element.getSize();
		this.startPos = this.element.getPosition();

		/* set container styles */
		this.container.setStyles({
			'width': this.startDim.x+'px',
			'height': this.startDim.y+'px',
			'left': this.startPos.x+'px',
			'top': this.startPos.y+'px',
			'display': 'block',
			'zIndex': '2000',
			'opacity': '0'
		});

		/* show content */
		this.content.setStyle('display','block');
		
		/* animation effect */
		this.fx = new Fx.Morph(this.container, {
			'duration': 500,
			'transition': Fx.Transitions.Sine.easeInOut
		});

		/* final positions */
		this.endPos.x = ((window.getSize().x - this.options.width)/2);
		this.endPos.y = ((window.getSize().y - this.options.height)/2) + window.getScroll().y;

		
		if(this.endPos.y < 0) {
			this.endPos.y = 30;
		}

		/* show overlay */
		this.overlay.setStyle('display','block');		
		this.overlayFx = new Fx.Tween(this.overlay, {
			'duration': 500,
			'transition': Fx.Transitions.Sine.easeInOut
		});
		this.overlayFx.start('opacity', this.options.overlay.opacity);

		/* show dbox */
		this.fx.start({
			'opacity': '1',
			'width': this.options.width+'px',
			'height': this.options.height+'px',
			'top': this.endPos.y+'px',
			'left': this.endPos.x+'px'
		});
		
	   this.fireEvent('show');
	   this.bar.getChildren('h3.dbox-title').destroy();
	   this.doRequest(this.url);
	},
	update: function(url) {
		this.showLoader();
		this.doRequest(url);
	},
	doRequest: function(url) {
		this.content.setStyle('opacity', '0');
		this.content.setStyle('display', 'none');
		var request = new Request.HTML({
			url: url,
			method: 'post',
			update: this.content,
			evalScripts: true,
			onComplete: function() {
				(function() {
					this.hideLoader();
					this.content.fade('in');
					this.reposition();
					this.setTitle();
			  }.bind(this)).delay(1000);
			}.bind(this)
		}).send();
	},
	hide: function() { // hide dialog box
		
		this.fx.start({
			'width': '200px',
			'height': '30px',
			'top': this.startPos.y+'px',
			'left': this.startPos.x+'px'
		});
		this.overlayFx.start('opacity', '0');
		this.fx.addEvent('complete', function() {
			this.container.setStyle('display','none');
			this.overlay.setStyle('display','none');
		}.bind(this));
		return false;
	},
	close: function() { // close dialog box
		if(this.active) {
			// fire event onClose
			this.fireEvent('close');
			//this.content.setStyle('height','auto');
			this.content.setStyle('display','none');
			/* close dbox */
			if(this.element.getSize().x == 0 && this.element.getSize().y == 0) {
				this.fx.start({
					'opacity': '0',
					'width': '0px',
					'height': '0px',
					'top': (window.getSize().y/2)+ window.getScroll().y+'px',
					'left': (window.getSize().x/2)+'px'
				});
			} else {
				this.fx.start({
					'opacity': '0',
					'width': this.startDim.x+'px',
					'height':this.startDim.y+'px',
					'top': this.startPos.y+'px',
					'left': this.startPos.x+'px'
				});
			}
			
			this.fx.addEvent('complete', function() {
				this.container.setStyle('display','none');
				this.content.empty();
				this.active = false;
			}.bind(this));
			this.overlayFx.start('opacity', '0');

		
			return false;
		}
	},
	showLoader: function() {
		// empty content
		this.content.empty();
		this.content.hide();
		/* create loader icon */
		this.loader = new Element('div', {
			'class': 'dbox-loader'
		}).inject(this.container);
	},
	hideLoader: function() {		
		this.loader.destroy();
		this.content.show();
	},
	reposition: function() {
		
		this.overlay.setStyles({
			'height': window.getScrollSize().y+'px'
		});
		this.startDim = this.element.getSize();
		this.startPos = this.element.getPosition();

		var h = this.container.getSize().y - 34 - this.options.bottomGap;

		if(h > 0) {
			this.content.setStyle('height', h+'px');
		}
	},
	setTitle: function() {

			
		this.title = this.content.getElement('h3.dbox-title');
		// fix for when title content is empty
		if(!this.title || this.title.get('html') == '') {
			
			this.title = this.content.getElement('h3.dbox-title');
		}

		if(this.title) {
			this.title.inject(this.bar).setStyles({
				'display': 'block',
				'marginLeft': this.title.getSize().x+'px'
			});
			var titleFx = new Fx.Tween(this.title, {'duration': 1000});
			titleFx.start('marginLeft', '0px');
		}

		
	},
	'created': false,
	'element': null,
	'container': null,
	'startPos': {},
	'startDim': {},
	'endPos': {},
	'fx': null,
	'overlayFx': null,
	'active': false,
	'overlay': null,
	'bar': null,
	'resizer': null,
	'content': null,
	'closeButton': null,
	'hideButton': null,
	'hiddenTab': null,
	'loader': null,
	'title': null,
	'url': ''
});


var ConfirmBox = new Class({
	Extends: DialogBox,
	options: {
		'width': 320,
		'height': 160,
		'resizable': false,
		'texts': {
			'title': 'Confirmation',
			'message': 'Souhaitez-vous continuer ?',
			'cancel': 'Annuler',
			'ok': 'OK'
		},
		'bottomGap': 30,
		'onConfirm': $empty
	},
	initialize: function(element, options) {		
		this.parent(element, options);
		
	},
	create: function() {
		this.parent();
		this.container.addClass('cbox-container');
	},
	doRequest: function() {
		this.title = new Element('h3',{ 'class': 'dbox-title', 'text': this.options.texts.title });
		this.message = new Element('p', {
			'class': 'cbox-message',
			'text': this.options.texts.message
		}).inject(this.content);

		/* action menu */
		this.actionMenu = new Element('ul', {'class':'cbox-action-menu'}).inject(this.content);
		var liCancel = new Element('li', {'class':'cbox-cancel'}).inject(this.actionMenu);
		var liOk = new Element('li',{'class':'cbox-ok'}).inject(this.actionMenu);
		/* Cancel button */
		this.cancel = new Element('a', {
			'events': {
				'click': this.close.bind(this)
			},
			'text': this.options.texts.cancel,
			'href':''
		}).inject(liCancel);

		/* ok button */
		this.ok = new Element('a', {			
			'events': {
				'click': this.proceedOk.bind(this)
			},
			'text': this.options.texts.ok,
			'href':''
		}).inject(liOk);


		this.content.addClass('cbox-content');

		this.content.setStyle('opacity', '0');
		this.content.setStyle('display', 'none');
		this.hideLoader();
		this.content.fade('in');
		
		this.setTitle();
		this.reposition();
		return false;
	},
	proceedOk: function() {
		this.content.setStyle('opacity', '0');
		this.content.hide();
		this.showLoader();
		this.actionMenu.destroy();
		
		new Request({
			url: this.url,
			method: 'post',
			onSuccess: function(response) {				
				(function() { this.showResponse(JSON.decode(response))}.bind(this)).delay(1000);
			}.bind(this)
		}).send();

		return false;
	},
	showResponse: function(json) {
		this.hideLoader();
		if(json.status == 'SUCCESS') {
			this.message.addClass('cbox-success');
			this.message.set('text', json.message);
			this.fireEvent('confirm');
		} else {
			this.message.addClass('cbox-error');
			this.message.set('text', json.message);
		}

		this.message.inject(this.content);

		this.content.fade('in');		
		this.reposition();
		(function() {
			this.close();
		}.bind(this)).delay(1500);
	},
	reposition: function() {

		this.overlay.setStyles({
			'height': window.getScrollSize().y+'px'
		});
		this.startDim = this.element.getSize();
		this.startPos = this.element.getPosition();

		var h = this.options.height - 34;
		if(h > 0) {
			this.content.setStyle('height', h+'px');
		}
	},
	message: null,
	cancel: null,
	ok: null,
	actionMenu: null

});


var ImageBox = new Class({
	Extends: DialogBox,
	options: {
		'width': 160,
		'height': 160,
		'resizable': false,
		'draggable': true,
		'onConfirm': $empty,
		'img': '',
		'overlay': {
			'opacity': 0.2,
			'background': '#fff'
		}
	},
	initialize: function(element, options) {
		this.setOptions(options);

		this.element = element;

		if(this.options.img != '') {
			this.img = this.options.img;
		} else {
			if(this.element.get('src') != '') {
				this.img = this.element.get('src');
			} else {
				this.img = this.element.get('href');
			}
		}

		this.element.setStyle('cursor','pointer');
		/* add show on click event*/
		this.element.addEvent('click', function() {
			this.show();
			return false;
		}.bind(this));



	},
	create: function() {
		this.parent();
		this.overlay.addEvent('click', function() {
			this.close();
		}.bind(this));
		this.container.addClass('ibox-container');
	},

	doRequest: function(url) {

		this.content.setStyle('opacity', '0');
		this.content.setStyle('display', 'none');

		new Asset.image(this.img, {
			onload: this.initImage.bind(this)
		});



	},
	initImage: function() {

		this.content.show();

		this.image = new Element('img', {
			'src': this.img,
			'styles': {
				'margin': '0 auto'
			}
		}).inject(this.content);
	
		//var size = this.image.getSize();
		var size = {
			x: this.image.width,
			y: this.image.height
		};

		this.content.hide();

		size.y += 34;
		size.x += 5;

		this.options.width = size.x;
		this.options.height = size.y;

		this.showImage(size);
	},
	showImage: function(size) {
		this.fx.cancel();
		/* final positions */
		this.endPos.x = ((window.getSize().x - size.x)/2) ;
		this.endPos.y = ((window.getSize().y - size.y)/2) + window.getScroll().y;

		this.fx.addEvent('complete', function() {
			this.hideLoader();
			this.content.fade('in');
			this.reposition();

		}.bind(this));
		/*  resize dbox */

		this.fx.start({
			'opacity': 1,
			'width': size.x+'px',
			'height': size.y+'px',
			'top': this.endPos.y+'px',
			'left': this.endPos.x+'px'
		});

	},
	image: null
});