/**
 * Convert a single file-input element into a 'multiple' input list
 *
 * Usage:
 *
 *   1. Create a file input element (no name)
 *      eg. <input type="file" id="first_file_element">
 *
 *   2. Create a DIV for the output to be written to
 *      eg. <div id="files_list"></div>
 *
 *   3. Instantiate a MultiSelector object, passing in the DIV and an (optional) maximum number of files
 *      eg. var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 3 );
 *
 *   4. Add the first element
 *      eg. multi_selector.addElement( document.getElementById( 'first_file_element' ) );
 *
 *   5. That's it.
 *
 *   You might (will) want to play around with the addListRow() method to make the output prettier.
 *
 *   You might also want to change the line 
 *       element.name = 'file_' + this.count;
 *   ...to a naming convention that makes more sense to you.
 * 
 * Licence:
 *   Use this however/wherever you like, just don't blame me if it breaks anything.
 *
 * Credit:
 *   If you're nice, you'll leave this bit:
 *  
 *   Class by Stickman -- http://www.the-stickman.com
 *      with thanks to:
 *      [for Safari fixes]
 *         Luis Torrefranca -- http://www.law.pitt.edu
 *         and
 *         Shawn Parker & John Pennypacker -- http://www.fuzzycoconut.com
 *      [for duplicate name bug]
 *         'neal'
 */
function MultiSelector( list_target, max){
	// Where to write the list
	this.list_target = list_target;
	// How many elements?
	this.count = 0;
	// How many elements?

	this.id = 0;
	// Is there a maximum?
	if( max ){
		this.max = max;
	} else {
		this.max = -1;
	};
	
	/**
	 * Add a new file input element
	 */
	this.addElement = function( element , nombre, ruta){		
		// Make sure it's a file input element
			
		if( element.tagName == 'INPUT' && element.type == 'file' ){
			// Element name -- what number am I?
			element.name = 'record[' + nombre + '][' + this.count + ']';

			// Add reference to this object
			element.multi_selector = this;

			//COMENTO FUNCIÓN PORQUE EN IE7 DUPLICA LOS CAMPOS.
			// What to do when a file is selected
			element.onchange = function(){

				// New file input
				var new_element = document.createElement( 'input' );
				new_element.type = 'file';

				// Add new element
				this.parentNode.insertBefore( new_element, this );

				// Apply 'update' to element
				this.multi_selector.addElement( new_element , nombre);

				// Update list
				this.multi_selector.addListRow( this, '');

				// Hide this: we can't use display:none because Safari doesn't like it
				this.style.position = 'absolute';
				this.style.left = '-1000px';

			};
			//FIN COMENTARIO
			
			// If we've reached maximum number, disable input element
			if( this.max != -1 && this.count >= this.max ){
				element.disabled = true;
			};

			// File element counter
			this.count++;
			// Most recent element

			this.current_element = element;		
		} else {
			// This can only be applied to file input elements!
			alert( 'Error: not a file input element' );
		};

	};

	/**
	 * Add a new row to the list of files
	 */
	this.addListRow = function( element ){

		// Row div
		var new_row = document.createElement( 'div' );

		// Delete button
		var new_row_button = document.createElement( 'input' );
		new_row_button.type = 'button';
		new_row_button.value = 'Quitar';

		// References
		new_row.element = element;

		// Delete function
		new_row_button.onclick= function(){

			// Remove element from form
			this.parentNode.element.parentNode.removeChild( this.parentNode.element );

			// Remove this row from the list
			this.parentNode.parentNode.removeChild( this.parentNode );

			// Decrement counter
			this.parentNode.element.multi_selector.count--;

			// Re-enable input element (if it's disabled)
			this.parentNode.element.multi_selector.current_element.disabled = false;

			// Appease Safari
			//    without it Safari wants to reload the browser window
			//    which nixes your already queued uploads
			return false;
		};

		var path = element.value;

		// Set row value
		var c = element.value.lastIndexOf("\/"); //For Unix, etc.
		if (c != -1)
		html = element.value.substring(c+1);
		else {
		var c = element.value.lastIndexOf("\\"); //Win
		if (c != -1)
		html = element.value.substring(c+1);
		else
		html = element.value;
		}

		///////// previsualizacion /////////////////
		var newPreviewDiv;
		var newWidth;
		var newHeight;
		newPreviewDiv = document.createElement("span");
		newPreviewDiv.style.width = "50px";
		newPreviewDiv.style.height = "50px";
	//	newPreviewDiv.className = "uploadPathDiv";
	//	newPreviewDiv.id = "previewDiv";
	//	newPreviewDiv.align = "center";
		
		//figure out preview image dimensions
		var tempimg = new Image();
		tempimg.src = "file://" + path;
		var horRatio = 48 / tempimg.width;
		var vertRatio = 48 / tempimg.height;

		var newRatio = Math.min(horRatio, vertRatio);
		if(newRatio > 1) newRatio = 1;
		newWidth = tempimg.width * newRatio;
		newHeight = tempimg.height * newRatio;
		newWidth = Math.round(newWidth);
		newHeight = Math.round(newHeight);
		tempimg = null;
		
		//add image to preview div
//		var newImg = document.createElement("img");
//		newPreviewDiv.appendChild(newImg);
//		newImg.src = "file:///" + path;
//		newImg.width = newWidth;
//		newImg.height = newHeight;

		// Add button
		new_row.appendChild( new_row_button );

		var new_row_text = document.createElement( "span" );
		new_row.appendChild(new_row_text);
		new_row_text.innerHTML = "&nbsp;&nbsp;&nbsp;";

//		new_row.appendChild( newImg );

		var new_row_text = document.createElement( "span" );
		new_row.appendChild(new_row_text);
		new_row_text.innerHTML = "&nbsp;&nbsp;&nbsp;" + html;

		// Add it to the list
		this.list_target.appendChild( new_row );

	};



	this.ini_images = function( list_target , ruta, field){
		ruta = ruta.split("||");
		this.rut = ruta;
		if((ruta.length != 1) && (ruta[0] != '')){
			
			for(h=0; h<ruta.length; h++){
			//for(var i in ruta){
				if ((ruta[h] != '')&&(h<ruta.length)){
					var path = ruta[h];
					
					// Row div
					var new_row = document.createElement( 'div' );
					
					// Delete button
					var new_row_button = document.createElement( 'input' );
					new_row_button.type = 'button';
					new_row_button.value = 'Quitar';
					
					// References
					new_row.path = path;
					
					new_row.multi_selector = this;
					
					
					// Delete function
					new_row_button.onclick= function(){
						document.getElementById(field).value = document.getElementById(field).value.replace(this.parentNode.path+'||', '');

						// Remove this row from the list
						this.parentNode.parentNode.removeChild( this.parentNode );

						// Decrement counter
				//		multi_selector.count--;
						this.parentNode.multi_selector.count--;
						// Re-enable input element (if it's disabled)
				//		multi_selector.current_element.disabled = false;
						this.parentNode.multi_selector.current_element.disabled = false;

						// Appease Safari
						//    without it Safari wants to reload the browser window
						//    which nixes your already queued uploads
						return false;
					};
					
					// Set row value
					var c = path.lastIndexOf("\/"); //For Unix, etc.
					if (c != -1)
						html = path.substring(c+1);
					else {
						var c = path.lastIndexOf("\\"); //Win
					if (c != -1)
						html = path.substring(c+1);
					else
						html = path;
					}
					
					///////// previsualizacion /////////////////
					var newPreviewDiv;
					var newWidth;
					var newHeight;
					newPreviewDiv = document.createElement("span");
					newPreviewDiv.style.width = "50px";
					newPreviewDiv.style.height = "50px";
				//	newPreviewDiv.className = "uploadPathDiv";
				//	newPreviewDiv.id = "previewDiv";
				//	newPreviewDiv.align = "center";
					
					//figure out preview image dimensions
					var tempimg = new Image();
					tempimg.src = path;
					var horRatio = 48 / tempimg.width;
					var vertRatio = 48 / tempimg.height;

					var newRatio = Math.min(horRatio, vertRatio);
					if(newRatio > 1) newRatio = 1;
					newWidth = tempimg.width * newRatio;
					newHeight = tempimg.height * newRatio;
					newWidth = Math.round(newWidth);
					newHeight = Math.round(newHeight);
					tempimg = null;
					
					//add image to preview div
					var newImg = document.createElement("img");
					newPreviewDiv.appendChild(newImg);
					newImg.src = path;
					newImg.width = newWidth;
					newImg.height = newHeight;

					// Add button
					new_row.appendChild( new_row_button );

					var new_row_text = document.createElement( "span" );
					new_row.appendChild(new_row_text);
					new_row_text.innerHTML = "&nbsp;&nbsp;&nbsp;";

					var new_row_text = document.createElement( "span" );
					new_row.appendChild(new_row_text);
					new_row_text.innerHTML = "&nbsp;&nbsp;&nbsp;" + html;

					// Add it to the list
					this.list_target.appendChild( new_row );

					new_row.appendChild( newImg );

					// Add it to the list
//					list_target.appendChild( new_row );

					this.count++;
				}
			}
			//this.ruta = '';
		}
	}
};



