/**
 * Product Registration
 * Creates an enhanced user interface for adding and removing products
 * 
 * version 1.0
 */

var startProducts = [];

function toggleError(count) {
	var errorArea = document.getElementById('error_area');
	
    // creates an initial Product Block
    if (count == 0) {
        addProductBlock('serial_model_numbers');
    }
}

function createProductBlock(defaultValues) {
	// optional parameter defaultValues
	var defaultValues    = (arguments[0] != undefined && arguments[0] != null) ? arguments[0] : {};
	defaultValues.serial = (defaultValues.serial == undefined) ? '' : defaultValues.serial;
	defaultValues.model  = (defaultValues.model == undefined) ? '' : defaultValues.model;
	
	// get next block number
	var maxBlockNumber  = getMaxProductIteration();
	var nextBlockNumber = parseInt(maxBlockNumber) + 1;
	
	// create elements
	
	// product div
	var divProduct = document.createElement('div');
	divProduct.className = 'product_block';
	
	/**
	 * At one point, this was done nicely with DOM manipulation.
	 * It turns out that IE is an awful program that cannot correctly display the code it's reading.
	 * Thus: innerHTML.
	 */
	var html = '';
	html = html + '<table class="registration_form" cellspacing="2">';
	html = html + '<tr>';
	html = html + '<td class="label"><label for="serial_number_' + nextBlockNumber + '">Serial Number*</label></td>';
	html = html + '<td><input type="text" name="serial_number_' + nextBlockNumber + '" value="' + defaultValues.serial + '" id="serial_number_' + nextBlockNumber + '" /></td>';
	html = html + '</tr>';
	html = html + '<tr>';
	html = html + '<td class="label" width="2"><label for="model_number_' + nextBlockNumber + '">Product/Model Number*</label></td>';
	html = html + '<td><input type="text" name="model_number_' + nextBlockNumber + '" value="' + defaultValues.model + '" id="model_number_' + nextBlockNumber + '" /></td>';
	html = html + '</tr>';
	html = html + '</table>';
	
    if (nextBlockNumber != 0)
    {
        html = html + '<a href="#" onclick="removeProductBlock(\'serial_model_numbers\', \'serial_number_' + nextBlockNumber + '\'); return false;">';
	    html = html + '<img src="/images/but_remove.gif" alt="Remove" />';
	    html = html + '</a>';
    }
	
	divProduct.innerHTML = html;
	
	return divProduct;
}

function getMaxProductIteration() {
	var labels   = document.getElementsByTagName('label');
	var maximum  = -1;
	
	for (var i=1; i < labels.length; i++) {
		var labelFor = labels[i].htmlFor;
		var array    = labelFor.split('_');
		
		if (array[0] != 'serial' || isNaN(array[2])) {
			continue;
		}
		
		if (array[2] > maximum) {
			maximum = array[2];
		}
	}
	
	return maximum;
}

function addProductBlock(targetId) {
	var target = document.getElementById(targetId);
	var values = (arguments[1] != undefined && arguments[1] != null) ? arguments[1] : null;
	
	if (target == undefined) {
		alert('addProductBlock: Invalid target specified.');
		return;
	}
	
	var newProductBlock = createProductBlock(values);
	target.appendChild(newProductBlock);
	
	// increment serial number counter
	var counter   = document.getElementById('serial_number_count');
	counter.value = parseInt(counter.value) + 1;
	toggleError(counter.value);
	
	return;
}

function removeProductBlock(targetId, serialId) {
    var counter   = document.getElementById('serial_number_count');  
    
    // Prevent user from removing a Product Block if it's the only one
    if (counter.value == 1) {
        alert('You must register at least one product.', 'test');
    }
    // Remove product block
    else {
	    var target  = document.getElementById(targetId);
	    var serial  = document.getElementById(serialId);
	    var block   = serial.parentNode.parentNode.parentNode.parentNode.parentNode;
	    
	    // highlight confirmation
	    block.className = 'product_block_highlighted';
	    
	    var confirmation = confirm('Are you sure you want to remove this product from your registration form?');
	    if (confirmation == false) {
		    block.className = 'product_block';
		    return;	
	    }
	    
	    if (target == undefined || serial == undefined || block == undefined) {
		    return;	
	    }
	    
	    target.removeChild(block);
	    
	    // decrement serial number country
	    counter.value = parseInt(counter.value) - 1;
	    toggleError(counter.value);
	}
    
	return;
}

function loadProductBlocks(targetId) {
	for (var i=0; i < startProducts.length; i++) {
		addProductBlock(targetId, {serial: startProducts[i].serial, model: startProducts[i].model});
	}
	
	toggleError(startProducts.length);
}