if(window.addEventListener){
	window.addEventListener('load', buildFontTree, false)
}else{
	window.attachEvent('onload', function(){
			buildFontTree()
		})
}




var previewAtts = {
  font    : 'Black Jack',
  color   : 'black',
  wording : 'Enter Text Here'
};

function promptForWording(text) {
	document.getElementById('wording').focus()
	if(!text || text == 'Enter Text Here') {
		document.getElementById('wording').value = ''
		setTimeout('appendWordingLetter("E")', 200)
		setTimeout('appendWordingLetter("n")', 500)
		setTimeout('appendWordingLetter("t")', 800)
		setTimeout('appendWordingLetter("e")', 900)
		setTimeout('appendWordingLetter("r ")', 1000)
		setTimeout('appendWordingLetter("T")', 1200)
		setTimeout('appendWordingLetter("e")', 1300)
		setTimeout('appendWordingLetter("x")', 1600)
		setTimeout('appendWordingLetter("t ")', 1800)
		setTimeout('appendWordingLetter("H")', 2000)
		setTimeout('appendWordingLetter("e")', 2200)
		setTimeout('appendWordingLetter("r")', 2300)
		setTimeout('appendWordingLetter("e")', 2400)
		setTimeout('updatePreview(null,null,"Enter Text Here")',2500)
	} else {
		document.getElementById('wording').value = text
		updatePreview(null,null,null)
	}
}

function appendWordingLetter(c) {
	document.getElementById('wording').value += (c + '')
}

function buildFontTree() {
	var font = previewAtts.font
	var found = false
	var root = document.getElementById('fontTree')
	var uls = root.getElementsByTagName('ul')
	var i = 0
	var z = uls.length
	for(i=0; i<z; i++) {
		uls[i].className = 'branchClosed'
		uls[i].parentNode.className = 'parentClosed'
		uls[i].parentNode.closable = true
		uls[i].parentNode.onclick = toggleBranch
		var lis = uls[i].getElementsByTagName('li')
		var j = 0
		var y = lis.length
		for(j=0; j<y; j++) {
			lis[j].className = 'leafOff'
			lis[j].onclick = onLeafClick
			lis[j].onmouseover = onLeafOver
			lis[j].onmouseout = onLeafOut
			if(!found && lis[j].firstChild.alt == font) {
				found = true
				lis[j].className = 'leafOn'
				uls[i].className = 'branchOpen'
				uls[i].parentNode.className = 'parentOpen'
			}
		}
	}
	document.getElementById('loadingMessage').style.display = 'none'
	document.getElementById('fontTree').style.display = 'block'
}

function onLeafOver() {
	this.className = ((this.className == 'leafOff') ? 'leafOver' : 'leafOn')
}
function onLeafOut() {
	this.className = ((this.className == 'leafOver') ? 'leafOff' : 'leafOn')
}

function toggleBranch() {
	if(this.closable == false) {
		this.closable = true
		return
	}
	var root = document.getElementById('fontTree')
	var uls = root.getElementsByTagName('ul')
	var i = 0
	var z = uls.length
	for(i=0; i<z; i++) {
		if(uls[i].parentNode != this) {
			uls[i].className = 'branchClosed'
			uls[i].parentNode.className = 'parentClosed'
		}
	}
	var ul = this.getElementsByTagName('ul')[0]
	ul.className = ((ul.className == 'branchClosed') ? 'branchOpen' : 'branchClosed')
	this.className = ((this.className == 'parentClosed') ? 'parentOpen' : 'parentClosed')
}

function turnOffLeaves() {
	var root = document.getElementById('fontTree')
	var lis = root.getElementsByTagName('li')
	var i = 0
	var z = lis.length
	for(i=0; i<z; i++) {
		if(lis[i].parentNode.id != 'fontTree') {
			lis[i].className = 'leafOff'
		}
	}
}

function onLeafClick() {
	this.parentNode.parentNode.closable = false
	turnOffLeaves()
	this.className = 'leafOn'
	var img = this.firstChild
	while(img.nodeType != 1) {
		img = img.nextSibling
	}
	selectFont(img.alt)
}



function getCharacterCount() {
	var text = document.getElementById('wording').value.trim()		
	var ws = 0
	var i
	for(i=0; i<text.length; i++) {
		var c = text.charAt(i)
		if(c.isWhiteSpace())
			ws++
	}
	return i-ws
}

var previewWait = null

