var element_counter = 1;



function element_width(theid) {
	var thewidth = $(theid).children().outerWidth() - ( $(theid).children().children('.indent').outerWidth() + $(theid).children().children('.px').outerWidth() + $(theid).children().children('.show').outerWidth() + $(theid).children().children('.em').outerWidth() + $(theid).children().children('.add').outerWidth() + $(theid).children().children('.remove').outerWidth() + 103 );
	
	$(theid).children().children('.element').css('width', thewidth+'px');
}



function add_calulate_button() {
	if ( $('#font-size-list').children('li').children('ul').length > 0 ) {
		if ( $('#calculate-button').length == 0 ) {
			$('#font-size-list').after(
				'<div id="calculate-button">'+
					'<input type="button" id="" value="Calculate font sizes" />'+
				'</div>'
			);
		}
	} else {
		$('#calculate-button').remove();
	}
}



$(document).ready(function(){
	
	element_width('#row0');
	
	
	
	// Add a row.
	$('.add').live("click", function() {
		$(this).parent('fieldset').parent('li:not(:has(ul))').append('\n<ul>\n</ul>\n');
		var new_level = parseInt( $(this).parent('fieldset').children('.level').attr('value') ) + 1;
		var new_level_indent = new_level*20;
		$(this).parent('fieldset').parent('li').children('ul').append(
			'<li id="row'+element_counter+'">'+
				'<fieldset>'+
					'<div class="indent" style="width: '+new_level_indent+'px"><img src="http://www.diturner.co.uk/wp-content/themes/basic/nav/arrow.png" alt="" /></div>'+
					
					'<legend>Row '+element_counter+'</legend>'+
					
					'<label for="element'+element_counter+'">Element</label>'+
					'<input type="text" name="element'+element_counter+'" id="element'+element_counter+'" class="element" value="Element #'+element_counter+'" />'+
					
					'<input type="text" name="px'+element_counter+'" id="px'+element_counter+'" class="px" />'+
					'<label for="px'+element_counter+'" class="show">px</label>'+
					
					'<label for="em'+element_counter+'">EM</label>'+
					'<input type="text" name="em'+element_counter+'" id="em'+element_counter+'" class="em" value="EM value" />'+
					
					'<label for="add'+element_counter+'">Add child element</label> '+
					'<input type="button" name="add'+element_counter+'" id="add'+element_counter+'" value="Add child" class="add" />'+
					
					'<label for="remove'+element_counter+'">Remove element</label> '+
					'<input type="button" id="remove'+element_counter+'" value="Remove" class="remove" />'+
					
					'<input type="hidden" name="counter'+element_counter+'" class="counter" value="'+element_counter+'" />'+
					
					'<input type="hidden" name="level'+element_counter+'" class="level" value="'+new_level+'" />'+
					
					'<input type="hidden" name="parent'+element_counter+'" class="parent" id="parent'+element_counter+'" value="'+$(this).parent('fieldset').children('.parent').attr('value')+','+element_counter+'" />'+
				'</fieldset>'+
			'</li>\n'
		);
		
		element_width('#row'+element_counter);
		element_counter++;
		
		add_calulate_button();
		$(this).blur();
	});
	
	
	
	// Delete a row.
	$('.remove').live("click", function() {
		if ( $(this).parent('fieldset').parent('li:has(ul)').attr('id') ) {
			$(this).parent('fieldset').parent('li').prepend(
				'<div class="confirm">'+
					'Are you sure you want to remove an entire branch? '+
					'<input type="button" value="Yes" class="confirm-yes" /> '+
					'<input type="button" value="No" class="confirm-no" />'+
				'</div>'
			);
			
		} else {
			$(this).parent('fieldset').parent('li:only-child').parent().remove();
			$(this).parent('fieldset').parent('li:not(:only-child)').remove();
			add_calulate_button();
		}
		$(this).blur();
	});
	
	$('.confirm-yes').live("click", function() {
		$(this).parent('.confirm').parent('li:only-child').parent().remove();
		$(this).parent('.confirm').parent('li:not(:only-child)').remove();
		add_calulate_button();
		$(this).blur();
	});
	
	$('.confirm-no').live("click", function() {
		$(this).parent('.confirm').remove();
		$(this).blur();
	});
	
	
	
	// On px change.
	$('.px').live("keydown", function() {
		$(this).addClass('active');
	});
	
	
	
	// Calculate font sizes.
	$('#calculate-button input').live("click", function() {
		
		$('fieldset').each( function(i) {
			
			var parent_px_id = $(this).children('.parent').attr('value');
			parent_px_id_array = parent_px_id.split(',');
			parent_px_id_array.reverse();
			parent_px_id_array = parent_px_id_array.slice(1);
			var parent_px = 0;
			var x = 0;
			while (parent_px == 0) {
				if ( $('#px'+parent_px_id_array[x]).attr('value') != '') {
					parent_px = $('#px'+parent_px_id_array[x]).attr('value');
				}
				x++;
			}
			
			var px = $(this).children('.px').attr('value');
			var em_full = px / parent_px;
			var em = Math.round(em_full * Math.pow(10,5)) / Math.pow(10,5);
			if (em) {
				$(this).children('.em').attr('value', em+'em');
			} else {
				$(this).children('.em').attr('value', '-');
			}
		});
		
		$('.px').removeClass('active');
		
		$(this).blur();
		
	});
	
});