/**
* QUESTIONS: ask Jmae
$('.bannerClass').animatedBanner();
HTML STRUCTURE

important used classes: .bannerBig, .bannerBigSliderContainer, .bannerThumb, .bannerBigSliderArrow, .bannerThumbSliderArrow, .bannerThumbSliderContainer , .left, .right, .show, .hidden
<div class="bannerClass">
	(optional)<div class="hidden bannerBigSliderArrow left"></div>
	<div class="bannerBig">
		<div class="bannerBigSliderContainer">
			<a rel="" title="" href="" class=""><img alt="" src="" /></a>
		</div>
	</div>
	(optional)<div class="hidden bannerBigSliderArrow right"></div>

	<div class="bannerThumb">
		(optional)<div class="hidden bannerThumbSliderArrow left"></div>
		<div class="bannerThumbSliderContainer">
			<a rel="must filled in, same as bigBannerClass" title="" href="" class="">
				<img alt="" src="" />
			</a>
		</div>
		(optional)<div class="hidden bannerThumbSliderArrow right"></div>
	</div>
</div>

CSS MANDATORY
// default bannerslider with thumbnavigation
.bannerBigSliderContainer {width:2000em; position:absolute;}
*/


(function($)
{

	//scope globals
	var myoptions;
	var wrThis;
	var $click = 0;
	var $dir = '';
	var $changeDir = false;
	var bigBanner;
	var bigArrows;
	var bigArrowLeft;
	var bigArrowRight;
	var bigWrap;
	var bigWidth;
	var thumbBanner;
	var thumbArrows;
	var thumbArrowLeft;
	var thumbArrowRight;
	var cloneWrap;
	var cloneList;
	var thumbWidth;
	var thumbWrapperWidth;
	var $maxClick = 0;
	var slice = null;
	var thumbRel;
	var currentPosition = 0;

	//methods
	var methods =
	{
		init: function(options)
		{

			return this.each (function ()
			{
				myoptions = jQuery.extend($.fn.animatedBanner.defaults, options);
				wrThis = $(this);
				bigBanner = wrThis.find('.bannerBig');
				bigWrap = wrThis.find('.bannerBigSliderContainer');
				bigWidth = wrThis.find('.bannerBig').width();
				thumbBanner = wrThis.find('.bannerThumb');
				thumbArrows = wrThis.find('.bannerThumbSliderArrow');
				cloneWrap = wrThis.find('.bannerThumbSliderContainer');
				cloneList = wrThis.find('.bannerThumbSliderContainer a');
				thumbWidth = (myoptions.thumbBanner.thumbWidth != 'auto') ? myoptions.thumbBanner.thumbWidth : wrThis.find('.bannerThumbSliderContainer a').width();
				$maxClick = wrThis.find('.bannerThumbSliderContainer a').length;
				thumbWrapperWidth = $maxClick * thumbWidth;
				//standard Banner slider with default options : example etalage banner homepage

				if (myoptions.bigBanner.show == true && myoptions.thumbBanner.show == true)
				{
					if (myoptions.thumbBanner.triggerBigBanner == 'click')
					{
						methods.thumbClickShowBig.call(this, cloneWrap, bigBanner);
					}
					else if (myoptions.thumbBanner.triggerBigBanner == 'hover')
					{
						//show thumb slider arrows
						methods.toggleArrows.call(this, thumbBanner);

						//tab hover functionality
						methods.thumbHoverShowBig.call(this, cloneWrap, bigBanner);

						//clone initialisation
						methods.clone.call(this, true, true);

						// user action slider, automatic clone action for infinite slider
						thumbArrows.bind('click', function()
						{
							methods.countClick.call(this);
							methods.thumbSlide.call(this, $dir, myoptions.thumbBanner.animationSpeed);

							if ($dir == 'right' && $click == 0)
							{
								methods.clone.call(wrThis, true, false);
								methods.cloneRemove.call(wrThis, true, false);
							}
							if ($dir == 'left' && $click == 0)
							{
								methods.clone.call(wrThis, false, true);
								methods.cloneRemove.call(wrThis, false, true);
							}
							//console.log($click);
						});
					}
				}
			});
		},

		toggleArrows: function(hover)
		{
			var $this = this;
			/*return this.each (function ()
			{*/
				//console.log('toggleArrows Start');
				hover.live('mouseenter', function()
				{
					hover.children('.bannerThumbSliderArrow').stop(true, true).fadeIn(1500);
				}).live('mouseleave', function()
				{
					hover.children('.bannerThumbSliderArrow').stop(true, true).fadeOut('fast');
				});
				//console.log('toggleArrows Stop');
			//});
		},

		thumbClickShowBig: function(thumb, big)
		{
			//console.log(thumb);
			//console.log(big);
			//console.log(this);
		//	var $this = this;
			/*return this.each (function ()
			{*/
				var thumbPosition;
				thumb.find('a').live('click', function(e)
					{
						thumbPosition = $(this).index();

						//second click on thumb will got to destination url
						if(currentPosition != thumbPosition*bigWidth)
						{
							e.preventDefault();
						}

						//console.log($(this));
						//console.log($(this).parent('li').index());

						if (myoptions.bigBanner.animation == 'slide')
						{

							methods.bigSlide.call(bigWrap, thumbPosition);
						}
						else if (myoptions.bigBanner.animation == 'fade')
						{
							//doesn't yet exists
						}

						//console.log(thumbPosition);

						//big.slide('left');
					});

			//});
		},

		thumbHoverShowBig: function(thumb, big)
		{
			//console.log(thumb);
			//console.log(big);
		//	var $this = this;
			/*return this.each (function ()
			{*/

				thumb.find('a').live('mouseenter', function()
					{
						thumbRel = $(this).attr('rel');
						big.find('a.' + thumbRel).addClass('show');
					}).live('mouseleave', function()
					{
						thumbRel = $(this).attr('rel');
						big.find('a.' + thumbRel).removeClass('show');
					});
			//});
		},

		cloneRemove: function(left, right)
		{
            var cloneListNew = $(this).find('.bannerThumbSliderContainer a');
            var totalThumbs = $(this).find('.bannerThumbSliderContainer a').length;
			//console.log(thumbWrapperWidth );
			if (right == true)
			{
				//console.log(cloneList.slice(0, $maxClick + 1));
				//console.log(cloneWrap);
				cloneListNew.slice(0, $maxClick).remove();
				cloneWrap.stop().css({'left':  "-" + (thumbWrapperWidth - thumbWidth) + "px"}).animate(
                {
                   left : '-='+thumbWidth
                });
                //console.log('remove left');
			}
			if (left == true)
			{
				//console.log(cloneList.slice(0, $maxClick + 1));
				//console.log(cloneWrap);
				cloneListNew.slice(totalThumbs - $maxClick, totalThumbs).remove();
                //console.log('remove right');
			}

		},

		clone: function(left, right)
		{
			var $this = this;
			//console.log(this);
			//console.log($maxClick);

			/*return this.each (function ()
			{*/
				if (left == true)
				{
					//console.log(cloneList.clone(true));
					//console.log(cloneWrap);
					cloneList.clone(true, true).prependTo(cloneWrap);
					cloneWrap.stop().css({'left':  "-" + (thumbWrapperWidth + thumbWidth) + "px"}).animate(
	                {
	                   left : '+=' + thumbWidth
	                });
					//console.log('clone left');
				}
				if (right == true)
				{
					//console.log(cloneList);
					cloneList.clone(true, true).appendTo(cloneWrap);
                    //console.log('clone right');
				}
			//});
		},

		//slides the bigbanner with tumbnavigation
		bigSlide: function($position)
		{
			//console.log($dir);

			bigWrap.stop(true, true).animate(
			{
				left : '-'+($position*bigWidth)+'px'
			}, 600, function()
			{
					currentPosition = $position*bigWidth;
			});

		},

		thumbSlide: function($dir, $animationSpeed)
		{
			//console.log(thumbWidth);
			//console.log($dir);
			if ($dir == "left")
			{
				cloneWrap.stop(true, true).animate(
				{
					left : '-='+thumbWidth
				}, $animationSpeed, function(){});
			}
			else
			{
				cloneWrap.stop(true, true).animate(
				{
					left : '+='+thumbWidth
				}, $animationSpeed, function(){});
			}
		},


		//counts the amount of arrow clicks
		countClick: function()
		{

			var $this = this;
			/*return this.each (function()
			{*/

					//console.log(this);
					var slideDir = $(this).hasClass('left')?'right':'left';

					//console.log($this);

					//console.log('first: ' + $click);
					if (($changeDir == false))
					{
						if($click != 0 && $dir != slideDir)
						{
							$changeDir = true;
							$click--;
						}
						else
						{
							$click++;
						}
					}
					else if ($changeDir == true)
					{
						if($click != 0 && $dir != slideDir)
						{
							$changeDir = false;
							$click++;
						}
						else
						{
							$click--;
						}
					}


					if ( $click > $maxClick - 1 )
					{
						$click = 0;
					}
					else if ( $click < 0 )
					{
						$click = $maxClick - 1;
					}
					$dir = slideDir;
					//console.log('second: ' + $click);

			//});
		}
	}

$.fn.animatedBanner = function (method)
{
	if ( methods[method] )
	{
		return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
	}
	else if ( typeof method === 'object' || ! method )
	{
		return methods.init.apply( this, arguments );
	}
	else
	{
		$.error( 'Method ' +  method + ' does not exist on jQuery.animatedBannerPlugin' );
	}
}
/** default functionality:
* bigBanner slides from start to end
* thumBanner is static and triggers bigBanner with click
*/

$.fn.animatedBanner.defaults =
{
	bigBanner:
	({
		show:true, //if this banner type should be shown : true or false
		animation:'slide', //the animation effect: choose between : slide, static
		animationSpeed: 600, //the image transfer speed when the animation is called
		infinity: false, //the banner should rotate infinitive or from start to end : true or false
		autoAnimate: 'false', // rotation with timeinterval
		autoAnimationSpeed: 600 // auto rotation timeinterval
	}),
	thumbBanner:
	({
		show:true,
		triggerBigBanner:'click', //the event for triggering the bigbanner : 'click', 'hover'
		animation:'static',
		animationSpeed: 600,
		infinity:false,
		autoAnimate: 'false',
		autoAnimationSpeed: 600,
		easing:'easeOut',
		thumbWidth: 'auto' //if you want to define an other sliding width
	})
};
})(jQuery);