function selectFont(font) {
	//urchinTracker('/custom/font/' + font);
	updatePreview(font, null, null)
}

function selectColor(color) {
	updatePreview(null, color, null)
}

function enterLetter() {
	previewWait = clearTimeout(previewWait)
	previewWait = setTimeout(
						'updatePreview(null, null, \'' 
								+ document.getElementById('wording').value.escape() + 
						'\')',
						700
					)
}

function updatePreview(font, color, wording) {
	if(font != null) {
		previewAtts.font = font
	}
	if(color != null) {
		previewAtts.color = color
	}
	if(wording != null) {
		previewAtts.wording = wording.trim()
	}
	if(previewAtts.wording == '') {
		return
	}
	var url = 'preview.php?f=' + previewAtts.font + '&c=' + previewAtts.color +
  '&w=' + previewAtts.wording
	
	document.getElementById('preview').src = url
	document.getElementById('preview').onload = updatePrices
}

function largerPreview() {
	//urchinTracker('/custom/largepreview');
	var url = 'bigPreview.php?f=' + previewAtts.font + '&c=' + previewAtts.color +
  '&w=' + previewAtts.wording
	//window.open(url, url, 'width=770,height=150,status=no,resizable=yes,scrollbars=yes')
	window.open(url, 'bigpreview', 'width=770,height=150,status=0,resizable=1,scrollbars=1')
	
}

function updatePrices() {

	var width = document.getElementById('preview').scrollWidth
	var height = document.getElementById('preview').scrollHeight
	var ratio = parseFloat(width, 10) / parseFloat(height, 10)
	
	document.getElementById('n1').innerHTML = Math.round(1*ratio)
	document.getElementById('n1_5').innerHTML = Math.round(1.5*ratio)
	document.getElementById('n2').innerHTML = Math.round(2*ratio)
	document.getElementById('n2_5').innerHTML = Math.round(2.5*ratio)
	document.getElementById('n3').innerHTML = Math.round(3*ratio)
	document.getElementById('n4').innerHTML = Math.round(4*ratio)
	document.getElementById('n5').innerHTML = Math.round(5*ratio)
	document.getElementById('n6').innerHTML = Math.round(6*ratio)
	document.getElementById('n7').innerHTML = Math.round(7*ratio)
	document.getElementById('n8').innerHTML = Math.round(8*ratio)
	document.getElementById('n9').innerHTML = Math.round(9*ratio)
	document.getElementById('n10').innerHTML = Math.round(10*ratio)
	document.getElementById('n11').innerHTML = Math.round(11*ratio)
	document.getElementById('n12').innerHTML = Math.round(12*ratio)
	
	updatePrice()
	
}

function updatePrice() {

	var inputs = document.getElementsByTagName('input')
	var count = getCharacterCount()
	var price = 0
	for(var i=0; i<inputs.length; i++) {
		if(inputs[i].type == 'radio' && inputs[i].name == 'product' && inputs[i].checked) {
			price = inputs[i].value.split('|')[0]
			break
		}
	}
	document.getElementById('letterCount').innerHTML = count
	var quantity = document.getElementById('quantity').value
	if (quantity == '') {
		return
	}
	var subTotal = price*count + ''
	var total = subTotal*quantity + ''
	
	var stDollars = subTotal.substring(0, subTotal.length-2)
	if(stDollars.length == 0) {
		stDollars = '0'
	}
	var stCents = subTotal.substring(subTotal.length-2)
	if(stCents.length == 0) {
		stCents = '00'
	} else if(stCents.length == 1) {
		stCents = '0'
	}
	
	var tDollars = total.substring(0, total.length-2)
	if(tDollars.length == 0) {
		tDollars = '0'
	}
	var tCents = total.substring(total.length-2)
	if(tCents.length == 0) {
		tCents = '00'
	} else if(tCents.length == 1) {
		tCents = '0'
	}
	
	document.getElementById('subTotal').innerHTML = stDollars + '.' + stCents
	document.getElementById('totalPrice').innerHTML = tDollars + '.' + tCents
}


function updateQuantity(elem, e) {
	var key
	var keychar
	var good = false
	if (window.event)
		key = window.event.keyCode
	else if (e)
		key = e.which
	else
		good = true
	keychar = String.fromCharCode(key)
	// control keys
	if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) )
		good = true
	// numbers
	else if ((("0123456789").indexOf(keychar) > -1))
		good = true
	return good
}