// ----------- Photobox class --
function Photobox (element) {
	this.baseElement = $(element);
	this.lastClicked = null;
	this.zoomedImg = this.baseElement.find('.photo img');
	this.slider = this.baseElement.find('.slider');
	
	
	this.thumbClick = function (event) {
		var thisImg = $(this).children('img');
		event.data.photoBoxObj.zoomImg(thisImg);
		return false;
	}
	
	this.sepiaImg = function(img) {
		var newSrc = img.attr('src').split('.');
		newSrc[newSrc.length - 2] += '_sepia';
		img.attr('src', newSrc.join('.'));
	}
	
	this.colorizeImg = function(img) {
		var newSrc = img.attr('src').replace('_sepia', '');
		img.attr('src', newSrc);
		return img;
	}
	
	this.zoomImg = function(img) {
		var newSrc = img.attr('src').replace('_thumb', '');
		this.zoomedImg.attr('src',newSrc);
		return img;
	}
	
	this.sliderForward =  function () {
		this.slider.find('a:first').appendTo(this.slider);
	}
	
	this.sliderBackward = function () {
		this.slider.find('a:last').prependTo(this.slider);
	}
	
	this.init = function () {
		//bind the thumbnail events
		this.baseElement
			.find('.thumb')
				.bind('click', {'photoBoxObj': this}, this.thumbClick	)
				.bind('mouseover',{'photoBoxObj': this},
					function(event) {
						event.data.photoBoxObj.colorizeImg($(this).find('img'));
					} 
				)
				.bind('mouseout',{'photoBoxObj': this},
					function(event) {
						event.data.photoBoxObj.sepiaImg($(this).find('img'))
					}
				);
		//bind the forward and back button events
		this.baseElement
			.find('.forward')
				.bind('click', {'photoBoxObj': this}, 
					function (event) {event.data.photoBoxObj.sliderForward()}
				)
			.end()
			.find('.back')
				.bind('click', {'photoBoxObj': this}, 
					function (event) {event.data.photoBoxObj.sliderBackward()}
				);
	}
	
	this.init();
}

$(function () {
	photoBox = new Photobox('.photo-box');
});