HJ.SimpleList = Class.create();

HJ.SimpleList.prototype = Object.extend(new Af.StepsMaker(), {
	
	initialize: function(listObj, step1TargetContainerId) {
		this.url = {
			"step1":basePageURL + "SimpleList.htm",
			"step2":basePageURL + "SimpleList.htm",
			"stepPaymentRequest":basePageURL + "PaymentRequestStep.htm",
			"stepPaymentRequestThroughAmazon":basePageURL + "AmazonPaymentRequestStep.htm",
			"step3":basePageURL + "StepsEmails.htm",
			"step4":basePageURL + "SimpleListRecipient.htm",
			"stepPaymentAttempt":basePageURL + "PaymentAttemptStep.htm",
			"stepPaymentAttemptThroughAmazon":basePageURL + "AmazonPaymentAttemptStep.htm",
			"step5":basePageURL + "SenderConfirm.htm",
			"step6":basePageURL + "RSVPConfirm.htm"
		};		

		this.targetContainerId = {
			"step1":step1TargetContainerId == null ? "bodyContainer" : step1TargetContainerId,
			"step2":"bodyContainer",
			"stepPaymentRequest":step1TargetContainerId == null ? "bodyContainer" : step1TargetContainerId,		
			"stepPaymentRequestThroughAmazon":step1TargetContainerId == null ? "bodyContainer" : step1TargetContainerId,		
			"step3":step1TargetContainerId == null ? "bodyContainer" : step1TargetContainerId,
			"step4":step1TargetContainerId == null ? "bodyContainer" : step1TargetContainerId,
		    "stepPaymentAttempt":step1TargetContainerId == null ?
		                    "bodyContainer" : step1TargetContainerId,
		    "stepPaymentAttemptThroughAmazon":step1TargetContainerId == null ? "bodyContainer" : step1TargetContainerId,		
			"step5":step1TargetContainerId == null ? "bodyContainer" : step1TargetContainerId,
			"step6":step1TargetContainerId == null ? "bodyContainer" : step1TargetContainerId			
		};
		
		this.listObj = listObj;

		// Must declare templateType per template		
		this.data = new Array;
		this.data['item'] = new Array;
		this.data['item'][0] = new Object();
			
		this.tl = null;
		//  Row Divs as not to rely on tables for the front end.  
		//  name should match the 
		this.rowDiv = "<div class=\"simpleListItems\"><input type=\"text\" name=\"description\" value=\"\" class=\"dark\"/></div>" +
                "<div class=\"driveDelete\"><a href=\"#\"><span class=\"closeBtn\" title=\"Delete\"></span></a></div>" +
				"<div class=\"AddItem\" valign=\"middle;\"><a href=\"#\"><img src=\"image/icon_add.gif\" border=\"0\" class=\"addIcon\">Add item</a></div>";

		this.rowDiv2 = "<span name=\"description\" class=\"signUpDoneItems\"></span>";

		this.listFields = new Array('lastEmailString', 'lastEmailSubject', 'lastEmailNote',
                'collectPayments', 'suggestedAmount', 'helperCanModifyAmount', 'showFeesToHelper', 'nextStep');
		this.listItemFields = new Array('description');
		this.templateType = HJ.TEMPLATE_TYPE_SIMPLE_LIST;
		this.initializeSelectedStepFromQueryString();		
		this.itemCount = 0;
		this.setDataObject();
	},
	
	//  Map Workspace data to local data..
	setDataObject: function() {
		if (this.listObj!=null)	{	
			this.data = this.listObj;
			this.doInitialRoute();
		}
		//  Sort  Try to generalize somewhere..
	},	

	//  Save Step 1 to work locally.
	saveHoldData: function() {								
		//  
		//this.data['name'] = this.signupNameFieldElement.value;		
		this.data['name'] = document.getElementById('name').value;

		//  listitems
		var listDivs = this.listContainer.childNodes;
		var listData = new Array;				
		for (var i=0; i<listDivs.length; i++) {
			var listItem = listDivs[i];
			var listItemInputs = listItem.getElementsByTagName('input');
			var rowData = new Array;
			rowData['description'] = listItemInputs[0].value;
			listData.push(rowData);
		}
		this.data['item'] = listData;
 	},			

	//  Step 1
	loadStep1:function() {
			this.signupNameFieldElement = document.getElementById('name');
			Element.extend(this.signupNameFieldElement);
			Event.observe(this.signupNameFieldElement, 'keypress', this.processSignupNameFieldKeyPress.bindAsEventListener(this));
						
			//  Container Div for itemlists..  Not universal since step3 doesn't use it
			this.listContainer = document.getElementById('listItems');
			
			//  Universal Nav bars - resides in Step 1 and remains
			this.sideNavBar = document.getElementById('sideNavBar');
			
		
			this.navDivs = this.sideNavBar.getElementsByTagName('div');
			for (var i=0; i<this.navDivs.length; i++) {
				this.navDivs[i].onclick = this.navBarClicked.bindAsEventListener(this);
			}
			
			//this.signupNameFieldElement = document.getElementById('signupNameFieldId');		
			if (this.data['name']!=null){
				document.getElementById('name').value = this.data['name'];						
			}

			this.itemCount = 0;			
			if (this.data['item']!=null) {
				var items = this.data['item'];
				for (var i=0; i<items.length; i++) {
					this.addItem(items[i], i);	
				}			
			} else {
				this.addItem('first');
			}		
			document.getElementById('name').focus();

	},	
	// Step 2 - Step 3 is email and universal
	loadStep2:function() {			

		this.loadStep1();

		if (this.sideNavBar!=null)
			this.sideNavBar.className = 'navStep2';

		this.backButton.style.display = 'block';
		
		document.getElementById('topInstructions').innerHTML = "Take a moment to review. Click in any field that you want to make changes";
	},

	loadStep4:function() {
		if (this.data['name']!=null && this.data['name']!=undefined)
			document.getElementById('name').innerHTML = this.data['name'];
		
		this.listContainer = document.getElementById('listItems');
		
		var listItems = this.data['item'];

		if (listItems!=null) {	
		for (var i=0; i<listItems.length; i++) {
				var signupDiv = document.createElement('div');
				signupDiv.innerHTML = this.rowDiv2;
				signupDiv.className = "driveFormCont";
							
				signupDiv.id = listItems[i].divName;
				var dataFields = signupDiv.getElementsByTagName('span');
				
				if (listItems[i].description==null || listItems[i].description==undefined) {
					listItems[i].description = '';
				}
				dataFields[0].innerHTML = textDisplay(listItems[i].description);
				this.listContainer.appendChild(signupDiv);
			}
		}
	},

	doDone:function() {
		this.selectedStep = 6;
		this.loadTemplate();
		
	},

	//  Add lilst item..  Div name index corresponds to item index in this.data	
	addItem:function (item, index) {
		var myItem = item; 
		var firstFlag = false;
		
		myItem == 'first' ? firstFlag=true:null;

		if (index == null) {
			if (this.data['item']!=null) {
				index = this.data['item'].length;
			} else {
				index = 0;
			}
		}

		var itemDiv = document.createElement('div');
		itemDiv.innerHTML = this.rowDiv;
		itemDiv.className = "driveFormCont";		
		itemDiv.id = "item_" + index;
		var itemFields = itemDiv.getElementsByTagName('input');
		var itemDelete = itemDiv.getElementsByTagName('a')[0];
		var itemAdd = itemDiv.getElementsByTagName('a')[1];
		
		if (firstFlag == true) {
			itemFields[0].className = 'simpleListItemDark';
			Event.observe(itemFields[0], 'click', this.eraseDefaultField.bindAsEventListener(this));
			Event.observe(itemFields[0], 'keypress', this.eraseDefaultField.bindAsEventListener(this));
			
		} 
		
		if (myItem!=null){
			if (myItem['description']==null || myItem['description']==null) {
				myItem['description']='';
			}
			itemFields[0].value = myItem['description'];					
		}

		if (itemDelete != null) {
			itemDelete.onclick = this.deleteItem.bindAsEventListener(this);
		}
		if (itemAdd != null) {
			itemAdd.onclick = this.processAddItemEvent.bindAsEventListener(this);
		}
		Event.observe(itemDiv, 'keypress', this.processItemFieldKeyPress.bindAsEventListener(this));
		
		this.addItemElementToDisplay(itemDiv, index);
		this.shiftFocusToTextChild(itemDiv);
		
		this.itemCount++;
		return false;
	}
});