/*---------------------------------------------------------------------
VER 1.0 R1
AUTHOR: CHRIS CHIPPS
DATE:	5/17/2011
NOTES:	JS ROTATOR LIBRARY FOR R1 TEMPLATE
---------------------------------------------------------------------*/
window.addEvent('domready', function() {
	var rotateStop = 0;	
	var imageTxt = $$('.image-txt');
	var imageWrapper = $('image-wrapper');
	var items = $$('.image-slideContainer');  										//Get array of elements for sliding	
	var itemNum = 0;																//initialize a variable to hold the current slide index
	var timerCounter = 0;
	var periodical=0;
	var numNavHolder = $$('.num_nav');												//get array of nav containers
	var numNav = new Array();														//create an array to hold our dynamically created number navigation
	var navWrapper = $$('.num_navWrapper');
	var timePeriod = 4000;

//INITIATE ITEMS - PLANT INDEX IN H4 HIDDEN IN DIV - CREATE THE NAVIGATION AND HIDE ITMES THAT ARE NOT AT THE TOP OF THEIR COLLECTION
	var deleteLiFromNav = $('clearFromNav').dispose();										//clear place holder Li - to pass validation
		
	items.each(function(el, ind){			
		var slideElTitle = new Element('h4', {
		'style':'display:none',
		'html': (ind)
		});
		
		items[ind].grab(slideElTitle, 'top');			
		
		if(ind > 0){el.fade('hide');}else{el.fade('in');}
		
		var numItem = new Element('li');
		
		var numLink = new Element('a', {
		'title': (ind+1),
		'html': '•',//(ind+1)
		'opacity': .5
		});
		
		numNavHolder.each(function(a, o){
			numItem.adopt(numLink);
			numNavHolder[o].adopt(numItem);
			numNav.push(numLink);		
		})			
	});
	
	imageTxt.each(function(el,ind){
			el.setProperty('id', ind);	
			var elid = el.getProperty('id');
			el.setStyles({
			  //'background-color':'#F8F8F8',
			  'opacity': .8
			});
			
			if(ind > 0){
				new Fx.Slide(elid).slideOut('horizontal');
			}else{				
				var myTextFx = new Fx.Slide('0').slideOut().chain(function(){
    					this.show().slideIn('horizontal');
				});					
			}	
	});
	
//CREATE MOUSE ENTER STATES FOR BIG CONTAINER
	imageWrapper.addEvents({
		'mouseenter': function(){
			$clear(periodical);
			rotateStop = 1;
		},
		'mouseleave': function(){				
				rotateStop = 0;					
		},	
		'click': function(){
			$clear(periodical);
			rotateStop = 1;
		}
	});
		
//SET DEFAULT STYLE FOR NAV IN FIRST COLLECTION
		var initNum = numNav[itemNum];
		var origColor = initNum.getStyle('color');		
		initNum.setStyles({
		  'background-color':'#333',//#E9E9E9
		  'color':'#7FE2FD',//#FFF #666 #D47D33
		  'opacity': .8
		});
			
//SLIDE MOVE
	var slideMove = function(passedID){	
			//get item to slide out
			var curItem = items[itemNum]; 
			var curNumItem =  numNav[itemNum];
			
			//Slide top text layer in and out
			var newImageTxtId = imageTxt[passedID].getProperty('id');
			var oldImageTxtId = imageTxt[itemNum].getProperty('id');
			
			var myNewFx = new Fx.Slide(newImageTxtId).slideOut().chain(function(){
    					this.show().slideIn('horizontal');
			});
			
			var myOldFx = new Fx.Slide(oldImageTxtId).slideOut('horizontal').chain(function(){
    					this.show().slideIn();
			});

			if(itemNum != passedID){
				itemNum = passedID;
			};	
			//now get item to slide in using new index
			var newItem = items[passedID];
			var newNumItem =  numNav[passedID];

			//set up our animation stylings for out and in motions
			newItem.fade('in', {duration: 'long', transition: Fx.Transitions.linear, link:'ignore'});	
			curItem.fade('out', {duration: 'long', transition: Fx.Transitions.linear, link:'ignore'});
			newNumItem.set('morph', {duration: 'short', transition: Fx.Transitions.linear, link:'ignore'});			
			curNumItem.set('morph', {duration: 'short', transition: Fx.Transitions.linear, link:'ignore'});					
			newNumItem.morph({
				'background-color':'#333',//#E9E9E9
				'color':'#7FE2FD',//#666
				'opacity': .8
			});			
			curNumItem.morph({
				'background-color':'#999',//#f9f9f9
				'color':origColor,
				'opacity': .5
			});
	}
	
//NAVIGATION BUTTONS ARE INITIALIZED
	numNav.each(function(element, index) {
		var origColor = element.getStyle('color');		
		element.addEvents({
			'click' : function(){				
				if(itemNum != index){						
						timerCounter = index;
						slideMove(index);						
				};
			},
			'mouseenter' : function() {
				if(itemNum != index){						
					this.setStyles({
						'cursor':'pointer',
						'opacity': .8					
					});									
				};
			},
			'mouseout' : function(){
				if(itemNum != index){						
					this.setStyles({
						'cursor':'pointer',
						'opacity': .5					
					});									
				};
			}
		});	
	});	

//TIMER FUNCTION
	var slideMoveTimer = function(){		
		if(itemNum >= items.length-1){
			timerCounter = 0;
		}else{
			timerCounter++;			
		};
		slideMove(timerCounter);
	};
	
	//periodical = slideMoveTimer.periodical(timePeriod,slideMoveTimer);
	
	var stopListener = function(){
			if(rotateStop==1){					
			 	$clear(periodical);
				periodical = 0;
			}else if(rotateStop==0){
				if(periodical==0){
					periodical = slideMoveTimer.periodical(timePeriod,slideMoveTimer);	
				}
			}
	}
	
   //startListening = stopListener.periodical(1000,stopListener);	
	
});