$( document ).ready( function(){
	
	// del plug-in
	$("#draggable").draggable( { containment : '#limites_drag' } );
	
	var escala = 1.5;
	var factor_move = escala - 1;
	var duracion = 500;
	
	// set imagen inicial para evitar pixelación en zoom.
	$( 'div.#draggable img#elemento_drag_principal').css( {
		
		'width': '1365px',
		'height': '1365px'
	
	} );
	
	// zoom in 1
	$( 'div.zona_mas#zm1' ).toggle( function(){
	
		var ancho_img_drag_principal = $( 'img#elemento_drag_principal' ).width();
		var alto_img_drag_principal = $( 'img#elemento_drag_principal' ).height();
		var posicion_img_drag_principal = $( 'img#elemento_drag_principal' ).position();
		
		$( 'img#elemento_drag_principal' ).animate( {
		
			'width' : ancho_img_drag_principal * escala,
			'height' : alto_img_drag_principal * escala,
			'top' : -420,
			'left' : -250
		
		}, 500 );

	}, function(){
		
		// zoom out 1
		var ancho_img_drag_principal = $( 'img#elemento_drag_principal' ).width();
		var alto_img_drag_principal = $( 'img#elemento_drag_principal' ).height();
		var posicion_img_drag_principal = $( 'img#elemento_drag_principal' ).position();
		
		$( 'img#elemento_drag_principal' ).animate( {
		
			'width' : ancho_img_drag_principal / escala,
			'height' : alto_img_drag_principal / escala,
			'top' : 0,
			'left' : 0
		
		}, 500 );
		
	} );
	
	// zoom in 2
	$( 'div.zona_mas#zm2' ).toggle( function(){
	
		var ancho_img_drag_principal = $( 'img#elemento_drag_principal' ).width();
		var alto_img_drag_principal = $( 'img#elemento_drag_principal' ).height();
		var posicion_img_drag_principal = $( 'img#elemento_drag_principal' ).position();
		
		$( 'img#elemento_drag_principal' ).animate( {
		
			'width' : ancho_img_drag_principal * escala,
			'height' : alto_img_drag_principal * escala,
			'top' : -340,
			'left' : -350
		
		}, 500 );

	}, function(){
		
		// zoom out 2
		var ancho_img_drag_principal = $( 'img#elemento_drag_principal' ).width();
		var alto_img_drag_principal = $( 'img#elemento_drag_principal' ).height();
		var posicion_img_drag_principal = $( 'img#elemento_drag_principal' ).position();
		
		$( 'img#elemento_drag_principal' ).animate( {
		
			'width' : ancho_img_drag_principal / escala,
			'height' : alto_img_drag_principal / escala,
			'top' : 0,
			'left' : 0
		
		}, 500 );
		
	} );

	// zoom in 3
	$( 'div.zona_mas#zm3' ).toggle( function(){
	
		var ancho_img_drag_principal = $( 'img#elemento_drag_principal' ).width();
		var alto_img_drag_principal = $( 'img#elemento_drag_principal' ).height();
		var posicion_img_drag_principal = $( 'img#elemento_drag_principal' ).position();
		
		$( 'img#elemento_drag_principal' ).animate( {
		
			'width' : ancho_img_drag_principal * escala,
			'height' : alto_img_drag_principal * escala,
			'top' : -280,
			'left' : -420
		
		}, 500 );

	}, function(){
		
		// zoom out 3
		var ancho_img_drag_principal = $( 'img#elemento_drag_principal' ).width();
		var alto_img_drag_principal = $( 'img#elemento_drag_principal' ).height();
		var posicion_img_drag_principal = $( 'img#elemento_drag_principal' ).position();
		
		$( 'img#elemento_drag_principal' ).animate( {
		
			'width' : ancho_img_drag_principal / escala,
			'height' : alto_img_drag_principal / escala,
			'top' : 0,
			'left' : 0
		
		}, 500 );
		
	} );

	// ZONAS MÁS
	$( 'div.zona_mas p' ).hide();
	$( 'div.zona_mas ul' ).hide();
	
	// zona 1
	$( 'div.zona_mas#zm1' ).toggle( function(){
		
		var pos_zona_1 = $( this ).position();		
		$( this ).animate( {
						
			top : pos_zona_1.top,
			left : pos_zona_1.left
			
		}, duracion );
		
		// oculta otras 
		$( 'div.zona_mas#zm2, div.zona_mas#zm3' ).hide();	
	
		// muestra info zona mas, oculta parrafo principal
		$( 'div.zona_mas p' ).fadeIn( 300 );
		$( 'div.zona_mas ul' ).fadeIn( 300 );
		$( 'p#info_central_home' ).fadeTo( 300, 0.3 );
		
		$( 'div.zona_mas ul li a' ).click( function(){
			
			$( 'div.zona_mas#zm1' ).unbind();
			
		} );

	}, function(){
	
		var pos_zona_1 = $( this ).position();		
		$( this ).animate( {
						
			top : pos_zona_1.top,
			left : pos_zona_1.left
			
		}, duracion );
		
		// muestra otras 
		$( 'div.zona_mas#zm2, div.zona_mas#zm3' ).fadeIn( 200 );	
	
		// muestra info zona mas, oculta parrafo principal		
		$( 'div.zona_mas p' ).fadeOut( 300 );
		$( 'div.zona_mas ul' ).fadeOut( 300 );
		$( 'p#info_central_home' ).fadeTo( 300, 1 );
		
	} );
	
	// zona 2
	$( 'div.zona_mas#zm2' ).toggle( function(){
		
		var pos_zona_2 = $( this ).position();		
		$( this ).animate( {
						
			top : pos_zona_2.top,
			left : pos_zona_2.left
			
		}, duracion );
		
		// oculta otras 
		$( 'div.zona_mas#zm1, div.zona_mas#zm3' ).hide();	
	
		// muestra info zona mas, oculta parrafo principal
		$( 'div.zona_mas p' ).fadeIn( 300 );
		$( 'div.zona_mas ul' ).fadeIn( 300 );
		$( 'p#info_central_home' ).fadeTo( 300, 0.3 );
		
		$( 'div.zona_mas ul li a' ).click( function(){
			
			$( 'div.zona_mas#zm2' ).unbind();
			
		} );

	}, function(){
	
		var pos_zona_2 = $( this ).position();		
		$( this ).animate( {
						
			top : pos_zona_2.top,
			left : pos_zona_2.left
			
		}, duracion );
		
		// muestra otras 
		$( 'div.zona_mas#zm1, div.zona_mas#zm3' ).fadeIn( 200 );	
	
		// muestra info zona mas, oculta parrafo principal		
		$( 'div.zona_mas p' ).fadeOut( 300 );
		$( 'div.zona_mas ul' ).fadeOut( 300 );
		$( 'p#info_central_home' ).fadeTo( 300, 1 );
		
	} );

	// zona 3
	$( 'div.zona_mas#zm3' ).toggle( function(){
		
		var pos_zona_3 = $( this ).position();		
		$( this ).animate( {
						
			top : pos_zona_3.top,
			left : pos_zona_3.left
			
		}, duracion );
		
		// oculta otras 
		$( 'div.zona_mas#zm1, div.zona_mas#zm2' ).hide();	
	
		// muestra info zona mas, oculta parrafo principal
		$( 'div.zona_mas p' ).fadeIn( 300 );
		$( 'div.zona_mas ul' ).fadeIn( 300 );
		$( 'p#info_central_home' ).fadeTo( 300, 0.3 );
		
		$( 'div.zona_mas ul li a' ).click( function(){
			
			$( 'div.zona_mas#zm3' ).unbind();
			
		} );

	}, function(){
	
		var pos_zona_3 = $( this ).position();		
		$( this ).animate( {
						
			top : pos_zona_3.top,
			left : pos_zona_3.left
			
		}, duracion );
		
		// muestra otras 
		$( 'div.zona_mas#zm1, div.zona_mas#zm2' ).fadeIn( 200 );	
	
		// muestra info zona mas, oculta parrafo principal		
		$( 'div.zona_mas p' ).fadeOut( 300 );
		$( 'div.zona_mas ul' ).fadeOut( 300 );
		$( 'p#info_central_home' ).fadeTo( 300, 1 );
		
	} );

} );