// addHover
//
// Description:
// This function will add a class of 'hover' to any element
// selected by strSelector that contains a div.
//
// Arguments:
// (string) valid XPath selector
//
function addHover(strSelector)
{
	$$(strSelector).addEvents({
		
		'click': function()
		{
			window.location = this.getFirst().getProperty('href');
		},
		
		'mouseenter': function()
		{
			this.toggleClass('hover');
		},
		
		'mouseleave': function()
		{
			this.toggleClass('hover');
		}
	
	});
}

// loadImages
//
// Description:
// Display a pretty fade in effect after all the images in the container div have loaded
//
// Arguments:
// (string) valid XPath selector
//
var loadImages = function(strSelector)
{
	var arrImages = $(strSelector).getElements('.teamPhoto');
	var arrSources = [];
	var objBioToggler = new bioToggler('teamPhotos', 'teamBios', 'detailLinks');
	arrImages.each(function(eleImage) {
		arrSources.push(eleImage.get('src'));
	});
	
	new Asset.images(arrSources, {
		onComplete: function() {
			var objChain = new Chain;
			var eleImage = arrImages.shift();
			objChain.chain(function() {
				eleImage.set('tween', {
					duration: 300,
					onComplete: function() {
						objBioToggler.showBio(0);
					}
				}).tween('opacity', 0, 1);
				this.callChain.delay(100, this);
			});
			arrImages.each(function(eleImage) {
				objChain.chain(function() {
					eleImage.set('tween', {
						duration: 300
					}).tween('opacity', 0, 0.50);
					this.callChain.delay(100, this);
				});
			});
			objChain.callChain();
		}
	} );
}

var bioToggler = new Class({
	
	intPrevious: null,
	arrImages: [],
	arrBios: [],
	arrLinks: [],
	
	initialize: function(strImages, strBios, strLinks)
	{
		this.arrImages = $(strImages).getElements( '.teamPhoto' );
		this.arrBios = $(strBios).getChildren();
		this.arrLinks = $(strLinks).getElements('a');
		
		this.arrImages.each(function(eleImage, intIndex) {
			eleImage.addEvent('click', this.showBio.bind(this, intIndex));
		}.bind(this));
		
		this.arrLinks.each(function(eleLink, intIndex) {
			eleLink.addEvent('click', this.showBio.bind(this, intIndex));
		}.bind(this));
	},
	
	showBio: function(intIndex)
	{
		if(this.intPrevious != null)
		{
			this.arrLinks[this.intPrevious].setStyle('color', [118,117,117]);
			this.arrImages[this.intPrevious].fade(0.5);
			var objFx = new Fx.Tween(
				this.arrBios[this.intPrevious],
				{
					onComplete: function(intPrevious, intIndex)
					{	
						this.arrBios[intPrevious].setStyle('display', 'none');
						this.arrBios[intIndex].setStyle('display', 'block');
						this.arrBios[intIndex].fade(0, 1);
					}.bind(this, [this.intPrevious, intIndex])
				}
			);
			objFx.start('opacity', 0);
		}
		else
		{
			this.arrBios[intIndex].setStyle('display', 'block').fade(1);
		}
		this.arrLinks[intIndex].setStyle('color', [237,34,39]);
		this.arrImages[intIndex].set('tween', {
			duration: 300
		}).fade(1);
		this.intPrevious = intIndex;
	}
	
});

var portfolioToggler = new Class({
	
	intPrevious: 0,
	arrThumbnails: [],
	arrImages: [],
	
	initialize: function(strImages, strThumbnails)
	{
		this.arrImages = $(strImages).getElements( 'img' );
		this.arrThumbnails = $(strThumbnails).getElements( 'img' );
		
		this.arrThumbnails.each( function(eleThumb, intIndex) {
			if( intIndex != 0 ) eleThumb.setStyle('opacity', 0.5);
			eleThumb.addEvent('click', this.showImage.bind(this, intIndex));
		}.bind(this) );
	},
	
	showImage: function(intIndex)
	{
		if(this.intPrevious != intIndex)
		{
			var objFx = new Fx.Tween(
				this.arrImages[this.intPrevious],
				{
					onComplete: function(intPrevious, intIndex)
					{	
						this.arrImages[intPrevious].setStyle('display', 'none');
						this.arrImages[intIndex].setStyle('display', 'block');
						this.arrImages[intIndex].fade(0, 1);
					}.bind(this, [this.intPrevious, intIndex])
				}
			);
			objFx.start('opacity', 0);
			this.arrThumbnails[this.intPrevious].setStyle('opacity', 0.5);
			this.arrThumbnails[intIndex].setStyle('opacity', 1);
			this.intPrevious = intIndex;
		}
	}
	
});

var openGallery = function( intId, strType )
{
	var objRequest = new Request.JSON({
		url: '/portfolio/gallery',
		onComplete: function( arrResponse )
		{
			Slimbox.open( arrResponse, 0 );
		}
	}).post({id: intId, type: strType})
}

window.addEvent(
	'domready',
	function()
	{
		//addHover($('.buttons'));
		if($chk($('teamPhotos'))) loadImages('teamPhotos');
		if($chk($('clientImageMain'))) new portfolioToggler( 'clientImageMain', 'clientThumbnails' );
	}
);