// JavaScript Document
jQuery(
	function()
	{
		/* ################################################## */
		/* ################################################## */
		/* ################################################## */
		/* #### LINE DRAWING STARTS LOWER DOWN THE PAGE ##### */
		/* ################################################## */
		/* ################################################## */
		/* ################################################## */
		
		// Creates function replaceAll
		String.prototype.replaceAll = function ( str1, str2, ignore ) 
		{
			return this.replace(new RegExp(str1.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g,"\\$&"),(ignore?"gi":"g")),(typeof(str2)=="string")?str2.replace(/\$/g,"$$$$"):str2);
		};
		
		// Define the default length of a fence section
		var length_of_a_section = parseFloat( 2.4 ) ;
		
		// Define selling IDs of the different items in the sketch 
		var id_section_pile = [];
		id_section_pile['300-312-00'] = '300-313-01';
id_section_pile['100-301-00'] = '200-302-01';
id_section_pile['200-302-00'] = '200-302-01';
id_section_pile['300-313-00'] = '300-313-01';
id_section_pile['300-326-00'] = '300-313-01';
id_section_pile['500-005-00'] = '500-005-01';
		
		// Insight protection fence id
		insight_fence_id = '500-005-00';
		
		// Default fence id
		default_fence_id = '100-301-00';

		var id_end_pile = [];
		id_end_pile['300-312-00'] = '300-313-02';
id_end_pile['100-301-00'] = '200-302-02';
id_end_pile['200-302-00'] = '200-302-02';
id_end_pile['300-313-00'] = '300-313-02';
id_end_pile['300-326-00'] = '300-313-02';
id_end_pile['500-005-00'] = '500-005-02';
		var id_gate_pile = '600-301-02' ;
		
		var id_corner_pile = [];
		id_corner_pile['300-312-00'] = '300-313-03';
id_corner_pile['100-301-00'] = '200-302-03';
id_corner_pile['200-302-00'] = '200-302-03';
id_corner_pile['300-313-00'] = '300-313-03';
id_corner_pile['300-326-00'] = '300-313-03';
id_corner_pile['500-005-00'] = '500-005-03';
		
		
		
		first_fence_id = default_fence_id ;
		first_fence_id_default = true;
		extra_section_piles_array = [] ;		
		
		
		// Define object for popups
		var popup_box = $( "#popup" ) ;
				
		// Assign artn attribute to info-box explanations
		$( ".manual-circle1" ) . next() . attr( "data-artn", id_end_pile[ first_fence_id ] ) ; 
		$( ".manual-circle2" ) . next() . attr( "data-artn", id_corner_pile[ first_fence_id ] ) ;
		$( ".manual-circle3" ) . next() . attr( "data-artn", id_section_pile[ first_fence_id ] ) ;
		$( ".manual-circle4" ) . next() . attr( "data-artn", id_gate_pile ) ;
		
		// General function for pop up boxes
		function popup( pop_content, hideok )
		{
			
			if( typeof hideok === 'undefined' ) hideok = false ;
			
			// Set the specific content into box and fade it to visible
			popup_box . children( "div:first" ) . html( pop_content ) ;
			popup_box . delay( 500 ) . fadeIn() ;
			
			
			$( "#popup a" ) . each( function()
			{
				$( this ) . click( function()
				{
					$( "div.hide a[data-id='" + $( this ) . data( "id" )  + "']" ) . trigger( 'click' ) ; 
			 		return false ;
				} ) ;
			} ) ;
			
			// Fade the background a little bit, to lay focus on popup 
			$( ".blackoverlay" ) . css( { width: $( window ) . width() , height: $( "html, body" ) . height() } ) .  delay( 400 ) . fadeIn() ;
			
			// Control closing popup
			if( hideok === true )
				$( "a.close_popup" ) . hide() ;
			else
				$( "a.close_popup" ) . show() ;
		}
		
		
		// Split total data to array
			// Function that splits totaldatajoin into multiarray 
		 	function split_that_old_man()
			{
				if ( typeof total_data_join != 'undefined' && total_data_join . length > 0 )
				{
					var finalarray = [] ;
					var foo1 = [] ;
					
					foo1 = total_data_join . split( "_" ) ;
					for( i=0 ; i < foo1 . length ; i++ )
					{
						finalarray . push( foo1[ i ] . split( "x" ) ) ;
					}
					
					return finalarray ;
				}
				else
					return false ;
			}
			
			// Join splitted total data
			function join_that_old_man( x )
			{
				if( typeof x != 'undefined' )
				{
					total_data_join = '' ;
					var foo_rows = [] ;
					
					for( i=0 ; i < x . length ; i++ )
					{
						foo_rows . push( x[ i ] . join( "x" ) ) ;
					}
					
					total_data_join = foo_rows . join( "_" ) ;
					current_totaldata = total_data_join . split( "_" ) ;
				}
				else
					return false ;
					
			}
		
			// Function for when clicking on existing fence line to edit it
			function mark_this( a, b, c, d )
			{
				// a and b is starting points of line (x/y)
				// c and d is ending points of line (x/y)
				
				// MAKE VAR COL ACCURATE
				var foo_total = split_that_old_man() ;
				
				for( foo_i = 0 ; foo_i < foo_total . length ; foo_i ++ )
				{  
					if(
						foo_total[ foo_i ][ 8 ] == 'fence' &&
						foo_total[ foo_i ][ 1 ] == a &&
						foo_total[ foo_i ][ 2 ] == b &&
						foo_total[ foo_i ][ 3 ] == c &&
						foo_total[ foo_i ][ 4 ] == d
					  ){
						cols = foo_total[ foo_i ];
					}
				}
				// END OF MAKE VAR COL ACCURATE
				
				bu_total = total_data_join ;
				this_design_id = a +'z'+ b +'z'+ c +'z'+ d ;
				total_data_join += '&marked=' + this_design_id;
				fetch_image_tag();
				total_data_join = bu_total ;
				marked = 1 ;
				
				checkthis = '';

				
				/* Check checkbox */
				if( ( $.inArray( this_design_id, even_steven ) > -1 ) )
				{	
					var checkthis = 'checked="checked"' ;
				}
				var pop_content = '<h3>Markerad sträcka</h3><input type="text" name="change_length_value" value="' + col[ 5 ] + '"> m <input type="button" name="change_length" data-designid="' + this_design_id + '" value="Ändra">' ;
				
				pop_content += '<h3>Övriga inställningar</h3>' ;
				
				pop_content += '<input type="checkbox" ' + checkthis + ' name="even_steven" data-designid="' + this_design_id + '"> Fördela stolpar symmetriskt' ;
				
				var check1 = ''; var check2 = '';
				
				if( get_pile_status( col[ 1 ], col[ 2 ] ) == 1 )
					check1 = 'checked="checked"';
				if( get_pile_status( col[ 3 ], col[ 4 ] ) == 1 )
					check2 = 'checked="checked"';
				
				
				pop_content += '<h3>Slutstolpar</h3>';
				if(
					id_end_pile[ first_fence_id ] ==  get_pile_id( col[ 1 ], col[ 2 ] ) ||
					id_end_pile[ insight_fence_id ] ==  get_pile_id( col[ 1 ], col[ 2 ] )
				)
					pop_content += '<input type="checkbox" ' + check1 + ' name="pile1" data-x="' + col[ 1 ] + '" data-y="' + col[ 2 ] + '">';
				pop_content += ' –––– ';
				
				if(
					id_end_pile[ first_fence_id ] == get_pile_id( col[ 3 ], col[ 4 ] ) ||
					id_end_pile[ insight_fence_id ] == get_pile_id( col[ 3 ], col[ 4 ] )
				)
					pop_content += '<input type="checkbox" ' + check2 + ' name="pile2" data-x="' + col[ 3 ] + '" data-y="' + col[ 4 ] + '">';
							 
				popup( pop_content );
			}
		
		
			$( document ) . on( 'change', '[name=pile1], [name=pile2]', function()
				{	
					// Update piles
					var thisx = $( this ) . data( 'x' ) ;
					var thisy = $( this ) . data( 'y' ) ;
					
					var newset;
					foo_total = split_that_old_man() ;
					for( foo_i = 0 ; foo_i < foo_total . length ; foo_i ++ )
					{
						
						// Detect this pile
						 if(
							 foo_total[ foo_i ][ 8 ] == 'pile' &&
							 foo_total[ foo_i ][ 1 ] == thisx &&
							 foo_total[ foo_i ][ 2 ] == thisy
						 )
						 {
							 // If visibility is on/off, change it
							 if( $(this) . is( ":checked" ) )
								foo_total[ foo_i ][ 9 ] = '1' ;
							 else	
							 	foo_total[ foo_i ][ 9 ] = '0' ;
							 
							 
							 join_that_old_man( foo_total ) ;

							 update_total_number_of_piles();
							 fetch_image_tag();
							 
						 }
					}
					

				}) ;
			
			
			// Returns pile  visibility status from x/y position
			function get_pile_status(x,y)
			{
				// Check every line to see if click was made within its area
				
				var rows = [];
				rows = split_that_old_man();
				var itis = false;
			
				for( i = 0; i < rows . length; i++ )
				{
				
					// col[8] says what object type it is
					if( rows[ i ][ 8 ] === 'pile' && rows[ i ][ 1 ] == x && rows[ i ][ 2 ] == y  )
					{
						var alive = rows[ i ][ 9 ];
					}
				}
				switch( alive )
				{
					case '1' : return 1 ; break; 
					case '0' : return 0 ; break; 
				}
			}
			
			// Returns pile type  from x/y position
			function get_pile_id(x,y)
			{
				// Check every line to see if click was made within its area
				
				var rows = [];
				rows = split_that_old_man();
				var idofpile = false;
			
				for( i = 0; i < rows . length; i++ )
				{
					// col[8] says what object type it is
					if( rows[ i ][ 8 ] === 'pile' && rows[ i ][ 1 ] == x && rows[ i ][ 2 ] == y  )
					{
						idofpile = rows[ i ][ 0 ];
					}
				}
				
				if( idofpile )
					return idofpile ;
				else
					return false;
			}
		
		// Move sketch into picture if outside border
		// Expand the view up or left if length is stretching that way
		 	
			function move_sketch_into_artboard( thisdir )
			{
				
				if ( typeof thisdir === 'undefined' ) thisdir = false;
				if ( typeof point_x === 'undefined' ) point_x = 0;
				
				foo_length = $( 'input[id=fenceLength]' ). val() ;
				foo_x = point_x ;
				foo_y = point_y ;
				
				// Were gonna give the page two alternatives.
				// This first one concerns situations where a move is about to take place
				// The other one is for situations where the sketch is already outside the borders.
				
				// So, first case: Someone is about to do stuff
				
				endup_x = 0;
				endup_y = 0;
				
				if( thisdir  != false )
				{
					foo_dir = thisdir
				
					switch( foo_dir )
					{
						case 'left' :
							endup_x = foo_x - foo_length ;
							break;
							
						case 'up' :
							endup_y = foo_y - foo_length ;
							break;
							
						case 'up-right' :
							endup_y = foo_y - foo_length ;
							break;
							
						case 'up-left' :
							endup_x = foo_x - foo_length ;
							endup_y = foo_y - foo_length ;
							break;
							
						case 'down-left' :
							endup_x = foo_x - foo_length ;
							
							break;
					}
				}
				
				
				// Else. If we just want to check on the current sketch to fix if something has ALREADY gone wrong
				 if( thisdir == false )
				{
				
					foo_total = [] ;
					foo_total = split_that_old_man() ;
					for( foo_i = 0 ; foo_i < foo_total . length ; foo_i ++ )
					{
						if( parseFloat( foo_total[ foo_i ][ 1 ] ) < endup_x )
						{
							endup_x = foo_total[ foo_i ][ 1 ] ;
						}
						
						if( parseFloat( foo_total[ foo_i ][ 2 ] ) < endup_y )
						{
							endup_y = foo_total[ foo_i ][ 2 ] ;
						}
						
						if( parseFloat( foo_total[ foo_i ][ 3 ] ) < endup_x )
						{
							endup_x = foo_total[ foo_i ][ 3 ] ;
						}
						
						if( parseFloat( foo_total[ foo_i ][ 4 ] ) < endup_y )
						{
							endup_y = foo_total[ foo_i ][ 4 ] ;
						}
						
					}
				}
				
				
				// Now... "We must do something"
				endup_x = parseFloat(endup_x);
				endup_y = parseFloat(endup_y);
				
				if( endup_x < 0 || endup_y < 0 )
				{
					diff_x = ( endup_x * (-1) ) + 4;
					diff_y = ( endup_y * (-1) ) + 4;
					
					if( endup_x < 0 )
						endup_axis = 'x';
					if( endup_y < 0 )
						endup_axis = 'y';
					if( endup_x < 0 && endup_y < 0 )
						endup_axis = 'xy';
					
					foo_total = [];
					foo_total = split_that_old_man() ;
					for( foo_i = 0 ; foo_i < foo_total . length ; foo_i ++ )
					{
						switch( endup_axis )
						{
							case 'x':
								if( foo_total[ foo_i ][ 1 ] != 0 )
									foo_total[ foo_i ][ 1 ] = parseFloat( foo_total[ foo_i ][ 1 ] ) + diff_x;
								
								if( foo_total[ foo_i ][ 3 ] != 0 )
									foo_total[ foo_i ][ 3 ] = parseFloat( foo_total[ foo_i ][ 3 ] ) + diff_x;
								break;
								
							case 'y':
								if( foo_total[ foo_i ][ 2 ] != 0 )
									foo_total[ foo_i ][ 2 ] = parseFloat( foo_total[ foo_i ][ 2 ] ) + diff_y;
								
								if( foo_total[ foo_i ][ 4 ] != 0 )
									foo_total[ foo_i ][ 4 ] = parseFloat( foo_total[ foo_i ][ 4 ] ) + diff_y;
								break;
								
							case 'xy':
								if( foo_total[ foo_i ][ 1 ] != 0 )
									foo_total[ foo_i ][ 1 ] = parseFloat( foo_total[ foo_i ][ 1 ] ) + diff_x;
									
								if( foo_total[ foo_i ][ 2 ] != 0 )
									foo_total[ foo_i ][ 2 ] = parseFloat( foo_total[ foo_i ][ 2 ] ) + diff_y;
								
								if( foo_total[ foo_i ][ 3 ] != 0 )
									foo_total[ foo_i ][ 3 ] = parseFloat( foo_total[ foo_i ][ 3 ] ) + diff_x;
								
								if( foo_total[ foo_i ][ 4 ] != 0 )
									foo_total[ foo_i ][ 4 ] = parseFloat( foo_total[ foo_i ][ 4 ] ) + diff_y;
								break;
							
						}
					}
					
					join_that_old_man( foo_total );
					
					// Handle the extra section piles
					if( typeof extra_section_piles_array !== 'undefined' )
					{
						foo_extrapiles = [];
						foo_extrapiles = extra_section_piles_array ;

						for( foo_i = 0 ; foo_i < foo_extrapiles . length ; foo_i ++ )
						{
							var thisfoo = foo_extrapiles[ foo_i ] . split( 'x' ) ;

							switch( endup_axis )
							{
								case 'x':
									if( thisfoo[ 1 ] != 0 )
										thisfoo[ 1 ] = parseFloat( thisfoo[ 1 ] ) + diff_x;

									if( thisfoo[ 3 ] != 0 )
										thisfoo[ 3 ] = parseFloat( thisfoo[ 3 ] ) + diff_x;
									break;

								case 'y':


									if( thisfoo[ 2 ] != 0 )
										thisfoo[ 2 ] = parseFloat( thisfoo[ 2 ] ) + diff_y;
									
									if( thisfoo[ 4 ] != 0 )
										thisfoo[ 4 ] = parseFloat( thisfoo[ 4 ] ) + diff_y;

									break;

								case 'xy':
									if( thisfoo[ 1 ] != 0 )
										thisfoo[ 1 ] = parseFloat( thisfoo[ 1 ] ) + diff_x;

									if( thisfoo[ 2 ] != 0 )
										thisfoo[ 2 ] = parseFloat( thisfoo[ 2 ] ) + diff_y;

									if( thisfoo[ 3 ] != 0 )
										thisfoo[ 3 ] = parseFloat( thisfoo[ 3 ] ) + diff_x;

									if( thisfoo[ 4 ] != 0 )
										thisfoo[ 4 ] = parseFloat( thisfoo[ 4 ] ) + diff_y;
									break;

							}
							
							foo_extrapiles[ foo_i ] = thisfoo . join('x');
						}
						

						//extra_section_piles_array = [];
						extra_section_piles_array = foo_extrapiles ;


					}
					switch( endup_axis )
					{
						case 'x':
							point_x += diff_x;
							break;
							
						case 'y':
							point_y += diff_y;
							break;
							
						case 'xy':
							point_x += diff_x;
							point_y += diff_y;
							break;
							
					}
					
				}
			}
			
		
		
		// Start up site info
		
		var pop_content = $( ".popwelcome" ) . html();
		popup( pop_content );
		
		
		function hide_popup()
		{
			$( "div#popup" ) . hide() ;
			$( ".blackoverlay" ) . hide();
			return false;
		}
		
		// Closing popup
		$( "div#popup div.cross, a.close_popup" ) . on( 'click', function()
		{
			hide_popup();
		} ) ;
		
		$( document ) . click( function()
		{
			$( 'div#popup' ) . hide() ;
			$( ".blackoverlay" ) . hide();
		} ) ;
		
		$( 'div#popup' ) . click( function( event )
		{
			event . stopPropagation() ;
		} ) ;
		
		// Final export popup. Sends popup variable values to form outside popup and submit that form
		$( '#popup' ) . on( 'click', 'input#final_export', function()
		{
			
			$( "input[name=email]" ) . val( $( "input[name=foo-email]" ) . val() ) ;
			$( "input[name=company]" ) . val( $( "input[name=foo-company]" ) . val() ) ;
			$( "input[name=name]" ) . val( $( "input[name=foo-name]" ) . val() ) ;
			$( "input[name=address]" ) . val( $( "input[name=foo-address]" ) . val() ) ;
			$( "input[name=postal]" ) . val( $( "input[name=foo-postal]" ) . val() ) ;
			$( "input[name=city]" ) . val( $( "input[name=foo-city]" ) . val() ) ;
			$( "input[name=shipping]" ) . val( $( "input[name=foo-shipping]:checked" ) . val() ) ;
			$( "form#export_form" ) . submit() ;
			
			
			
		} ) ;
		
		// Info button
		$( "a.type-info-button" ) . click( function()
		{
			pop_content = $( "." + $( this ) . data( "box" ) ) . html() ;
			popup( pop_content ) ;
			return false;
		
		} ) ;
		

	
		// Tip box
		function tipbox( h3, p )
		{
			$( ".tip h3") . html( h3 );
			$( ".tip p") . html( p );
			
			$( ".tip" ) . delay( 200 ) . slideDown() . delay( 100 ) . effect( "highlight", {}, 1000 ) ;
			
			tiphide_tmo = setTimeout( 
				function(){
					 $( ".tip" ) . slideUp() ;
			}, 15000 ) ;
			
		}
		
		// Close tip box
		$( ".tip > div.cross" ) . click( function()
		{
			clearTimeout( tiphide_tmo ) ;
			$( ".tip" ) . slideUp();
		});
		
		
		// Tipbox images with lightbox etc.
		function tipbox_pic( src, situation )
		{
			if( typeof situation === 'undefined' )
				situation = 'tipbox' ;
				
			returner = '<a href="' + src + '" class="' + situation + '-pic" data-lightbox="pic"><img src="' + src + '" alt="Bild"></a>';
			returner += '<i>Klicka för större bild</i>';
			
			return returner;
		}
		
		
		// Change length of fence line.
		$( "input[name=change_length_value], #fenceLength" ) . each( function(){
			
			$( this ) . on( 'keyup change', function()
			{
				$( "#fenceLength" ) . val(  $( this ) . val() . replaceAll( ",", "." ) ) ;
			
			} ) ;
			
		}); 
		
		
		$( "[name=profiles-qty]" ) . on( "focus", function()
		{
			tipbox( 'Förstärkningsprofiler', 'Förstärkningsprofiler ingår i våra insynsskydd. Tänk på det när du väljer antal.' ) ;
			
		});
		
		// Change length of gate fence 
		$( "#fenceLength[data-type=gate]" ) . on( 'keyup change', function()
		{
			if( $( this ) . val() > length_of_a_section )
			{
				$( this ) . val( length_of_a_section ) . trigger( 'change' ) ;
				tipbox( 'Grindlängd', 'Grinden får inte vara längre än ' + length_of_a_section + ' m' ) ;
			}
			
			var gateminlength = 0.8 ;
			
			if( $( this ) . val() < gateminlength )
			{
				$( this ) . val( gateminlength ) . trigger( 'change' );
				tipbox( 'Grindlängd', 'Grinden behöver vara minst ' + gateminlength + ' m' ) ;

			}
		
		} ) ;
		
		

		// Change selections by type
		function show_options_for()
		{
			$( ".settings-gate, .settings-fence" ) . hide() ;
			 
			switch( parseFloat( $( "#fenceName option:selected" ) . val() ) )
			{
				case 6 :
				case 7 : show = '.settings-gate'  ; $( '.settings-gate input' ) . attr( 'disabled', false) ;  $( '.settings-fence input' ) . attr( 'disabled', true );  break ;
				default : show = '.settings-fence' ;$( '.settings-fence input' ) . attr( 'disabled', false) ;  $( '.settings-gate input' ) . attr( 'disabled', true ); break ;
			}
			
			$( show ) . show() ;
			$( "input#fenceLength" ) . trigger( "change" ) ;
		}
		
		// Zoomit
		zoom_start = 0;
		$( ".zoom-glass" ) . click( function()
		{
			$( ".zoom-reset" ) . show();
			$( this ) . css( "background", "rgba(0,0,0,0.4)");
			
			if( zoom_start != 1 )
			{
				zoom_remember_w = $( ".php-image > img" ) . width() ;
				zoom_remember_h = $( ".php-image > img" ) . height() ;
			}
			
			zoom_start = 1;
			$( ".php-image > img" ) . width(
			
				$( ".php-image > img" ) . width() * 1.5
			);
			
			$( ".php-image > img" ) . height(
			
				$( ".php-image > img" ) . height() * 1.5
			);
			
			// Dragable
			if(
			 	$( ".php-image img" ) . width()-4 > $( ".php-image" ) . innerWidth()
			 )
			{
				$( ".php-image img" ) . css( "position", "relative") . draggable() ;
			}
		} ) ;
		
		$( ".zoom-reset" ) . click( function()
		{
			zoomreset();
		} ) ;
		
		
		// Zoom out to default / Reset Zoom
		function zoomreset()
		{
			$( ".zoom-glass" ) . css( "background", "");
			if( zoom_start == 1 )
			{
				$( ".php-image > img" ) . width( zoom_remember_w ) ;
				$( ".php-image > img" ) . height( zoom_remember_h ) ;
			}
			$( ".php-image img" ) . css( { "position":"", 'left':'', 'top':'' }) . draggable( false ) ;
			zoom_start = 0;
		}
		
		// Update main sketch's img src attribute
		// Gets the php generated image from this all data string	
		function fetch_image_tag()
		{
			add_section_piles( 'nofetch' ) ;
			
			cdate = new Date() ;
			
			
			qstring = 'width=' + artboard_width + '&height=' + artboard_height + '&prc=' + artboard_prc + '&data=' + total_data_join + '&section_piles=' + section_piles_array . join( '_' ) + '&even_steven=' + even_steven . join( '_' ) ;
			src = 'php-generated-sketch.php' ;
			
		
			
			$( ".php-image > img" ) . fadeOut() ;
			var loadalert = setTimeout( function(){ $( ".loading" ) . show(); }, 500 ) ;
	
			// Ajax image
			$.ajax( {
			  method: "POST",
			  url: "img-session-data/handle.php",
			  data: { 'data': qstring, 'sess_id' : '72918c50512bf400ef6bcff904594d6a'  }
			} )
			  . done( function( msg ) {
				
					
						// WHEN IMAGE IS SAVED
						// Show the pix
						
						$.ajax( {
						  method: "POST",
						  url: src,
						  data: { 'data': qstring, 'sess_id' : '72918c50512bf400ef6bcff904594d6a'}
						} )
						  . done( function( msg ) {
							  
							  var unique = [ cdate.getMonth(), cdate.getDate(), cdate.getHours(), cdate.getMinutes(), cdate.getSeconds(), cdate.getMilliseconds() ] ;
							  var newsrc = 'neh-temp/temp-72918c50512bf400ef6bcff904594d6a.png?v=' + unique . join( "-" ) ;
							  
							 $( ".php-image > img" ) . attr( 'src', newsrc ) . show() ;
							 
							 $( ".php-image > img" ) . on( "load", function() {
									
									
									$( this )  . fadeIn();  
								
									// Adapt imgs parents height after img 
									img_p = $( ".php-image" ) ;
									img = $( ".php-image > img" ) ;
									
									img . removeAttr( "style" ) ;
									img . css( "width", '100%' ) ;
									
									if( img . outerHeight() > img_p . innerHeight() )
									{
										img . removeAttr( "style" ) ;
										img . css( "height", img_p . outerHeight() ) ;
									}
											
									clearTimeout( loadalert );
									
									$( ".loading" ) . hide();
									zoomreset();
									
								});
						
						
						
						});
						
						
						
						
						
			  } ) ;
		}
		
		
		// Show popup woth export to pdf-settings
		$( "a.export-pdf-link" ) . click( function()
		{
			update_html_form();
			popup( $( ".popup-export-div" ) . html(), true ) ;
			/*$( this ) . closest( "form" ) . submit() ;
			*/return false;
		} ) ;
		
		// Handle link to shop
		$( "a.export-shop-link" ) . click( function()
		{
			var backup_action = $( "form#export_form" ) . attr( 'action' ) ;
			var backup_method = $( "form#export_form" ) . attr( 'method' ) ;
			$( "form#export_form" ) . attr( 'action', '/shop/basket.php' ) ;
			$( "form#export_form" ) . attr( 'method', 'post' ) ;
			$( "form#export_form" ) . submit() ;
			
			$( "form#export_form" ) . attr( 'action', backup_action ) ;
			$( "form#export_form" ) . attr( 'method', backup_method ) ;
						
			return false ;
			
		} ) ;
		
		// Run shop opotions for-script
		show_options_for() ;
		
		$( "#fenceName" ) . change( function()
		{	
			show_options_for() ;		
		} ) ;
		
		
		// Hover control
		$( "table.control-table tr td:not(.redo)" ) . hover(
			function()
			{
				if( $( this ) . hasClass( "locked" ) )
				return;
				$( this ) . css( "background", "#AFC6D6" ) ;
			},
			function()
			{
			
				$( this ) . removeAttr( "style" ) ;
			}
		) ;
		
		function total_fence_length_by_art( fence_artn )
		{
			var total_fence_length = 0;
			
			for( foo_i = 0 ; foo_i < foo_total . length ; foo_i++ )
			{
				var thiso = foo_total[ foo_i ];
				if( thiso[ 8 ] == 'fence' && thiso[ 0 ] == fence_artn  /* 8 = type | 0 = artn */ )
				{
					total_fence_length += parseFloat( thiso[ 5 ] );
				}
			}
			
			return total_fence_length + 0;
		}
		
		function total_needed_sections( fence_artn, include_gates = false )
		{
			var section_length = 2.4;
			var total_fence_length = 0;
			var foo_total = split_that_old_man() ;
			var no2_sections = [];
			
			
			

			for( foo_i = 0 ; foo_i < foo_total . length ; foo_i++ )
			{
				var thiso = foo_total[ foo_i ];
				var isgate = false;
				
				if( include_gates )
				{
					isgate = false;
					var gate_id = '6';
					if( thiso[ 0 ] == gate_id  )
						isgate = true;
				}
				// First, how many sections do we have on this line?
				var manysecs = 0 + Math . ceil( parseFloat( thiso[ 5 ] ) / section_length );
						
				
				if( thiso[ 8 ] == 'fence' && thiso[ 0 ] == fence_artn || true == isgate  /* 8 = type | 0 = artn */ )
				{
					var thislength = parseFloat( thiso[ 5 ] );
					total_fence_length += thislength;
					
					var id_check_for_even_steven = thiso[ 1 ] + 'z' + thiso[ 2 ] + 'z' + thiso[ 3 ] + 'z' + thiso[ 4 ] ;
					
					// If line is evened out 
					if(  $.inArray( id_check_for_even_steven, even_steven ) > -1 || thislength < section_length )
					{
						// Add sections and lengths
						for( no2_i = 0; no2_i < manysecs; no2_i++ )
						{
							no2_sections . push( parseFloat( thiso[ 5 ] ) / manysecs );
						}
						
					}
					
					// If line is not evened out
					else
					{
						// if not evensteven
						var foo_count = ( parseFloat( thiso[ 5 ] )  / section_length ) ; /* 5 = length */

						// If no decimals
						if( foo_count % 1 === 0 )
						{
							// Add sections and lengths
							for( no2_i = 0; no2_i < manysecs; no2_i++ )
							{
								no2_sections . push( parseFloat( thiso[ 5 ] ) / manysecs );
							}
							
						}
						else
						{
							var last_section_length = ( parseFloat( thiso[ 5 ] ) - ( Math . floor ( foo_count ) * section_length) ); /* 5 = length */
							
							// Add sections and lengths
							for( no2_i = 0; no2_i < manysecs-1; no2_i++ )
							{
								no2_sections . push( section_length );
							}
							
							no2_sections . push( last_section_length );
							
						}

					}
					
				}
			}
			
			no2_sections . sort(function(a, b){return b-a});

			// Final count of full sections to be bought
			
				// This variable will end up will totally needet full length (2.4) sections
				var final_secs = 0;

				// This array will be used for leftovers
				leftovers = [];

				// Loops through all sections in current sketch dispite length
				for( no2_i = 0; no2_i < no2_sections . length ; no2_i ++)
				{
					// Make a short var for current
					var thisf = no2_sections[ no2_i ] ;
					
					// If this one is a full length already, make it count to the final counter
					if( thisf == section_length )
					{
					 final_secs += 1;
					}
						
					
					// If its smaller than full length though
					else
					{
						// Set a flag for later
						var tookone = false;
						
						// Loop through the leftovers array (if first time, it'll be empty)
						for( lefti = 0; lefti < leftovers . length; lefti ++ )
						{
							// If this current leftover has enough length...
							if( leftovers[ lefti ] >= thisf )
							{
								// Take it instead of adding new section to cart
								tookone = true;
								
								// Subtract the length we took and leave it among the leftovers
								// By doing this, it will be 0 in length if took the lot, but only becomes a smaller leftover if not, to be used later.
								leftovers[ lefti ] = Math. round( ( leftovers[ lefti ]  - thisf ) * 100 ) / 100  ;
								
								// Since we chosed this one, we break the loop this time 
								break;
							}
						}
						
						
						
						// If no leftover fitted our needs for this section, we add a new one to the "cart".  
						if( false == tookone )
						{
							final_secs += 1;
							
							// If we didn't need the entire new one, we add the remaining bit to the leftovers array. 
							leftovers . push( Math. round( ( section_length - thisf ) * 100 ) / 100);
							
							// We sort that array by length so it's used the right way
							leftovers . sort();

						}

					}

				}

			if( fence_artn == first_fence_id )
			{
				$( "input[name=sections_qty]" ) . val( final_secs );
				$( "input[name=sections_total_length]" ) . val( Math.round( total_fence_length * 10 ) / 10 );
			}
			
				return  final_secs + 0;
			
		}
		
		function update_total_number_of_piles()
		{
			// This one doesnt include section piles
			
			
			foo_total = split_that_old_man();
			total_number_of_piles = 0;
			total_number_of_gate_piles = 0;
			total_number_of_insight_gate_piles = 0;
			piles_count = [] ;
			
			for(foo_i = 0; foo_i < foo_total . length; foo_i++)
			{
					if( foo_total[ foo_i ][ 8 ] == 'pile' && foo_total[ foo_i ][ 9 ] != '0' )
					{
						total_number_of_piles++ ;
						
						if( piles_count[ foo_total[ foo_i ][ 0 ] ] )
							piles_count[ foo_total[ foo_i ][ 0 ] ]++ ;
						else
							piles_count[ foo_total[ foo_i ][ 0 ] ] = 1 ; 

						if( foo_total[ foo_i ][ 0 ] == id_gate_pile )
							total_number_of_gate_piles++ ;
						
						var insight_pile = [];
						insight_pile[0] = id_end_pile[ insight_fence_id ] ;
						insight_pile[1] = id_corner_pile[ insight_fence_id ] ;
						insight_pile[2] = id_section_pile[ insight_fence_id ] ;
						
						
						if( insight_pile . includes( foo_total[ foo_i ][ 0 ] ) )
							total_number_of_insight_gate_piles++;
					}
				
			}
			
			
					for( i = 0; i < section_piles_array . length; i++ )
						{
							var fooi = section_piles_array[i] . split( "x" );
							if( insight_pile . includes( fooi[ 0 ] ) )
								total_number_of_insight_gate_piles++;
						}
			
 			
			// Apply the new amount on places
			
			
				// Gate piles
					if( $( ".gatepilesrow" ) . is( ":hidden" ) && total_number_of_gate_piles > 0 )
					{
						$( ".gatepilesrow" ) . slideDown();
					}

					$( "span.gate-hats-qty" ) .html( total_number_of_gate_piles ) ;
			
			
				// Other piles
					$( "input[name=hats-qty]" ) .val( total_number_of_piles + section_piles_array . length - total_number_of_gate_piles - total_number_of_insight_gate_piles ) ;
			
					$( "input[name=hats-insight-qty]" ) .val( total_number_of_insight_gate_piles ) ;
			
				// Profiles
					$( "input[name=profiles-qty]" ) .val( total_needed_sections( first_fence_id, true )  ) ;
			
				// Updating total nr of insight protection length
				$( "input[name=insight_protection_section_qty]" ) .val( total_needed_sections( insight_fence_id )  ) ;
				$( "input[name=insight_protection_total_length]" ) .val( total_fence_length_by_art( insight_fence_id )  ) ;
			
			
			// Apply on description map pilecount below image
			
			$( ".pile-count-span" ) . each( function()
			{
				
				
				if( typeof piles_count[ $( this ) . data( "artn" ) ] !== 'undefined' )
					var thevalue = piles_count[ $( this ) . data( "artn" ) ];
				else
					var thevalue = 0;
				
				// If section pile though
				if( $( this ) . data( "artn" ) == id_section_pile[ first_fence_id ] )
				{
					thevalue = section_piles_array . length;
				}
				
				
				$( this ) . html( ", " + thevalue + " st" ) ; 
				
				
				
			} ) ;
			
		}
		
		/* ######################################### */
		/* ######################################### */
		/* ######################################### */
		/* ##### HERE'S WHERE WE DRAW THE LINE ##### */
		/* ########### -- PRESETUP -- ############## */
		/* ######################################### */
		/* ######################################### */
		
		// Presettings
		
		artboard_width = 120;
		artboard_height = 120;
		var artboard_prc = 20;
		prev_draw_direction = ''; // In the loop of line, this will contain the previous direction
		prev_draw_type = '';
		prev_draw_insight = '';
		prev_is_diagonal = 0;
		prev_is_secondgate = 0;
		var p_prc = 0.7071 ; // Don't touch til the world ends
		var current_totaldata = [] ; // The container for all drawn objects 
		var section_piles_array = [] ; // The container for all drawn objects 
		var thisline ; // The container for all data of the current line
		var total_number_of_piles = 0;
		total_data_join = '';
		even_steven = [];
		
		var new_start = 0; 
		
		// New Start cursor
		function cursor_dot( choice )
		{	
			function mm_func( e )
			{
				var c_dist = 10;
				$( '#newdotcursor' ) . show() . css( {
				   left:  e.pageX + 10,
				   top:   e.pageY + 10
				} ) ;
			
				$( "input.mark_startpoint" ) . is( ":disabled" ) ;	
					
				$( document ) . click( function()
				{
					if( new_start == 1 )
					{
						$( document ) . unbind( 'mousemove', mm_func ) ;
						$( '#newdotcursor' ) . hide() ;
					}
				} ) ;
		 
			}
			
			$( document ) . on( 'mousemove',  mm_func ) ;
			
		}
		
		
		// Defining start positions for X and Y
		start_point_x = 2 ;
		start_point_y = 5 ;
		point_x = parseFloat( start_point_x ) ;
		point_y = parseFloat( start_point_y ) ;
		
		// Disable mark on click
		
		$( "input.mark_startpoint" ) . hide();
		
		$( "input.mark_startpoint" ) . click( function()
		{	
				$( this ) . attr( "disabled", true) ;
				cursor_dot() ;
				tipbox( 'Sätt ut en punkt', 'Klicka i skissen på den punkt du vill fortsätta sätta staket.' ) ;
		
		} ) ;
		
		// Shortcut for the artboard object
		svgAb = $( "#svg-artboard" ) ;
		
		// Styling code for faster typing length
		$( "input" ) . focus( function(){ $( this ) . select() ; } ) ;
		
		
		function add_pile( id, x, y )
		{
			thisline = [] ;
			
			thisline[ 0 ] = id ; // id
			thisline[ 1 ] = x ; // 1-x
			thisline[ 2 ] = y ; // 1-y
			thisline[ 3 ] = '' ;
			thisline[ 4 ] = '' ;
			thisline[ 5 ] = '' ;
			thisline[ 6 ] = '' ;
			thisline[ 7 ] = '' ;
			thisline[ 8 ] = "pile" ;  // Draw type
			thisline[ 9 ] = 1 ;  // Visibility status
				
			// And adds it to the array current_totaldata
			current_totaldata . push( thisline . join( 'x' ) ) ;
		
			point_x = x;
			point_y = y;	
	
			thisline = false ;
		}
		
		function add_extra_section_pile( id, x, y, fenceid )
		{
			var thisline_extra = false;
			thisline_extra = [];
			
			thisline_extra[ 0 ] = id ; // id
			thisline_extra[ 1 ] = String( x ) ; // 1-x
			thisline_extra[ 2 ] = String( y ) ; // 1-y
			thisline_extra[ 8 ] = "pile" ;  // Draw type
			thisline_extra[ 9 ] = '1' ;  // Visibility status
			
			extra_section_piles_array . push( thisline_extra . join( 'x' ) ) ;
		}
		
		// For use in add_section_piles function
		function add_section_pile( id, x, y, fenceid )
		{
			thisline = [];
			
			thisline[ 0 ] = id ; // id
			thisline[ 1 ] = String( x ) ; // 1-x
			thisline[ 2 ] = String( y ) ; // 1-y
			thisline[ 8 ] = "pile" ;  // Draw type
			thisline[ 9 ] = '1' ;  // Visibility status
			
			
			section_piles_array . push( thisline . join( 'x' ) ) ;

			thisline = false ;
		}
		
		
		
		
		// Sets variable id 
		var id = 1 ;
		
		
		$( ".php-image > img" ) . hide() ;
		
		// When want to mark a line		
		$( ".php-image > img" ) . click( function( e )
		{ 		
				var offset = $( this ) . offset() ;
				x = ( e . pageX - offset . left  ) * ( artboard_width /  $( this ) . outerWidth() ) ;
				y = ( e . pageY - offset . top  ) * ( artboard_height /  $( this ) . outerHeight() ) ;
				
				x = ( x / artboard_prc ) ;
				y = ( y / artboard_prc ) ;
				
				
				// Check every line to see if click was made within its area
				rows = false;
				col = false;
				rows = [];
				rows = total_data_join . split( "_" );
				var marked = 0;
			
				for( i = 0; i < rows . length; i++ )
				{
					
					col = [] ;
					
					// col[] will now be every object that exists on the sketch 
					col = rows[ i ] . split( "x" ) ;
					
					// col[8] says what object type it is
					if( col[ 8 ] === 'fence' )
					{
						
						if( col[ 8 ] === 'fence' &&
						(
							(
								// [ 7 ] is direction
								col[ 7 ] === 'right' &&
									
									// [ 1 ] & [ 2 ] is x1 and y1 
									// [ 3 ] & [ 4 ] is x2 and y2
									// 0.3 is a click detect area around the position
									y < ( parseFloat( col[ 2 ] ) + 0.3 ) &&
									y > ( parseFloat( col[ 2 ] ) - 0.3 ) &&
									x > ( parseFloat( col[ 1 ] ) ) &&
									x < ( parseFloat( col[ 3 ] ) ) 
							)	||
							(
								col[ 7 ] === 'left' &&

									y < ( parseFloat( col[ 2 ] ) + 0.3 ) &&
									y > ( parseFloat( col[ 2 ] ) - 0.3 ) &&
									x > ( parseFloat( col[ 3 ] ) ) &&
									x < ( parseFloat( col[ 1 ] ) ) 
							) ||
							(
								col[ 7 ] === 'down' &&

									x < ( parseFloat( col[ 1 ] ) + 0.3 ) &&
									x > ( parseFloat( col[ 1 ] ) - 0.3 ) &&
									y > ( parseFloat( col[ 2 ] ) ) &&
									y < ( parseFloat( col[ 4 ] ) ) 
							)	||
							(
								col[ 7 ] === 'up' &&

									x < ( parseFloat( col[ 1 ] ) + 0.3 ) &&
									x > ( parseFloat( col[ 1 ] ) - 0.3 ) &&
									y > ( parseFloat( col[ 4 ] ) ) &&
									y < ( parseFloat( col[ 2 ] ) ) 
							)
						)
						)
						{

							mark_this(
								col[ 1 ],
								col[ 2 ],
								col[ 3 ],
								col[ 4 ]
							) ;
							break;										
						}
						// Another advanced procedure if a paralell line
						else if ( 
							col[ 7 ] === ( 'upright' ) || col[ 7 ] === ( 'downright' ) ||
							col[ 7 ] === ( 'upleft' ) || col[ 7 ] === ( 'downleft' ) 
						)
						{

							imaginary_points = false;
							imaginary_points = [];
							var this_p_x = parseFloat( col[ 1 ] ) ;
							var this_p_y = parseFloat( col[ 2 ] ) ;
							var stopped = 0;

							while( stopped === 0 )
							{
								imaginary_points . push( this_p_x +'x'+ this_p_y ) ;

								// Handle the Y
								switch( col[ 7 ] )
								{
									case 'upright':
									case 'upleft':
										this_p_y -= 0.1 ;
										break;

									case 'downright':
									case 'downleft':
										this_p_y += 0.1 ;
										break;
								}

								// Handle the X
								switch( col[ 7 ] )
								{
									case 'upright':
									case 'downright':
										this_p_x += 0.1 ;
										break;

									case 'upleft':
									case 'downleft':
										this_p_x -= 0.1 ;
										break;
								}


								if(
									col[ 7 ] . match(/right/g) && this_p_x > col[ 3 ] ||
									col[ 7 ] . match(/left/g) && this_p_x < col[ 3 ]
								 )
								 {
									stopped = 1;
								 }
							}

							for( j=0; j<imaginary_points.length; j++ )
							{   

								thisdot = [];
								thisdot = imaginary_points[ j ] . split( 'x' ) ;
								if(

									x < ( parseFloat( thisdot[ 0 ] ) + 0.6 ) &&
									x > ( parseFloat( thisdot[ 0 ] ) - 0.6 ) &&
									y > ( parseFloat( thisdot[ 1 ] ) - 0.6 ) &&
									y < ( parseFloat( thisdot[ 1 ] ) + 0.6 )

								)
								{
									mark_this( col[ 1 ], col[ 2 ], col[ 3 ], col[ 4 ] ) ;
									break ;	

								}

							}

						}
					/*End of if col 8 == fence */
					}	
					
				}
				
				
				
				if( $( "input.mark_startpoint" ) . is( ":disabled" ) )
				{
					$( "input.mark_startpoint" ) . attr( "disabled", false ) ;
					
					bu_total = total_data_join ;
					total_data_join += '&click=' + x + 'x' + y ;
					fetch_image_tag() ;
					total_data_join = bu_total ;
					
					point_x = x;
					point_y = y;
				
					new_start = 1 ;
					
					
					
					$( ".dir-button" ) . removeClass( "locked" ) ;
				
				}
				
				
				fetch_image_tag();
			}
		) ;
		
		/* ######################################### */
		/* ######################################### */
		/* ######################################### */
		/* ##### HERE'S WHERE WE DRAW THE LINE ##### */
		/* ############## -- GO! -- ################ */
		/* ######################################### */
		/* ######################################### */
		
		var current_totaldata = [];
		global_resetter = [];
		backup_these = [];
		
	
		// When clicking some of the direction buttons
		$( ".dir-button" ) . click( function()
		{
			
			// Define first fence id
			if(
				first_fence_id_default == true &&
				$( 'select[id=fenceName] option:selected' ). data( "type" ) == 'fence' &&
				$( 'select[id=fenceName] option:selected' ) . val() != insight_fence_id
			)
			{
				first_fence_id = String( $( 'select[id=fenceName] option:selected' ). val() ) ;
				first_fence_id_default = false;
			}
			
			// Set correct id on spans for holding amout of piles below image
			
			$( ".pile-count-span" ) . each( function()
			{
				switch( $( this ) . data( "piletype" ) )
				{
					case 'end':
						$( this ) . data( "artn", id_end_pile[ first_fence_id ] ) ;
						break;
						
					case 'section':
						$( this ) . data( "artn", id_section_pile[ first_fence_id ] ) ;
						
						break;
						
					case 'corner':
						$( this ) . data( "artn" , id_corner_pile[ first_fence_id ] ) ;
						break;
				}
			}); 
			
			thismasterclick = $( this ) ; 
			
			backup_these = [
				'id',
				'total_data_join',
				'point_x',
				'point_y',
				'prev_draw_database_id',
				'prev_draw_length',
				'prev_draw_direction',
				'prev_draw_type',
				'prev_draw_insight',
				'prev_is_diagonal',
			];
			
			
			arr = [] ;
			for( i=0; i < backup_these . length; i++ )
			{
				arr[ backup_these[ i ] ] = window[ backup_these[ i ] ] ;
			}
				
			
			global_resetter . push( arr );
			arr = false; 
				
	      	
			move_sketch_into_artboard( $( this ) . data( "direction" )  );
		
			
			if( $( ".export-box" ) . is( ":hidden" ) )
			{
				$( ".export-box, input.mark_startpoint" ) . fadeIn( 'slow' ) ;
			}
			
			// Since we always add an ending pile at the end of all lines
			// And this abvously is another move, we remove possible end pile
			// From last move
			
			// Get the current value of current x y and the fields for fences length and model
			// Puts it into variables
			var current_draw_length = parseFloat( $( 'input#fenceLength:not(disabled)' ). val() ) ; 
			var current_draw_direction = $( this ) . data( "direction" ) ;  
			var current_draw_insight = false ; 
			var current_is_diagonal = 0;
			var current_draw_database_id = String($( 'select[id=fenceName] option:selected' ). val() ) ; 
			var current_draw_type =  $( 'select[id=fenceName] option:selected' ). data( "type" )  ; 
			var this_x1 = point_x ;
			var this_y1 = point_y ;
			var is_secondgate = 0;
			var starting_pile = false ;
			var second_starting_pile  = false ;
			
			if( current_draw_database_id == insight_fence_id )
				current_draw_insight = true;
			
			if( prev_draw_type == 'single-gate' && current_draw_type == 'single-gate' && prev_is_secondgate == 0 )
				is_secondgate = 1;
			
			
			if( is_secondgate )
			{
				var pushit = push_xy( current_draw_direction, this_x1, this_y1);
				this_x1 = pushit[0];
				this_y1 = pushit[1];
				
				var pushit = push_xy( current_draw_direction, this_x1, this_y1);
				this_x1 = pushit[0];
				this_y1 = pushit[1];
			}
			
			// Adds an end pile if normal fence after gate 
			if( prev_draw_type == 'single-gate' && ( ! is_secondgate ) )
				add_pile( id_end_pile[ current_draw_database_id ], point_x, point_y ) ;
			
			
			
			// Is this move a diaginal move?
			if( $.inArray( current_draw_direction, [ 'up-right', 'down-right', 'down-left', 'up-left'] ) > -1 )
			{
				current_is_diagonal = 1 ;
			}
			
			if(
				current_is_diagonal != prev_is_diagonal && new_start != 1 && id > 1
				&& thismasterclick . hasClass( "locked" ) != true
			 )
			{
				// Show tipbox about diagonal moves
				tipbox( '45°-vinkel', 'Mellan två sektioner behöver ni förstora regelhålen i sektionsstolpen. Detta för att det inte skall uppstå någon "brytning" i reglarna.' + tipbox_pic( 'images/45-corners.jpg' ) ) ;
		
			}
			
			// Cancel move if the button clicked is flagged locked
			// That is if the previous move was in the opposite direction
			if( $( this ) . hasClass( "locked" ) )
				return;
				
				
			// Detect move if we need to lock a position
			
			$( "#fenceLength" ) . on( 'change keyup', function()
			{
				lockstuff( $( this ) . data( "direction" ) );
			} ) ;
			
				lockstuff( current_draw_direction );
			
			
			
			function lockstuff( direction, everythingbut )
			{
				if( typeof everythingbut === 'undefined' )
					everythingbut = 0;
				
				if( everythingbut )
				{
					$( "td.dir-button" ) . addClass( "locked" ) ;
					$( "td[data-direction=" + everythingbut + "]" ) . removeClass( "locked" ) ;
					return;
				}
				
				safety_margin = parseFloat( 0.3 ) ;
				lockem = [];
				var lengthbox = parseFloat( $( "#fenceLength" ) . val() ) ;
				

				 // Lock opposite button
				 switch( direction )
				 {
					case 'up' : lock = 'down' ; break ;
					case 'down' : lock = 'up' ; break ;
					case 'left' : lock = 'right' ; break ;
					case 'right' : lock = 'left' ; break ;	
					case 'up-right' : lock = 'down-left' ; break ;
					case 'up-left' : lock = 'down-right' ; break ;
					case 'down-right' : lock = 'up-left' ; break ;
					case 'down-left' : lock = 'up-right' ; break ;
				 }
				
				 lockem . push(lock);
				
				 
				 $( ".dir-button" ) . removeClass( "locked" ) ;
				 
				 for(i=0;i<lockem.length;i++)
				 {
					 $( "td[data-direction=" + lockem[ i ] + "]" ) . addClass( "locked" ) ;
				
				 }

			}			
			
			if( 
				id > 1 &&
				new_start != 1 &&
				current_draw_type != 'single-gate' &&
				false == ( current_draw_type != 'single-gate' && prev_draw_type == 'single-gate' )
			)
			{
				redo_last_step() ;
			} 		
			
			// Check if we should increase the prev fence or add new
			if( 
				$( this ) . data( "direction" ) == prev_draw_direction
				&& current_draw_type == 'fence'
				&& current_draw_database_id == prev_draw_database_id
				&& new_start != 1
			)
			{
				current_draw_length += prev_draw_length;
				redo_last_step();
				this_x1 = point_x ;
				this_y1 = point_y ;
			
			}		
			
			function get_opposite_direction( direction )
			{
				switch( direction )
				{
				  case 'up' :
					return 'down';
					break ;
					
				  case 'down' :
					return 'up';
					break ;
					
				  case 'right' :
					return 'left';
					break ;
					
				  case 'left' :
					return 'right';
					break ;
					
				  case 'up-right' :
					return 'down-left';
					break ;
					
				  case 'down-right' :
					return 'up-left';
					break ;
					
				  case 'up-left' :
					return 'down-right';
					break ;
					
				  case 'down-left' :
					return 'up-right';
					break ;
				} 
			}
			
			
			
			// A routine calculation of a pushed x / y position if needed
			// saves result to push_point_x/y			
			function push_xy( direction, x, y )
			{
						
				// When an extra pile is added, ex as for gates,
				// this is how far from its neightbour it should be
				move_new_pile_this_much = 0.4 ;
				
				switch( direction )
				{
				  case 'up' :
					modifier = -1 ;
					dir = 'y' ;
					break ;
					
				  case 'down' :
					modifier = 1 ;
					dir = 'y' ;
					break ;
					
				  case 'right' :
					modifier = 1 ;
					dir = 'x' ;
					break ;
					
				  case 'left' :
					modifier = -1 ;
					dir = 'x' ;
					break ;
					
				  case 'up-right' :
					modifier = 1 ;
					dir = 'xyu' ;
					break ;
					
				  case 'down-right' :
					modifier = 1 ;
					dir = 'xyd' ;
					break ;
					
				  case 'up-left' :
					modifier = -1 ;
					dir = 'xyu' ;
					break ;
					
				  case 'down-left' :
					modifier = -1 ;
					dir = 'xyd' ;
					
					break ;
				} 
				
				if( dir == 'x' )	
				{
					push_point_x = parseFloat( x ) + ( parseFloat( move_new_pile_this_much ) * modifier ) ;
					push_point_y = y ;
				}
				
				if( dir == 'y' )	
				{
					push_point_x = x ;
					push_point_y = parseFloat( y ) + ( parseFloat( move_new_pile_this_much ) * modifier ) ;
				}
				
				if( dir == 'xyu' )	
				{
					push_point_x = parseFloat( x ) + ( parseFloat( move_new_pile_this_much ) * modifier ) * p_prc;
					push_point_y = parseFloat( y ) - ( parseFloat( move_new_pile_this_much ) * p_prc ) ;
				}
				
				if( dir == 'xyd' )	
				{
					push_point_x = parseFloat( x ) + ( parseFloat( move_new_pile_this_much ) * modifier ) * p_prc;
					push_point_y = parseFloat( y ) + ( parseFloat( move_new_pile_this_much ) * p_prc ) ;
				}
				
				return_array = [] ;
				return_array[ 0 ] = push_point_x ;
				return_array[ 1 ] = push_point_y ;
				
				return return_array;
			
			}
			
			// Detects what pile to use previous to line
				// First move
				if( id == 1 || new_start == 1 || prev_draw_insight != current_draw_insight )
				{
					
					pile_id = id_end_pile[ current_draw_database_id ];
					
									   
					if( 
						false == ( new_start == 1 && current_draw_insight == false )
							
						&&
							( 
								prev_draw_insight != current_draw_insight || current_draw_insight == true )
							)
					{
						pile_id = id_end_pile[ insight_fence_id ];
					}
					
					add_pile( pile_id, this_x1, this_y1 ) ;
					
				}
				
				
				// Changed direction
				if( prev_draw_direction != '' )
				{
					// Corner pile
						// If we changed dirction from last move and no gates are involved and it's not a new start
					if( 
						prev_draw_direction != $( this ) . data( "direction" ) && 
						current_draw_type != 'single-gate' && 
						prev_draw_type != 'single-gate' && 
						false == new_start &&
						prev_draw_insight == current_draw_insight
						)
					{	
						// In case 90° corner while moving diagonal
						if( current_is_diagonal == prev_is_diagonal )
						{
							if( prev_draw_insight != current_draw_insight || current_draw_insight == true )
								pile_id = id_corner_pile[ insight_fence_id ];	
							else
								pile_id = id_corner_pile[ first_fence_id ] ;
							
							
							add_pile( pile_id, this_x1, this_y1 ) ;
						}
						
						// In case of switching to 45° movement
						if( current_is_diagonal != prev_is_diagonal && new_start != 1 && id > 1 )
						{
							if( prev_draw_insight != current_draw_insight || current_draw_insight == true )
							{
								pile_id = id_section_pile[ insight_fence_id ];	
								var fence_id =  insight_fence_id ;
							}
							else
							{
								pile_id = id_section_pile[ first_fence_id ] ;
								var fence_id =  first_fence_id ;
							}
							
							add_extra_section_pile( pile_id, this_x1, this_y1, fence_id );
						}

						
					}
				}
			
			
				///////////////////////////
				//////// ADD GATE /////////
				///////////////////////////
			
				// Adds a first gate pile to start with if gate added
				if( current_draw_type == 'single-gate' )
				{	
					tipbox( 'Grindar', 'Grinden byggs av samma material som staketet. Om du kapat staketet på något ställe och får över en längd motsvarande grindens, så kan den biten alltså användas till grinden.' ) ;
					
					// Gets pushed xy
					pushxy = push_xy( current_draw_direction, this_x1, this_y1 ) ;

					// Changes curxrent pos to pushed xy
					this_x1 = pushxy[ 0 ] ;
					this_y1 = pushxy[ 1 ] ;	
					
					
					// Adds pile with new xy
					add_pile( id_gate_pile, this_x1, this_y1 ) ;
				}
			
			
			
			// Changes the variables for y x points for the lines goal coordinates	
			
			var thisdir = $( this ) . data( "direction" ) ;
			
			
			switch( thisdir )
			{
				case 'up' : 
					point_y -= current_draw_length ;
					break ;
					
				case 'down' : 
					point_y += current_draw_length ;
					break ;
					
				case 'left' : 
					point_x -= current_draw_length ;
					break ;
					
				case 'right' : 
					point_x += current_draw_length ;
					break ;
					
				case 'down-right' : 
					point_y += current_draw_length * p_prc ;
					point_x += current_draw_length * p_prc ;
					break ;
					
				case 'down-left' : 
					point_y += current_draw_length * p_prc ;
					point_x -= current_draw_length * p_prc ;
					break ;
					
				case 'up-left' : 
					point_y -= current_draw_length * p_prc ;
					point_x -= current_draw_length * p_prc ;
					break ;
					
				case 'up-right' : 
					point_y -= current_draw_length * p_prc ;
					point_x += current_draw_length * p_prc ;
					break ;
			}
			
			
			// If the target x y in this move was out of bounds,
			// we actually take the entire move back again
			/*if( point_x < 0 || point_y < 0 || ( point_x * artboard_prc ) > artboard_width || ( point_y * artboard_prc ) > artboard_height )
			{	
				point_x = this_x1;
				point_y = this_y1;
				return true;
			}
			*/
			
			
			
			
			// Finally! Saves this entire move to a variable
			// ( type, 1-x, 1-y, 2-x, 2-y, thislength, direction, type )
			
			thisid = current_draw_database_id;
			thistype = current_draw_type;
			
			if( current_draw_type == 'single-gate' )
			{
				thisid = current_draw_database_id;
				thistype = 'fence';
			}
			
			thisline = [] ;
			thisline[ 0 ] = thisid ; // id
			thisline[ 1 ] = this_x1 || 0; // 1-x
			thisline[ 2 ] = this_y1 || 0 ; // 1-y
			thisline[ 3 ] = point_x || 0 ; // 2-x
			thisline[ 4 ] = point_y || 0 ; // 2-y
			thisline[ 5 ] = parseFloat( current_draw_length ) ; // length
			thisline[ 6 ] = 0 ; // current_piletype
			thisline[ 7 ] = $( this ) . data( "direction" ) . replace( '-', '' ) ; // direction
			thisline[ 8 ] = thistype ;
			thisline[ 9 ] = 1 ;  // Visibility status
			
			
			
			
			
			// And adds it to the array current_totaldata
			current_totaldata . push( thisline . join( 'x' ) ) ;
			thisline = false ;
			
			
			
			// Adds possible post pile
			
			// If gate
			if( current_draw_type == 'single-gate' )
			{
				pile_id = id_gate_pile ;
				
				// Saves current xy
				pointsbu = [ point_x, point_y ];  
				
				var x_special = this_x1; var y_special = this_y1;
				
				var gate_direction = current_draw_direction;
				var this_draw_length = current_draw_length;
				
				if( is_secondgate )
					gate_direction = get_opposite_direction( gate_direction );
				
				
					
				switch( gate_direction )
				{
					case 'down':
						x_special = ( this_x1  ) + ( this_draw_length * p_prc ) ;
						y_special = ( this_y1  ) + ( this_draw_length * p_prc ) ;
						break;
						
					case 'up': case 'right':
						x_special = ( this_x1  ) + ( this_draw_length * p_prc ) ;
						y_special = ( this_y1  ) - ( this_draw_length * p_prc ) ;
						break;
						
					case 'left':
						x_special = ( this_x1  ) - ( this_draw_length * p_prc ) ;
						y_special = ( this_y1  ) - ( this_draw_length * p_prc ) ;
						break;
						
					case 'up-right':
						x_special = ( this_x1  ) + ( this_draw_length ) ;
						break;
						
					case 'down-right':
						y_special = ( this_y1  ) + ( this_draw_length ) ;
						break;
						
					case 'up-left':
						
						y_special = ( this_y1  ) - ( this_draw_length ) ;
						break;
						
					case 'down-left':
						
						y_special = ( this_y1  ) + ( this_draw_length ) ;
						break;
				}
				
				
				// Adds ending gatepile
				add_pile( pile_id, parseFloat( x_special ), parseFloat( y_special ) ) ;
				
				// Restore x y to correct positions
				point_x = pointsbu[ 0 ];
				point_y = pointsbu[ 1 ];
				
				if( is_secondgate )
				{
					point_x = this_x1;
					point_y = this_y1;
				}
				
				// Gets pushed xy
				pushxy = push_xy( $( this ) . data( "direction" ), point_x, point_y ) ;

				// Changes current pos to pushed xy
				point_x = pushxy[ 0 ] ;
				point_y = pushxy[ 1 ] ;	
				
			}
			
			// Adds an ending pile that is always deleted to start with if another move.
			add_pile( id_end_pile[ current_draw_database_id ], point_x, point_y ) ;
			
			if( current_draw_type == 'single-gate' )
				redo_last_step();
			
			
			
	
			// Merges all content of array current_totaldata into a varstring: total_data_join
			total_data_join = current_totaldata . join( '_' ) ;
			
			fix_artboard_size();
			
					
			
			
			
			
			/*
			if( point_x < 0.2 || point_y < 0.2 )
			{						
				
				current_totaldata = bu_current_totaldata;
				total_data_join = bu_total_data_join ;
				point_x = bu_point_x;
				point_y = bu_point_y;  
				return;
			}
			*/
			
			// Logs this for next round
			prev_draw_database_id = current_draw_database_id ; 
			prev_draw_length = current_draw_length;
			prev_draw_direction = $( this ) . data( "direction" ) ;
			prev_draw_type = current_draw_type ; 
			prev_draw_insight = current_draw_insight ; 
			prev_is_diagonal = current_is_diagonal ;
			prev_is_secondgate = is_secondgate;
			
			
			
			// Spice with section piles
			
			add_section_piles();
			
			
			// Counts current number of piles
			update_total_number_of_piles();
			
			
			if( current_draw_type == 'single-gate' )
				lockstuff( '', current_draw_direction );
			
			else
				lockstuff( $( this ) . data( "direction" ) );

			
			// Lock other models
			if( current_draw_type == 'fence' && typeof type_locked == 'undefined' && first_fence_id_default == false  )
			{
				
				$( "#fenceName > optgroup > option" ) . each( function()
				{
					if( $( this ) . data( "type" ) == 'fence'
					   && $( this ) . val() != first_fence_id
					   && $( this ) . val() != insight_fence_id )
						$( this ) . attr( "disabled", true ) ;
				} ) ;
				type_locked = 1;
				type_chosen = current_draw_database_id;
			}
			
			
			// Update form with correct info
			update_html_form();
				
			// Enjoy!
			id++ ;
			
			new_start = 0;
			
			
			
		} ) ;
		
		
		function update_html_form()
		{
			$( "input[name=data]" ) . val( total_data_join ) ;
			$( "input[name=section_piles]" ) . val( section_piles_array . join( '_' ) ) ;
			$( "input[name=artboard_width]" ) . val( artboard_width ) ;
			$( "input[name=artboard_height]" ) . val( artboard_height ) ;
			$( "input[name=artboard_prc]" ) . val( artboard_prc ) ;
			$( "input[name=even_steven]" ) . val( even_steven . join( '_' ) ) ;
			$( "input[name=section_piles_count]" ) . val( section_piles_array . length  );
			$( "input[name=first_fence_id]" ) . val( first_fence_id );
		}
		
		
		
		
		/* ######################################### */
		/* ######################################### */
		/* ######################################### */
		/* ##### HERE'S WHERE WE DRAW THE LINE ##### */
		/* ######### -- POSTFUNCTIONS -- ########### */
		/* ######################################### */
		/* ######################################### */
		
		
		
		// Redo entire move
		function redo_entire_move()
		{
			var tothis = [];
			tothis = global_resetter[ global_resetter . length - 1 ] ;			

			var fields = [];
			fields = Object.keys( tothis );
			
						
			for( i=0; i < fields . length; i++)
			{
				window[ fields[ i ] ] = tothis[ fields[ i ] ] ;
			}
			
			
			current_totaldata = total_data_join . split( "_" ) ;
			
			
			
			add_section_piles();
			global_resetter . pop();
			
			update_total_number_of_piles();
			update_html_form();
			
		}
		
		$( "input[data-function=redo]"  ) . click( function()
		{
			redo_entire_move();
		} ) ;
		
		$( "input[data-function=restart]" ) . click( function()
		{
			if( confirm( 'Vill du ersätta din nuvarande ritning?' ) ){ window . location. reload()  };
		} ) ;
		
		// Artboard width set
		function fix_artboard_size()
		{
			// Takes all objects apart to look at them
			var splitted = [] ;
			splitted = total_data_join . split( "_" ) ;
			
			// Preping variables to say the farest streches
			var far_right_x = 0 ;
			var far_bottom_y = 0 ;
			var far_left_x = 0 ;
			var far_top_y = 0 ;
			
			// Loops all objects		
			var rad = [] ;
			for( foo=0; foo < splitted.length; foo++)
			{
						
				if( typeof splitted[ foo ] != 'undefined' )
				{
					//Takes the particular object apart	
					rad = splitted[ foo ] . split( "x" ) ;
				
					if(
						typeof rad[ 3 ] != 'undefined' && rad[ 3 ] > far_right_x  
					)
					{	
						far_right_x = parseFloat( rad[ 3 ] ) ;
					}
					
					if(
						typeof rad[ 1 ] != 'undefined' && rad[ 1 ] > far_right_x  
					)
					{	
						far_right_x = parseFloat( rad[ 1 ] ) ;
					}
					
					if( typeof rad[ 4 ] != 'undefined' && rad[ 4 ] > far_bottom_y )
					{	
						far_bottom_y = parseFloat( rad[ 4 ] ) ;
					}
					
					
					if( typeof rad[ 2 ] != 'undefined' && rad[ 2 ] > far_bottom_y )
					{	
						far_bottom_y = parseFloat( rad[ 2 ] ) ;
					}
					
					if( typeof rad[ 3 ] != 'undefined' && rad[ 3 ] < far_left_x)
					{
						far_left_x = parseFloat( rad[ 3 ] ) ;

					}
					if( typeof rad[ 2 ] != 'undefined' && rad[ 2 ] < far_top_y)
					{
						far_top_y = parseFloat( rad[ 2 ] ) ;

					}
					
					
				}
			}
			
			// Now we now farest points and sets new values to widht and height
			artboard_width = ( far_right_x + 5  ) * artboard_prc ;
			artboard_height = ( far_bottom_y + 5  ) * artboard_prc ;
			
			// Now we make it a square with the longest sides length
			if( 
			artboard_width > artboard_height )
			{
				artboard_height = artboard_width;
			}
			else
				artboard_width = artboard_height;
			
			
			update_html_form();
 		}
		
		// Flag as even diveided sections
		even_steven = [];
		$( "#popup" ) . on( "click", "input[name=even_steven]", function()
		{
			
			if( $.inArray( $( this ) . data( "designid" ), even_steven ) > -1 )
			{	
				var index = even_steven . indexOf( $( this ) . data( "designid" ) ) ;
				
				if ( index > -1 )
					even_steven . splice( index, 1 ) ;
				
				add_section_piles(); 
			}
			else
			{
					
				even_steven . push( $( this ) . data( "designid" ) ) ;
				add_section_piles(); 
			
			}
				update_total_number_of_piles();
				hide_popup();
		});
		
		// Change length on marked
		$( "#popup" ) . on( "click", "input[name=change_length]", function()
		{
			designid = $( this ) . data( "designid" ) ;
			
			handle_total_data_join = [];
			handle_total_data_join = total_data_join . split( "_" ) ;
			
			var newx = 0 ;
			var oldlength = 0 ;
			var xdiff = 0 ;
			var mod_x = 0;
			var mod_y = 0;
			for( i=0; i<handle_total_data_join . length; i++ )
			{	
				row = handle_total_data_join[ i ] . split( "x" ) ;			
				thisdesignid = row[ 1 ] + 'z' + row[ 2 ] + 'z' + row[ 3 ] + 'z' + row[ 4 ] ;
				
				
				
				oldlength = parseFloat( row[ 5 ] ) ;
				
				
				if(  thisdesignid === designid  )
				{	
					switch( row[ 7 ] )
					{
						case 'right':
							mod_x = parseFloat( $( "input[name=change_length_value]" ) . val() ) - oldlength;
							break ;
						
						case 'left':
							mod_x -= parseFloat( $( "input[name=change_length_value]" ) . val() ) - oldlength;
							break ;
							
						case 'up':
							mod_y -= parseFloat( $( "input[name=change_length_value]" ) . val() ) - oldlength;
							break ;
						
						case 'down':
							mod_y = parseFloat( $( "input[name=change_length_value]" ) . val() ) - oldlength;
							break ;
							
						case 'upright':
							mod_y -= ( parseFloat( $( "input[name=change_length_value]" ) . val() ) * p_prc ) - ( oldlength * p_prc );
							mod_x = ( parseFloat( $( "input[name=change_length_value]" ) . val() ) * p_prc ) - ( oldlength * p_prc );
							break ;
							
						case 'downright':
							mod_y = ( parseFloat( $( "input[name=change_length_value]" ) . val() ) * p_prc ) - ( oldlength * p_prc );
							mod_x = ( parseFloat( $( "input[name=change_length_value]" ) . val() ) * p_prc ) - ( oldlength * p_prc );
							break ;
							
						case 'upleft':
							mod_y -= ( parseFloat( $( "input[name=change_length_value]" ) . val() ) * p_prc ) - ( oldlength * p_prc );
							mod_x -= ( parseFloat( $( "input[name=change_length_value]" ) . val() ) * p_prc ) - ( oldlength * p_prc );
							break ;
							
						case 'downleft':
							mod_y += ( parseFloat( $( "input[name=change_length_value]" ) . val() ) * p_prc ) - ( oldlength * p_prc );
							mod_x -= ( parseFloat( $( "input[name=change_length_value]" ) . val() ) * p_prc ) - ( oldlength * p_prc );
							break ;
					}
					
					row[ 5 ]/*Length*/ = parseFloat( $( "input[name=change_length_value]" ) . val() ) ;
					xdiff = oldlength - parseFloat( row[ 5 ] ) ;
					
					row[ 3 ]/*X2*/ = parseFloat( row[ 3 ] ) + mod_x ;
					row[ 4 ]/*Y2*/ = parseFloat( row[ 4 ] ) + mod_y ;
				
			
					
				} else if( xdiff )
				{
					row[ 1 ] = parseFloat( row[ 1 ] ) + mod_x;	
					row[ 2 ] = parseFloat( row[ 2 ] ) + mod_y;	
					
					if( row[ 8 ] == 'fence' )
					{
						row[ 3 ] = parseFloat( row[ 3 ] ) + mod_x ;
						row[ 4 ] = parseFloat( row[ 4 ] ) + mod_y ;
					}
				}
				
				handle_total_data_join[ i ] = row . join( "x" ) ;
			} 
			
			
			current_totaldata = handle_total_data_join ;
			
			point_x += mod_x ;
			point_y += mod_y ;
			
			total_data_join = handle_total_data_join . join( "_" ) ;
			
			move_sketch_into_artboard();
			
			add_section_piles( 'nofetch' ) ;
			fix_artboard_size();
			
			
			
			fetch_image_tag() ;
			
			
			update_total_number_of_piles();
			
			 popup_box. fadeOut();
			
		} ) ;
		
		
		/* ##### section piles #### */
		// This one is always added to the end when data is collected
		
		function add_section_piles( nofetch )
		{
			
			if( typeof nofetch  == 'undefined' ) nofetch = '';

			section_piles_array = false;
			section_piles_array = [] ;
			
			// Start with extra added piles ( ex in 45 ° corners )
			for( i = 0; i < extra_section_piles_array . length; i++)
			{
				section_piles_array . push( extra_section_piles_array[i] );
			}
			
			for( i=0 ; i < current_totaldata . length ; i++ )
			{ 
				row = [];
				row = current_totaldata[ i ] . split( 'x' ) ;
				
				if( row[ 8 ] == 'fence' )
				{
					
					var this_fence_id = row[ 0 ];
					even_out = 0;
					length_section = length_of_a_section;
					thisid = [ row[ 1 ], row[ 2 ], row[ 3 ], row[ 4 ] ] . join( 'z' ) ;
					
					times = Math.floor( row[ 5 ] /*Length*/ / length_of_a_section )  ;
					
						
					if( ( Math.round( ( row[ 5 ] /*Length*/ / length_of_a_section * 100000 ) ) / 100000 ) % 1 == 0 )
					{
						times -= 1;
					}
						
					if( even_steven . length > 0 && ($.inArray( thisid, even_steven ) > -1)  )
						even_out = 1;
					
					if( even_out ){
					
						times = Math . ceil( row[ 5 ] /*Length*/  / length_of_a_section)  ;
						length_section = row[ 5 ] / times;
						times -= 1 ;
					
					}
					// Sections piles
					var currdot_x = parseFloat( row[ 1 ] )/*X1*/;
					var currdot_y = parseFloat( row[ 2 ] )/*Y1*/;
					var newdot = [];
					
					// Finding dots
					for ( j=0; j < times; j++)
					{
						
						switch( row[ 7 ] /*Direction*/ )
						{
							case 'right':
								currdot_x += length_section;
								break;
							
							case 'left':
								currdot_x -= length_section;
								break;
								
							case 'up':
								currdot_y -= length_section;
								break;
							
							case 'down':
								currdot_y += length_section;
								break;
								
							case 'upright':
								currdot_y -= length_section * p_prc;
								currdot_x += length_section * p_prc;
								break;
								
							case 'downright':
								currdot_y += length_section * p_prc;
								currdot_x += length_section * p_prc;
								break;
								
							case 'downleft':
								currdot_y += length_section * p_prc;
								currdot_x -= length_section * p_prc;
								break;
								
							case 'upleft':
								currdot_y -= length_section * p_prc;
								currdot_x -= length_section * p_prc;
								break;
								
						}	
						
						
						newdot . push( currdot_x + 'x' + currdot_y + 'x' + this_fence_id  ) ; // X Y ID
						
							
					}
					
					for( j = 0 ;  j < newdot . length ; j++ )
					{	
						thisdot = newdot[ j ] . split( 'x' ) ;
						add_section_pile( id_section_pile[ row[ 0 ] ], thisdot[ 0 ] /*X*/, thisdot[ 1 ] /*Y*/ ) ;
					}
					
					if( nofetch != 'nofetch' )
						fetch_image_tag();
					newdot = false;
					row = false;
					
					if( typeof piles_count === 'undefined')
						piles_count = [];
					
					if(  piles_count[ id_section_pile[ first_fence_id ] ] )
						sec_no = parseInt( piles_count[ id_section_pile[ first_fence_id ] ] );
					else
						sec_no = 0;
					
					
					$( ".pile-count-span[data-artn=" + id_section_pile[ first_fence_id ] + "]" ) . html( ", " + ( section_piles_array . length + sec_no )  + " st" ) ;


					
				}
				
			
			}
			
					
		}
		
		
		/* ##### last pile #### */
		// This one is always added to the end when data is collected
		function final_pile( x, y )
		{
							add_pile( 8, point_x, point_y ) ;

				
			// And adds it to the array current_totaldata
			return '_' + final_pile . join( 'x' ) ;
		}
		
		
		
		// Redo latest step
		function redo_last_step()
		{
			// Set current x and y points to the prev x y points
			var laststep = current_totaldata[ current_totaldata . length - 1 ] . split( "x" ) ;
			point_x = parseFloat( laststep[ 1 ] ) ;
			point_y = parseFloat( laststep[ 2 ] ) ;
			
			// Deletes last draw data
			current_totaldata . pop() ;
			
			// Saves changes
			total_data_join = current_totaldata . join( '_' ) ;
			
			// Gets the php generated image from this all data string	
		}
		
	
	}	
) ;