globals = { rootdir: '', elements: '', selectedObj: '' }
globals.rootdir = '';
globals.selectedObj = new Array();

$(document).ready( function(){
    $('#carousel').carousel({
        interval: 7000
    })


	//Prevengo che la pressione dell'invio faccia il submit del form (serve nel codice sconto nel carrello)
	$(window).keydown(function(event){
		if(event.keyCode == 13) {
			event.preventDefault();
			return false;
		}
	});


	// validate signup form on keyup and submit
	if( document.getElementById("contact") ){
		$("#contact").validate({
			rules: {
				nome: "required",
				telefono: "required",
				email: {
					required: true,
					email: true
				},
				testo: "required",
				privacy: "required"
			},

			messages: {
				nome: "Inserisci il tuo nome e cognome",
				telefono: "Inserisci il tuo numero di telefono",
				email: "Inserisci il tuo indirizzo email",
				testo: "Inserisci il testo del messaggio",
				privacy: "Devi accettare il trattamento dei dati personali"
			}
		});
	}


	//order form
	if( document.getElementById("form_order") ){
		$("#form_order").validate({
			rules: {
				nome: "required",
				cognome: "required",
				indirizzo: "required",
				citta: "required",
				provincia: "required",
				cap: "required",
				nazione: "required",
				telefono: "required",
				email: {
					required: true,
					email: true
				}
			},

			messages: {
				nome: "Inserisci il tuo nome",
				cognome: "Inserisci il tuo cognome",
				indirizzo: "Inserisci il tuo indirizzo",
				citta: "Inserisci la tua citta'",
				provincia: "Inserisci la tua provincia",
				cap: "Inserisci il tuo cap",
				nazione: "Inserisci la tua nazione",
				telefono: "Inserisci il tuo numero di telefono",
				email: "Inserisci il tuo indirizzo email"
			}
		});
	}



    //Toggle sulla popup utente al click sul +
    $('#ordine>div.clickable').click( function(){
    	if( parseInt($('#ordine').css('top'))=='0' ){
    		$('#ordine').stop().animate({ 'top': -280 });
    		$(this).text('Mostra profilo utente');
    	}
    	else{
    		$('#ordine').stop().animate({ 'top': 0 });
    		$(this).text('Nascondi profilo utente');
    	}
    });


    //Al click sul + apro la popup utente
    $('.add').click( function(){
    	if( parseInt($('#ordine').css('bottom'))=='-280' ){
    		$('#ordine').stop().animate({ 'bottom': 0 });
    		$('#ordine>div.clickable').text('Mostra profilo utente');
    	}
    });


    $('[data-href]').click( function(){
		launch_modal( $(this).data('title'), $(this).data('href') );
	});


	$('#popup').on('shown.bs.modal', function(){
		$(".modal-body").css( "max-height", $(window).height() - 120 );
	});

	$('#popup').on('hidden.bs.modal', function(){
		$(this).data('modal', null);
	});


    $(".only_digits").keyup (function (){accept_only_integer( $(this) );});

	$('.fancybox').each( function(){
		$(this).on('click', function(e){
			e.preventDefault();
			launch_modal_img( $(this).attr('href') );
		});
	});

    setInterval( "dots_anim();", 200 );

	$('table').wrap("<div class='table-responsive'/>");
	
	/**
	  * Nascondo/mostro il tasto di ordine nei casi in cui c'è una combinazione da scegliere
	  */
	setInterval( function(){
		if( $('#prezzo-text').text() == '...' ){
			selecteds = 0;
			
			select_totali = $('select[name*=attributo_]').length;
			input_totali = $('input[name*=attributo_]').length;
			campi_totali = select_totali + input_totali;
			
			//Mostro il tasto di avanzamento solo se ho selezionato delle opzioni
			$('select[name*=attributo_] option:selected').each( function(){
				valore = $(this).val();
				
				if( valore != '' ){
					selecteds++;
				}
			});
			
			if( selecteds == campi_totali ){
				$('#btn-order').show();
			} else {
				$('#btn-order').hide();
			}
		} else {
			$('#btn-order').show();
		}
	}, 500 );
});


//Puntini caricamento
function dots_anim(){
	if( $('#dots').html()=='&nbsp;' )
		$('#dots').text('.');
	else if( $('#dots').text()=='.' )
		$('#dots').text('..');
	else if( $('#dots').text()=='..' )
		$('#dots').text('...');
	else if( $('#dots').text()=='...' )
		$('#dots').html('&nbsp;');
}



