//Config
var speed			= 2900; //Minimum 2000
var transSpeed		= 600;
var vhaBoxClass		= 'dispImage';
var vhaBoxId		= 'dispImageId';
var vhaNavBtnClass	= 'circleButton';
var vhaNavBtnId		= 'circleButtonId';
var enableBtn		= true;
var enableVha		= true;
var debug			= false;

//Vars
var vhaBox 			= new Array();
var vhaNavBtn 		= new Array();
var currPic			= 1;
var paused 			= true;
var numBox			= 0;
var started			= false;
var timer1, timer2;
var next;
var num;

//Functions
function vhaInit() {
	$$('.'+vhaBoxClass).each(function(box,index) {
		(index!=0)?box.setStyles({'visibility':'hidden', 'opacity':0}):'';
		vhaBox.push(box.getProperty('id'));
		numBox = numBox+=1;
	});
	$(vhaBoxId+'1').setStyle('visibility','visible');
	if(enableBtn==true) {
		$$('.'+vhaNavBtnClass).each(function(btn,index) {
			vhaNavBtn.push(btn.getProperty('id'));
		});
		$(vhaBoxId+'1').setStyle('visibility','visible');
		$(vhaNavBtnId+'1').toggleClass('active');
		btnActions(true);
	 	//initPausePlayEvents();
		//paused = true;
	}
	timer1 = setTimeout('cycle()',speed);
}

function initPausePlayEvents() {
	
	//$(vhaNavBtnId+1).removeEvents('click');
	$('playPause').addEvent('click', function(e) {
		new Event(e).stop();
		playPauseBtn(e);
	});
}

function btnActions(boolean) {
	if(boolean==true) {
		$$('.'+vhaNavBtnClass).each(function(btn,index) {
			btn.setProperty('href','javascript:void('+(index+1)+');');
			btn.addEvent('click', function(e) {
				e.stop();
				timer1 = $clear(timer1);
				//$('playPause').addClass("selected");
				paused = true;
				change((index+1), true,1);
			});
		});
	} else {
		$$('.'+vhaNavBtnClass).removeEvents('click');
	}
}

function playPauseBtn(e) {
	if(started==true) {
		paused = !paused;
	 	if (paused) {
	  		/* stop the image loop */
	  		timer1 = $clear(timer1);
			$('playPause').addClass("selected");
	 	} else { 
	  		/* restart the image loop */
	  		cycle();
			$('playPause').removeClass("selected");
	 	}
	} else {
		timer1 = $clear(timer1);
		$('playPause').addClass("selected");
		started = true;
	}
	
}

function setBtnActive(i) {
	$$('.'+vhaNavBtnClass).each(function(btn){
		btn.removeClass('active');
	});
	$(vhaNavBtnId+i).toggleClass('active');
}

function cycle() {
	started = true;
	change(currPic, false, 1);
	paused = false;
	timer1 = setTimeout('cycle()',speed);
}

function change(numVha, btnAction, step) {
	num = numVha;
	switch(step) {
		/*fadeOut*/
		case 1:
		
			btnActions(false);
			
			if (num == numBox && btnAction != true) {
				next = 1;
			} else if(num == currPic && btnAction == true) {
				next = num;
			} else {
				if (num > currPic && num != 1) {
					next = num;
				} else if (num < currPic) {
					next = num;
				} else {
					next = num+1;
				}
			}
			
			change(next, false, 3);
			setBtnActive(num);
			
			//$(vhaBoxId+currPic).setStyles({'opacity':0,'visibility':'hidden'});
			
			boxFx = new Fx.Morph(vhaBoxId+currPic, {
				duration: (transSpeed+400),
				onComplete: function() {
					if(paused==true) {
						setTimeout('cycle()',speed);
					}
				}
			}).start({'opacity':0});
			
			currPic = num;
			//(currPic < numBox) ? currPic++ : currPic = 1;
			
		break;
		/*change picture*/
		case 2:
			
			currPic = num;
			$$('.'+vhaBoxClass).each(function(box,index) {
				if((index+1) != num) {
					$(vhaBox[index]).setStyle('visibility','hidden');
				}
			});
			change(num, false, 3);
			if(enableBtn==true) {
				setBtnActive(num);
			}
			
		break;
		/*fadeIn*/
		case 3:
		
			//$(vhaBoxId+num).setStyles({'opacity':1,'visibility':'visible'});
			
			boxFx = new Fx.Morph(vhaBoxId+num, {
				duration: transSpeed,
				onComplete: function() {
					btnActions(true);
					$(vhaNavBtnId+next).removeEvents('click');
				}
			}).start({'opacity':1});
			
		break;
	}
}



//Debug
function createTheEl(el) {
	eval("var the"+el+" = document.createElement('div');")
	eval("the"+el+".setAttribute('id','"+el+"');");
	eval("$('debugWindow').appendChild(the"+el+");");
}
function initTrac() {
	var debugWindow = document.createElement("div");
	debugWindow.setAttribute("id","debugWindow");
	debugWindow.setAttribute("style","color:#fff; width:300px; height:200px; padding:10px; background:#666; position:fixed; right:0; bottom:0;");
	document.body.appendChild(debugWindow);
	createTheEl("currPicEl");
	createTheEl("nextnext");
	createTheEl("numnum");
	createTheEl("pausedEl");
	createTheEl("vhaNavBtn");
	createTheEl("vhaBox");
	createTheEl("numBox");
	createTheEl("started");
}
function trac() {
	$('currPicEl').innerHTML = "currPic : "+currPic;
	$('nextnext').innerHTML = "next : "+next;
	$('numnum').innerHTML = "num : "+num;
	$('pausedEl').innerHTML = "paused : "+paused;
	$('vhaNavBtn').innerHTML = "vhaNavBtn : "+vhaNavBtn;
	$('vhaBox').innerHTML = "vhaBox : "+vhaBox;
	$('numBox').innerHTML = "numBox : "+numBox;
	$('started').innerHTML = "started : "+started;
}
if(debug==true) {
	document.addEvent("domready",initTrac);
	var timerTrac = setInterval('trac()',50);
}
//Debug