/*
Developed By: James Thomson
Company: Red Label Communications Ltd.
Date: 04/2010
Version: 1.1

- Moved controls outside of banner display area. 
- Changed control elements to class selectors rather than id incase multiple banners exist on one page.
- Added ability to use thumb images for selectors and specify thumb location. Restricted to only jpg for now.

*/

(function($){
	$.fn.banner = function(options) {
		var defaults = {
			speed: 600, // Sets the speed of each transition
			timer: 4000, // Sets the time until next image transition
			easing: 'swing', // Set the transition easing. Uses the jquery.easing.1.3.js plug-in. For a full list of easing visit http://gsgd.co.uk/sandbox/jquery/easing/
			autoPlay: true, // If set, animation will begin upon load
			playToggle: true, // Toggles the play/pause buttons visibility
			selectors: true, // Toggles the banner selector buttons visibility
			prevNextBtns: true, // Toggles the previous and next buttons
			controls: true, // Toggle all controls - Set to false to remove both playToggle, selectors, and next/prev buttons
			useThumbs: '' // Default is empty, no thumbs will be output. Enter the path to thumb folder as a string. Name images by number starting with 0. Only jpg supported.
		},
		settings = $.extend({}, defaults, options);
		
		return this.each(function(e){
			var $this = $(this),
				$thisParents = $this.parent().parent();

			$this.css('width',($this.outerWidth()*($this.children().length))); // Set $this width
			$this.children(':first').addClass('active'); //Set active class to first image
			$('<div class="controls"></div>').appendTo($this.parent().parent()); // Add controls container to banner
			$('<div class="selectors"></div> <a class="toggler" class="pause" href="#">Play</a><a class="prev" href="#">Prev</a><a class="next" href="#">Next</a>').appendTo($this.parent().parent().children('.controls'));
			$this.children().each(function(x) {
				$(this).attr('title', x); // Apply an title to each image container
				if(settings.useThumbs != ''){
					$thisParents.find('div.selectors').append('<a title="'+x+'" href="#"><img src="'+settings.useThumbs+x+'.jpg" alt="'+x+'"/></a> '); // Add thumb for each image. Thumb path specified in useThumbs string setting.
				}
				else{
					$thisParents.find('div.selectors').append('<a title="'+x+'" href="#">'+x+'</a> '); // Add a button/number for each image
				}			
			});
				
			if(!settings.selectors){
				$('div.selectors').css('display', 'none');
			}
			
			if(!settings.playToggle){
				$('a.toggler').css('display', 'none');
			}
			
			if(!settings.prevNextBtns){
				$('a.prev').css('display', 'none');
				$('a.next').css('display', 'none');
			}
			
			if(!settings.controls){
				$('div.controls').css('display', 'none');
			}
				
			function run(){
				if(settings.autoPlay){
					var 
						$active = $thisParents.find('.active'), // Set $active variable object
						$next = $active.next(); // Set $next variable object to next object after active
						
						// If $active's ID is equal to the number of objects (images) in the banner, set $next to the first object (image)
						if($active.attr('title') == ($this.children().length-1)){ 
							$next = $this.children(':first');
						}

						$next.addClass('active');
						$this.animate({'left': Math.round(-$next.position().left)}, settings.speed, ''+settings.easing+'', function(){
							if(settings.selectors || settings.controls) {
								$('div.selectors a').removeClass('selected');
								$('div.selectors a[title='+$next.attr('title')+']').addClass('selected');
							}
							$active.removeClass('active');
							play();
						});
				}
			}
			
			function play(cycle) {
				clearInterval(cycle); // Clear cycle just incase some previous cycles are looming
				var cycle = setTimeout(run, settings.timer); // Set timer and run function run()
			}
			if(settings.controls) {
				if(settings.selectors){ // If selectors is set to TRUE	
					var $selector = $thisParents.find('div.selectors a');
					$('div.selectors a:first').addClass('selected');
					
					$selector.click(function(cycle){
						clearInterval(cycle);
						settings.autoPlay = false;
						$selector.removeClass();
						$(this).addClass('selected');
						
						if(settings.playToggle){
							$toggler.text('Play').removeClass().addClass('play');
						}
						
						var i = $(this).attr('title');
						$this.animate({'left': Math.round(-($this.find('[title='+i+']').position().left))}, settings.speed, ''+settings.easing+'', function(){
							$this.find('.active').removeClass('active');
							$this.find('[title='+i+']').addClass('active');
						});
						return false;
					});
				}
				
				if(settings.playToggle) { // If playToggle is set to TRUE
					var $toggler = $thisParents.find('div.controls a.toggler');
					
					if(settings.autoPlay){
						$toggler.text('Pause');
					}
					else {
						$toggler.text('Play');
					}
					
					$toggler.click(function(cycle){
						clearInterval(cycle);
						if(settings.autoPlay) {
							settings.autoPlay = false;
							$(this).text('Play').removeClass().addClass('play');
						}		
						else {
							settings.autoPlay = true;
							play();
							$(this).text('Pause').removeClass().addClass('pause');
						}
						return false;
					});
				}
				
				if(settings.prevNextBtns) { // If playToggle is set to TRUE
					var $nextBtn = $thisParents.find('div.controls a.next'),
						$prevBtn = $thisParents.find('div.controls a.prev');
						
					$nextBtn.click(function(cycle){				
						var $active = $this.children('.active'), // Set $active variable object
							$next = $active.next(); // Set $next variable object to next object after active
							
						clearInterval(cycle);
						settings.autoPlay = false; // If next button is pressed. Autoplay is turned off.
						
						if(settings.playToggle){
							$toggler.text('Play').removeClass().addClass('play');
						}
						
						// If $active's ID is equal to the number of objects (images) in the banner, set $next to the first object (image)
						if($active.attr('title') == ($this.children().length-1)){ 
							$next = $this.children(':first');
						}

						$next.addClass('active');
						$this.animate({'left': Math.round(-$next.position().left)}, settings.speed, ''+settings.easing+'', function(){
							if(settings.selectors || settings.controls) {
								$('div.selectors a').removeClass('selected');
								$('div.selectors a[title='+$next.attr('title')+']').addClass('selected');
							}
							$active.removeClass('active');
						});						
						
						return false;
					});
					
					$prevBtn.click(function(cycle){
						var $active = $this.children('.active'), // Set $active variable object
							$prev = $active.prev();
							
						clearInterval(cycle);
						settings.autoPlay = false; // If next button is pressed. Autoplay is turned off.
						
						if(settings.playToggle){
							$toggler.text('Play').removeClass().addClass('play');
						}
						
						// If $active's ID is equal to 0, set $prev to the last object (image)
						if($active.attr('title') == 0){ 
							$prev = $this.children(':last');
						}

						$prev.addClass('active');
						$this.animate({'left': Math.round(-$prev.position().left)}, settings.speed, ''+settings.easing+'', function(){
							if(settings.selectors || settings.controls) {
								$('div.selectors a').removeClass('selected');
								$('div.selectors a[title='+$prev.attr('title')+']').addClass('selected');
							}
							$active.removeClass('active');
						});						
						
						return false;
					});
				}
				
			}
			
			if(settings.autoPlay){ // If autoPlay is set to TRUE
				play();
			}		
		});
	}	
})(jQuery);