/****************************************
*
Bosch Productslider JS - 1.0
Kittelberger media | 2011-01 
*
*****************************************/

( function( $ )
{
	/**
	 *
	 */
    var Prodslider = function( element, options )
    {
    	/**
    	 * 	The element this slider gets attached to
    	 */
    	var __element = element;

    	/**
    	 * 	The options for the slider
    	 */
    	var __options = $.extend( {
			animationStep: 3,
			animateDuration: 500,
			animateEasingMethod: 'easeOutQuad',
			loadMethod: 'sync',
			loadData: []

		}, options || {} );





			/***********************************************
				--- > Default Vars
			***********************************************/

			var __calcAnimateMaxNext = function () {};
			var __buildProdSlideContent = function () {};
			var __animateMaxPrev = 0; // left animation stop in px
			var __animateMaxNext = 0; // right animation stop in px
			var __animateStop = 0;
			var __animateStepLeft = 0;
			var __createAccContentBox = '';


			var _initDefaultVars = function () {
				//console.log (__options);
				var animationStep = __options.animationStep; // number of products to step
				__animateStepLeft = animationStep * $(('#'+__element.attr('id'))+' '+  '.pSliderBox').outerWidth(true); // animation step in px
				// calc for right animation stop in px
				__calcAnimateMaxNext = function () {
					$(('#'+__element.attr('id'))+' '+  '.pSliderBox').each(function () {
						__animateMaxNext += $(this).outerWidth(true);
					});
					__animateMaxNext = __animateMaxNext - __animateStepLeft;
					__animateMaxNext = __animateMaxNext * -1; // right animation stop in px
				};
			};





			/***********************************************
				--- > Build SliderContent
			***********************************************/

			var __buildProdSlideContent = function () {
				// if Json URL is defined: load async data
				if (__options.loadMethod == 'async') {
					if (!__options.loadData.length) {
							return;
					}
					var __buildAsyncContent = function (jsonData) {					
						
				
						for (i=0; i<jsonData.sliderBoxes.length; i++) {
							__createAccContentBox += '<div class="pSliderBox">';
							__createAccContentBox += '	<div class="imgBox">';
							__createAccContentBox += '		<a class="word_wrap" target="'+jsonData.sliderBoxes[i].link_target+'" href="'+jsonData.sliderBoxes[i].link_url+'" rel="noindex,nofollow" title="'+jsonData.sliderBoxes[i].link_text+'"><img alt="" src="/media/images/professional/white.gif" original="'+jsonData.sliderBoxes[i].image_url+'" class="prod hidden"><img alt="" src="/media/images/professional/white.gif" original="'+jsonData.sliderBoxes[i].hover_image_url+'" class="prod original"></a>';
							__createAccContentBox += '	</div>';
							__createAccContentBox += '	<p class="link"><span>'+jsonData.sliderBoxes[i].label_text+'</span><a class="word_wrap" target="'+jsonData.sliderBoxes[i].link_target+'" href="'+jsonData.sliderBoxes[i].link_url+'" rel="noindex,nofollow" title="'+jsonData.sliderBoxes[i].link_text+'">'+jsonData.sliderBoxes[i].link_text+'</a></p>';
							__createAccContentBox += '</div>';
						}
						$(__createAccContentBox).appendTo(('#'+__element.attr('id'))+' '+  '.pSliderContainer');
						_initDefaultVars();
						__calcAnimateMaxNext();
						_initClicks();
						_updatePager();
						$(('#'+__element.attr('id'))+' '+  '.pSliderBox:last').addClass('last');
						_showImages(true);
					};

					$.ajax({
						dataType: "json",
						type: "GET",
						url: __options.loadData,
						success: function(jsonData) {
							__buildAsyncContent(jsonData);
						},
						error: function(XMLHttpRequest, textStatus, errorThrown) {
							_ajaxHandle_Error(XMLHttpRequest, textStatus, errorThrown);
						}
					 });

				};

				// if JsonData is directly passed
				if (__options.loadMethod == 'sync') {
				
					if (!__options.loadData.sliderBoxes.length) {
							return;
					}					
					/*
						the real img Url is located in the attribtute "orginial"
						at first the img "src" must be the loader IMG.
					*/
					for (i=0; i<__options.loadData.sliderBoxes.length; i++) {
						__createAccContentBox += '<div class="pSliderBox">';
						__createAccContentBox += '	<div class="imgBox">';
						__createAccContentBox += '		<a class="word_wrap" target="'+__options.loadData.sliderBoxes[i].link_target+'" href="'+__options.loadData.sliderBoxes[i].link_url+'" rel="noindex,nofollow" title="'+__options.loadData.sliderBoxes[i].link_text+'"><img alt="" src="/media/images/professional/white.gif" original="'+__options.loadData.sliderBoxes[i].image_url+'" class="prod hidden"><img alt="" src="/media/images/professional/white.gif"  original="'+__options.loadData.sliderBoxes[i].hover_image_url+'" class="prod original"></a>';
						__createAccContentBox += '	</div>';
						__createAccContentBox += '	<p class="link"><span>'+__options.loadData.sliderBoxes[i].label_text+'</span><a class="word_wrap" target="'+__options.loadData.sliderBoxes[i].link_target+'" href="'+__options.loadData.sliderBoxes[i].link_url+'" rel="noindex,nofollow" title="'+__options.loadData.sliderBoxes[i].link_text+'">'+__options.loadData.sliderBoxes[i].link_text+'</a></p>';
						__createAccContentBox += '</div>';
					}					
					
					$(__createAccContentBox).appendTo(('#'+__element.attr('id'))+' '+  '.pSliderContainer');

					$(('#'+__element.attr('id'))+' '+  '.pSliderBox:last').addClass('last');
					_showImages(true);
				};
				
				// if DOM exists
				if (__options.loadMethod == 'static') {
					_showImages(true);
				};

				
			};


			var _ajaxHandle_Error = function () {
				__createAccContentBox += '<p class="error">Error loading data</p>';
				$(__createAccContentBox).appendTo(('#'+__element.attr('id'))+' '+  '.pSliderContainer');
			}



			/***********************************************
				--- > DOM Changes
			***********************************************/


			var _updateAniSlider = function () {
				__animateStop = 0;
				_updatePager();
			};

			/* DOM Change: Clean Right Navi HTML */
			var _domChange_clearRelAccContainer = function () {
				$(('#'+__element.attr('id'))+' '+  '.pSliderContainer > *').remove();
			};


			var _updatePager = function () {
				if (($(('#'+__element.attr('id'))+' '+  '.pSliderContainer').position().left >= __animateMaxPrev)) {
					_pagerPrevInactive();
				}
				else {
					_pagerPrevActive();
				};
				if (($(('#'+__element.attr('id'))+' '+  '.pSliderContainer').position().left <= __animateMaxNext)) {
					_pagerNextInactive();
				}
				else {
					_pagerNextActive();
				};
			};



			var _animateLeft = function () {
				// no animation (animation is in progress)
				if (!__animateStop) {
					if (($(('#'+__element.attr('id'))+' '+  '.pSliderContainer').position().left >= __animateMaxPrev)) {

					}
					else {
						_pagerPrevActive();
						__animateStop = 1;
						$(('#'+__element.attr('id'))+' '+  '.pSliderContainer').animate (
							{ left:'+='+__animateStepLeft},
							{duration: __options.animateDuration, easing: __options.animateEasingMethod, complete: _updateAniSlider}
						);
					};
				};
			};

			var _animateRight = function () {
				// no animation (animation is in progress)
				if (!__animateStop) {
					if (($(('#'+__element.attr('id'))+' '+  '.pSliderContainer').position().left <= __animateMaxNext)) {
						_pagerNextInactive();
					}
					else {
						_pagerNextActive();
						__animateStop = 1;
						$(('#'+__element.attr('id'))+' '+  '.pSliderContainer').animate (
							{ left:'-='+__animateStepLeft},
							{duration: __options.animateDuration, easing: __options.animateEasingMethod, complete: _updateAniSlider}
						);
					};
				};
				_showImages();
				
			};
			
			
			var _showImages = function (init) {
				/* Load just the visible Images. */
				
				var containerWidth = $('#'+__element.attr('id') + ' .pSliderContent').width();
				var pSliderPagerWidth = $('#'+__element.attr('id') + ' .pSliderPager.prev').width() + $('#'+__element.attr('id') + ' .pSliderPager.next').width();
				var containerViewport = containerWidth - pSliderPagerWidth;
				var containerLeft = $('#'+__element.attr('id') + ' .pSliderContainer').position().left +1;
				var pSliderBoxWidth = $('#'+__element.attr('id') + ' .pSliderBox').outerWidth();
				var allEls = $('#'+__element.attr('id') + ' .pSliderContent img.original');
				var nrVisibleEls = parseInt(containerViewport / pSliderBoxWidth) +1;
				var nrViewedEls = Math.floor((containerLeft * -1) /  pSliderBoxWidth) + __options.animationStep;

				if(init == true){
					for(i = 0; i <  nrVisibleEls; i++){
						$(allEls[i]).attr("src", $(allEls[i]).attr("original"));
						$(allEls[i]).prev().attr("src", $(allEls[i]).prev().attr("original"));
					}				
				}else{
					for(i = nrViewedEls; i < (nrViewedEls +__options.animationStep); i++){
						var nextStep = nrVisibleEls - __options.animationStep;
						$(allEls[i+nextStep]).attr("src", $(allEls[i+nextStep]).attr("original"));
						$(allEls[i+nextStep]).prev().attr("src", $(allEls[i+nextStep]).prev().attr("original"));
					}
				}
			}

			var _pagerPrevActive = function () {
				$(('#'+__element.attr('id'))+' '+  '.pSliderPager.prev').removeClass('inactive');
			};
			var _pagerNextActive = function () {
				$(('#'+__element.attr('id'))+' '+  '.pSliderPager.next').removeClass('inactive');
			};
			var _pagerPrevInactive = function () {
				$(('#'+__element.attr('id'))+' '+  '.pSliderPager.prev').addClass('inactive');
			};
			var _pagerNextInactive = function () {
				$(('#'+__element.attr('id'))+' '+  '.pSliderPager.next').addClass('inactive');
			};
			var _pagerPrevHover = function () {
				$(('#'+__element.attr('id'))+' '+  '.pSliderPager.prev').addClass('hover');
			};
			var _pagerNextHover = function () {
				$(('#'+__element.attr('id'))+' '+  '.pSliderPager.next').addClass('hover');
			};
			var _pagerPrevOut = function () {
				$(('#'+__element.attr('id'))+' '+  '.pSliderPager.prev').removeClass('hover');
			};
			var _pagerNextOut = function () {
				$(('#'+__element.attr('id'))+' '+  '.pSliderPager.next').removeClass('hover');
			};



			/***********************************************
				--- > DOM Events
			***********************************************/
			/* Case: animated carousel required  (if boxes gt 3) */

			var _initClicks = function () {
				if ($(('#'+__element.attr('id'))+' '+  '.pSliderBox').length > 3) {
					$(('#'+__element.attr('id'))+' '+  '.pSliderPager.prev').click(function() {
						_animateLeft();
					});
					$(('#'+__element.attr('id'))+' '+  '.pSliderPager.next').click(function() {
						_animateRight();
					});

				}
				/* Case: no carousel required */
				else {
					_pagerPrevInactive();
					_pagerNextInactive();
				};

				$('.hoverable .pSliderBox').bind('mouseover', function () {
					$(this).addClass('hover');
					if (($(this).find('img.prod').length) > 1) {
						$(this).find('img.prod').eq(0).removeClass('hidden');
						$(this).find('img.prod').eq(1).addClass('hidden');
					}
				});
				$('.hoverable .pSliderBox').bind('mouseout', function () {
					$(this).removeClass('hover');
					if (($(this).find('img.prod').length) > 1) {
						$(this).find('img.prod').eq(0).addClass('hidden');
						$(this).find('img.prod').eq(1).removeClass('hidden');
					}
				});
			};


		this.init = function() {
			__buildProdSlideContent();
			_initDefaultVars();
			__calcAnimateMaxNext();
			_initClicks();
			_updatePager();
			
			$(('#'+__element.attr('id'))+' '+  '.pSliderBox:last').addClass('last');
    	};


		this.reloadSlider = function () {
			__buildProdSlideContent();
		};

		this.init();
	}






    $.fn.pSlider = function ( options )
    {

		//console.log (options);
        return this.each( function()
        {
					var element = $( this );
					if ( element.data( 'pSlider' ) ) return;
					var slider = new Prodslider( element, options );
					element.data( 'pSlider', slider );

        });
    };
})( jQuery );