function getCurrentPage( url ){
	page = url;
	re = /(.+)\/(.+)$/g;
	complete_url = page.replace(re,"$2");

	//tolgo il parametro lang
	re = /(.+)&lang=[a-z]{2}/g;
	complete_url = complete_url.replace( re, "$1" );
	complete_url = complete_url.replace( /#.*/, '' );

	return complete_url;
}


function qty_add( el, price, q ){
	thisq = parseInt( el.val() );

	newq = thisq+q;

	if( newq > 0 && newq<1000 ){
		el.val( thisq+q );

		subtot = price*newq;

		$('#totale').html( subtot.toFixed(2).replace('.', ',')+" &euro;" );
	}
}



function check_form( formid ){
	return false;
}


// Funzione per forzare valori numerici con la virgola o il punto
function accept_only_integer(jSelector) {
	var x = jSelector.val();
	var numero = x.replace(/[^0-9-'.'-',']/g,"");
	if( numero=='' )
		numero = 1;
	jSelector.attr('value', numero);
}


//Verifica che tutti i campi dell'ordine siano stati compilati, altrimenti mostra un avviso
function check_order(){
	ok = true;

	//Check attributi
	$('[name*=attributo_]').each( function(){

		if( $(this).is('select') ){
			if( $(this).find('option:selected').val()=='' ){
				ok = false;
			}
		}

		else{
			if( $(this).val()=='' ){
				ok = false;
			}
		}
	});
	if( !ok ){ alert( "Devi compilare tutte le caratteristiche del prodotto!" ); return false; }


	if( !ok ){ return false; }

	return true;
}



//Verifica se i campi selezionati con il selettore "selector" sono stati compilati e ritorna true, altrimenti ritorna false
function check_mandatory( selector ){
	check = true;

	$(selector).each( function(){
		if( $(this).val()=='' )
			check = false;
	});

	return check;
}


/**
  * Carica la maschera di ritaglio dato il numero di maschera (1 o 2) e il file png da sovrapporre
  * Specifico anche l'orientamento dell'immagine caricata (P (portrait) o L (landscape))
  */
function load_mask( idx, filename_p1, filename_p2, orientation, w, h, wmask, hmask, opts ){
	//Carico i vari file che fungono da maschere
	$('#mask'+idx).append( "<div id='overlay"+idx+"_container'><img src='"+filename_p1+"' id='overlay"+idx+"' class='overlay"+idx+" bg' style='max-width:none; max-height:none; width:861px; height:440px;'><img src='"+filename_p2+"' id='overlay"+idx+"_fg' class='overlay"+idx+" fg' style='max-width:none; max-height:none; width:"+wmask+"px; height:"+hmask+"px;'></div>" );




	$('#overlay'+idx).load( function(){
		$('#uploading-overlay').hide();


		//Centro la maschera caricata in mezzo al workspace
		$('#overlay'+idx+'_fg').css( 'left', $('#workspace'+idx).width()/2 - $('#overlay'+idx+'_fg').width()/2 + 3 );
		$('#overlay'+idx+'_fg').css( 'top', ( $('#workspace'+idx).height()/2 - $('#overlay'+idx+'_fg').height()/2 ) + 2 );

		img_ratio = $('#custom'+idx).width() / $('#custom'+idx).height();

		if( $('#overlay'+idx+'_fg').width() < $('#overlay'+idx+'_fg').height() ){
			//Se l'immagine supera in altezza la maschera, la scalo
			if( $('#custom'+idx).height() > h ){
				w_max = $('#custom'+idx).width() / $('#custom'+idx).height() * h;
			}

			//Se l'immagine supera in larghezza la maschera, la scalo
			if( $('#custom'+idx).width() > w ){
				w_max = w;
			}

			else{
				w_max = w;
			}
		}

		else{
			//Se l'immagine supera in larghezza la maschera, la scalo
			if( $('#custom'+idx).width() > w ){
				w_max = w;
			}


			//Se l'immagine supera in altezza la maschera, la scalo
			if( $('#custom'+idx).height() > h ){
				w_max = $('#custom'+idx).width() * h / $('#custom'+idx).height();
			}

			else{
				w_max = w;
			}
		}



		//Adattamento foto a maschera
		new_w = w_max;
		new_h = w_max/$('#custom'+idx).width() * $('#custom'+idx).height();

		$('#custom'+idx).width( w_max ).attr('data-width'+idx, new_w);
		$('#custom'+idx).height( new_h ).attr('data-height'+idx, new_h);

		$('input[name=data-width'+idx+']').val( new_w );
		$('input[name=data-height'+idx+']').val( new_h );


		$('#custom'+idx).css('left', $('#workspace'+idx).width()/2 - $('#custom'+idx).width()/2 );
		$('#custom'+idx).css('top', $('#workspace'+idx).height()/2 - $('#custom'+idx).height()/2 );

		enable_image_editing( 'custom'+idx, idx );


		$('input[name=width_custom'+idx+']').val( new_w );
		$('input[name=width_height'+idx+']').val( new_h );

		//$('input[name=width_'+id+']').val( w );
		//$('input[name=height_'+id+']').val( h );


		//Effetti rollover immagine
		$('#workspace'+idx).mouseover( function(event){
			$selected = $('#'+globals.selectedObj[idx]);

			//Mostro gli handler del resize
			$selected.find('.ui-resizable-handle, .delete-btn').show();

			//Ripristino colore clipart solo a quello selezionato
			$selected.css('border-color', '#0D7FD2');

			//In primo piano
			$('#custom'+idx+', div[id*=maskbg_], .element').each( function(){
				$(this).data('old-z', $(this).css('z-index') );

				if( $selected.attr('id') == $(this).attr('id') ){
					$(this).css('z-index', $(this).data('old-z')+100000 ).css('opacity', '0.8');
				} else {
					$(this).css('z-index', $(this).data('old-z')+10000 ).css('opacity', '0.8');
				}
			});
		});

		$('#workspace'+idx).mouseout( function(event){
			//Nascondo gli handler del resize
			$('.ui-resizable-handle, .delete-btn').hide();

			//Nascondo tratteggio clipart
			$('.element').css('border-color', 'transparent');

			//Torna in secondo piano
			$('#custom'+idx+', div[id*=maskbg_], .element').each( function(){
				$(this).css('z-index', $(this).data('old-z')).css('opacity', '1');
			});

			//Ripristino la profondità del livello selezionato
			$selected = $('#'+globals.selectedObj[idx]);
			$selected.css('z-index', $('#'+globals.selectedObj[idx]).data('old-z') );
		});


		$('#custom'+idx).mousedown( function(event){
			$('#custom'+idx+', div[id*=maskbg_]').css('opacity', '0.6');
		});

		$('#custom'+idx).mouseup( function(event){
			$('#custom'+idx+', div[id*=maskbg_]').css('opacity', '0.8');
		});


		//Imposto l'altezza del div contenitore, perchè essendo position:absolute l'img non copre gli spazi
		$('#mask'+idx).parent().height( h );

		id = 'custom'+idx;
		init_levels( idx );
		set_active( id, idx );
	});
}



function set_effect( effect, idx ){
	id = globals.selectedObj[idx];

	$('#uploading-overlay').show();


	val = $('input[name='+effect+'_'+id+']').val();

	//Azzero gli effetti precedenti
	$('.othereffects_'+id).val('0');
	$('.scelta'+idx).removeClass('active');


	$('input[name='+effect+'_'+id+']').val('1');
	$('#effect_'+effect+'_'+idx).addClass('active');

	$.get( globals.rootdir+'/imagefilter.php?filename='+$('input[name=filename_'+idx+'_'+id+']').val()+'&brightness='+$('input[name=brightness_'+id+']').val()+'&contrast='+$('input[name=contrast_'+id+']').val()+'&grayscale='+$('input[name=grayscale_'+id+']').val()+'&negate='+$('input[name=negate_'+id+']').val()+'&sepia='+$('input[name=sepia_'+id+']').val()+'&matrix='+$('input[name=matrix_'+id+']').val()+'&blu='+$('input[name=blu_'+id+']').val(), function(data){
    	$('#'+id+' > img').attr( 'src', data ).bind( 'load', function(){ $('#uploading-overlay').hide(); $('#'+id+' > img').unbind('load'); } );
    });
}





if ($.ui.resizable){
    var _changeCopy = $.extend({}, $.ui.resizable.prototype._change);

    $.ui.resizable.prototype._change =  {
        newChange: function(event, dx, direction, dy)
        {
            var angle = getAngle(this);
            var convertedAngle = parseInt(angle / 90);
            var axisToAngle = { "s" : 0, "w" : 1, "n" : 2, "e" : 3 };

            if (typeof axisToAngle[direction] == 'undefined' || angle <= 90 || angle >= 270)
            {
                return _changeCopy[direction].call(this, event, dx, dy);
            }

            var angleToAxis = { 0 : "s", 1 : "w", 2: "n", 3: "e" };
            var correctedAxis = axisToAngle[direction] + convertedAngle;
            correctedAxis = correctedAxis % 4;
            return _changeCopy[angleToAxis[correctedAxis]].call(this, event, dx, dy);
        },
        e: function(event, dx)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "e");
        },
        w: function(event, dx)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "w");
        },
        n: function(event, dx, dy)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "n", dy);
        },
        s: function(event, dx, dy)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "s", dy);
        },
        se: function(event, dx, dy)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "se", dy);
        },
        sw: function(event, dx, dy)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "sw", dy);
        },
        ne: function(event, dx, dy)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "ne", dy);
        },
        nw: function(event, dx, dy)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "nw", dy);
        }
    };

    var getAngle = function(widget){
		return getRotationDegrees( widget.element );
    };
}


