window.addEvent('domready', function() {
		var toolbar = $E('div.en_ctrl_toolbar');
		toolbar.addEvent('mouseover', function() {
			JS_Rel_Controls_v1.doHide = false;
		});
		toolbar.addEvent('mouseout', function() {
			JS_Rel_Controls_v1.hideControls();
		});
		
		$E('#related_fields_controls a.en_ctrl_edit').addEvent('click', function() {
			var data = JS_Rel_Controls_v1.getCapturedElement().getProperty('ctrl_command');
			data = Json.evaluate(data);

			window.location.href = data.editLink;
		});
		
		$E('#related_fields_controls a.en_ctrl_remove').addEvent('click', function() {
			var data = JS_Rel_Controls_v1.getCapturedElement().getProperty('ctrl_command');
			data = Json.evaluate(data);

			// Send xajax delete request 
			xajax_jsCallPlugin.apply(null, data.deleteFunction);
			JS_Rel_Controls_v1.doHide = true;
			JS_Rel_Controls_v1._hideControlsImpl();
		});
	});

	/**
	 * Controls for related fields compact template
	 */
	var JS_Rel_Controls_v1 = {
		displayControls: function(targetElement) {
			var e = $(targetElement);
			var size = e.getSize();
			var pos = e.getPosition();

			var dX = pos.x;
			var dY = pos.y + size.scrollSize.y + 5;

			if (JS_Rel_Controls_v1.isIE8())
				dY -= 15;
			if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
				dY += 17;

			var c = JS_Rel_Controls_v1.getControls();
			c.setStyle('top', dY);
			c.setStyle('left', dX);
			c.setStyle('display', 'block');

			JS_Rel_Controls_v1.displaying = true;
			
			var data = JS_Rel_Controls_v1.getCapturedElement().getProperty('ctrl_command');
			data = Json.evaluate(data);
			
			var controls = $$('#related_fields_controls a');
			
			if (!data.controls.edit) {
				controls[ 0 ].setStyle('display', 'none');
			}
			else
				controls[ 0 ].setStyle('display', 'inline');

			if (!data.controls.del)
				controls[ 1 ].setStyle('display', 'none');
			else
				controls[ 1 ].setStyle('display', 'inline');
			
			// Adjust the | sign
			var delimiter = $E('#related_fields_controls span');
			
			if (data.controls.del && data.controls.edit) {
				//delimiter.setStyle('display', 'block');
				delimiter.setStyle('display', 'inline');
			}
			else
				delimiter.setStyle('display', 'none');
			
			JS_Rel_Controls_v1.doHide = false;
		},

		deleteControl: function (el) {
			el = $( el );

			var fx = new Fx.Style(el, 'opacity', {duration: 400});
			var fxW = new Fx.Style(el, 'width', {duration: 400});
			
			fx.start(1, 0).chain(function() {
				fxW.start(el.getProperty('offsetWidth'), 0).chain(function() {
					for (var i = el.getNext(); i; i = i.getNext()) {
						if (i.getProperty('rel') == 'delimiter') {
							i.remove();
							break;
						}
					}
					
					for (var i = el.getPrevious(); i; i = i.getPrevious()) {
						if (i.getProperty('rel') == 'delimiter') {
							i.remove();
							break;
						}
					}
					
					var d = new Element('span', {
						rel: 'delimiter',
						styles: {
							display: 'inline'
						}
					});
					d.setHTML(', ');
					d.injectBefore( el );
					
					el.remove();
				});
			});
		},

		hideControls: function() {
			JS_Rel_Controls_v1.doHide = true;
			if (!JS_Rel_Controls_v1.timer)
				JS_Rel_Controls_v1.timer = setInterval(JS_Rel_Controls_v1._hideControlsImpl, 500);
		},
		
		_hideControlsImpl: function() {
			if (JS_Rel_Controls_v1.doHide) {
				JS_Rel_Controls_v1.getControls().setStyle('display', 'none');
				JS_Rel_Controls_v1.displaying = false;
				JS_Rel_Controls_v1.doHide = false;
			}
			clearInterval(JS_Rel_Controls_v1.timer);
			JS_Rel_Controls_v1.timer = null;
		},

		getControls: function() {
			if (!JS_Rel_Controls_v1.controls) {
				var els = $$('div.en_ctrl_toolbar').each(function( e ) {
					if (e.getProperty('rel') == 'controlToolbar')
						JS_Rel_Controls_v1.controls = e;
				});
				// Move it outside of any containers, that may have 'position: relative" sytle
				JS_Rel_Controls_v1.controls.setStyle('position', 'absolute');
				JS_Rel_Controls_v1.controls.remove();
				JS_Rel_Controls_v1.controls.injectInside(document.body);
			}
			return JS_Rel_Controls_v1.controls;
		},

		captureElement: function( el ) {
			var old = JS_Rel_Controls_v1.capturedElement;
			JS_Rel_Controls_v1.capturedElement = el;
			
			return old;
		},

		getCapturedElement: function() {
			return JS_Rel_Controls_v1.capturedElement;
		},

		isIE8: function() {
		    var rv = null;

		    if (navigator.appName == 'Microsoft Internet Explorer') {
		        var ua = navigator.userAgent;
		        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

		        if (re.exec(ua) != null)
		            rv = parseFloat(RegExp.$1);
	            return rv >= 8.0;
		    }
		    return false;
		},
		
		controls: null,
		capturedElement: null,

		displaying: null,
		timer: null,
		doHide: false
	};