/*

el = main container that has the banners and banner controls inside it
display = container dedicated to holding the banners
type = the banners element type (ie, img, li, div, etc..)


TO DO: Fix $this reference in button onclick events to point to the currently instantiated object

*/
//contructor function

var Banner = function(el, display, type){
	
	$this = this;
	
	//set properties
	this.element = el;
	this.display = display;
	this.type = type;
	this.length = jQuery(display+' '+type).length;
	this.current = 0;
	this.speed = 800;
	this.interval = 6000;
	this.disableChange = false;
	
	//execute methods
	this.insertControls(this);
	this.insertBackNext(this);
	this.hideAllButFirst();
	if(this.length > 1) this.autoPlay(this);	
	
};

//hide all but first
Banner.prototype.hideAllButFirst = function(display, type){
	//if there is more than one banner
	if(this.length > 0){
		for(i = 1; i < this.length; i++){
			//hide all but the first one
			jQuery(this.display+' '+this.type+':eq('+i+')').css('display', 'none');
		}
	}
	
};

//autoplay
//$this is required inside a setInterval as using 'this' refers to the window object
Banner.prototype.autoPlay = function($this){
	
	this.play = setInterval(function(){								   
		if($this.current >= 0 && $this.current < ($this.length - 1)){
			
			//fade out the current banner
			jQuery($this.display+' '+$this.type+':eq('+$this.current+')').fadeOut($this.speed, function() {			
				//fade in the new banner
				jQuery($this.display+' '+$this.type+':eq('+$this.current+')').fadeIn($this.speed);
				
			});			
				
			//change current banner position
			$this.current += 1;			
			//run the changepos method to swap the active control button
			$this.changePos();	
			
		} else {
			
			//fade out the current banner
			jQuery($this.display+' '+$this.type+':eq('+$this.current+')').fadeOut($this.speed, function() {
				
				//fade in the new banner
				jQuery($this.display+' '+$this.type+':eq('+$this.current+')').fadeIn($this.speed);	
				
			});
			
			//reset banner to first one
			$this.current = 0;
			//run the changepos method to swap the active control button
			$this.changePos();
			
		}
	}, this.interval);
};

//quick change
Banner.prototype.quickChange = function(index, direction){
	
		// To be used for the click change in place of 'this'			
		t = this;
	
		if(this.current >= 0 && this.current < (this.length - 1)){
			
			//fade out the current banner
			jQuery(this.display+' '+this.type+':eq('+this.current+')').fadeOut(this.speed, function() {
						
				// Ensure we can actually change.		
				if (!t.disableChange) {
								
					t.disableChange = true;
								
					//change current banner position to index or increment if index is null
					if(direction == 1){
						t.current = index || t.current + 1;
					} else if(direction == -1) {				
						t.current = index || t.current - 1;
						if(t.current == -1){
							t.current = t.length - 1;	
						}
					} else {
						t.current = index || t.current + 1;
					}
					
					//run the changepos method to swap the active control button
					t.changePos();

					//reactivate autoPlay
					t.autoPlay(t);
							
					//fade in the new banner
					jQuery(t.display+' '+t.type+':eq('+t.current+')').fadeIn(t.speed, function() {
						t.disableChange = false;	
					});
					
				}
				
			});
			
				
			
		} else {
						
			//fade out the current banner
			jQuery(this.display+' '+this.type+':eq('+this.current+')').fadeOut(this.speed, function() {
				
				// Ensure we can actually change.		
				if (!t.disableChange) {
								
					t.disableChange = true;
			
					//change current banner position to index or reset it to first one
					if(direction == 1){
						t.current = index || 0;
					} else if(direction == -1) {				
						t.current = index || t.current - 1;
						if(t.current == -1){
							t.current = t.length - 1;	
						}
					} else {
						t.current = index || 0;
					}
					
					//run the changepos method to swap the active control button
					t.changePos();
					
					//reactivate autoPlay
					t.autoPlay(t);
				
					//fade in the new banner
					jQuery(t.display+' '+t.type+':eq('+t.current+')').fadeIn(t.speed, function() {
						t.disableChange = false;	
					});	
				
				}
				
			});
			
		}
};