function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle +=360 : angle;
}


/**
  * Calcolo il prezzo del singolo articolo in base alle combinazioni
  */
function calcola_prezzo(){
	idattributi = new Array();
	idvalori = new Array();

	//Attributi a click
	$('input[name*=attributo_]', '#order-form').each( function(){
		v = ( $(this).attr('name') ).split('_');
		idattributo = v[1];
		idvalore = $(this).val();

		idattributi.push( idattributo );
		idvalori.push( idvalore );
	});


	//Attributi a select
	$('select[name*=attributo_]', '#order-form').each( function(){
		v = ( $(this).attr('name') ).split('_');
		idattributo = v[1];

		idvalore = $(this).find('option:selected').val();

		if( idvalore != '' ){
			idattributi.push( idattributo );
			idvalori.push( idvalore );
		}
	});


	//Calcolo prezzo in base alle combinazioni
	$.ajaxSetup({ async: false });

	$.post( globals.rootdir+'/ajaxreq.php?op=get_price_by_combination', { productid: $('input[name=productid]').val(), idattributi: idattributi.toString(), idvalori: idvalori.toString() }, function(data){
		if( data != '0.00' ){
			v = data.split('.');
			$('#prezzo-text').html( "<big><big>&euro; "+v[0]+",</big></big>"+v[1] );
			$('#prezzo').val( data );
		}

		else{
			$('#prezzo-text').html( '...' );
			$('#prezzo').val( '0.00' );
		}
	});
}




