/*
When multiple elements are supposed to be displayed sideways next to each other. 
WITH LOOPING!
Also, there are some arrows
*/

var sircon = window.sircon || {};
sircon.objects = sircon.objects || {};

sircon.objects.sidewaysViewer = new function(){

	var $ = jQuery,
		self = this;

	//USE THIS TO MAKE STUFF START WORKING
	self.initSidewaysViews = function(){
		//Make each sideways view work as intended
		$('.sircon-sideways').not('.sideways-prepared').each(function(){
			//Initiate a single sideways view here
			var $this = $(this);

			//Add some extra wrappers to allow functionality!
			$this.wrap('<div class="sircon-sideways-outer" />');
			$this.wrapInner('<div class="sircon-viewport" />');

			//Add navigational elements
			$this.after('<div class="sircon-sideways-nav"><div class="nav-inner"><div class="sideways-nav nav-prev" /><div class="sideways-nav nav-next" /></div></div>');

			//Also keep track of current navigation
			$this.attr({
				'data-current_child': 1,
				'data-target_child': 1,
				'data-left': 0
			});

			//Notify self about done preparing this one. Might help avoid duplicate preparation
			$this.addClass('sideways-prepared do-transition');
		});
	}
	
	
	$(window).resize(function(){
		$('.sircon-sideways').each(function(){
			var $this = $(this),
				currentChildIndex = parseInt($this.attr('data-current_child')),
				$viewport = $this.children('.sircon-viewport'),
				$currentChild = $viewport.children(':nth-child('+currentChildIndex+')'),
				leftOffset = parseFloat($this.attr('data-left')),
				targetLeft = $currentChild[0].offsetLeft *-1;

			$viewport.css({transform: 'translateX('+(targetLeft - leftOffset)+'px)'});
		});
	});
	
	

	//THE CODE BELOW HERE IS MENT TO RUN ONLY ONCE, then it will work forever after (until next full pageload..)
	var updatePosition = function($sideways){
		var $viewport = $sideways.children('.sircon-viewport'),
			$viewportChildren = $viewport.children(),

			currentChildIndex = parseInt($sideways.attr('data-current_child')),
			targetChildIndex = parseInt($sideways.attr('data-target_child')),

			childCount = $viewportChildren.length,
			$currentChild = $viewport.children(':nth-child('+currentChildIndex+')'),
			elementWidth = parseFloat($currentChild.outerWidth()) + parseFloat($currentChild.css('marginRight')),
			visibleElements = $sideways.outerWidth() / elementWidth,
			leftOffset = parseFloat($sideways.attr('data-left'));

		var targetBeforeFirst = targetChildIndex <= 0,
			targetAfterLast = targetChildIndex > parseInt(childCount - visibleElements + 1),
			targetOutsideIndex = targetBeforeFirst || targetAfterLast;

		if(targetOutsideIndex){
			var $last = $viewportChildren.eq(-1),
				$first = $viewportChildren.eq(0),
				trickyPosition;

			if(targetBeforeFirst){
				//Switcharoo last put first
				$first.before($last);
				leftOffset -= elementWidth;
				targetChildIndex ++;

			}else if(targetAfterLast){
				//Switcharoo first put last
				$last.after($first);
				leftOffset += elementWidth;
				targetChildIndex --;

			}

			//Avoid extreme and unecessary pixel offsets
				/* This will induce a visible animation glitch
				var extremeThreshold = visibleElements * 4 * elementWidth,
					thresholdRelief = visibleElements * 3 * elementWidth,
					exceedsThreshold = Math.abs(leftOffset) > extremeThreshold;
				if(exceedsThreshold){
					if(leftOffset > 0){
						leftOffset -= thresholdRelief;
					}else if(leftOffset < 0){
						leftOffset += thresholdRelief;
					}
				}/**/

			$sideways.attr('data-left', leftOffset);
			$viewport.css('left', leftOffset+'px');

		}

		//Update attrs
		$sideways.attr('data-current_child', targetChildIndex);

		//Update position from left, update current and target, in case they changed!
		var $targetChild = $viewport.children(':nth-child('+targetChildIndex+')'),
			targetLeft = $targetChild[0].offsetLeft *-1;

		$viewport.css({transform: 'translateX('+(targetLeft - leftOffset)+'px)'});
	}


	//Clickable!
	$(document).on('click', '.sideways-nav', function(){
		var $this = $(this),
			$sideways = $this.closest('.sircon-sideways-outer').children('.sircon-sideways'),
			currentChild = parseInt($sideways.attr('data-current_child')),
			isNext = $this.hasClass('nav-next'),
			isPrev = $this.hasClass('nav-prev');

		if(isNext){
			$sideways.attr('data-target_child', (currentChild+1));
		}else if(isPrev){
			$sideways.attr('data-target_child', (currentChild-1));
		}

		updatePosition($sideways);
	});




}