var arrThumbs
var divThumbnails
var divCurrentItem
var divCaption
var divGoRight
var divGoLeft
gallery = function(gallerySource, dataSource){
    //instantiate gallery
    this.images = null
    this.source = gallerySource
    this.dataSource = dataSource
    this.initialize()
}
gallery.prototype.initialize = function(){
	//set form elements
	arrThumbs = new Array($('divThumb1'), $('divThumb2'), $('divThumb3'), $('divThumb4'), $('divThumb5'))
	divThumbnails = $('divThumbnails')
	divCurrentItem = $('divCurrentItem')
	divCaption = $('divCaption')
	divGoRight = $('divGoRight')
	divGoLeft = $('divGoLeft')
		
	this.currentCursor = 0 //current thumbnail image - gallery wide

	this.setNavigation(false, true)

	//load first set of images
	this.requestImages()
}
gallery.prototype.setNavigation = function(back, forward){
	var gObject = this
	if(back){
		//left on
		divGoLeft.innerHTML = '<img src="../../images/graphics/buttons/gallery_left.gif" alt="Previous" class="arrow" />'
		divGoLeft.className = 'nav_on'
		divGoLeft.onclick = function(){
			gObject.back()
			return false
		}	
	}else{
		//left off
		divGoLeft.innerHTML = '<img src="../../images/graphics/buttons/gallery_left_off.gif" alt="Previous" class="arrow" />'
		divGoLeft.className = 'nav_off'
		divGoLeft.onclick = function(){
			return false
		}
	}
	if(forward){
		//right on
		divGoRight.innerHTML = '<img src="../../images/graphics/buttons/gallery_right.gif" alt="Next" class="arrow" />'
		divGoRight.className = 'nav_on'
		divGoRight.onclick = function(){
			gObject.forward()
			return false
		}	
	}else{
		//right off
		divGoRight.innerHTML = '<img src="../../images/graphics/buttons/gallery_right_off.gif" alt="Next" class="arrow" />'
		divGoRight.className = 'nav_off'
		divGoRight.onclick = function(){
			return false
		}	
	}
}
gallery.prototype.requestImages = function(){
	this.setNavigation(false, false)
	new ajax.request(
		{
		    'url': this.dataSource,
		    'urlParams': [
		        'cursor=' + this.currentCursor,
		        'source=' + this.source
		    ],
		    'httpMethod': 'GET',
		    'completeMethod': this.processImages,
			'loadingMethod': this.requestingData,
		    'reference': this
		}
	)

}
gallery.prototype.requestingData = function(){
	divThumbnails.className = 'tanloading'
	
	arrThumbs[0].style.visibility = 'hidden'
	arrThumbs[1].style.visibility = 'hidden'
	arrThumbs[2].style.visibility = 'hidden'
	arrThumbs[3].style.visibility = 'hidden'
	arrThumbs[4].style.visibility = 'hidden'
}
gallery.prototype.processImages = function(){
	var gObject = this.params.reference
	gObject.oldImages = this.params.reference.images
	gObject.images = eval(this.xhr.responseText)
	gObject.loadImages()
}
gallery.prototype.loadImages = function(){
	divThumbnails.className = ''
	arrThumbs[0].style.visibility = 'visible'
	arrThumbs[1].style.visibility = 'visible'
	arrThumbs[2].style.visibility = 'visible'
	arrThumbs[3].style.visibility = 'visible'
	arrThumbs[4].style.visibility = 'visible'
	
	var back = true
	if(this.currentCursor == 0){
		back = false
	}

    if(this.images.length == 0){
	    //clear text
	    this.setNavigation(back, false)
	    alert('No more images.')	    

	    //reset variables
	    this.currentCursor -= 1
	    this.images = this.oldImages
    }
    else{
		if(this.images.length < 6){
	 	    this.setNavigation(back, false)	   
	    }else{
	        this.setNavigation(back, true)	    
	    }
	    
	    //attach events to each preview
	    this.setupThumbnail(arrThumbs[0], 0)
	    this.setupThumbnail(arrThumbs[1], 1)
	    this.setupThumbnail(arrThumbs[2], 2)
	    this.setupThumbnail(arrThumbs[3], 3)
	    this.setupThumbnail(arrThumbs[4], 4)
	    
    }


	this.requesting = false
}
gallery.prototype.setupThumbnail = function(div, index){
		var gObject = this
		var divThumb = arrThumbs[index]

		//clear current contents
		divThumb.innerHTML = ''

	    if(this.images.length > index){
	    	//if image exists then load
			var strThumb = this.images[index].thumb
			var strDescription = this.images[index].description
			
		    divThumb.innerHTML = ''
			divThumb.className = 'tanloading'
		 	divThumb.onclick = function(){
		        gObject.onPreviewClick.call(gObject, index)
		   	}

		    var img = document.createElement('img')
    		//divThumb.style.backgroundImage = 'url(../../images/graphics/thumb_load.gif)'	   
		    img.onload = function(){
		        //image only loads when finished
				divThumb.style.backgroundImage = ''
				divThumb.className = 'gallery_thumb'
					        
				var div = document.createElement('div')            
				div.innerHTML = '<img src="' + strThumb + '" alt="' + strDescription + '">'
				arrThumbs[index].appendChild(div)
		    }
		    img.src = this.images[index].thumb
		}
		else{
			//show empty box
			divThumb.onclick = null
			divThumb.className = 'gallery_thumb_empty'
	    }
}

gallery.prototype.showImage = function(index){
    var div = divCurrentItem
    var imgLocation = this.images[index].normal
    
    //show image based on index
    div.style.backgroundImage = 'url(../../images/graphics/gallery_load.gif)'
    //clear text
    div.innerHTML = ''
    
    //show new image
    divCaption.innerHTML = this.images[index].description
    var img = document.createElement('img')
    img.onload = function(){
        //image only loads when finished
		div.style.backgroundImage = 'url(' + imgLocation + ')'        
    }
    img.src = imgLocation

}    
gallery.prototype.onPreviewClick = function(index){
	this.showImage(index);
}

gallery.prototype.forward = function(){
    //show previous 5 images
    this.currentCursor += 1
    this.requestImages()
}
gallery.prototype.back = function(){
    //show next 5 images
    if(this.currentCursor > 0){
    	this.currentCursor -= 1
    	this.requestImages()
    }
    else{
    	alert('You are at the beginning of the gallery')
    }
}