function increment_qty( id ){
	$.post( globals.rootdir+'/ajaxreq.php', { op: 'increment', id: id }, function(data){
		if( data == 'ok' ){
			location.href = location.href;
		}
	});
}

function decrement_qty( id ){
	$.post( globals.rootdir+'/ajaxreq.php', { op: 'decrement', id: id }, function(data){
		if( data == 'ok' ){
			location.href = location.href;
		}
	});
}


function launch_modal( title, href, init_modal ){
	//Lettura contenuto div
	if( href.substr(0,1) == '#' ){
		data = $(href).html();

		$('#popup').html(
				'<div class="modal-dialog modal-lg">' +
				'	<div class="modal-content">' +
				'		<div class="modal-header">' +
				'			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>' +
				'			<h4 class="modal-title">' + title + '</h4>' +
				'		</div>' +
				'		<div class="modal-body">' + data + '</div>'
				);
			if( init_modal == 1 ){
				$('#popup').modal('show');
			}
	}

	else{
		$.get( href, function(data, response){
			if( response == 'success' ){

				$('#popup').html(
					'<div class="modal-dialog modal-lg">' +
					'	<div class="modal-content">' +
					'		<div class="modal-header">' +
					'			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>' +
					'			<h4 class="modal-title">' + title + '</h4>' +
					'		</div>' +
					'		<div class="modal-body">' + data + '</div>'
					);
				if( init_modal == 1 ){
					$('#popup').modal('show');
				}
			}
		});
	}
}


function launch_modal_img( src ){
	img = new Image();
	img.src = src;

	$('#popup2').css('opacity', 0);

	img.onload = function(){
		img_w = this.width;
		img_h = this.height;

		$('#popup2').html(
			'<div class="modal-dialog modal-lg">' +
			'	<div class="modal-content">' +
			'		<div class="modal-header">' +
			'			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>' +
			'			<h4 class="modal-title"></h4>' +
			'		</div>' +
			'		<div class="modal-body"><img src="' + src + '"></div>'
			);

		$('#popup2').modal('show');

		$('#popup2').on('shown.bs.modal', function(){
			$('#popup2').css('opacity', 1);
			$('#popup2 .modal-body').width( img_w ).height( img_h );
			$('#popup2 .modal-lg').width( img_w + 35 );
			$('#popup2.modal').width( img_w + 35 );
			$('#popup2.modal').css( 'margin-left', -$('#popup2 .modal-lg').width()/2 );
		});
	}
}



