var prev = 2;
var curr = 0;
var next = 1;
var increment = 1;
var highest = 5;
var middle = highest-increment;
var lowest = 3;
var totalPics = 3;
var numSteps = 33;
var currStep = 1;
var prevPic;
var currPic;
var nextPic;
var longDelay = 5000;
var mediumLongDelay = 2000;
var mediumDelay = 3000;
var shortDelay = 75;
var t;
var s;
var prevButton;
var currButton;
var nextButton;
var switchvar = 32;

function start(){
	currStep = 1;

	prevPic = document.getElementById('image_rotator'+prev);
	currPic = document.getElementById('image_rotator'+curr);
	nextPic = document.getElementById('image_rotator'+next);

	prevButton = document.getElementById('rotator'+prev);
	currButton = document.getElementById('rotator'+curr);
	nextButton = document.getElementById('rotator'+next);

	prevButton.style.background = '';
	currButton.style.background = 'url(./images/btn-rotator-roll.jpg) repeat-x';
	nextButton.style.background = '';

	t = setTimeout(transition, mediumDelay);
}

function instaChange(x){
	update_all_backs(x);

	currStep = 1;
	var lower = parseFloat((99-currStep*3)/100);
	var higher = parseFloat((currStep*3)/100);

	curr = x;
	clearTimeout(t);
	clearTimeout(s);
	if((x-1)==-1){
		prev = 2;
	}
	else{
		prev = x-1;
	}
	if((x+1)==3){
		next = 0;
	}
	else{
		next = x+1;
	}
	prevButton = document.getElementById('rotator'+prev);
	currButton = document.getElementById('rotator'+curr);
	nextButton = document.getElementById('rotator'+next);

	prevButton.style.background = '';
	currButton.style.background = 'url(./images/btn-rotator-roll.jpg) repeat-x';
	nextButton.style.background = '';

	prevPic = document.getElementById('image_rotator'+prev);
	currPic = document.getElementById('image_rotator'+curr);
	nextPic = document.getElementById('image_rotator'+next);

	prevPic.style.zIndex = lowest;
	currPic.style.zIndex = highest;
	nextPic.style.zIndex = middle;

	cleanTransition();
}

function cleanTransition(){
	prevPic.style.filter = 'alpha(opacity='+(01)+')';
	prevPic.style.opacity = .01;
	prevPic.style.MozOpacity = .01;

	currPic.style.filter = 'alpha(opacity='+(01)+')';
	currPic.style.opacity = .01;
	currPic.style.MozOpacity = .01;

	nextPic.style.filter = 'alpha(opacity='+(01)+')';
	nextPic.style.opacity = .01;
	nextPic.style.MozOpacity = .01;

	currPic.style.filter = 'alpha(opacity='+(99)+')';
	currPic.style.opacity = .99;
	currPic.style.MozOpacity = .99;

	t = setTimeout(transition, longDelay);
}

function transition(){
	clearTimeout(t);
	clearTimeout(s);
	prevButton = document.getElementById('rotator'+prev);
	currButton = document.getElementById('rotator'+curr);
	nextButton = document.getElementById('rotator'+next);

	prevPic = document.getElementById('image_rotator'+prev);
	currPic = document.getElementById('image_rotator'+curr);
	nextPic = document.getElementById('image_rotator'+next);

	var lower = parseFloat((99-currStep*3)/100);
	var higher = parseFloat((currStep*3)/100);

	currPic.style.filter = 'alpha(opacity='+(lower*100)+')';
	currPic.style.opacity = lower;
	currPic.style.MozOpacity = lower;

	nextPic.style.filter = 'alpha(opacity='+(higher*100)+')';
	nextPic.style.opacity = higher;
	nextPic.style.MozOpacity = higher;

	if(currStep == switchvar){
		currPic.style.zIndex = lowest;
		nextPic.style.zIndex = highest;
		prevPic.style.zIndex = middle;
	}

	if(currStep == 33){
		prevPic.style.filter = 'alpha(opacity='+(01)+')';
		prevPic.style.opacity = .01;
		prevPic.style.MozOpacity = .01;

		currPic.style.filter = 'alpha(opacity='+(01)+')';
		currPic.style.opacity = .01;
		currPic.style.MozOpacity = .01;

		nextPic.style.filter = 'alpha(opacity='+(01)+')';
		nextPic.style.opacity = .01;
		nextPic.style.MozOpacity = .01;

		//alert('transition');

		currButton.style.background = '';
		nextButton.style.background = 'url(./images/btn-rotator-roll.jpg) repeat-x';
		//nextButton.style.background = '';

		if(curr==(totalPics-1)){ //if curr is already equal to index of 2
			curr = 0;//index 0
		}
		else{
			curr++;
		}
		if((curr-1)==-1){ //if current minus 1 (what should be previous) is equal to -1, then set prev equal to index of 2
			prev = totalPics-1;//index 2
		}
		else{
			prev = curr-1;
		}
		if((curr+1)==totalPics){ //if current plus 1 (what should be next) is equal to 3 (1 index higher than total number of pics)
			next = 0;
		}
		else{
			next = curr+1;
		}

		//alert('just updated');

		prevPic = document.getElementById('image_rotator'+prev);
		currPic = document.getElementById('image_rotator'+curr);
		nextPic = document.getElementById('image_rotator'+next);

		prevPic.style.filter = 'alpha(opacity='+(01)+')';
		prevPic.style.opacity = .01;
		prevPic.style.MozOpacity = .01;

		currPic.style.filter = 'alpha(opacity='+(99)+')';
		currPic.style.opacity = .99;
		currPic.style.MozOpacity = .99;

		nextPic.style.filter = 'alpha(opacity='+(01)+')';
		nextPic.style.opacity = .01;
		nextPic.style.MozOpacity = .01;

		currStep = 1;
		t = setTimeout(transition, longDelay);
	}
	else{
		currStep++;
		if(currStep == switchvar){
			prevButton.style.background = '';
			currButton.style.background = 'url(./images/btn-rotator-roll.jpg) repeat-x';
		}
		if(currStep == (switchvar+1)){
			currButton.style.background = '';
			nextButton.style.background = 'url(./images/btn-rotator-roll.jpg) repeat-x';				
		}
		s = setTimeout(transition, shortDelay);
	}
}

function update_all_backs(x){ //x == id of element
	for(var i = 0; i < 3; i++){
		var button = document.getElementById('rotator'+i);
		if(button){
			button.style.background = '';
		}
	}
	var button = document.getElementById('rotator'+x);
	if(button){
		button.style.background = 'url(./images/btn-rotator-roll.jpg) repeat-x';
	}
}

function initAll(){
	t = setTimeout(start, mediumLongDelay);
}

window.onload = initAll();