/*

		// Set row value
		new_row.innerHTML = element.value;
var path = element.value;
//		element_work = element.value;
//		element_tab = element_work.split("\\");
//		nbr_elements = element_tab.length;
//		new_row.innerHTML = element_tab[nbr_elements-1];

///////// previsualizacion /////////////////
	var newPreviewDiv;
	var newWidth;
	var newHeight;
	newPreviewDiv = document.createElement("span");
	newPreviewDiv.style.width = "50px";
	newPreviewDiv.style.height = "50px";
//	newPreviewDiv.className = "uploadPathDiv";
//	newPreviewDiv.id = "previewDiv";
//	newPreviewDiv.align = "center";
	
	//figure out preview image dimensions
	var tempimg = new Image();
	tempimg.src = "file://" + path;
	var horRatio = 48 / tempimg.width;
	var vertRatio = 48 / tempimg.height;

	var newRatio = Math.min(horRatio, vertRatio);
	if(newRatio > 1) newRatio = 1;
	newWidth = tempimg.width * newRatio;
	newHeight = tempimg.height * newRatio;
	newWidth = Math.round(newWidth);
	newHeight = Math.round(newHeight);
	tempimg = null;
	
	//add image to preview div
	var newImg = document.createElement("img");
	newPreviewDiv.appendChild(newImg);
	newImg.src = "file:///" + path;
	newImg.width = newWidth;
	newImg.height = newHeight;


new_row.appendChild( newPreviewDiv );


		// Add button
		new_row.appendChild( new_row_button );

		// Add it to the list
		this.list_target.appendChild( new_row );
		
	};
*/