function add_clipart( filename, w, h, idx, delete_file, testo ){
	globals.elements++;
	id = 'element'+globals.elements;

	$('#popup').modal('hide');
	$('#uploading-overlay').show();


	w_mask = $('#overlay'+idx+'_fg').width();
	h_mask = $('#overlay'+idx+'_fg').height();


	//Copio la png della clipart in /img_tmp/
	$.get( globals.rootdir+'/add_clipart.php?op=uploadok&idx='+idx+'&id='+globals.elements+'&filename='+filename, function(data){
		filename = data;

		//Aggiunta png
		$('#mask'+idx).append( "<div data-erasable='"+delete_file+"' data-width='"+w+"' data-height='"+h+"' data-id='"+globals.elements+"' class='element' style='max-width:none; max-height:none; width:"+w+"px; height:"+h+"px; z-index:"+(1+globals.elements)+"' id='element"+globals.elements+"'><img src='"+filename+"' alt='Caricamento anteprima...'><div class='delete-btn' data-element='"+globals.elements+"'><span class='fa fa-trash clickable' title='Elimina elemento...'></span></div></div>" );


		$("#element"+globals.elements+" > img").load( function(){
			//Ri-inizializzo tutti gli "Elimina elemento"
			$('.delete-btn').each( function(){
				$(this).click( function(){
					$( '#element'+$(this).data('element') ).fadeOut();

					this_file = $('#element'+$(this).data('element')+' > img').attr('src');

					//Rimozioni campi form
					$('input[name$=_element'+globals.elements+']').remove();

					$.get( globals.rootdir+'/add_text.php?op=delfile&filename='+this_file, function(data){
						//Imposto come primo elemento attivo il primo che trovo piuttosto che dia errore non essendo impostato
						set_active( 'custom'+idx, idx );
						delete_level( id, idx );
					});
				});
			});


			//Se l'immagine supera in larghezza la maschera, la scalo
			if( $('#element'+globals.elements).width() > w_mask ){
				w_max = w_mask;
				h_max = parseInt( w_max/$('#element'+globals.elements).width() * $('#element'+globals.elements).height() );

				//Se l'altezza dell'elemento supera ancora l'altezza della maschera, riduco di nuovo
				if( h_max > h_mask ){
					w_max = parseInt( $('#element'+globals.elements).width() * h_mask / $('#element'+globals.elements).height() );
				}
			}

			//Se l'immagine supera in altezza la maschera, la scalo
			else if( $('#element'+globals.elements).height() > h_mask ){
				w_max = parseInt( $('#element'+globals.elements).width() * h_mask / $('#element'+globals.elements).height() );
			}


			//Adattamento foto a maschera
			new_w = w_max;
			new_h = parseInt( w_max/$('#element'+globals.elements).width() * $('#element'+globals.elements).height() );

			$('#element'+globals.elements).width( w_max ).attr('width', new_w);
			$('#element'+globals.elements).height( new_h ).attr('height', new_h);


			//Centramento immagine
			x = $('#workspace'+idx).width()/2 - $('#element'+globals.elements+' > img').width()/2;
			y = $('#workspace'+idx).height()/2 - $('#element'+globals.elements+' > img').height()/2;
			$('#element'+globals.elements).css('left', x );
			$('#element'+globals.elements).css('top', y );


			//Aggiunta campi del form per nome file, altezza/larghezza, x/y dell'elemento
			$('#order-form').append( "<input type='hidden' name='filename_"+idx+"_"+id+"' id='filename_"+idx+"_"+id+"' value='"+filename+"'>" );
			$('#order-form').append( "<input type='hidden' name='origwidth_"+id+"' value='"+new_w+"'>" );
			$('#order-form').append( "<input type='hidden' name='origheight_"+id+"' value='"+new_h+"'>" );
			$('#order-form').append( "<input type='hidden' name='width_"+id+"' id='width_"+id+"' value='"+new_w+"'>" );
			$('#order-form').append( "<input type='hidden' name='height_"+id+"' id='height_"+id+"' value='"+new_h+"'>" );
			$('#order-form').append( "<input type='hidden' name='posx_"+id+"' id='posx_"+id+"' value='"+x+"'>" );
			$('#order-form').append( "<input type='hidden' name='posy_"+id+"' id='posy_"+id+"' value='"+y+"'>" );
			$('#order-form').append( "<input type='hidden' name='rotate_"+id+"' id='rotate_"+id+"' value='0'>" );
			$('#order-form').append( "<input type='hidden' name='brightness_"+id+"' id='brightness_"+id+"' class='othereffects_"+id+"' value='0'>" );
			$('#order-form').append( "<input type='hidden' name='contrast_"+id+"' id='contrast_"+id+"' class='othereffects_"+id+"' value='0'>" );
			$('#order-form').append( "<input type='hidden' name='grayscale_"+id+"' id='grayscale_"+id+"' class='othereffects_"+id+"' value='0'>" );
			$('#order-form').append( "<input type='hidden' name='negate_"+id+"' id='negate_"+id+"' class='othereffects_"+id+"' value='0'>" );
			$('#order-form').append( "<input type='hidden' name='sepia_"+id+"' id='sepia_"+id+"' class='othereffects_"+id+"' value='0'>" );
			$('#order-form').append( "<input type='hidden' name='matrix_"+id+"' id='matrix_"+id+"' class='othereffects_"+id+"' value='0'>" );
			$('#order-form').append( "<input type='hidden' name='blu_"+id+"' id='blu_"+id+"' class='othereffects_"+id+"' value='0'>" );


			//Collega gli elementi sulla destra all'immagine
			enable_image_editing( 'element'+globals.elements, idx );


			$('#uploading-overlay').hide();

			$(this).unbind('load');
		});
	});

	if( testo == '' ){
		add_level( id, idx, 'clipart', testo );
	} else{
		add_level( id, idx, 'text', testo );
	}

	init_levels( idx );
}



