var nameplateObject = new Class({

	photo: null,
	nameplate: null,
	overlay: null,
	
	'initialize': function(photo, nameplate, overlay, nickname) {
	
		if(!photo) {
			return false;
		}
		this.photo = $(photo);
		
		if(!nameplate) {
			return false;
		}
		this.nameplate = $(nameplate);

		if(!overlay) {
			return false;
		}
		this.overlay = overlay;
		this.form = $('nameplate-friends');

		this.photo.addClass('nameplates-enabled');
		
		new Autocompleter.Suggest(nickname, 'nameplate_nickname', true, false);
		this.overlay.getElementById('nameplate_nickname').addEvent('choiceSelect', this.changeTitle.bind(this));
		this.overlay.getElementById('nameplate_set').addEvent('click', this.set.bind(this));
		this.overlay.getElementById('nameplate_hide').addEvent('click', this.hideOverlay.bind(this));
		this.nameplate.getElementById('nameplate_rotate').addEvent('click', this.rotate.bind(this));
		this.overlay.getElementById('nameplate_rotate_alt').addEvent('click', this.rotate.bind(this));

		this.nameplate.makeDraggable({
			'container': this.photo,
			'onStart': function() {
				 this.overlay.fade('out');
			}.bind(this),
			'onComplete': function(f) {
				var position = f.getPosition($('photo-canvas'));
				this.overlay.setStyles({
					'top': position.y + 288,
					'left': position.x - 16
				});
				this.overlay.fade('in');
				this.updateInfo();
			}.bind(this)
		});
		this.photo.addEvent('click', this.evtClick.bind(this));
	},

	'rotate': function(e) {
		this.nameplate.rotateClass(['left-bottom', 'right-bottom', 'right-top', 'left-top']);

		if(this.nameplate.hasClass('left-bottom')) {
			direction = 0;
		} else if(this.nameplate.hasClass('right-bottom')) {
			direction = 1;
		} else if(this.nameplate.hasClass('right-top')) {
			direction = 2;
		} else if(this.nameplate.hasClass('left-top')) {
			direction = 3;
		}
		$('nameplate_t').set('value', direction);
			
	},

	evtClick: function(e) {
		if(!e.target.hasClass('photo')) {
			return false;
		}
		this.showOverlay(e.page.x, e.page.y);
	},

	showOverlayCentered: function() {
		var canvas = $('photo-canvas').getCoordinates();

		this.showOverlay(canvas.left + Math.floor(canvas.width/2), canvas.top + Math.floor(canvas.height/3));

	},

	showOverlay: function(x, y) {
		var canvas = $$('.maincol')[0].getPosition();		

		this.nameplate.setStyles({
			'top': y - canvas.y - 55,
			'left': x - canvas.x - 10,
			'visibility': 'hidden',
			'display': 'block',
			'opacity': 0
		});

		this.nameplate.fade('in');

		$('nameplate_message').set('text', '');
		this.nameplate.getElements('img')[0].setStyle('display', 'block');

		this.correctPosition();
		var position = this.nameplate.getPosition();
		this.overlay.setStyles({
			'top': position.y + 16,
			'left': position.x - 288,
			'visibility': 'hidden',
			'display': 'block',
			'opacity': 0
		});

		this.updateInfo();
		this.overlay.fade('in');
	},

	'hideOverlay': function() {
		this.nameplate.fade('out');
		this.overlay.fade('out');
		this.overlay.setStyle('display', 'none');
	},

	'set': function(e) {
		e.stop();
		this.form.set('send', {
			'onComplete': function() {
				var clone = this.nameplate.clone(true);
				clone.removeClass('editable');
				this.nameplate.parentNode.appendChild(clone);
				this.nameplate.hide();
				clone.getElements('img')[0].fade('out');

				if(this.form.get('send').status == 201) {
					$('nameplate_message').set('text', this.form.get('send').xhr.responseText).highlight('#EBDE00');
					this.overlay.chains().highlight('#00ff00');
				} else if(this.form.get('send').status == 202) {
					$('nameplate_message').set('text', this.form.get('send').xhr.responseText).highlight('#EBDE00');
					clone.removeClass('male');
					clone.removeClass('female');
					// this.overlay.fade('out');
				} else if(this.form.get('send').status == 404) {
					$('nameplate_message').set('text', this.form.get('send').xhr.responseText).highlight('#ff0000');
					clone.fade('out');
					clone.destroy();
				} else {
					clone.fade('out');
					// this.overlay.fade('out');
				}
				
				this.overlay.fade.delay(4000, this.overlay, ['out']);

			}.bind(this)
		});
		result = this.form.send();
	},

	'changeTitle': function(nickname, gender) {
		if(gender == 1) {
			this.nameplate.removeClass('female');
			this.nameplate.addClass('male');
		} else if(gender == 2) {
			this.nameplate.removeClass('male');
			this.nameplate.addClass('female');
		} else {
			this.nameplate.removeClass('male');
			this.nameplate.removeClass('female');
		}
		
		var nameplate = $('nameplate-content');
		$('user_id').set('value', nickname);
		nameplate.set('text', nickname);
		// this.correctPosition();
	},

	'updateInfo': function() {
		var position = $('nameplate').getPosition($('photo-canvas'));
		$('nameplate_x').set('value', position.x);
		$('nameplate_y').set('value', position.y);
	},

	'correctPosition': function() {
		var dimNameplate = this.nameplate.getCoordinates();
		var dimPhoto = this.photo.getCoordinates();
		var x = dimNameplate.left;
		var y = dimNameplate.top;

		if(dimNameplate.left < dimPhoto.left) {
			x = dimPhoto.left;
		}

		if(dimNameplate.left + dimNameplate.width > dimPhoto.left + dimPhoto.width) {
			x = x - ((dimNameplate.left + dimNameplate.width) - (dimPhoto.left + dimPhoto.width));
		}

		if(dimNameplate.top < dimPhoto.top) {
			y = dimPhoto.top;
		}

		if(dimNameplate.top + dimNameplate.height > dimPhoto.top + dimPhoto.height) {
			y = y - ((dimNameplate.top + dimNameplate.height) - (dimPhoto.top + dimPhoto.height));
		}

		if(y != dimNameplate.top || x != dimNameplate.left) {
			var dimCanvas = $$('.maincol')[0].getCoordinates();
			y = y - dimCanvas.top;
			x = x - dimCanvas.left;
			this.nameplate.setStyles({
				'top': y,
				'left': x
			});
		}
	}
		
});

function toggleNameplates() {
	return $$('.nameplate').fade();
}