/**
 * PhotoNotes
 *
 * http://simbunch.com
 *
 * @version		1.0
 *
 * @license		Commercial SIMBunch license
 * @tagged		Mike Feng Jinglong <mike [at] simbunch.com>
 * @copyright	Author
 */

var PhotoNote = new Class({

	Implements: [Options, Events],

	options: {/*
		onShow: $empty,
		onSave: $empty,
		onCancel: $empty,*/
		tagId: '-1',
		name: '',
		alwaysShow: false,
		linked: true,
		point: {x:0, y:0},
		size: 150,
		info_line_1: 'Type and name or tag:',
		info_line_2: 'or choose a person:',
		tag_btn: 'Tag',
		cancel_btn: 'Cancel'
	},
	initialize: function(el, options){
		this.setOptions(options);
		if (this.options.tagId == '-1') this.create = true;
		else this.create = false;
		this.container = $(el); //the container element.
		this.photo = this.container.getElement('img');
		if (this.create) {
			this.setTagPos();
			this.createTag();
		}
		else this.drawTag();
	},
	createTag: function() {
		this.container.getElements('div[frame=-1]').destroy();
		this.container.getElements('div[id=pn-tag-selector]').destroy();
		this.showFrame();
		this.showSelector();
		var self = this;
		document.addEvent('keyup', function(e) {
			if (e.key == 'esc') {
				self.Cancel(self);
				document.removeEvents('keyup');
			}
		});
	},
	drawTag: function() {
		this.left = this.options.point.x;
		this.top = this.options.point.y;
		this.width = this.options.size;
		this.height = this.options.size;
		this.showFrame();
	},
	showFrame: function() {
		var Frame = new Element('div', {
			'name': 'frame',
			'frame': this.options.tagId,
			'styles': {
				'left': this.left+'px',
				'top': this.top+'px',
				'z-index': '2',
				'position': 'absolute',
				'cursor': 'pointer',
				'background': 'transparent url(#)'
			},
			'events': {
				'mouseenter': function(e) {
					e.stop();
					this.getElements('div[class=pn-nametag]').fade('show');
				},
				'mouseleave': function(e) {
					e.stop();
					this.getElements('div[class=pn-nametag]').fade('hide');
				}
			}
		}).inject(this.container);
		var innerFrame = new Element('div', {
			'styles': {
				'width': this.width+'px',
				'height': this.height+'px'
			}
		}).inject(Frame);
		if (this.create || this.options.alwaysShow) {
			Frame.set('class', 'photo_tag_frame');
			innerFrame.set('class', 'photo_tag_frame_inside');
		}
		else {
			Frame.setStyle('padding', '5px');
			innerFrame.setStyle('padding', '2px');
		}
		this.Frame = Frame;
		
		if (this.create) {
			var containerid = this.container.get('id');
			var size = this.options.size;
			Frame.cloneEvents(this.container.getElement('img'));
		}
		else if (!this.options.alwaysShow)
			this.addNametag(this.options.name);
	},
	showSelector: function() {
		var Selector = new Element('div', {'id': 'pn-tag-selector'}).inject(this.container);
		new Element('span', { 'class': 'pn_text', 'html': this.options.info_line_1 }).inject(Selector);
		var nameInput = new Element('input', {
			'id': 'pn-name-input',
			'class': 'inputbox',
			'type': 'text',
			'value': ''
		}).inject(Selector);
		
		new Element('span', { 'class': 'pn_text', 'html': this.options.info_line_2 }).inject(Selector);
		
		var userList = new Element('div', {'id': 'pn-userlist'}).inject(Selector);
		var buttonsArea = new Element('div', {'class': 'pn-buttons'}).inject(Selector);
		var self = this
		new Element('input', {
			'type': 'button',
			'id': 'pn-save',
			'value': this.options.tag_btn,
			'class': 'button',
			'events': {
				'click': function() {
					self.Save(self);
				}
			}
		}).inject(buttonsArea);
		new Element('input', {
			'type': 'button',
			'id': 'pn-cancel',
			'value': this.options.cancel_btn,
			'events': {
				'click': function() {
					self.Cancel(self); 
				}
			}
		}).inject(buttonsArea);
		this.Selector = Selector;
		this.nameInput = nameInput;
		
		//position it
		Selector.position({
			relativeTo: this.Frame,
			position: {x: 'right', y: 'top'},
			offset: {x:10, y:0}
		});
		
		this.Show();
	},
	addNametag: function(name) {
		var Nametag = new Element('div', {
			'html': name,
			'class': 'pn-nametag'
		}).inject(this.Frame).position({
			relativeTo: this.Frame,
			position: {x: 'center', y: 'bottom'},
			edge: 'center',
			offset: {x:-7, y:-35}
		});
		if (!this.create) Nametag.fade('hide');
		this.Nametag = Nametag;
	},
	Show: function() {
		this.nameInput.focus();
		this.fireEvent('onShow', this);
	},
	Save: function(self) {
		var array = $('pn-userlist').getElements('label');
		self.tag_is_user = 0;
		self.user_id = 0;
		array.some(function(el) {
			if (el.getElement('input[type=checkbox]').get('checked') == true) {
				self.tag_is_user = 1;
				self.user_id = el.getElement('input[type=checkbox]').get('value');
				self.nameInput.set('value', el.getElement('span').get('html'));
			}
		});

		self.tagName = self.nameInput.get('value');
		self.addNametag(self.tagName);
		self.fireEvent('onSave', self);
		self.Selector.destroy();
	},
	Cancel: function(self) {
		self.Frame.destroy();
		self.Selector.destroy();
		self.fireEvent('onCancel', self);
	},
	setTagPos: function() {
		//offset the points first
		this.options.point.x -= 7;
		this.options.point.y -= 7;
		var tag = Array();
		var coord = this.photo.getPosition();
		tag['width'] = tag['height'] = this.options.size;
		tag['x'] = this.options.point.x - coord.x - (tag['width']/2);
		tag['y'] = this.options.point.y - coord.y - (tag['height']/2);
		photosize = this.photo.getSize();
		photosize.x -= 14;
		photosize.y -= 14;
		if (tag['x'] < 0) {
			tag['width'] = (this.options.point.x - coord.x) * 2;
			if (tag['width'] < 50)
				tag['width'] = 50;
			tag['x'] = 0;
		}
		if (tag['x'] + tag['width'] > photosize.x) {
			tag['width'] = (coord.x + photosize.x - this.options.point.x) * 2;
			if (tag['width'] < 50) {
				tag['width'] = 50;
			}
			tag['x'] = photosize.x - tag['width'];
		}
		if (tag['y'] < 0) {
			tag['height'] = (this.options.point.y - coord.y) * 2;
			if (tag['height'] < 50)
				tag['height'] = 50;
			tag['y'] = 0;
		}
		if (tag['y'] + tag['height'] > photosize.y) {
			tag['height'] = (coord.y + photosize.y - this.options.point.y) * 2;
			if (tag['height'] < 50)
				tag['height'] = 50;
			tag['y'] = photosize.y - tag['height'];
		}
		
		if (tag['height'] > tag['width']) {
			tag['height'] = tag['width'];
			tag['y'] = this.options.point.y - coord.y - (tag['height']/2);
		}
		if (tag['width'] > tag['height']) {
			tag['width'] = tag['height'];
			tag['x'] = this.options.point.x - coord.x - (tag['width']/2);
		}
		this.left = tag['x'];
		this.top = tag['y'];
		this.width = tag['width'];
		this.height = tag['height'];
	}
});