//Imposta l'elemento attivo
function set_active( id, idx ){
	globals.selectedObj[idx] = id;
	$('.element').removeClass('active');

	$('#'+id).addClass('active');

	/**
	  * Reimposto tutte le opzioni dell'elemento selezionato sul riquadro di destra
	  */
	//Rotazione
	$('#txt_rotate'+idx).val( $('input[name=rotate_'+id+']').val() );

	r = parseInt( $('#txt_rotate'+idx).val() );
	val = r;

	if( isNaN(r) ){
		r = 0;
		val = 0;
	}

	if( val > 180 ){
		r = 180;
		val = 180;
	}

	else if( val < -180 ){
		r = -180;
		val = -180;
	}

	$('#slider_rotate'+idx).slider( "value", val );



	//Brightness
	$('#txt_brightness'+idx).val( $('input[name=brightness_'+id+']').val() );

	percent = parseInt( $('#txt_brightness'+idx).val() );
	val = percent*3-150;

	if( isNaN(percent) ){
		percent = 50;
		val = 0;
	}

	if( val > 150 ){
		percent = 100;
		val = 150;
	}

	else if( val < -150 ){
		percent = 0;
		val = 0;
	}

	$('#slider_brightness'+idx).slider( "value", $('input[name=brightness_'+id+']').val() );




	//Contrast
	$('#txt_contrast'+idx).val( $('input[name=contrast_'+id+']').val() );

	percent = parseInt( $('#txt_contrast'+idx).val() );
	val = percent*3-150;

	if( isNaN(percent) ){
		percent = 50;
		val = 0;
	}

	if( val > 150 ){
		percent = 100;
		val = 150;
	}

	else if( val < -150 ){
		percent = 0;
		val = 0;
	}

	$('#slider_contrast'+idx).slider( "value", $('input[name=contrast_'+id+']').val() );



	//Seleziono il filtro cliccato dell'elemento selezionato
	$('.scelta'+idx).removeClass('active');

	if( $('input[name=blu_'+id+']').val() == '1' ){
		$('#effect_blu_'+idx).addClass('active');
	}

	else if( $('input[name=matrix_'+id+']').val() == '1' ){
		$('#effect_matrix_'+idx).addClass('active');
	}

	else if( $('input[name=sepia_'+id+']').val() == '1' ){
		$('#effect_sepia_'+idx).addClass('active');
	}

	else if( $('input[name=negate_'+id+']').val() == '1' ){
		$('#effect_negate_'+idx).addClass('active');
	}

	else if( $('input[name=grayscale_'+id+']').val() == '1' ){
		$('#effect_grayscale_'+idx).addClass('active');
	}

	else{
		$('#effect_noeffect_'+idx).addClass('active');
	}
}


