(function($) {
	
	jQuery.fn.itemTargets = function(options) {
		//try {
		
		options = jQuery.extend(
			{
			},
			options
		);

		//console.log('jere');
		
		var edge = $(this);
		var clientid = edge.attr('id');

		if ($('ul.edit', edge).attr('loaded') == 'true') return;

		edge.prepend('<ul class="edit"></ul>');
		
		var ul = $('ul', edge);
		ul.attr('loaded', 'true');
		
		ul.after('<textarea name="' + clientid + '_value" style="width: 100%; height: 100px; display: none;" />');

		var output = $('textarea', edge);
		//output.show();
		
		
		var bind = function() {
			
			ul.empty();
			
			$.each(options.data,
				function(i, val) {
					ul.append('<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><span class="url">' + val + '</span> <a href="#" class="delete">X</a></li>');
				}
			);
			serialize();
		}

		var serialize = function() {
			output.text(JSON.stringify(options.data));
		}

		var update = function() {
			options.data = [];
			
			$('li', ul).each(
				function() {
					var i = $(this);
					var url = $('.url', i).text();
					options.data.push(url);
				}
			);
			
			serialize();
		}
		

		bind();
		
		
		$('button.add', edge).click(
			function(event) {
				event.preventDefault();
				var select = $('select.add-url', edge);
				var url = $('option:selected', select);
				
				options.data.push(url.text());
				
				select.get(0).selectedIndex = 0;
				
				bind();
			}
		);
		
		$('a.delete', ul).live(
			'click',
			function(event) {
				event.preventDefault();
				if (!confirm('Are you sure?')) return;
				
				$(this).parents('li').remove();
				update();
			}
		);
		
		
		ul.sortable({ update: function() { update(); } });

		//} catch (ex) {
		//	alert(ex.message);
		//}
		
	};
})(jQuery);