//pause/stop
Banner.prototype.pause = function(){
	
	//clear the autoPlay interval
	clearInterval(this.play);
	
};



/** ------------------------
Controls
------------------------ **/

//populate controls
Banner.prototype.insertControls = function($this){
	
	//grab controls element within the specified el
	var ctrls = jQuery(this.element+' .ctrls');
	//set controls to visible (currently set to visibility hidden incase there is no javascript)
	ctrls.css('visibility', 'visible');
	//grab the ul inside the ctrls element
	var ul = jQuery(this.element+' .ctrls ul:eq(0)');
	//if there is 1 or more banners then populate the controls
	if(this.length > 0){
		
		//first empty the ctrls ul
		ul.empty();
		//for each banner, create a ctrl button and set first button to active
		for(i = 0; i < this.length; i++){
			if(i == 0){
				ul.append('<li class="active"><a href="javascript: void(0);" class="i-rep">.<span></span></a></li>');
			} else {
				ul.append('<li><a href="javascript: void(0);" class="i-rep">.<span></span></a></li>');
			}
			
			//attach onclick event to control buttons
			//jQuery(this.element+' .ctrls ul li:eq('+i+')').click($this.goTo);
		}
		
	} else {	
	
		//remove controls if there is no banners to show
		ctrls.hide();
		
	}
	
};

Banner.prototype.insertBackNext = function($this){
	
	//back
	jQuery(this.element+' .ctrls .back').attr('href', 'javascript: void(0);');
	//jQuery(this.element+' .ctrls .back').click($this.goBack);
	
	//next
	jQuery(this.element+' .ctrls .next').attr('href', 'javascript: void(0);');		
	//jQuery(this.element+' .ctrls .next').click($this.goNext);
	
	
};

//next click function						   
Banner.prototype.goNext = function(){

		//stop current autoPlay
		ban2.pause();
		
		//change active control button
		ban2.quickChange(null, 1);
		
};

//back click function						   
Banner.prototype.goBack = function(){
	
	//stop current autoPlay
	ban2.pause();	
	//change active control button
	ban2.quickChange(null, -1);
		
};

//change control button position
Banner.prototype.changePos = function(){
		
		//remove active class from all control buttons and add it to the button that was clicked
		jQuery(this.element+' .ctrls ul:eq(0) li').removeClass('active');
		jQuery(this.element+' .ctrls ul:eq(0) li:eq('+ this.current +')').addClass('active');
		
};

//control button click function
//$this must be used here as 'this' refers to the li object that was clicked
Banner.prototype.goTo = function(){
	
	//create array of control buttons
	var list = this.parentNode.getElementsByTagName('li');	
	//loop through control buttons to determine its location in the array
	for(i = 0; i < list.length; i++){
		if(list[i] == this){
			var index = i;
		}
	}	
	//stop current autoPlay
	Banner.prototype.pause();	
	//change active control button
	Banner.prototype.quickChange(index);
		
};




//instantiate banner objects on doc ready
var ban1, ban2;
jQuery(document).ready(function(){
						   
	ban1 = new Banner('#homepage-banners', '#banner ul', 'li');	
	
	jQuery('#homepage-banners .ctrls .next').click(function() {
		ban1.pause();
		ban1.quickChange(null, 1);
	});
	
	jQuery('#homepage-banners .ctrls .back').click(function() {
		ban1.pause();	
		ban1.quickChange(null, -1);
	});
	
	//ban1.speed = 800 (0.8 seconds, this sets fade out and in speed of banners)
	//ban1.interval = 6000 (6 seconds, this sets the interval time before banner changes)
	ban2 = new Banner('#homepage-feature', '#feature-inner ul', 'li');
	
	jQuery('#homepage-feature .ctrls .next').click(function() {
		ban2.pause();
		ban2.quickChange(null, 1);
	});
	
	jQuery('#homepage-feature .ctrls .back').click(function() {
		ban2.pause();	
		ban2.quickChange(null, -1);
	});
	
});