// Copyright (C) Electrik Web Productions 2007

selector = new Object();

// Public ---

selector.init = function(div,data) {
	this.div = document.getElementById(div);
	this.inputData = document.getElementById(div+'_data');
	this.data = data;
	this.maxQty = 10;
	this.rows = 0;
	if (this.inputData.value != "") 
		this.rebuildSelection(this.decodeValues(this.inputData.value));
	else 
		this.addRow();
}

selector.addRowClicked = function() {
	if (this.rows > 0) {
		var cols = this.getColumns(this.rows-1);
		var notFilled = false;
		for (var i=0; i<cols.length; i++) 
			if ((cols[i].selectedIndex == 0) && (cols[i].options.length > 0)) notFilled = true;
		if (notFilled) {
			alert('Please fill in all fields for the previous product before adding another one.');
			return;
		}
	}
	this.addRow();
}

selector.onchange = function(e) { 
	var element;
	if (!e) var e = window.event;
	if (e.target) element = e.target;
	else if (e.srcElement) element = e.srcElement;
	selector.selected(element.row, element.col);
}

selector.onsubmit = function() {
	selector.submitted();
}

// Private ----

selector.submitted = function() { 
	this.inputData.value = this.encodeValues();
}

selector.selected = function(row,col) {
	var cols = this.getColumns(row);
	if (cols[col].selectedIndex == 0) {
		this.disableFrom(row,col);
		return;
	}
	if (col < 3) 
		this.populateData(row, col+1);
}

selector.encodeValues = function() {
	var values = new Array(this.rows);
	for (var i=0; i<this.rows; i++) {
		var cols = this.getColumns(i);
		var rowValues = new Array(cols.length);
		for (var j=0; j<cols.length; j++)
			rowValues[j] = cols[j].selectedIndex;
		values[i] = rowValues.join('|');
	}
	return values.join('||');
}

selector.decodeValues = function(valuesText) {
	var data = valuesText.split('||');
	for (var i=0; i<data.length; i++)
		data[i] = data[i].split('|');
	return data;
}

selector.rebuildSelection = function(values) {
	for (var i=0; i<values.length; i++) {
		this.addRow();
		this.performRowSelection(i, values[i]);
	}
}

selector.performRowSelection = function(row, rowValues) {
	var cols = this.getColumns(row);
	for (var i=0; i<rowValues.length; i++) if (rowValues[i] > 0) {
		cols[i].selectedIndex = rowValues[i];
		this.selected(row, i);
	}
}

selector.addRow = function() {
	this.div.appendChild(this.buildFields(this.rows));
	this.populateData(this.rows, 0);
	this.rows++;
}

selector.buildFields = function(n) { 
	var container = document.createElement('div');
	var category = document.createElement('select');
	var series = document.createElement('select');
	var type = document.createElement('select');
	var option = document.createElement('select');
	var qty = document.createElement('select');

	category.className = 'Textbox200';
	category.name = 'category'+n;
	category.row = n; category.col = 0;
	series.className = 'textbox150';
	series.name = 'series'+n;
	series.row = n; series.col = 1;
	type.className = 'Textbox100';
	type.name = 'type'+n;
	type.row = n; type.col = 2;
	option.className = 'Textbox100';
	option.name = 'option'+n;
	option.row = n; option.col = 3;
	qty.className = 'textbox50';
	qty.name = 'qty'+n;

	qty.options.length = this.maxQty+1;
	qty.options[0].text = 'QTY';
	qty.options[0].value = 'none';
	for (var i=1; (i<this.maxQty+1); i++) {
		qty.options[i].text = i;
		qty.options[i].label = i;
	}

	listenFor(category, 'change', selector.onchange);
	listenFor(series, 'change', selector.onchange);
	listenFor(type, 'change', selector.onchange);
	listenFor(option, 'change', selector.onchange);

	container.appendChild(category);
	container.appendChild(series);
	container.appendChild(type);
	container.appendChild(option);
	container.appendChild(qty);

	return container;
}

selector.populateData = function(row, col) {
	var data = this.data;
	var cols = this.getColumns(row);
	var topLabel = 'Select Product Category';
	if (col > 0) {
		data = data[cols[0].selectedIndex-1].series;
		topLabel = 'Select Product Series';
	}
	if (col > 1) {
		data = data[cols[1].selectedIndex-1].type;
		topLabel = 'Select Type';
	}
	if (col > 2) {
		data = data[cols[2].selectedIndex-1].option;
		topLabel = 'Select Option';
	}
	if (data.length == 0) return;
	this.putDataInSelect(cols[col], topLabel, data);
	this.disableFrom(row,col);
}

selector.putDataInSelect = function(sel, topLabel, data) {
	sel.options.length = data.length + 1;
	sel.selectedIndex = 0;
	sel.options[0].value = 'label';
	sel.options[0].text = topLabel;
	for (var i=0; i<data.length; i++) {
		sel.options[i+1].value = i;
		sel.options[i+1].text = data[i].name;
	}
}

selector.disableFrom = function(row,col) {
	var cols = this.getColumns(row);
	for (var i=0; i<4; i++) {
		cols[i].disabled = (i>col)?true:false;
		if (i>col) {
			cols[i].selectedIndex = 0;
			cols[i].options.length = 0;
		}
	}
}

selector.getColumn = function(row, col) {
	return this.getColumns(row)[col];
}

selector.getColumns = function(row) {
	return this.getRow(row).getElementsByTagName('select');
}

selector.getRow = function(row) {
	var rows = this.div.getElementsByTagName('div');
	return rows[row];
}


function listenFor(element, eventName, func) {
	if (element.addEventListener)
		element.addEventListener(eventName, func, false);
	if (element.attachEvent)
		element.attachEvent('on'+eventName, func);
}

listenFor(window, 'load', function() {
	selector.init('selector',products);
});