var arrPhotos = new Array('#photo-1', '#photo-2', '#photo-3', '#photo-4', '#photo-5', '#photo-6', '#photo-7');
var selectedPhoto = 0;
var transLock = false;

// DOM is ready, let's get started!

$(document).ready(function() {




$("#btn-previous-img").css("opacity","0.4");
 
// ON MOUSE OVER
$("#btn-previous-img").hover(function () {
 
// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "fast");
},
 
// ON MOUSE OUT
function () {
 
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.4
}, "slow");
});


												$("#btn-next-img").css("opacity","0.4");
 
// ON MOUSE OVER
$("#btn-next-img").hover(function () {
 
// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "fast");
},
 
// ON MOUSE OUT
function () {
 
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.4
}, "slow");
});

	// init prev/next buttons
	$('#btn-previous-img').click(function() {
		if(transLock) return; // ignore request if a transition is already happening
		else transLock = true; // otherwise lock it so requests are ignored until this transition is complete
		
		// slide to new photo
		selectedPhoto--;
		if(selectedPhoto < 0) selectedPhoto = arrPhotos.length - 1;
		
		moveToImg(selectedPhoto);
	});
	
	$('#btn-next-img').click(function() {
		if(transLock) return; // ignore request if a transition is already happening
		else transLock = true; // otherwise lock it so requests are ignored until this transition is complete
		
		// slide to new photo
		selectedPhoto++;
		if(selectedPhoto > arrPhotos.length -1) selectedPhoto = 0;;
		
		moveToImg(selectedPhoto);
	});
	
	// slide to photo one
	moveToImg(selectedPhoto);
});

function moveToImg(id)
{
	$('#transition-container').animate({'left': -(id * 700) + 'px'}, 280, 'swing', function() {
		transLock = false;
	});
}