function enable_image_editing( id, idx ){
	//Azzero i vari binding
	$('#txt_rotate'+idx+', #txt_brightness'+idx+', #txt_contrast'+idx).unbind( 'keydown' );

	//Disabilito drag&drop e resize degli elementi per abilitare poi solo quello attivo
	$('.element.ui-draggable', '#workspace'+idx).draggable('disable');
	$('.element.ui-resizable', '#workspace'+idx).resizable('disable');


	$('#'+id).draggable({
		cursor: 'move',

		//Centramento maschera su immagine caricata
		create: function(){
			x = $(this).position().left;
			y = $(this).position().top;

			$('input[name=posx_'+id+']').val( x );
			$('input[name=posy_'+id+']').val( y );
		},

		drag: function(){
			//Lettura coordinate maschera
			x = $(this).position().left;
			y = $(this).position().top;

			$('input[name=posx_'+id+']').val( x );
			$('input[name=posy_'+id+']').val( y );
		},

		//Se l'immagine esce oltre il centro la riposiziono al centro
		stop: function(){
			img_w = parseInt( $('#'+id).width() );
			img_h = parseInt( $('#'+id).height() );

			x = parseInt( $(this).position().left + img_w/2 );
			y = parseInt( $(this).position().top + img_h/2 );


			wrk_w = parseInt( $('#workspace'+idx).width() );
			wrk_h = parseInt( $('#workspace'+idx).height() );

			if( x < 0-img_w*0.4 || x > wrk_w+img_w*0.4 || y < 0-img_h*0.4 || y > wrk_h+img_h*0.4 ){
				$('#'+id).css('left', wrk_w/2 - img_w/2 );
				$('#'+id).css('top', wrk_h/2 - img_h/2 );
			}

			set_active( id, idx );
		}
	}).resizable({
		aspectRatio: $('input[name=origwidth_'+id+']').val() / $('input[name=origheight_'+id+']').val(),
		handles: "nw, ne, sw, se",

		resize: function(event,ui){
			w = ui.size.width;
			h = ui.size.height;

			$('#'+id+' > img').width( w );
			$('#'+id+' > img').height( h );

		    $('input[name=width_'+id+']').val( w );
			$('input[name=height_'+id+']').val( h );


			set_active( id, idx );
		}
	});




	//Cambio percentuale da campo input, limitando il range come nello slider
	$('#txt_rotate'+idx).keydown( function(){
		$(this).prev().removeClass('ok').addClass('edit');
		$(this).prev().html('<span class="fa fa-edit" id="set_rotate'+idx+'"></span>');

		$('#set_rotate'+idx).click( function(){
			r = parseInt( $('#txt_rotate'+idx).val() );
			val = r;

			if( isNaN(r) ){
				r = 0;
				val = 0;
			}

			if( val > 180 ){
				r = 180;
				val = 180;
			}

			else if( val < -180 ){
				r = -180;
				val = -180;
			}

			$('#txt_rotate'+idx).val( r );
			$('#slider_rotate'+idx).slider( "value", val );

	        $('input[name=rotate_'+id+']').val(val );

			$('#txt_rotate'+idx).prev().removeClass('edit').addClass('ok').text( '%' );

			$('#'+id).rotate({ angle: r });
		});
	});

	 $("#slider_rotate"+idx).slider({
	    value: 0,
	    max: 180,
	    min: -180,

	    slide: function(event, ui){
	    	r = ui.value;
			$('#txt_rotate'+idx).val( parseInt(r) );
			$('#'+id).rotate({ angle: r });
	    },

	    stop: function(event, ui){
	        $('input[name=rotate_'+id+']').val( ui.value );
	    }
	});

	$('#'+id).draggable({ disabled: false });
	$('#'+id).resizable({ disabled: false });





	//Cambio percentuale da campo input, limitando il range come nello slider
	$('#txt_brightness'+idx).keydown( function(){
		$(this).prev().removeClass('ok').addClass('edit');
		$(this).prev().html('<span class="fa fa-edit" id="set_brightness'+idx+'"></span>');

		$('#set_brightness'+idx).click( function(){
			percent = parseInt( $('#txt_brightness'+idx).val() );
			val = percent*3-150;

			if( isNaN(percent) ){
				percent = 50;
				val = 0;
			}

			if( val > 150 ){
				percent = 100;
				val = 150;
			}

			else if( val < -150 ){
				percent = 0;
				val = 0;
			}

			$('#txt_brightness'+idx).val( percent );
			$('#slider_brightness'+idx).slider( "value", val );

			$('#uploading-overlay').show();
	        $('input[name=brightness_'+id+']').val(val );

	        $.get( globals.rootdir+'/imagefilter.php?filename='+$('input[name=filename_'+idx+'_'+id+']').val()+'&brightness='+$('input[name=brightness_'+id+']').val()+'&contrast='+$('input[name=contrast_'+id+']').val()+'&grayscale='+$('input[name=grayscale_'+id+']').val()+'&negate='+$('input[name=negate_'+id+']').val()+'&sepia='+$('input[name=sepia_'+id+']').val()+'&matrix='+$('input[name=matrix_'+id+']').val()+'&blu='+$('input[name=blu_'+id+']').val(), function(data){
	        	$('#'+id+' > img').attr( 'src', data ).bind( 'load', function(){ $('#uploading-overlay').hide(); } );
	        });

			$('#txt_brightness'+idx).prev().removeClass('edit').addClass('ok').text( '%' );
		});
	});


	 //Luminosità
	 $("#slider_brightness"+idx).slider({
	    value: 0,
	    max: 150,
	    min: -150,

	    slide: function(event, ui){
	    	percent = (ui.value+150)/3;
			$('#txt_brightness'+idx).val( parseInt(percent) );
	    },

	    stop: function(event, ui){
	    	$('#uploading-overlay').show();
	        $('input[name=brightness_'+id+']').val( ui.value );

	        $.get( globals.rootdir+'/imagefilter.php?filename='+$('input[name=filename_'+idx+'_'+id+']').val()+'&brightness='+$('input[name=brightness_'+id+']').val()+'&contrast='+$('input[name=contrast_'+id+']').val()+'&grayscale='+$('input[name=grayscale_'+id+']').val()+'&negate='+$('input[name=negate_'+id+']').val()+'&sepia='+$('input[name=sepia_'+id+']').val()+'&matrix='+$('input[name=matrix_'+id+']').val()+'&blu='+$('input[name=blu_'+id+']').val(), function(data){
	        	$('#'+id+' > img').attr( 'src', data ).bind( 'load', function(){ $('#uploading-overlay').hide(); } );
	        });
	    }
	 });






	//Cambio percentuale da campo input, limitando il range come nello slider
	$('#txt_contrast'+idx).keydown( function(){
		$(this).prev().removeClass('ok').addClass('edit');
		$(this).prev().html('<span class="fa fa-edit" id="set_contrast'+idx+'"></span>');

		$('#set_contrast'+idx).click( function(){
			percent = parseInt( $('#txt_contrast'+idx).val() );
			val = percent*3-150;

			if( isNaN(percent) ){
				percent = 50;
				val = 0;
			}

			if( val > 150 ){
				percent = 100;
				val = 150;
			}

			else if( val < -150 ){
				percent = 0;
				val = 0;
			}

			$('#txt_contrast'+idx).val( percent );
			$('#slider_contrast'+idx).slider( "value", val );

			$('#uploading-overlay').show();
	        $('input[name=contrast_'+id+']').val(val );

	        $.get( globals.rootdir+'/imagefilter.php?filename='+$('input[name=filename_'+idx+'_'+id+']').val()+'&brightness='+$('input[name=brightness_'+id+']').val()+'&contrast='+$('input[name=contrast_'+id+']').val()+'&grayscale='+$('input[name=grayscale_'+id+']').val()+'&negate='+$('input[name=negate_'+id+']').val()+'&sepia='+$('input[name=sepia_'+id+']').val()+'&matrix='+$('input[name=matrix_'+id+']').val()+'&blu='+$('input[name=blu_'+id+']').val(), function(data){
	        	$('#'+id+' > img').attr( 'src', data ).bind( 'load', function(){ $('#uploading-overlay').hide(); } );
	        });

			$('#txt_contrast'+idx).prev().removeClass('edit').addClass('ok').text( '%' );
		});
	});


	 //Contrasto
	 $("#slider_contrast"+idx).slider({
	    value: 0,
	    max: 150,
	    min: -150,

	    slide: function(event, ui){
	    	percent = (ui.value+150)/3;
			$('#txt_contrast'+idx).val( parseInt(percent) );
	    },

	    stop: function(event, ui){
	    	$('#uploading-overlay').show();
	    	val = ui.value;

	    	$('input[name=contrast_'+id+']').val( val );

	        $.get( globals.rootdir+'/imagefilter.php?filename='+$('input[name=filename_'+idx+'_'+id+']').val()+'&brightness='+$('input[name=brightness_'+id+']').val()+'&contrast='+$('input[name=contrast_'+id+']').val()+'&grayscale='+$('input[name=grayscale_'+id+']').val()+'&negate='+$('input[name=negate_'+id+']').val()+'&sepia='+$('input[name=sepia_'+id+']').val()+'&matrix='+$('input[name=matrix_'+id+']').val()+'&blu='+$('input[name=blu_'+id+']').val(), function(data){
	        	$('#'+id+' > img').attr( 'src', data ).bind( 'load', function(){ $('#uploading-overlay').hide(); } );
	        });
	    }
	 });
}


