window.addEvent('domready', function(){
	
	/* ----------Config Vars----------- */
		
	var slideTimer = 8000;  //time between slides (1 second = 1000), a.k.a. the interval duration
	var transitionTime = 200; //transition time (1 second = 1000)
	var items = $$('.item_class_img');  //Get array of elements for sliding
	var items_body = $$('.item_class_body');
	var items_testimonial = $$('.item_class_testimonial');
	var items_sprite = $$('.item_class_strip');
	
	/* --------end config vars-------- */
	
	//Setup positions
	items.each(function(element, index) {
		
		//since the viewer obviously has javascript on, we can remove the 'first_item' class
		if(index == 0){
//			element.removeClass('first_item');
//			element.setStyle('left', "0");
			element.setStyle('opacity', "1");
		}
		else{
			//element.setStyle('left', "500");
			element.setStyle('opacity', "0");
		}
	
	});
	
	items_body.each(function(element, index) {
		
		//since the viewer obviously has javascript on, we can remove the 'first_item' class
		if(index == 0){
			element.setStyle('opacity', "1");
		}
		else{
			element.setStyle('opacity', "0");
		}
	
	});

	items_testimonial.each(function(element, index) {
		
		//since the viewer obviously has javascript on, we can remove the 'first_item' class
		if(index == 0){
			element.setStyle('opacity', "1");
		}
		else{
			element.setStyle('opacity', "0");
		}
	
	});

	items_sprite.each(function(element, index) {
		
		//since the viewer obviously has javascript on, we can remove the 'first_item' class
		if(index == 0){
			element.setStyle('opacity', "1");
		}
		else{
			element.setStyle('opacity', "0");
		}
	
	});
	//end setup
	
	//Slider Stuff
	var slideFunction = new function() {
		
		var numItems = items.length;  //get number of slider items
		var itemNum = 0;  //initialize a variable to hold the current slide index
		
		var slideIt = function(){ 
		
			//get item to slide out
			var curItem = items[itemNum];  
			var curItem2 = items_body[itemNum];
			var curItem3 = items_testimonial[itemNum];
			var curItem4 = items_sprite[itemNum];

			//change index
			if(itemNum < (numItems - 1)){
				itemNum++; 
			}
			else{
				itemNum = 0;
			}
			
			//now get item to slide in using new index
			var newItem = items[itemNum];
			var newItem2 = items_body[itemNum];
			var newItem3 = items_testimonial[itemNum];
			var newItem4 = items_sprite[itemNum];
			
			// delete start
			// $(newItem).setStyle('opacity','0');
			// alert ('clr s :'+clr);
			// delete end
			
			
			//set up our animation stylings for out and in motions (note:  Fx.Styles does NOT exist in moo 1.2, so we must use Fx.Morph or Fx.Tween)
			var item_in = new Fx.Morph(newItem, {
				     duration: transitionTime, 
				     transition: Fx.Transitions.Quad.easeInOut, 
				     wait:false
			});
			
			var item_out = new Fx.Morph(curItem, {
				     duration: transitionTime, 
				     transition: Fx.Transitions.Quad.easeInOut, 
				     wait:false
			});

			var item_in2 = new Fx.Morph(newItem2, {
				     duration: transitionTime, 
				     transition: Fx.Transitions.Quad.easeInOut, 
				     wait:false
			});
			
			var item_out2 = new Fx.Morph(curItem2, {
				     duration: transitionTime, 
				     transition: Fx.Transitions.Quad.easeInOut, 
				     wait:false
			});

			var item_in3 = new Fx.Morph(newItem3, {
				     duration: transitionTime, 
				     transition: Fx.Transitions.Quad.easeInOut, 
				     wait:false
			});
			
			var item_out3 = new Fx.Morph(curItem3, {
				     duration: transitionTime, 
				     transition: Fx.Transitions.Quad.easeInOut, 
				     wait:false
			});
			
			var item_in4 = new Fx.Morph(newItem4, {
				     duration: transitionTime, 
				     transition: Fx.Transitions.Quad.easeInOut, 
				     wait:false
			});
			
			var item_out4 = new Fx.Morph(curItem4, {
				     duration: transitionTime, 
				     transition: Fx.Transitions.Quad.easeInOut, 
				     wait:false
			});
			
			// kill the action where 2 items on ON same time
/*
			items_sprite.each(function(element, index) {
			//since the viewer obviously has javascript on, we can remove the 'first_item' class
				element.setStyle('opacity', "0");
			});
*/

/*			
			for (i=0; i < 5; i++) {
				// if(itemNum != i) {
					var killItem = items_sprite[i];	
					// (killItem).setStyle('visibility','hidden');
					(killItem).setStyle('opacity',0);
				// } // if
			} // for			
			
*/	
			
			//we will set a beginning value here
			//this is so that it gives the illusion of continuous motion from one direction, even after the first cycle of items

			item_out.start({
			'opacity':[1,0]
			});
			item_in.start({
			'opacity':[0,1]
			});
			
			item_out2.start({
			'opacity':[1,0]
			});
			item_in2.start({
			'opacity':[0,1]
			});
			
			item_out3.start({
			'opacity':[1,0]
			});
			item_in3.start({
			'opacity':[0,1]
			});
			
			item_out4.start({
			'opacity':[1,0]
			});
			item_in4.start({
			'opacity':[0,1]
			});			
			

			// fix code for flicker
			// kill the action where 2 items on ON same time
/*
			items_sprite.each(function(element, index) {
			//since the viewer obviously has javascript on, we can remove the 'first_item' class
				element.setStyle('opacity', "0");
			});
*/


/*
			for (i=0; i < 5; i++) {
				// if(itemNum != i) {
					var killItem = items_sprite[i];	
					// (killItem).setStyle('visibility','hidden');
					(killItem).setStyle('opacity',0);
				// } // if
			} // for
*/			


		};
		
		//call the function, periodically  (note: the interval period is defined at the top of this file)
		slideIt.periodical(slideTimer, this); 
	}
});