var zindex = 200;

function initDraggableItems() {

	$(".articulo").draggable({
			addClasses: true, 
			distance: 10, 
			helper: 'clone', 
			revert: false, 
			scroll: false, 
			stack: { group: 'items', min: 50 },
			start: function(event, ui) {
				$(ui.helper).attr("class", "articuloSelected");
			},
			zIndex: zindex
	});
	
	$(".caption").draggable({
		addClasses: false,
			containment: 'parent',
			revert: false,
			start: function(event, ui) {
				zindex++;
				$(this).css("z-index", zindex);
			}
	});

	$("#divTestigo").droppable({
			accept: '.articulo',
			activeClass: 'ui-state-hover',
			addClasses: false,
			tolerance: 'fit',
			drop: function(event, ui) {
			
				$('.selectArticulos', $('#divTestigo')).remove();
				
				// Cuento el número de imágenes para obtener el serial correspondiente
				serie = $('img', $('#divTestigo')).size();
		
				// Clono el ghost pero sin eventos, sólo el objeto DOM
				newItem = $(ui.helper).clone(false).attr({id: "item" +serie, name: "item" +serie }).appendTo('#divTestigo');
				
				// Cambio el class del item creado
				$(newItem).attr("class", "selectArticulos");
				
				// Ajusto la posición relativa del nuevo item al contenedor
				var topVar = $(ui.helper).offset().top - $('#divTestigo').offset().top;
				var leftVar = $(ui.helper).offset().left - $('#divTestigo').offset().left;

				$(newItem).css("top", topVar);
				$(newItem).css("left", leftVar);

				//$(newItem).attr("title", "lalala");
				
				// Activo el draggable del nuevo item
				$(newItem).draggable({
					addClasses: false,
					containment: 'parent',
					revert: false,
					start: function(event, ui) {
						zindex++;
						$(this).css("z-index", zindex);
						$("input[name=item]").val("<img src='" +$('.selectArticulos', $('#divTestigo')).attr("src")+ "' style='" +$('.selectArticulos', $('#divTestigo')).attr("style")+ "' />");
					}
				});
				
				$("input[name=item]").val("<img src='" +$('.selectArticulos', $('#divTestigo')).attr("src")+ "' style='" +$('.selectArticulos', $('#divTestigo')).attr("style")+ "' />");
				$(':submit').attr("disabled", "");
				
				$('input[name=name]').focus();
			}
	});
}

function addItem()
{
	$('label').css('color', '#000');

	$("input[name=item]").val("<img src='" +$('.selectArticulos', $('#divTestigo')).attr("src")+ "' style='" +$('.selectArticulos', $('#divTestigo')).attr("style")+ "' />");

	$(":submit").attr("disabled", "disabled");
	$(":submit").val("Enviando..");
	
	$('#formItem').ajaxSubmit({
        dataType: 'xml',
        success:function(responseXML) {
            _manageAjaxResponse(responseXML, afterAddItem);			
        }
    });
}
function afterAddItem(code, msg, xmlResponse) {
    switch (code) {
		case '1':
			name = $("input[name=name]").val();
			message = $("textarea[name=message]").val();
			tooltip = name+ '|' +message;

			newItem = $('.selectArticulos');
			$(newItem).draggable('destroy');
			$(newItem).attr('title', tooltip);
			$(newItem).attr('class', 'title');
			$(newItem).cluetip({splitTitle: '|'});
			$('#foobar').html(msg);
			break;

		case '-9':
			//showError(msg);
			//$('input:submit#submit2').attr("disabled", "");
			break;
	}
	
	$(":submit").val("Enviar mi adorno y mi mensaje");
	$(":submit").attr("disabled", "");
}