Event.observe(window, 'load', function() {
	if ($('profile-rightcontent')) {
		Sortable.create('profile-rightcontent', {
			tag: 'div',
			onUpdate: function(element)
			{
				var orderedList = $('profile-rightcontent').getElementsByClassName('ep_Profile_ProfileBox');
				var orderList = new Array(orderedList.length);
				for (var i = 0; i < orderedList.length; i++)
				{
					orderList[i] = orderedList[i].id;
				}
				new Ajax.Request('/cgi/faroes/profile_order', {
					method: 'post',
					parameters: "order="+orderList.toJSON()
				});
			}
		});
	}	
});

function initDetailsDialog()
{
	$('profile-name').value = $('display-name').innerHTML;
	$('profile-location').value = $('display-location').innerHTML;
	$('profile-occupation').value = $('display-occupation').innerHTML;
	$('profile-interests').value = $('display-interests').innerHTML;
	$('profile-url').value = $('display-url').innerHTML;
}

function updateMyDetails()
{
	$('display-name').innerHTML = $('profile-name').value;
	$('display-location').innerHTML = $('profile-location').value;
	$('display-occupation').innerHTML = $('profile-occupation').value;
	$('display-interests').innerHTML = $('profile-interests').value;
	$('display-url').innerHTML = $('profile-url').value;
	$('display-url').href = $('profile-url').value;
	$('display-url').onclick = function() { window.open($('display-url').href); return false;} 
}

var Dialog = {};
Dialog.Box = Class.create();
Object.extend(Dialog.Box.prototype, {
	initialize: function(id) {
		this.createOverlay();
		
		this.dialog_box = $(id);
		this.dialog_box.show = this.show.bind(this);
		this.dialog_box.hide = this.hide.bind(this);
		
		this.parent_element = this.dialog_box.parentNode;

		this.dialog_box.style.position = "absolute";
		
		var e_dims = Element.getDimensions(this.dialog_box);
		var b_dims = Element.getDimensions(this.overlay);

		this.dialog_box.style.left = ((b_dims.width/2) - (e_dims.width/2)) + 'px';
		this.dialog_box.style.top = ((this.viewportHeight() - (e_dims.width/2))/2) + 'px';
		this.dialog_box.style.zIndex = this.overlay.style.zIndex + 1;
	},
	
	createOverlay: function() {
		if ($('dialog_overlay')) {
			this.overlay = $('dialog_overlay');
		} else {
			this.overlay = document.createElement('div');
			this.overlay.id = 'dialog_overlay';
			Object.extend(this.overlay.style, {
				margin: 0,
				padding: 0,				
				position: 'absolute',
				top: 0,
				left: 0,
				zIndex: 90,
				width: '100%',
				backgroundColor: '#000',
				display: 'none',
				overflow: 'hidden'
			});
			document.body.appendChild(this.overlay);
		}
	},
	
	moveDialogBox: function(where) {
		Element.remove(this.dialog_box);
		if (where == 'back')
			this.dialog_box = this.parent_element.appendChild(this.dialog_box);
		else
			this.dialog_box = this.overlay.parentNode.insertBefore(this.dialog_box, this.overlay);	
	},
	
	show: function(modal) {
		modal = modal || false;	
	
		//this.overlay.style.height = document.height+'px';
		this.moveDialogBox('out');
	
		this.overlay.style.height = this.pageHeight()+'px';
	
		if (!modal)	
			this.overlay.onclick = this.hide.bind(this);

		this.selectBoxes('hide');
		new Effect.Appear(this.overlay, {duration: 0.1, from: 0.0, to: 0.3});

		this.dialog_box.style.display = '';
		this.dialog_box.style.left = '0px';
		var e_dims = Element.getDimensions(this.dialog_box);
		this.dialog_box.style.left = ((this.viewportWidth()/2) - (e_dims.width)/2) + 'px';
	},
	
	hide: function() {
		this.selectBoxes('show');
		new Effect.Fade(this.overlay, {duration: 0.1});
		this.dialog_box.style.display = 'none';
		this.moveDialogBox('back');

		// If we set the dialog as not being modal then we want to clear
		// the onlick method from the overlay if we want it to be modal
		// later on.
		this.overlay.onclick = null;
		
		$A(this.dialog_box.getElementsByTagName('input')).each(function(e) {			
			if(e.type != 'submit' && e.type != 'button')
				e.value = '';
		});
	},
	
	selectBoxes: function(what) {
		$A(document.getElementsByTagName('select')).each(function(select){Element[what](select);});
		if (what=='hide')
			$A(this.dialog_box.getElementsByTagName('select')).each(function(select){Element.show(select)})
	},
	
	viewportWidth: function() {
		var viewportwidth;
		if (typeof window.innerWidth != 'undefined')
		{
			viewportwidth = window.innerWidth;
		}
		else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
		{
			viewportwidth = document.documentElement.clientWidth;
		}
		else
		{
			viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
		}
		return viewportwidth;
	},
	
	viewportHeight: function() {
		var viewportheight;
		if (typeof window.innerHeight != 'undefined')
		{
			viewportheight = window.innerHeight;
		}
		else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientHeight != 'undefined' && document.documentElement.clientHeight != 0)
		{
			viewportheight = document.documentElement.clientHeight;
		}
		else
		{
			viewportheight = document.getElementsByTagName('body')[0].clientHeight;			
		}
		return viewportheight;
	},
	
	pageHeight: function() {
		var pageHeight = 0;
		if (self.innerHeight)
		{
			pageHeight = self.innerHeight;
		}
		else if (document.documentElement && document.documentElement.clientHeight)
		{
			pageHeight = document.documentElement.clientHeight;
		}
		if (document.body)
		{
			if (document.body.clientHeight > pageHeight)
				pageHeight = document.body.clientHeight;
		}
		/*if (window.innerHeight && window.scrollMaxX) {
			pageHeight = window.innerHeight + window.scrollMaxX;
		} else if (document.body.scrollHeight > document.body.offsetHeight) {
			pageHeight = document.body.scrollHeight;
		} else {
			pageHeight = document.body.offsetHeight;
		}*/
		
		return pageHeight;
	},	
	
	viewportVerticalOffset: function() {
		return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
	}
});