var SL_Slider = new Class({

	//implements
	Implements: [Options],	
	
	//variables setup
	numNav: new Array(),		//will store number nav elements (if used)
	timer: null,					//periodical function variable holder
	isSliding: 0,					//flag for animation/click prevention
	direction: 1,					//flag for direction (forward/reverse)
	
	//options
	options: {
	slideTimer: 8000,  			//Time between slides (1 second = 1000), a.k.a. the interval duration
	isPaused: false,				//flag for paused state
	transitionTime: 1100, 		//Transition time (1 second = 1000)
	transitionType: 'cubic:out',	//Transition type
	container: null,					//container element
	items:  null, 					//Array of elements for sliding
	itemNum: 0,						//Current item number
	numNavActive: false,			//Whether or not the number navigation will be used
	numNavHolder: null,			//Element that holds the number navigation
	playBtn: null,					//Play (and pause) button element
	prevBtn: null,					//Previous button element
	nextBtn: null				//Array of Tab Groups
	},

	//initialization
	initialize: function(options) {
		var self = this;
		
		//set options
		this.setOptions(options);
		
		//remove any scrollbar(s) on the container
		//self.options.container.setStyle('overflow', "hidden");  
		
		//if there is a play/pause button, set up functionality for it
		if(self.options.playBtn != null) {
			//self.pauseIt();  
			self.options.playBtn.set('text', 'pause');
			
			self.options.playBtn.addEvents({
				'click': function() {
					self.pauseIt();
				},				
				'mouseenter' : function() {
					this.setStyle('cursor', 'pointer');
				},
				'mouseleave' : function() {
					
				}
			});
		}
		
		//if there is a prev & next button, set up functionality for them
		if(self.options.prevBtn && self.options.nextBtn){
			
			self.options.prevBtn.addEvents({ 
				'click' : function() {
					if(self.isSliding == 0){
						if(self.options.isPaused == false){
							$clear(self.timer);
							self.timer = self.slideIt.periodical(self.options.slideTimer, self, null);
						}
						self.direction = 0;
						self.slideIt();
					}
				},
				'mouseenter' : function() {
					this.setStyle('cursor', 'pointer');
				},
				'mouseleave' : function() {
				
				}
			});	
			
			this.options.nextBtn.addEvents({ 
				'click' : function() {
					if(self.isSliding == 0){
						if(self.options.isPaused == false){
							$clear(self.timer);
							self.timer = self.slideIt.periodical(self.options.slideTimer, self, null);
						}
						self.direction = 1;
						self.slideIt();
					}
				},
				'mouseenter' : function() {
					this.setStyle('cursor', 'pointer');
				},
				'mouseleave' : function() {
					
				}
			});	
		}
		
		self.options.container.addEvents({		
				'mouseenter' : function(e) {
					self.pauseIt(e);
				},
				'mouseleave' : function(e) {
					self.pauseIt(e);
				}
			});
		
		//setup items (a.k.a. slides) from list
		self.options.items.each(function(el, i){
				
			//f.y.i.  el = the element, i = the index
			var itemH = el.getSize().y;
			var itemW = el.getSize().x;
				
			//el.setStyle('top', (-1 * itemH));  //would use this if doing vertical transition
			el.setStyle('left', (-1 * itemW));
			
			//main contents setup
			var mcs = el.getElements('.main-content');
			mcs.each(function(mc, j){
				mc.setStyle('display', 'block');
			});
			
			//panels setup
			el.itemPanels = new Array();

			var panels = el.getElements('.tab-panel');
			panels.each(function(panel, j){
				var panelSlide = new Fx.Slide(panel.id, {duration: 300}).hide();
				el.itemPanels.push(panelSlide);
				panel.setStyle('display', 'block');
			});
			
			//panel tabs groups setup
			var tgs = el.getElements('.tab-group');
			tgs.each(function(tg, j){
				tg.setStyle('display', 'block');
			});
			
			//tabs setup
			el.itemTabs = new Array();
			
			var tabs = el.getElements('.tab');
			tabs.each(function(tab, k){
				el.itemTabs.push(tab);
				tab.addEvent('click', function(){
					tab.toggleClass('active');
					self.togglePanel(self.options.itemNum, k);
					var omnitureOnClickDescription = 'iHero Interaction, ' + el.id + ', ' + tab.id;
					omniture_OnClickLogProps(omnitureOnClickDescription, "o", {prop28: omnitureOnClickDescription, evar22: omnitureOnClickDescription}, "event27");
					return false;
				});
			});
				
			// -- Number nav setup
			if(self.options.numNavActive == true){
				//create numbered navigation boxes, and insert into the 'num_nav' ul)
				var numItem = new Element('li');
				var numDiv = new Element('div');
				var numLink = new Element('a', {
					'html': (i+1),
					'href': ('#')
				});
				numItem.adopt(numDiv);
				numItem.adopt(numLink);
				if(self.options.items.length > 1){ self.options.numNavHolder.adopt(numItem); }
				self.numNav.push(numLink);
				
				numLink.addEvents({
					'click' : function(){
						self.numPress(i);
						var omnitureOnClickDescription = 'iHero Interaction, ' + el.id;
						omniture_OnClickLogProps(omnitureOnClickDescription, "o", {prop28: omnitureOnClickDescription, evar22: omnitureOnClickDescription}, "event27");
						return false;
					}
				});
				
				//set initial number to active state
				if(i == self.options.itemNum){
					var initNum = self.numNav[i];
					initNum.addClass('active');
				}
			}
			//end if num nav 'active'
		
		});
	
	},

	//startup method
	start: function() {
		
		var self = this;
		
		self.slideIt(self.options.itemNum);  //initialize first slide
		
		if(self.options.isPaused == false && self.options.items.length > 1){
			//self.timer = self.slideIt.periodical(self.options.slideTimer, self, null);
			if(self.options.playBtn) self.options.playBtn.set('html', '');
		}
		else{
			//self.pauseIt();
			if(self.options.playBtn) self.options.playBtn.set('html', '');
		}
		
	},
	
	togglePanel: function(curItemNum, tabNum){
		
		var self = this;
		
		//alert(self.options.itemNum);
		//alert(i);
		//alert(self.options.itemPanels.length);
		
		self.options.items[curItemNum].itemPanels.each(function(panel, j){
			if (tabNum != j){
				panel.slideOut();
			}
			});
		self.options.items[curItemNum].itemTabs.each(function(tab, j){
			if (tabNum != j){
				tab.removeClass('active');
			}
			});
		self.options.items[curItemNum].itemPanels[tabNum].toggle();
	},
	
	slideIt: function(passedID) {
		
		var self = this;
		
		self.options.items.each(function(item, i){
			item.itemPanels.each(function(panel, j){
				panel.hide();
				});
			});
			
		//get item to slide out
		var curItem = self.options.items[self.options.itemNum];
		if(self.options.numNavActive == true){
			var curNumItem = self.numNav[self.options.itemNum];
			curNumItem.getPrevious('div').setStyle('width', '0');
		}
		//check for passedID presence
		if(passedID != null) {
			if(self.options.itemNum != passedID){
				if(self.options.itemNum > passedID) { 
					self.direction = 1; 
				} else { 
					self.direction = 1;
				}
				self.options.itemNum = passedID;
			}
		}
		else{
			self.changeIndex();
		}
		
		
		//now get item to slide in using new index
		var newItem = self.options.items[self.options.itemNum];
		if(self.direction == 0){
			var curX = self.options.container.getSize().x;
			var newX = (-1 * newItem.getSize().x);
		}
		else{
			var curX = (-1 * self.options.container.getSize().x);	
			var newX = newItem.getSize().x;
		}
		
		
		//add/remove active number's highlight
		if(self.options.numNavActive == true){
			var newNumItem =  self.numNav[self.options.itemNum];
			newNumItem.addClass('active');
			numNumItemTimer = new Fx.Morph(newNumItem.getPrevious('div'), {
					duration: self.options.slideTimer, 
					transition: 'linear',
					link: 'ignore',
					
					onComplete: function(){
						newNumItem.getPrevious('div').setStyle('width', '0');
						$clear(self.timer);
						self.options.items[self.options.itemNum].itemTabs.each(function(tab, j){
							tab.removeClass('active');
						});
						self.slideIt();
					}
			});
			
			if(self.options.items.length > 1){
				numNumItemTimer.start({'width': [31]});
			} else {
				newNumItem.getPrevious('div').setStyle('width', '31px');
			}
		}
		
		
		//set up our animation stylings
		var item_in = new Fx.Morph(newItem, {
			duration: self.options.transitionTime, 
			transition: self.options.transitionType,
			link: 'ignore',
			    
			onStart: function(){
				self.isSliding = 1;  //prevents extra clicks
				//IE6 does not recognise min-height so have to set height of container here on sliding
				self.options.container.addClass('sliding'); 
			},
			    
			onComplete: function(){
				self.isSliding = 0;  //prevents extra clicks
				self.options.items[self.options.itemNum].addClass('item-active');
				self.options.container.removeClass('sliding'); 
			}
			    
		});
		
		item_in.start({
			//'opacity':[0,1],
			'left' : [newX, 0]
		});
	
		if(curItem != newItem){
			var item_out = new Fx.Morph(curItem, {
					duration: self.options.transitionTime, 
					transition: self.options.transitionType,
					link: 'ignore'
			});
			
			if(self.options.numNavActive == true){
				curNumItem.removeClass('active');
			}
			curItem.removeClass('item-active');
			
			item_out.start({
				//'opacity':[0],
				'left' : [(curX)]
			});
		}
	
	},
	
	
	//--------------------------------------------------------------------------------------------------------
	//supplementary functions  (mini-functions)
	//--------------------------------------------------------------------------------------------------------
	pauseIt: function (e) {
		
		var self = this;
		
		//only move if not currently moving
		//if(self.isSliding == 0){
			if(self.options.isPaused == false && e.type != 'mouseout'){
				self.options.isPaused = true;
				if(self.options.items.length > 1){
					numNumItemTimer.pause();
				}
				$clear(self.timer);
				//self.options.playBtn.set('html', '<img src="' + iHero_ImagesPath + '/icon-pause.gif"/>');				
			}
			else if(self.options.isPaused == true && e.type != 'mouseover' && self.options.items.length > 1){
				self.options.isPaused = false;
				if(self.options.items.length > 1){
					numNumItemTimer.resume();
				}
				//self.slideIt();
				//self.options.playBtn.set('html', ' ');
				//self.timer = self.slideIt.periodical(self.options.slideTimer, this, null);
			}
			else if(self.options.isPaused == true && e.type != 'mouseover'){
				self.options.isPaused = false;
				if(self.options.items.length > 1){
					numNumItemTimer.resume();
				}
				//self.slideIt();
				//self.options.playBtn.set('html', ' ');
			}
			
		//} //end if not sliding
		
	},
	
	changeIndex: function() {
		var self = this; 
		
		var numItems = self.options.items.length;  //get number of slider items
		
		//change index based on value of 'direction' parameter
		if(self.direction == 1){
			if(self.options.itemNum < (numItems - 1)){
				self.options.itemNum++; 
			}
			else{
				self.options.itemNum = 0;
			}
		}
		else if(self.direction == 0){
			if(self.options.itemNum > 0){
				self.options.itemNum--; 
			}
			else{
				self.options.itemNum = (numItems - 1);
			}
		}	
		
	},
	
	numPress: function (theIndex) {
		var self = this;
		
		if((self.isSliding == 0) && (self.options.itemNum != theIndex)){
			if(self.options.isPaused == false){
				$clear(self.timer);
				//self.timer = self.slideIt.periodical(self.options.slideTimer, this, null);
			}
			if(self.options.items.length > 1){
				numNumItemTimer.cancel();
			}
			self.options.items[self.options.itemNum].itemTabs.each(function(tab, j){
				tab.removeClass('active');
			});
			self.slideIt(theIndex);
		}
	}
	//------------------------  end supp. functions -----------------------------------------//

});


window.addEvent('domready', function(){
	
	//variables for making things more simple below
	var itemsHolder = $('container');
	var numNavHolder = $('num_nav').getElement('ul');
	var myItems = $$('.item');
	var thePlayBtn = $('play_btn');
	var thePrevBtn = $('prev_btn');
	var theNextBtn = $('next_btn');
	
	//create an instance of the slider, and start it up
	mySlider = new SL_Slider({
		slideTimer: 8000,
		isPaused: false,
		container: itemsHolder,
		items: myItems,
		numNavActive: true,
		numNavHolder: numNavHolder,
		playBtn: thePlayBtn,
		prevBtn: thePrevBtn,
		nextBtn: theNextBtn
	});
	mySlider.start();
					
});