var multimedia_uploader = Class.create({
	triggerTemplate : new Template('<p><a id="#{id}" href="add-#{media}" class="add-media action">#{name}</a></p>'),
	uploaderTemplate : new Template(
			'<div id="#{id}" class="multimedia_uploader">' + 
				'<a id="#{id}-close" class="action mu_close" href="/close">#{close}</a>' +
				'<h5>#{add_media}</h5>' +  
				'<ol id="#{id}-containers" class="mu_containers"></ol>' + 
				'<p class="control"><a id="#{id}-more" class="action mu_more" href="add-#{media}">#{more}</a></p>' + 
			'</div>'),
	multimediaTemplate : new Template(
			'<li id="#{id}[container#{num}]" class="mu_container">' +
				'<p><label for="#{file_name}#{num}">#{subject}</label>' +
				'<input class="file" type="file" id="#{file_name}[#{num}]" name="#{file_name}[#{num}]" size="20" />' + 
				'<a id="#{id}[container#{num}.quit]" class="action mu_quit" href="/quit">#{quit}</a></p>' +
				'<p><label for="#{description_name}[#{num}]">#{description_label}</label>' +
				'<input type="text" id="#{description_name}[#{num}]" name="#{description_name}" maxlength="255" size="33" /></p>' +
			'</li>'),						

	initialize : function(parent_name, media, options){
		// info
		this.media = media;
		
		// dom id's
		this.id = 'mu' + media;
		this.parent_name = parent_name;
		this.id_trigger = this.id + '-inkv';
		this.id_close_button = this.id + '-close';
		this.id_more_button = this.id + '-more';
		this.id_containers = this.id + '-containers';

		this.options = options || {};
		this.num_mt = 0;
		this.options.subject = this.options.subject;
				
		this.options.add_media = this.options.add_media || _("añadir " + this.options.subject);
		this.options.close = this.options.close || _("cerrar");
		this.options.file_name = this.options.file_name || this.id + '-file';
		this.options.description_name = this.options.description_name || this.id + '-description';
		this.options.more = this.options.more || _("añadir otro " + this.options.subject);
		this.options.quit = this.options.quit || _("quitar");
		this.options.description_label = this.options.description_label || _("descripción");
		this.options.limit = this.options.limit || 0;
		this.options.indexs = this.options.indexs;
		this.options.invk_position = this.options.invk_position || "bottom";
		
		this.multimediaTemplate = this.options.template || this.multimediaTemplate;
		this.uploaderTemplate = this.options.uploaderTemplate || this.uploaderTemplate;
		
		this.invk();
	},
	invk : function(){
		if (this.num_mt < this.options.limit){
			var trigger = this.triggerTemplate.evaluate({id: this.id_trigger, media: this.media, name: this.options.add_media});
			if (this.options.invk_position == "top")
				$(this.parent_name).insert({top:trigger});
			else
				$(this.parent_name).insert({bottom:trigger});
			$(this.id_trigger).observe('click',this.open.bindAsEventListener(this));
		}
	},
	open : function(e){
		$(this.id_trigger).up('p').remove();
		var box = this.uploaderTemplate.evaluate({
			id: this.id,
			add_media : this.options.add_media,
			more : this.options.more,
			close : this.options.close,
			media: this.media
		});
		if (this.options.invk_position == "top")
			$(this.parent_name).insert({top:box});
		else
			$(this.parent_name).insert({bottom:box});
			
		$(this.id_close_button).observe('click',this.reset.bindAsEventListener(this));
		this.more();
		
		var more_button = $(this.id_more_button);
		if(more_button){
			more_button.observe('click', this.more.bindAsEventListener(this));
		}
		if(e != null){
			e.stop();
		}
	},
	more: function(e){
		if (this.num_mt < this.options.limit){
			var item_id = this.num_mt;
			if (this.options.indexs && this.options.indexs.length > 0){
				item_id = this.options.indexs.shift();
				var file_id = this.options.file_name + "[" + item_id + "].mf";
				var quit_buttom = this.id + '[container' + item_id + '.quit]';
			} else {
				var file_id = this.options.file_name + "["+this.num_mt+"]";
				var quit_buttom = this.id + '[container' + this.num_mt + '.quit]';
			}
				
			var mbox = this.multimediaTemplate.evaluate({
				id : this.id,
				subject : this.options.subject,
				num: item_id,
				file_name : this.options.file_name,
				description_name : this.options.description_name,
				quit: this.options.quit,
				description_label : this.options.description_label
			});
			$(this.id_containers).insert(mbox);
			
			//TODO: OMG 
			var $fileSelector = $(file_id);
			if ($fileSelector){
					 $fileSelector.makePositioned();
					 $fileSelector.up('p').next('p').down('input').makePositioned();
			}

			if ($(quit_buttom)) $(quit_buttom).observe('click', this.quit.bindAsEventListener(this, item_id));

			if (!Prototype.Browser.WebKit && $fileSelector) {
				$fileSelector.observe('change', this.select_file.bindAsEventListener($fileSelector));
			}
		
			this.num_mt++;
		} 
		if (this.num_mt == this.options.limit) {
			$(this.id_more_button).up().remove();
		}

		if(e != null)
		e.stop();
		
	},
	reset : function(e) {
		var deleting = false;
		if (this.inputs_empty())
			deleting = true;
		else {
			deleting = confirm( _("¿estás seguro?") );
		}			
		if (deleting){
			$(this.id).remove();
			this.num_mt = 0;
			this.invk();						
		}
		if(e != null)
			e.stop();
	},
	quit : function(e){
		var data = $A(arguments);
	
		if ($(this.id + '[container' + data[1] + ']'))
			var container = this.id + '[container' + data[1] + ']';
		else
			var container = e.findElement().up();
		
		if (this.num_mt <= 1){
			this.num_mt = 0;
			this.reset();
		} else {
			$(container).remove();
			this.num_mt--;
		}

		if (!$(this.id_more_button) && this.num_mt == this.options.limit - 1){
			this.insert_more_link();
		}
		
		// regenerate media indexes
		this.options.indexs = $A($R(0,this.options.limit - 1)).findAll(function(item){
			return !$('requestFormAttachments[' + item + '].description') || !('muploaded_' + item);
		});
		
		
		if(e != null){
			e.stop();
		}
	},
	insert_more_link : function(){
		var html = new Array();
		html.push('<p class="control">');
		html.push('<a id="');
		html.push(this.id_more_button);
		html.push('" class="action mu_more" href="/more">');
		html.push(this.options.more);
		html.push('</a></p>');
		$(this.id).insert({bottom:html.join('')});
		$(this.id_more_button).observe('click', this.more.bindAsEventListener(this));		
	},
	select_file : function(){
		var pid = this.id + '.file';

		var file_name = $F(this.id);


		if ($F(this.id).search(/\//) > -1){
			file_name = file_name.split('/');
			file_name = file_name[file_name.length - 1];			
		}
		else if ($F(this.id).search(/\\/) > -1){
			file_name = file_name.split('\\');
			file_name = file_name[file_name.length - 1];
		}		
		
		if ( file_name.length > 40 )
			file_name = file_name.substring(0,40) + '...';

		if ( !$(pid) )
			$(this.up('li.mu_container').id).insert({top:'<p id="'+pid+'" class="file_name">' + file_name + '</p>'});
		else
			$(pid).update(file_name);
	},
	inputs_empty : function(){
		var empties = true;
		var inputs = $$('div#'+this.id+' li.mu_container input.file');
		
		var i = 0;
		while (empties && i < inputs.length){
			if ($(inputs[i]).present())
				empties = false;
			i++;
		}
		
		return empties;
	}
});