var AvatarFragmentControls = Class.create({
	initialize: function(fragment) {

		this.fragment = fragment;
		this.active = false;
		this.elements = new Array();
		this.visible = false;

		this.container = new Element('div', {'class': 'container'});
		this.container.setStyle( {
			position: 'absolute',
			visibility: 'visible',
			top: '0px',
			left: '0px'
		} );

		// hack for IE
		this.fill = this.newElement();
		this.fill.setStyle( {
			position: 'absolute',
			visibility: 'visible',
			top: '0px',
			left: '0px',
			backgroundColor: '#FFF',
			opacity: 0.01
		} );


		this.container.onmousedown = this.mousedown.bindAsEventListener(this);
		this.container.onmouseup   = this.mouseup.bindAsEventListener(this);

		this.c_delete = this.newElement({'class': 'close'});
		this.c_delete.onclick = this.fragment.deleteClick.bindAsEventListener(this.fragment);

		this.c_nw_resizer = this.newResizer( 'nw');
		this.c_n_resizer = this.newResizer(  'n' );
		this.c_ne_resizer = this.newResizer( 'ne');
		this.c_e_resizer = this.newResizer(  'e' );
		this.c_se_resizer = this.newResizer( 'se');
		this.c_s_resizer = this.newResizer(  's' );
		this.c_sw_resizer = this.newResizer( 'sw');
		this.c_w_resizer = this.newResizer(  'w' );

		//this.syncPosition();
	},

	newElement: function(options) {
		var el = new Element('div', options);
		this.elements.push(el);
		this.container.appendChild(el);
		el.hide();
		return el;
	},

	newResizer: function(type) {
		var resizer = this.newElement({'class': type});
		resizer.onmousedown = this.mousedownResizer.bindAsEventListener(this, type);
		return resizer;
	},

	destroy: function() {
		this.container.remove();
	},

	activate: function() {
		this.active = true;
		this.container.onmousemove = this.mousemove.bindAsEventListener(this);
	},

	deactivate: function() {
		this.active = false;
		this.container.onmousemove = null;
	},

	hide: function() {
		if(!this.visible) return;
		this.elements.invoke('hide');
		this.visible = false;
	},

	show: function() {
		if(this.visible) return;
		this.elements.invoke('show');
		this.visible = true;
	},

	mousedownResizer: function(ev) {
		Event.stop(ev);
		var data = $A(arguments);
		data.shift();
		this.resizing = true;
		this.resizeType = data.shift();
	},

	mousedown: function(ev) {
		Event.stop(ev);
		if(!this.active) {
			this.fragment.editor.setCurrent(this.fragment);
		}
		this.moving = true;
		this.moving_prev_x = null;
		this.moving_prev_y = null;
	},

	mouseup: function(ev) {
		Event.stop(ev);
		if(!this.active) return;
		this.moving = false;
		this.resizing = false
		this.container.style.cursor = '';
	},

	mousemove: function(ev) {
		if(!this.active) return;
		Event.stop(ev);
		var x = ev.clientX;
		var y = ev.clientY;
		var dx = (x - this.moving_prev_x);
		var dy = (y - this.moving_prev_y);
		var f = this.fragment;
		if (this.moving) {
			this.container.style.cursor = 'move';
			if (this.moving_prev_x != null) {
				f.offsetPosition(dx, dy, 0, 0);
			}
		} else if (this.resizing) {
			switch (this.resizeType) {
				case 'nw': f.offsetPosition( dx,  dy, -dx,  -dy ); break;
				case 'n' : f.offsetPosition(  0,  dy,   0,  -dy ); break;
				case 'ne': f.offsetPosition(  0,  dy,  dx,  -dy ); break;
				case 'e' : f.offsetPosition(  0,   0,  dx,    0 ); break;
				case 'se': f.offsetPosition(  0,   0,  dx,   dy ); break;
				case 's' : f.offsetPosition(  0,   0,   0,   dy ); break;
				case 'sw': f.offsetPosition( dx,   0, -dx,   dy ); break;
				case 'w' : f.offsetPosition( dx,   0, -dx,    0 ); break;
			}
		}

		this.moving_prev_x = x;
		this.moving_prev_y = y;
		this.show();
	},

	getContainer: function() {
		return this.container;
	},

	syncPosition: function() {
		var f = this.fragment;

		var left = f.getX();
		var top = f.getY();
		var right = f.getX() + f.getWidth();
		var bottom = f.getY() + f.getHeight();
		var style = {
			top: top + 'px',
			left: left + 'px',
			height:	f.getHeight() + 'px',
			width: f.getWidth() + 'px',
			zIndex: (f.getZIndex()+1)
		};

		this.container.setStyle(style);
		
		this.fill.setStyle({height: f.getHeight()+'px',width: f.getWidth()+'px'});
		this.c_delete.setStyle(    {left: (right-left)-24 + 'px', top: -8 + 'px'});

		this.c_nw_resizer.setStyle({left: -8 + 'px', top: -8 + 'px'});
		this.c_n_resizer.setStyle( {left: (right-left)/2 - 8 + 'px', top: -8 + 'px'});
		this.c_ne_resizer.setStyle({left: (right-left) - 8 + 'px', top: -8 + 'px'});
		this.c_e_resizer.setStyle( {left: (right-left) - 8 + 'px', top: (bottom-top)/2 -8 + 'px'});
		this.c_se_resizer.setStyle({left: (right-left) - 8 + 'px', top: (bottom-top) -8 + 'px'});
		this.c_s_resizer.setStyle( {left: (right-left)/2 - 8 + 'px', top: (bottom-top) -8 + 'px'});
		this.c_sw_resizer.setStyle({left: -8 + 'px', top: (bottom-top) -8 + 'px'});
		this.c_w_resizer.setStyle( {left: -8 + 'px', top: (bottom-top)/2 -8 + 'px'});
	}

});