var currentPicture = 1;
var picturesCount = 32;
var picturesIndexLength = 4;
var picturesBasePath = '/pictures/';
var isRolling = false;

function pictureBoxInit()
{
	
	currentPicture = 1;
	
	$('div .pictureBox').each(function() {
		
		var html = '<div class="pictureRoll">';
		var cls = ['previousHidden', 'previous', 'current', 'next', 'nextHidden'];
		for ( var i = -1; i <= 3; i++ ) {
			var ci = ( i <= 0 ) ? picturesCount + i : i;
			html += '<div class="' + cls[i + 1] + '"><img src="' 
				+ pathFromPath_withIndexLength_atIndex_small_(picturesBasePath, picturesIndexLength, ci, true) 
				+ '" /></div>';
		}
		html += '</div><div class="pictureFrame">';
		for ( var i = 0; i <= 2; i++ ) {
			var ci = ( i <= 0 ) ? picturesCount + i : i;
			html += '<div class="' + cls[i + 1] + '"><img src="' 
				+ pathFromPath_withIndexLength_atIndex_small_(picturesBasePath, picturesIndexLength, ci, false) 
				+ '" /></div>';
		}
		html += '</div>';
		
		$(this).append(html);
		
		var previousRoll = $('.pictureRoll .previous', this).get(0);
		var currentRoll = $('.pictureRoll .current', this).get(0);
		var nextRoll = $('.pictureRoll .next', this).get(0);
		var currentFrame = $('.pictureFrame .current', this).get(0);
		
		$(previousRoll).unbind().click(function() {
			previousPicture();
		});
		
		$(currentRoll).unbind().click(function() {
			nextPicture();
		});
		
		$(nextRoll).unbind().click(function() {
			nextPicture();
		});
		
		$(currentFrame).unbind().click(function() {
			nextPicture();
		});
		
	});
	
}

function previousPicture()
{
	
	if ( isRolling ) {
		return null;
	}
	
	isRolling = true;
	
	currentPicture = ( currentPicture - 1 >= 1 ) ? currentPicture - 1 : picturesCount;
	previousImageIndex = ( currentPicture == 1 ) ? picturesCount : currentPicture - 1;
	
	currentPreviousHiddenRollIndex = ( previousImageIndex - 1 >= 1 ) ? previousImageIndex - 1 : picturesCount;
	
	$("div .pictureBox").each(function() {
		
		var previousHiddenRoll = $('.pictureRoll .previousHidden', this).get(0);
		var previousRoll = $('.pictureRoll .previous', this).get(0);
		var currentRoll = $('.pictureRoll .current', this).get(0);
		var nextRoll = $('.pictureRoll .next', this).get(0);
		var nextHiddenRoll = $('.pictureRoll .nextHidden', this).get(0);
		
		var previousFrame = $('.pictureFrame .previous', this).get(0);
		var currentFrame = $('.pictureFrame .current', this).get(0);
		var nextFrame = $('.pictureFrame .next', this).get(0);
		
		$(previousHiddenRoll).animate({ 'marginTop' : '0px', 'opacity' : 0.5 }, 1500, 'swing');
		$(previousRoll).animate({ 'opacity' : 1.0 }, 1500, 'swing');
		$(currentRoll).animate({ 'opacity' : 0.5 }, 1500, 'swing');
		$(nextRoll).animate({ 'opacity' : 0.0 }, 1500, 'swing', function() {
			
			$(nextRoll).removeClass('next').addClass('nextHidden');
			$(nextHiddenRoll).remove();
			$(currentRoll).removeClass('current').addClass('next');
			$(previousHiddenRoll).removeClass('previousHidden').addClass('previous');
			$(previousRoll).removeClass('previous').addClass('current');
			
			$(previousHiddenRoll).before('<div class="previousHidden"><img src="' 
				+ pathFromPath_withIndexLength_atIndex_small_(picturesBasePath, picturesIndexLength, currentPreviousHiddenRollIndex, true) 
				+ '" /></div>');
			
			
			$(previousHiddenRoll).unbind().click(function() {
				previousPicture();
			});
			
			$(previousRoll).unbind().click(function() {
				nextPicture();
			});
			
			$(currentRoll).unbind().click(function() {
				nextPicture();
			});
			
		});
		
		$(previousFrame).animate({ 'marginTop' : '0px' }, 1500, 'swing', function() {
			
			$(currentFrame).removeClass('current').addClass('next');
			$(nextFrame).remove();
			$(previousFrame).removeClass('previous').addClass('current');
			$(previousFrame).before('<div class="previous" style="margin-top: -402px;"><img src="' 
				+ pathFromPath_withIndexLength_atIndex_small_(picturesBasePath, picturesIndexLength, previousImageIndex, false) 
				+ '" /></div>');
			
			$(previousFrame).unbind().click(function() {
				nextPicture();
			});
			
			isRolling = false;
			
		});
		
	});
	
}