function add_level( id, idx, type, testo ){
	if( type == 'clipart' ){
		$('#livelli'+idx).append( '<div id="livello_'+id+'" class="livello"><span class="fa fa-star"></span> Clipart</div>' );
	}

	else if( type == 'text' ){
		if( testo.length > 15 ){
			testo = testo.substr(0, 25)+'...';
		}

		$('#livelli'+idx).append( '<div id="livello_'+id+'" class="livello"><span class="fa fa-text-width"></span> '+testo+'</div>' );
	}

	init_levels( idx );
	set_active_level( id, idx );
}


function set_active_level( id, idx ){
	$('#livelli'+idx+' .livello').removeClass('active');
	$('#livelli'+idx+' #livello_'+id).addClass('active');
	globals.selectedObj[idx] = id;
	enable_image_editing( id, idx );
}


function init_levels( idx ){
	$('#livelli'+idx+' .livello').unbind('click');

	$('#livelli'+idx+' .livello').each( function(){
		$(this).on('click', function(){
			id = $(this).attr('id');
			id = id.replace( 'livello_', '' );
			set_active_level( id, idx );
		});
	});
}


function delete_level( id, idx ){
	$('#livelli'+idx+' #livello_'+id).remove();
	init_levels( idx );
	set_active( 'custom'+idx, idx );
	set_active_level( 'custom'+idx, idx );
}


function clear_3d(){
	location.reload();

	scene.children.forEach(function(object){
	    scene.remove(object);
	});

	$('#preview-3d').html('');

	$('#preview-3d').hide();

	window.oncontextmenu = null;
	document.oncontextmenu = function(){}
}

function preload_3d( tipo ){
	$('.preview3d > div').removeClass('active');
	$('#'+tipo).toggleClass('active');
	$('#upload-3d').slideDown();

	if( tipo == 'cover' || tipo == 'tazza' || tipo == 'tela' || tipo == 'maglietta' ){
		$('#orientation').val( 'portrait' );
	} else {
		$('#orientation').val( 'landscape' );
	}

	$('#tipo3d').val( tipo );
}

function load_3d(){
	tipo = $('#tipo3d').val();

	var file_data = $('#file3d').prop('files')[0];
    var form_data = new FormData();
	form_data.append('orientation', $('#orientation').val() );
    form_data.append('file', file_data);

    $.ajax({
		xhr: function() {
			$('#progress3d').removeClass('hide');

		    var xhr = new window.XMLHttpRequest();

		    xhr.upload.addEventListener("progress", function(evt) {
				if( evt.lengthComputable ){
					var percentComplete = evt.loaded / evt.total;
					percentComplete = parseInt(percentComplete * 100);

					$('#progress3d > div').width( parseInt(percentComplete)+"%" );

					if( percentComplete === 100){ }

				}

		    }, false);

		    return xhr;
		},
	    url: 'upload3d.php?tipo='+tipo, // point to server-side PHP script
	    dataType: 'text',  // what to expect back from the PHP script, if anything
	    cache: false,
	    contentType: false,
	    processData: false,
	    data: form_data,
	    type: 'post',
	    success: function( filename ){
			setTimeout( function(){
				$('#preview-3d').load( "/3d/preview.php?filename="+filename+"&tipo="+tipo ).show();
				$('#preview-3d').show();
			}, 1000);
	    }
    });
}

function toggleCatalogMode(){
	$.post(
		'/ajaxreq.php',
		{ op: 'toggle-catalog-mode' },
		function(){
			window.location = window.location.href;
		}
	);
}