$(document).ready(function(){
	
	//Base movement speed for all functions on this page
	var nMovementSpeed = 300;
	var nScrollPercent = '20.3%';
	var nMaxScrollOffset = 5;
	
	
	$('.televisionContent').click(function(){
		if($(this).attr('data-url')){
			location.href=$(this).data('url');
		}
	});
	
		if($(window).width()<=700){
		nScrollPercent = '24.8%';
		nMaxScrollOffset = 4;
	}
	
	if($(window).width()<=450){
		nScrollPercent = '50%';
		nMaxScrollOffset = 2;
	}
	
	//When the window is resized find out the width and set the scrolling content variables accordingly
	$( window ).resize(function() {
	
		if($(window).width()>700){
			nScrollPercent = '20.3%';
			nMaxScrollOffset = 5;
		}
		
		if($(window).width()<=700){
			nScrollPercent = '24.8%';
			nMaxScrollOffset = 4;
			
			$(document).find('.televisionContentWrapper').each(function(index){
				$(this).animate({left: "0px"}, nMovementSpeed);
				$(this).parent().parent().data('currentscroll', '0');
			});			
		}
		
		if($(window).width()<=450){
			nScrollPercent = '50%';
			nMaxScrollOffset = 2;
			
			$(document).find('.televisionContentWrapper').each(function(index){
				$(this).animate({left: "0px"}, nMovementSpeed);
				$(this).parent().parent().data('currentscroll', '0');
			});
		}
	
	});
	
	
	$('.televisionNav').each(function(index){
		var nAreaItemCount = $(this).parent().data('maxscroll');
		if(nAreaItemCount <= nMaxScrollOffset){
			$(this).hide();
		}
	});
	
	
	//When a more televisions button is clicked
	$('.televisionRight').click(function(){
		
		//Get the current scroll amount
		var nThisCurrentScroll = parseInt($(this).parent().data('currentscroll'));
		var nMaxScroll = $(this).parent().data('maxscroll');
		
		
		//if current scroll count is more than five items away from the end then allow the user to scroll forward by 1 and increment the value accordingly
		if(nThisCurrentScroll<nMaxScroll-nMaxScrollOffset){		
			$(this).parent().data('currentscroll', nThisCurrentScroll+1);
			$(this).parent().find('.televisionContentWrapper').animate({
				left: "-=" + nScrollPercent,
			}, nMovementSpeed);
			
		}
	});
	
	//When a previous televisions button is clicked
	$('.televisionLeft').click(function(){
		
		//Get the current scroll amount
		var nThisCurrentScroll = parseInt($(this).parent().data('currentscroll'));
		
		
		//if it is greater than 0 then allow the user to scroll back by 1 and decrement the value accordingly
		if(nThisCurrentScroll>0){
			
			$(this).parent().data('currentscroll', nThisCurrentScroll-1);
			$(this).parent().find('.televisionContentWrapper').animate({
				left: "+=" + nScrollPercent,
			}, nMovementSpeed);
		}
	});
	
	
	//When the mouse is moved over a category wrapper
	$(".catWrapper").on('mousemove', function(e) {
		
		//Find out it's horizontal position, the wrapper's width and the right and left side thresholds that should trigger an event
	    var nMouseHPos = e.pageX - this.offsetLeft;
	    var nContentWidth = parseInt($(this).width());
	    var nRightSideLimit = nContentWidth * 0.85;
	    var nLeftSideLimit = nContentWidth * 0.18;

	    //If the mouse has reached the left side threshold apply opacity to the left navigation for this item
	    if(nMouseHPos <= nLeftSideLimit){
	    	$(this).find('img.televisionLeft').stop().animate({opacity: 1}, nMovementSpeed);
	    }else{
	    	$(this).find('img.televisionLeft').stop().animate({opacity: 0.4}, nMovementSpeed);
	    }
	    
	    //If the mouse has reached the right side threshold apply opacity to the right navigation for this item
	    if(nMouseHPos >= nRightSideLimit){
	    	$(this).find('img.televisionRight').stop().animate({opacity: 1}, nMovementSpeed);
	    }else{
	    	$(this).find('img.televisionRight').stop().animate({opacity: 0.4}, nMovementSpeed);
	    }
	});
});