/*
	This is for generic horizontal scrolling of items.

	The "Boxes" are the item containers. They must only have a right-margin to separate the items.
	The right-margin of the last element will be automatically removed by the script to force proper scroller layout.

	The HTML structure for the scroller is below:

		<div class="ylopo-scroller">
			<div class="left-arrow"></div>
			<div class="right-arrow"></div>
			<div class="ylopo-scroller-outer">
				<div class="ylopo-scroller-inner">
					<div class="ylopo-scroller-box">
						[item html]
					</div>
					<div class="ylopo-scroller-box">
						[item html]
					</div>
					<div class="ylopo-scroller-box">
						[item html]
					</div>
				</div>
			</div>
		</div>
*/

(function(){

	function YlopoScroller($thisScroller){

		var idx = 0;

		var $boxes,
			$scrollOuter,
			$scroller,
			margin,
			boxW,
			boxWstart,
			resizeTmr,
			scrollerWidth,
			maxItemHeight = 0;

		const isPlugin = $thisScroller.parent().hasClass('ylopo-plugin')

		function scrollItem(direction){

			var	containerOffset, containerW, left, scrollerWidth, newLeft;

			if (resizeTmr){
				clearTimeout(resizeTmr)
			}

			resizeTmr = undefined;
			containerOffset = $scrollOuter.offset().left;
			containerW = $scrollOuter.width();
			left = parseFloat($scroller.css('left'));
			scrollerWidth = $scroller.width();

			idx = idx + direction;
			if (idx <= 0){
				idx = 0
				$thisScroller.find('.left-arrow').hide();
			} else {
				$thisScroller.find('.left-arrow').show();
			}
			if (idx >= $boxes.length-1){
				idx = $boxes.length-1
				$thisScroller.find('.right-arrow').hide();
			} else {
				$thisScroller.find('.right-arrow').show();
			}

			newLeft = -(idx * (boxW + margin));

			if (newLeft < -(scrollerWidth - containerW) ) {
				newLeft = -(scrollerWidth - containerW);
			}

			if(newLeft == 0) {
				$thisScroller.find('.left-arrow').hide();
			}
			if(newLeft == -(scrollerWidth - containerW)) {
				$thisScroller.find('.right-arrow').hide();
			}

			$scroller.css('left', newLeft);
		}


		function windowResize(){
			if (resizeTmr){
				clearTimeout(resizeTmr);
			}

			resizeTmr = setTimeout(function(){

				idx = 0;

				var marginR = parseFloat($boxes.first().css('margin-right'),10);
				var marginL = parseFloat($boxes.first().css('margin-left'),10);
				margin = marginL + marginR;

				boxW = $boxes.map(function(i,o){
					maxItemHeight = Math.max(maxItemHeight, $(o).height());
					return $(o).width()
				}).sort()[0];

				$scrollOuter.css('height', maxItemHeight);

				boxWstart = boxW;

				var scrollOuterW = $scrollOuter.width();

				scrollerWidth = ($boxes.length * (boxW + margin))// - (marginR + marginL);

				$scroller.css({
					width	: scrollerWidth,
					left	: 0,
					overflow: 'hidden'
				});

				if ( $scrollOuter.width() > $scroller.width() || $boxes.length < 2){
					$thisScroller.find('.left-arrow,.right-arrow').hide();
				} else {
					$thisScroller.find('.left-arrow,.right-arrow').show();
				}

				var scrollerWidth = $scroller.width();
				var scrollOuterWidth = $scrollOuter.width();

				if (scrollerWidth < scrollOuterWidth) {
					$scroller.css('left',0)
				} else {
					scrollLeft();
				}


			}, 100)
		}

		function scrollLeft(evt){
			scrollItem(-1);
		}

		function scrollRight(evt){
			scrollItem(1);
		}

		function setScrollMobile(delta){
			if(delta === -1){
				scrollItem(-1);
			} else if(delta === 1){
				scrollItem(1);
			}
		}

		function initScroller() {

//			$boxes.last().css('margin',0);
			$boxes = $thisScroller.find('.ylopo-scroller-box');

			$scrollOuter = $thisScroller.find('.ylopo-scroller-outer');
			$scroller = $thisScroller.find('.ylopo-scroller-inner');

			$thisScroller.find('.left-arrow').bind('mousedown', scrollLeft);
			$thisScroller.find('.right-arrow').bind('mousedown', scrollRight);

			$(window).on('resize', windowResize);

			windowResize();

			if (isMobile.any) {
				window.initHammerVerticalSwipe($scrollOuter[0], setScrollMobile);
			}
		}

		initScroller();

		$thisScroller.on('rescan',function(evt){
			$boxes = $thisScroller.find('.ylopo-scroller-box');
			windowResize();
		});

		$(window).on('load',function(evt){
			if(!isPlugin){
				$boxes = $thisScroller.find('.ylopo-scroller-box');
				windowResize();
			}
		});
	}

	//----------------------------------------------------------------

	$('.ylopo-scroller').each(function(i,o){
		var $thisScroller = $(o);
		YlopoScroller($thisScroller)
	})

	//----------------------------------------------------------------


})();