function nextPicture()
{
	
	if ( isRolling ) {
		return null;
	}
	
	isRolling = true;
	
	currentPicture = ( currentPicture + 1 <= picturesCount ) ? currentPicture + 1 : 1;
	nextImageIndex = ( currentPicture == picturesCount ) ? 1 : currentPicture + 1;
	
	currentNextHiddenRollIndex = ( nextImageIndex + 1 <= picturesCount ) ? nextImageIndex + 1 : 1;
	
	$("div .pictureBox").each(function() {
		
		var previousHiddenRoll = $('.pictureRoll .previousHidden', this).get(0);
		var previousRoll = $('.pictureRoll .previous', this).get(0);
		var currentRoll = $('.pictureRoll .current', this).get(0);
		var nextRoll = $('.pictureRoll .next', this).get(0);
		var nextHiddenRoll = $('.pictureRoll .nextHidden', this).get(0);
		
		var previousFrame = $('.pictureFrame .previous', this).get(0);
		var currentFrame = $('.pictureFrame .current', this).get(0);
		var nextFrame = $('.pictureFrame .next', this).get(0);
		
		$(previousHiddenRoll).animate({ 'marginTop' : '-268px' }, 1500, 'swing');
		$(previousRoll).animate({ 'opacity' : 0.0 }, 1500, 'swing');
		$(currentRoll).animate({ 'opacity' : 0.5 }, 1500, 'swing');
		$(nextHiddenRoll).animate({ 'opacity' : 0.5 }, 1500, 'swing');
		$(nextRoll).animate({ 'opacity' : 1.0 }, 1500, 'swing', function() {
			
			$(previousRoll).removeClass('previous').addClass('previousHidden').css({'marginTop' : '-134px'});
			$(currentRoll).removeClass('current').addClass('previous');
			$(previousHiddenRoll).remove();
			$(nextRoll).removeClass('next').addClass('current');
			$(nextHiddenRoll).removeClass('nextHidden').addClass('next');
			
			$(nextHiddenRoll).after('<div class="nextHidden"><img src="' 
				+ pathFromPath_withIndexLength_atIndex_small_(picturesBasePath, picturesIndexLength, currentNextHiddenRollIndex, true) 
				+ '" /></div>');
			
			$(currentRoll).unbind().click(function() {
				previousPicture();
			});
			
			$(nextRoll).unbind().click(function() {
				nextPicture();
			});
			
			$(nextHiddenRoll).unbind().click(function() {
				nextPicture();
			});
			
		});
		
		$(previousFrame).animate({ 'marginTop': '-804px' }, 1500, 'swing', function() {
			
			$(currentFrame).removeClass('current').addClass('previous').css({'marginTop' : '-402px'});
			$(previousFrame).remove();
			$(nextFrame).removeClass('next').addClass('current');
			$(nextFrame).after('<div class="next"><img src="' 
				+ pathFromPath_withIndexLength_atIndex_small_(picturesBasePath, picturesIndexLength, nextImageIndex, false) 
				+ '" /></div>');
			
			$(nextFrame).unbind().click(function() {
				nextPicture();
			});
			
			isRolling = false;
						
		});
		
	});	
	
}

function pathFromPath_withIndexLength_atIndex_small_(basePath, indexLength, index, isSmall)
{
	
	var path = basePath;
	indexString = index.toString();
	var nToAdd = 0;
	
	( path.charAt(path.length - 1) != '/' ) ? path += '/' : null;
	( isSmall ) ? path += 'small/' : path += 'big/';
 	( indexString.length < indexLength ) ? nToAdd = ( indexLength - indexString.length ) : null;
	for ( var i = 0; i < nToAdd; i++ ) { indexString = '0' + indexString };
	path += indexString + '.jpg';
	
	return path;
	
}