(function($){
	$(document).ready(function(){
		$('body').on('click', '.media-input', function(e) {
			media_input_btn = $(this);
			e.preventDefault();
			var image = wp.media({ 
				title: wcag_l10n.add_images,
				multiple: true
			}).open()
			.on('select', function(e){
				var uploaded_image = image.state().get('selection');
				
				images_json = media_input_btn.prev().val();

				images_json = (images_json == '') ? "[" : images_json;
				
				uploaded_image.map( function( attachment ) {
					attachment = attachment.toJSON();

					if(images_json == '['){
						images_json += '{"id":"'+attachment.id+'","url":"'+attachment.url+'","title":"'+attachment.title+'","alt":"'+attachment.alt+'"}';
					}else{
						images_json = images_json.replace(']','');
						images_json += ',{"id":"'+attachment.id+'","url":"'+attachment.url+'","title":"'+attachment.title+'","alt":"'+attachment.alt+'"}';
					}
						
						html = '<label for="image_link'+attachment.id+'">'+ wcag_l10n.image_link +'</label>';
						html+= '<input class="widefat image-link" rows="16" cols="20" id="image_link'+attachment.id+'" name="image_link'+attachment.id+'" value=""/>';
						html+= '<img src="'+attachment.url+'" />';
						html+= '<a class="remove-image button">'+ wcag_l10n.delete_image +'</a>';
						
						media_input_btn.next().append('<div class="image-container">'+html+'</div>');
					
				}).join();
				
				images_json += "]";
				
				media_input_btn.prev().val(images_json);
			});
		});
		
		$('body').on('click', '.remove-image', function(){
			
			id = $(this).parent().find('.image-link').attr('id');
			image_id = id.replace('image_link','');

			image_widget_container = $(this).closest('.image_widget_container');
			$(this).parent().remove();

			update_json_images(image_widget_container)
			
			update_images_links(image_widget_container);

		});

		$('body').on('input click', '.image-link', function(){
			update_images_links($(this).closest('.image_widget_container'));
		});
		
		function update_images_links(image_widget_container){
			links_json = "{";
			images_links = image_widget_container.find('.image-link');
			images_links.each(function(){
				links_json += links_json!="{" ? ',' : '';
				links_json += '"'+$(this).attr('id')+'":"'+$(this).val()+'"';
			});
			links_json += "}";
			links_json = (links_json == '{}') ? '' : links_json;
			image_widget_container.find('.image-links').val(links_json);
		}
		
		function update_json_images(image_widget_container){
			images_json = image_widget_container.find('.images-json').val();
			
			begin = images_json.indexOf('{"id":"'+image_id+'"');
			end = images_json.indexOf('}',images_json.indexOf('{"id":"'+image_id+'"')) + 1;
			
			json_row = images_json.substring(begin, end);

			images_json = images_json.replace(json_row, '');
			images_json = images_json.replace(',,',',');
			images_json = images_json.replace('[,','[');
			images_json = images_json.replace(',]',']');
			
			images_json = (images_json.length < 5) ? '': images_json;
			image_widget_container.find('.images-json').val(images_json);
		}
		
	});
})(jQuery);