/**
 * Плагин multyUpload (by Roman Hodko www.pivot at gmail.com)
 */

(function($){
	var SETTINGS;

	$.fn.multyUpload = function(userSettings){
		
		SETTINGS = $.extend({
			/**
			 * функция должна возвращать div (плюс свои вставки, если надо)
			 * @param fileName - выбранный пользователем файл
			 */
			getDiv : function(fileName) {
				return '' +
				'<div>' +
				fileName + '&nbsp;&nbsp;&nbsp;&nbsp;<button>Удалить</button>'
				'</div>'
				;			
			},
			
			/**
			 * максимальное число фотографий, которое пользователь может загрузить
			 */
			maxNumber : 6,
			
			/**
			JS-объект, который содержит информацию о ранее загруженных элементах. Информация о них отображается в виде checkbox-ов
			*/
			alreadyUploaded : {
				/* наименования путей (нужно для отображения пользователю) . Например   paths : [{path:'', value : ''}, {path:'', value : ''}]  */
				paths : [],
				name : ''	/* имя  */
			},
			
			alreadyUploadedClick : function(){
				var parent = $(this).parent();
				if ( parent.is(':has(span.no-load)') ) {
					parent.find('span.no-load').remove();
				} else {
					parent.append('<span class="no-load" style="margin-left:4px;">Будет удалено</span>');
				}
			}
			
			/**
			id формы загрузки картинок или jQuery-обертка для этой формы
			*/
			/* uploadForm : '' */
		}, userSettings || {} );
		
		/**
		 * функция формирует HTML-код с информацией о загруженных фото
		 */
		function  getUploaded() {
			var arr = SETTINGS.alreadyUploaded.paths;
			var res = new Array();
			for (var i = 0; i < arr.length; i++) {
				res.push('<div>');
				res.push( '<label for="ALREADY_UPLOADED_PICS' + i + '">' + 
				'<input type="checkbox" name="del[]" checked="checked" value="' + arr[ i ].value + '" id="ALREADY_UPLOADED_PICS' + i + '"/>' + arr[ i ].path +'</label>' );
				res.push('</div>');
			}
			return res.join('\n\r');
		}
		
		this.eq(0).each(function(){
			me = $(this);
			// считаем общее количество input[type=file]
			var counter = 0;
			
			//оборачиваем input[type=file] дивом
			me.wrap( '<div id="MULTY_UPLOAD_WRAPPER"/>' );
			wrapper = $('#MULTY_UPLOAD_WRAPPER');
			
			checkMax();
			
			//под input[type=file] размещаем див
			wrapper.append('<div id="MULTY_UPLOAD_CHOSEN"/>');
			chosen = $('#MULTY_UPLOAD_CHOSEN');
			
			// размещаем див с checkbox (загруженные фотографии)
			wrapper.append('<div id="MULTY_UPLOAD_UPLOADED"/>');
			uploaded = $('#MULTY_UPLOAD_UPLOADED');
			uploaded.html( getUploaded() );
			
			// привязываем обработчик щелчка по checkbox
			var uploadedCheckboxes = uploaded.find('input[type=checkbox]');
			uploadedCheckboxes.click(SETTINGS.alreadyUploadedClick);
			counter += uploadedCheckboxes.length;
			
			// также надо разрешить добавлять фото, если у checkbox-а сняли выделение
			uploadedCheckboxes.click(function(){
				if ($(this).is(':checked')) {
					counter++;
					
					// если выбрано слишком много картинок, то удаляем div-ы с кнопками
					if ( (counter - 1) >= SETTINGS.maxNumber ) {
						$('#MULTY_UPLOAD_CHOSEN div:eq(0)').remove();
						$('#MULTY_UPLOAD_WRAPPER input[type=file]:eq(1)').remove();
						counter--;
					}
					checkMax();
				} else {
					counter--;
					checkMax();
				}
			});
			
			
			//создаем input[type=file] для последующих замен
			var cssClass = me.attr('class') || '';
			var cssStyle = me.attr('style') || '';
			fileInput = '<input type="file" name="' + me.attr('name') + '"' +
				((cssClass.length > 0) ? ' class="' + cssClass + '"' : '') +
				((cssStyle.length > 0) ? ' style="' + cssStyle + '"' : '') +
			'/>';

			//обрабатываем выбор пользователем файла
			//причем функцию привязываем к первому элементу в диве MULTY_UPLOAD_WRAPPER
			$('#MULTY_UPLOAD_WRAPPER input[type=file]:eq(0)').change(test);
			function test() {
				
				//добавляем button Удалить
				chosen.prepend( SETTINGS.getDiv( $(this).val() ) );
				
				counter++;
				
				//скрываем input[type=file], а на его месте (перед ним) размещаем новый input[type=file]
				$(this).unbind();
				//$(this).css({position : 'absolute', left : '-9999px'});
				$(this).css({display : 'none'});
				wrapper.prepend( fileInput );
				
				// контролируем общее количество input[type=file]
				checkMax();
				
				
				//привязываем обработчик change для вновь созданного элемента
				$('#MULTY_UPLOAD_WRAPPER input[type=file]:eq(0)').change(test);
				
				//привязываем обработчик click для созданного button-а
				chosen.find('button:eq(0)').click(function(e){
					e.preventDefault();
					
					//определяем индекс кнопки среди прочих кнопок в MULTY_UPLOAD_CHOSEN и удаляем соответствующий input[type=file]
					var inx = $('#MULTY_UPLOAD_CHOSEN button').index(this);
					$('#MULTY_UPLOAD_WRAPPER input[type=file]').eq(inx + 1).remove();
					
					//удаляем div с кнопкой
					$(this).parent().remove();
					counter--;
					
					// контролируем общее количество input[type=file]
					checkMax();
				});
			}
			
			function checkMax() {
				var ret = counter >= SETTINGS.maxNumber;
				if (ret) {
					$('#MULTY_UPLOAD_WRAPPER input[type=file]:eq(0)').attr('disabled', 'disabled');
				} else {
					$('#MULTY_UPLOAD_WRAPPER input[type=file]:eq(0)').removeAttr('disabled');
				}
				return ret;
			}
		});
		
		
		
		return this;
		
	};


})(jQuery)
