
	/**
	 * Пользовательский интерфейс
	 * 
	 * @author Alexander Osin, dev.majesty@gmail.com
	 * @package MajUi
	 */
	var majUi = {};
	
	/**
	 * Перетягивание элемента
	 */
	majUi.draggable = new Class({
		Implements: [Options],
		options: {
			element: false,
			holder: false
		},
		is_dragging: false,
		initialize: function(options)
		{
			this.setOptions(options);
			
			var object  = this;
			var element = this.options.element;
			var holder  = this.options.holder;
			
			var coords = element.getCoordinates();
			element.setStyle('left', coords.left-element.getStyle('margin-left').toInt());
			element.setStyle('top', coords.top-element.getStyle('margin-top').toInt());
			element.setStyle('right', 'auto');
			element.setStyle('bottom', 'auto');
			
			var current = { x: element.getStyle('left').toInt(), y: element.getStyle('top').toInt() };
			
			function move(e, axis, prop, start, end)
			{
				var documentSize = document.getSize();
				var elementSize  = element.getSize();
				var i = e.page[axis] - object.is_dragging[axis];
				var pos = current[axis]+i;
				
				var limitStart = 0-element.getStyle('margin-'+start).toInt();
				var limitEnd   = documentSize[axis]-elementSize[axis]-element.getStyle('margin-'+start).toInt();
				if(pos < limitStart)
				{
					element.setStyle(start, limitStart);
				}
				else if(pos > limitEnd)
				{
					element.setStyle(start, limitEnd);
				}
				else
				{
					element.setStyle(start, pos);				
				}
			}
			
			document.addEvent('mousemove', function(e){
				if (!object.is_dragging) return false;
				
				move(e, 'x', 'w', 'left', 'right');
				move(e, 'y', 'h', 'top', 'bottom');
			});
			
			holder.addEvent('mousedown', function(e){
				e.preventDefault();
				object.is_dragging = e.page;
				element.addClass('majWidget-dragging');
			});
			
			document.addEvent('mouseup', function(){
				object.is_dragging = false;
				element.removeClass('majWidget-dragging');
				
				current = { x: element.getStyle('left').toInt(), y: element.getStyle('top').toInt() };
			});
		}
	});
	
	/**
	 * Изменение размеров элемента
	 */
	majUi.resizable = new Class({
		Implements: [Options],
		options: {
			element: false,
			container: false,
			min_width: 100,
			min_height: 60,
			callback: function(){}
		},
		corners: {
			l: false,
			r: false,
			t: false,
			b: false,
			tl: false,
			tr: false,
			bl: false,
			br: false
		},
		is_dragging: false,
		way: false,
		initialize: function(options)
		{
			this.setOptions(options);
			
			var element   = this.options.element;
			var container = this.options.container ? this.options.container : element;
			
			this._createCorners(element, container);
		},
		_createCorners: function(element, container)
		{
			var object = this;
			var elementSize = element.getSize();
			var containerSize = container.getSize();
			var documentSize = document.getSize();
			
			var coords = container.getCoordinates();
			var dif = {x: 0, y: 0};
			var current = { x: coords.left, y: coords.top };
			var margin = {left: container.getStyle('margin-left').toInt(), top: container.getStyle('margin-top').toInt()};
			
			this.corners.t = new Element('div').addClass('majUi-resize-t').inject(element, 'top');
			this.corners.b = new Element('div').addClass('majUi-resize-b').inject(element, 'bottom');
			
			this.corners.l = new Element('div').addClass('majUi-resize-l').inject(element, 'top');
			this.corners.r = new Element('div').addClass('majUi-resize-r').inject(element, 'top');
			
			this.corners.tl = new Element('div').addClass('majUi-resize-tl').inject(this.corners.t, 'top');
			this.corners.tr = new Element('div').addClass('majUi-resize-tr').inject(this.corners.t, 'bottom');
			
			this.corners.bl = new Element('div').addClass('majUi-resize-bl').inject(this.corners.b, 'top');
			this.corners.br = new Element('div').addClass('majUi-resize-br').inject(this.corners.b, 'bottom');
			
			function resizeStart(e, way)
			{
				e.preventDefault();
				var coords = container.getCoordinates();
				current = { x: coords.left, y: coords.top };
				elementSize = element.getSize();
				containerSize = container.getSize();
				margin = {left: container.getStyle('margin-left').toInt(), top: container.getStyle('margin-top').toInt()};
				object.is_dragging = e.page;
				object.way = way;
				return false;	
			}
			
			this.corners.t.addEvent('mousedown', function(e){return resizeStart(e, 'top');});
			this.corners.b.addEvent('mousedown', function(e){return resizeStart(e, 'bottom');});
			this.corners.l.addEvent('mousedown', function(e){return resizeStart(e, 'left');});
			this.corners.r.addEvent('mousedown', function(e){return resizeStart(e, 'right');});
			this.corners.tl.addEvent('mousedown', function(e){return resizeStart(e, 'top_left');});
			this.corners.tr.addEvent('mousedown', function(e){return resizeStart(e, 'top_right');});
			this.corners.bl.addEvent('mousedown', function(e){return resizeStart(e, 'bottom_left');});
			this.corners.br.addEvent('mousedown', function(e){return resizeStart(e, 'bottom_right');});
			
			var resize = {
				top: function(e) {
					dif.y = object.is_dragging.y - e.page.y;
					if (elementSize.y + dif.y <= object.options.min_height)
					{
						return false;
					} 
					
					if(current.y-dif.y < 0)
					{
						container.setStyle('margin-top', margin.top-current.y);
						element.setStyle('height', elementSize.y + current.y);
					}
					else
					{
						container.setStyle('margin-top', margin.top-dif.y);
						element.setStyle('height', elementSize.y + dif.y);
					}
				},
				bottom: function(e) {
					dif.y = e.page.y - object.is_dragging.y;
					if (elementSize.y + dif.y <= object.options.min_height)
					{
						return false;
					}
					
					var wrapDif = containerSize.y-elementSize.y;
					if(current.y+dif.y+elementSize.y+wrapDif*2 > documentSize.y)
					{
						element.setStyle('height', documentSize.y-current.y-wrapDif);
					}
					else
					{
						element.setStyle('height', elementSize.y + dif.y);
					}
				},
				left: function(e) {
					dif.x = object.is_dragging.x - e.page.x;
					if (elementSize.x + dif.x <= object.options.min_width)
					{
						return false;
					} 
					
					if(current.x-dif.x < 0)
					{
						container.setStyle('margin-left', margin.left-current.x);
						element.setStyle('width', elementSize.x + current.x);
					}
					else
					{
						container.setStyle('margin-left', margin.left-dif.x);
						element.setStyle('width', elementSize.x + dif.x);
					}
				},
				right: function(e) {
					dif.x = e.page.x - object.is_dragging.x;
					if (elementSize.x + dif.x <= object.options.min_width)
					{
						return false;
					}
					
					var wrapDif = containerSize.x-elementSize.x;
					if(current.x+dif.x+elementSize.x+wrapDif*2 > documentSize.x)
					{
						element.setStyle('width', documentSize.x-current.x-wrapDif);
					}
					else
					{
						element.setStyle('width', elementSize.x + dif.x);
					}
				},
				top_left: function(e) { this.top(e); this.left(e); },
				top_right: function(e) { this.top(e); this.right(e); },
				bottom_left: function(e) { this.bottom(e); this.left(e); },
				bottom_right: function(e) { this.bottom(e); this.right(e); }
			};
			
			document.addEvent('mousemove', function(e){
				if (!resize[object.way]) return true;
				resize[object.way](e);
				object.options.callback(object);
			});
			
			document.addEvent('mouseup', function(){
				object.way = false;
				object.is_dragging = false;
			});
		}
	});
