/**
 * global var
 */
var fieldCount = 0;
/**
 * insert new form field
 * (probably would be easier to innerHTML this)
 */
function addDrink(){
	fieldCount ++ ;
	var newDrink = document.createElement('li');
	newDrink.id = 'drink-' + fieldCount;
	newDrink.className = 'drink';
	// size
	var newLabel = document.createElement('label');
	newLabel.className = 'size';
	var tn = document.createTextNode(' Size: ');
	newLabel.appendChild(tn);
	var newSize = document.createElement('input');
	newSize.type = 'text';
	newSize.className = 'input-text';
	newSize.name = 'drinks[' + fieldCount + '][size]';
	newSize.id = 'size-' + fieldCount;
	newLabel.appendChild(newSize);
	var tn = document.createTextNode(' oz.');
	newLabel.appendChild(tn);
	newDrink.appendChild(newLabel);
	// alc
	var newLabel = document.createElement('label');
	newLabel.className = 'alc';
	var tn = document.createTextNode(' Alcohol: ');
	newLabel.appendChild(tn);
	var newAlc = document.createElement('input');
	newAlc.type = 'text';
	newAlc.className = 'input-text';
	newAlc.name = 'drinks[' + fieldCount + '][alc]';
	newAlc.id = 'alc-' + fieldCount;
	newLabel.appendChild(newAlc);
	var tn = document.createTextNode(' % ');
	newLabel.appendChild(tn);
	newDrink.appendChild(newLabel);
	// amount
	var newLabel = document.createElement('label');
	newLabel.className = 'amnt';
	var tn = document.createTextNode(' x Amount: ');
	newLabel.appendChild(tn);
	var newAmnt = document.createElement('input');
	newAmnt.className = 'input-text';
	newAmnt.type = 'text';
	newAmnt.name = 'drinks[' + fieldCount + '][amnt]';
	newAmnt.id = 'amnt-' + fieldCount;
	newAmnt.value = 1;
	newLabel.appendChild(newAmnt);
	var tn = document.createTextNode(' # ');
	newLabel.appendChild(tn);
	newDrink.appendChild(newLabel);
	
	document.getElementById('drink-list').appendChild(newDrink);
	cancelDefault();
	
}

/**
 * remove last field
 */
function removeDrink(){
	
}

/**
 * insert add form button
 */
function addButton(){
	var btn = document.createElement('button');
	btn.id='add-drinks';
	btn.className = 'green button';
	var tn = document.createTextNode('add another drink');
	btn.appendChild(tn);
	getById('drinks').appendChild(btn);
	addEvent(btn, 'click', cancelDefault, false);
	//btn.onclick = cancelDefaultSafari;
}

/**
 * cancel default action
 * @param {Object} e
 */
function cancelDefault(e){
	if (window.event && window.event.returnValue) {
		window.event.returnValue = false;
	}
	if (e && e.preventDefault) {
		e.preventDefault();
	}
}

/**
 * ugly workaround for safari
 * @return false
 */
function cancelDefaultSafari() {
	return false;
}

/**
 * cancle event bubbling
 * @param {Object} e
 */
function cancelBubble(e){
	if (window.event && window.event.cancelBubble) {
		window.event.cancelBubble = true;
	}
	if (e && e.stopPropagation){
		e.stopPropagation();
	}
}

/**
 * getElementById wrapper function
 * @param {Object} id
 */
function getById(id){
	if (!document.getElementById) {return false;}
	return document.getElementById(id);
}

/**
 * cross browser event hadling for IE5+, NS6+, and Mozilla/Gecko
 * @author Scott Andrew
 * @param {Object} elm
 * @param {Object} evType
 * @param {Object} fn
 * @param {Object} useCapture
 */
function addEvent(elm, evType, fn, useCapture)
{
	if (elm.addEventListener) {
		elm.addEventListener(evType, fn, useCapture);
		return true;
	} else if (elm.attachEvent) {
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	} else {
		elm['on' + evType] = fn;
	}
}

/**
 * set up page listeners and objects
 * @param {Object} e
 */
function addListeners(e){
	addButton('drinks');
	addEvent(getById('add-drinks'), 'click', addDrink, false);
}

/**
 * add page listeners
 */
addEvent(window, 'load', addListeners, false);