// JavaScript Document

/*
Plugin: Sideswap v 1.0.1
Author: BrianBlocker.com
Tools: Dreamweaver CS4 / 2009 iMac (early edition) / 2009 Mac Mini (late edition)
*/

(function($)
{					
	$.fn.sideswap = function(options)
	{
		$.fn.sideswap.defaults = 
		{
			navigation: true, /* CREATE LEFT AND RIGHT NAVIGATION IF TRUE, OR DO NOTHING IF FALSE */
			previous: '<div class="portBtn1"><ul><li class="portPrev"><a href="#" onclick="return false">PREV</a></li></ul></div>', /* HTML TO BE USED FOR THE PREVIOUS ARROW */
			next: '<div class="portBtn2"><ul><li class="portPrev"><a href="#" onclick="return false">NEXT</a></li></ul></div>', /* HTML TO BE USED FOR THE NEXT ARROW */
			previous2: '<div class="portBtn1"><ul><li class="portPrev"><a href="#" onclick="return false">PREV</a></li></ul></div>', /* HTML TO BE USED FOR THE PREVIOUS ARROW */
			next2: '<div class="portBtn2"><ul><li class="portPrev"><a href="#" onclick="return false">NEXT</a></li></ul></div>', /* HTML TO BE USED FOR THE NEXT ARROW */
			display_time: 10000, /* NUMBER OF 1/1000 SECONDS AN IMAGE IS DISPLAYED */
			transition_speed: 10000, /* SPEED OF TRANSITIONS IN 1/1000 SECONDS */
			auto_run: false /* AUTOMATICALLY TRANSITIONS THE SLIDES (IF TRUE) */
		};
				
		var opts = $.extend({}, $.fn.sideswap.defaults, options), /* PUTS ALL THE DEFAULT VALUES INTO A VARIABLE */
				clicked = false; /* TRUE AFTER A PREVIOUS OR NEXT BUTTON HAS BEEN CLICKED, HELPS PREVENT ERRORS */
		
		return this.each(function()
		{
			/* VARIABLES */
			var $this = $(this), /* SETS A "GLOBAL" VARIABLE FOR THE CURRENT MATCHED OBJECT */
					$parent = $this.parent(), /* SETS A "GLOBAL" VARIABLE FOR THE MATCHED OBJECT'S PARENT */
					timer = false, /* THE SETINTERVAL FUNCTION IDENTIFIER */
					$images = $this.children(), /* THE IMAGES TO BE ROTATED */
					count = $images.size(); /* THE TOTAL NUMBER OF IMAGES THAT WILL BE ROTATED */
			
			/* SETUP THE IMAGES */
			setup();			
			
			/* SETS UP THE IMAGE DISPLAYS */
			function setup()
			{
				/* OVERRIDE THE CSS STYLES */
				$this.css('position','relative');
				$images.css({"position":"absolute","top":"0px","left":"0px"}).removeClass('hide').hide();
				$this.children(':first').show();
							
				/* CALL THE FUNCTION TO CREATE THE NAVIGATION */
				if(opts.navigation && count > 1)
				{
					createNavigation();
				}
				
				/* SET THE ROTATOR TO RUN AUTOMATICALLY IF AUTO IS TRUE, AND MORE THAN 1 OBJECT EXISTS TO ROTATE */
				if(opts.auto_run && count > 1)
				{
					initiateInterval();
					
					/* PAUSE THE ROTATOR WHEN THE USER HAS THEIR MOUSE OVER AN IMAGE */
					$parent.hover(function()
					{
						clearInterval(timer);
					},function()
					{
						initiateInterval();
					});
				}
			}
			
			/* CONSTRUCTOR */
			function rotate(direction)
			{
				var $current_image = $this.children(':visible:first') == 'undefined' ? $this.children(':first') : $this.children(':visible:first'),
						$previous_image = $current_image.prev() == 'undefined' || $current_image.prev().html() == null ? $this.children(':last') : $current_image.prev(),
						$next_image = $current_image.next() == 'undefined' || $current_image.next().html() == null ? $this.children(':first') : $current_image.next();
				
				if(count > 1)
				{
					switch(direction)
					{
						case -1:
						
							//$current_image.fadeOut(opts.duration);
							$current_image.animate({
								left: '-=904'
							},opts.duration, function() {$current_image.animate({left: '+=904'},1);}).fadeOut(opts.duration);
							
							$previous_image.fadeIn(opts.duration,function()
							{
								clicked = false;
							});
							break;
						default:
							$current_image.animate({
								left: '+=904'
							},opts.duration, function() {$current_image.animate({left: '-=904'},1);}).fadeOut(opts.duration);
							$next_image.fadeIn(opts.duration,function()
							{
								clicked = false;
							});
							break;
					}
				}
			}
			
			/* CREATES THE NAVIGATION TO SCROLL */
			function createNavigation()
			{

				var $divmain = $('<div class="portMainBox"></div>');
				var $div = $('<div class="portBtnBox"></div>'); /* CREATE THE DIV OBJECT */
					$div.append($(opts.previous));
					$div.append($(opts.next));
					
				
					$div.appendTo($divmain); 
					$('#portCon2').before($divmain);
					$('#PORTFOLIO').before($divmain.clone());
						
				$('.portBtn2').click(function()
				{
					if(!clicked)
					{
						clicked = true;
						rotate(1);
					}
				});
				$('.portBtn1').click(function()
				{
					if(!clicked)
					{
						clicked = true;
						rotate(-1);
					}
				});
				
			}
			
			/* INITIATES THE INTERVAL TIMER */
			function initiateInterval()
			{
				timer = setInterval(function()
				{
					rotate();
				},opts.display_time);
			}
			
		});	
	};
})(jQuery);