var intPage = 1
var intPageCount = 1
var intNext = 1
var intPrev = 1
var strCat = 'web'

function tabSwitcher(elemTab, elemTabGroup){
	var tabList = elemTabGroup.getElementsByTagName('a')
	for (var i=0; i<tabList.length; i++){
		$(tabList[i].id).removeClassName('on')
	}
	elemTab.className += ' on'
}

function createSpinner(containerID){
	var spinnerImg = document.createElement('img')
	spinnerImg.alt = 'Loading...'
	spinnerImg.src = 'img/spinner.gif'
	
	var spinnerCont = document.createElement('div')
	spinnerCont.id = 'portfolioSpinner'
	spinnerCont.className = 'spinner'
	
	spinnerCont.appendChild(spinnerImg)
	$(containerID).appendChild(spinnerCont)
}

function loadPortfolio(intPageToLoad, strCategory){
//	alert('loading page: ' + intPageToLoad)
	removeChildren($('portfolioContainer'))
	createSpinner('portfolioContainer')
	strCat = strCategory
	var url = "req/getPortfolio.asp?cat=" + strCategory + "&page=" + intPageToLoad
	new Ajax.Request(
		url, 
		{
			onComplete:function(response){
				drawPortfolio(response.responseXML)
			}
		}
	)
}

function drawPortfolio(xmldoc){
	// get values from the returned XML
	colMain = xmldoc.getElementsByTagName('portfolio')
	intPage = colMain[0].getAttribute('page')
	intPageCount = colMain[0].getAttribute('pagecount')
	colItems = xmldoc.getElementsByTagName('project')
	strError = colMain[0].getAttribute('error')
	if (strError != null){
		// disable the spinner
		checkRemove('portfolioSpinner')
		var h2 = document.createElement('h2')
		h2.className = 'recordStatus'
		h2.appendChild(document.createTextNode('No Records Found'))
		$('portfolioContainer').appendChild(h2)
		removeChildren($('navPage'))
		$('navPage').appendChild(document.createTextNode('Navigation'))
		return false
	}
	for (var i=0; i<colItems.length; i++){
		var strTitle = colItems[i].getAttribute('title')
		var strDate = colItems[i].getAttribute('date')
		var strInvolvement = colItems[i].getAttribute('involvement')
		var strURL = colItems[i].getAttribute('url')
		var strThumb = colItems[i].getAttribute('thumb')
		var strImage = colItems[i].getAttribute('image')
		var strStatus = colItems[i].getAttribute('status')
		var strID = colItems[i].getAttribute('id')
		var colDesc = colItems[i].getElementsByTagName('description')
		var strDesc = colDesc[0].firstChild.nodeValue
		//alert(strDesc)
		// is this an even or odd record? (for right hand margins)
		var isEven = i % 2
		if (isEven == 1){
			isEven = true
		}
		else{
			isEven = false
		}

		// build the portfolioBox
		
		var container = document.createElement('a')
		if (isEven){
			container.className = 'portfolioImg right'
		}
		else{
			container.className = 'portfolioImg'
		}
		container.id="1"+strID
		container.href = "portfolioDetails.asp?id="+strID
		container.title = strTitle
		
		// add our mouseover and mouseout events
		Event.observe(container,'mouseover',showBubble.bindAsEventListener(this,strID))
		Event.observe(container,'mouseout',hideBubble.bindAsEventListener(this,strID))
		
		// thumbnail image
		var thumb = document.createElement('img')
		thumb.src = 'img/portLetter/' + strThumb
		thumb.alt = strTitle
		
		container.appendChild(thumb) // add our thumbnail image to the link
		container.appendChild(document.createElement('br'))

		// span for project title
		var spanBubble = document.createElement('span')
		spanBubble.id = "ptBubble" + strID
		spanBubble.className="ptBubble"
		spanBubble.appendChild(document.createTextNode(strTitle))
		
		// clearer
		var clearer1 = document.createElement('div')
		clearer1.className = 'clearer big'
		clearer1.appendChild(document.createTextNode('&nbsp;'))
		
		// append child nodes
		container.appendChild(spanBubble); 
		
		// perform a split on double line breaks (to get paragraph breaks)
		//var aryDesc = strDesc.split('\n\n') // \n\n doesnt work in safari, only \r\n
		//if (aryDesc.length == 1){
			// try \r\n for safari...
		//	aryDesc = strDesc.split('\r')
		//}
		
		//for (var x=0; x<aryDesc.length; x++){
		//	var tmp = document.createElement('p')
		//	tmp.appendChild(document.createTextNode(aryDesc[x]))
		//	container.appendChild(tmp)	
		//}
			
		var clearer = document.createElement('div')
		clearer.className = 'clearer'
		clearer.appendChild(document.createTextNode('&nbsp;'))
		$('portfolioContainer').appendChild(container)
		if (isEven){
			$('portfolioContainer').appendChild(clearer)		
		}
		//setupZoom()
	}
	
	// change the navigation buttons so that they point to next, last etc.
	// remove all existing click events
	Event.stopObserving('navFirst', 'click')
	Event.stopObserving('navPrev', 'click')
	Event.stopObserving('navNext', 'click')
	Event.stopObserving('navLast', 'click')
	// remove all 'disabled' classNames
	$('navFirst').removeClassName('disabled')
	$('navPrev').removeClassName('disabled')
	$('navNext').removeClassName('disabled')
	$('navLast').removeClassName('disabled')
	// do first link
	if (intPage != 1){ // if not on first page already...
		Event.observe('navFirst', 'click', function(){loadPortfolio('1', strCat)})
	}
	else{
		// disable link
		$('navFirst').addClassName('disabled')
	}
	
	// do last link
	if (intPage != intPageCount){ // if not on last page already...
		Event.observe('navLast', 'click', function(){loadPortfolio(intPageCount, strCat)})	
	}
	else{
		// disable link
		$('navLast').addClassName('disabled')
	}
	
	// calculate previous link
	intPrev = parseInt(intPage) - 1
	if (intPrev >= 1){
		// if not on first page
		Event.observe('navPrev', 'click', function(){loadPortfolio(intPrev, strCat)})
	}
	else{
		$('navPrev').addClassName('disabled')
	}
	
	// calculate next link
	intNext = parseInt(intPage) + 1
	if (intNext <= intPageCount){
		// if not on last page
		Event.observe('navNext', 'click', function(){loadPortfolio(intNext, strCat)})
	}
	else{
		$('navNext').addClassName('disabled')
	}
	
	// update the page navigation status
	removeChildren($('navPage'))
	$('navPage').appendChild(document.createTextNode('Page ' + intPage + ' of ' + intPageCount))
	
	// disable the spinner
	checkRemove('portfolioSpinner')	
}

function showBubble(elemID,bubbleID){
	bubbleID = 'ptBubble'+bubbleID
	$(bubbleID).style.visibility='visible'
}

function hideBubble(elemID,bubbleID){
	bubbleID = 'ptBubble'+bubbleID
	$(bubbleID).style.visibility='hidden'
}

Event.observe(window, 'load', function(){loadPortfolio(intPage, strCat)});
//Event.observe(window, 'load', setupZoom);