var grid_height = 2;
var grid_interval = 1000/30;
var grid_offset = $('html.touch').length ? 50 : 25;

var grid_container_original;
var grid_container_width;
var grid_container_height;
var grid_slide_width;
var grid_slide_height;
var grid_slide_count;

var grid_scrollbar = {};
var grid_arrow = {};
grid_arrow.button_width = 44;
grid_arrow.button_gap = 16;

$(document).ready(function(){

	// Set up variables
	grid_container_original = $('#block-views-Projects-block_1, #block-views-Projects-block_4');
	grid_slide_width = grid_container_original.find('.views-row:first').outerWidth(true);
	grid_slide_height = grid_container_original.find('.views-row:first').outerHeight(true);
	grid_slide_count = grid_container_original.find('.views-row').length;
	grid_container_width = ((Math.ceil(grid_slide_count / grid_height)) * grid_slide_width);
	grid_container_height = ((grid_height - 1) * grid_slide_height) + grid_container_original.find('.views-row:first').outerHeight();

	// Create scrolling grids
//	init_scrollbar_grid();
	init_arrow_grid();
//	init_grid_toggle();

});

function init_scrollbar_grid(){
	// If a grid exists on the page, add a scrollbar grid
	if(grid_container_original.length > 0){
		
		// Hide the original grid
		grid_container_original.hide();
		
		// Create new grid wrapper and container
		$('.section-main .c3').append('<div class="scrollbar-grid-wrapper grid grid-projects"><div class="grid-container" /></div>');
		
		// Get new wrapper and container
		grid_scrollbar.wrapper = $('.scrollbar-grid-wrapper');
		grid_scrollbar.container = grid_scrollbar.wrapper.find('.grid-container');
	
		// Add grid to the container
		grid_container_original.find('.views-row').clone().appendTo(grid_scrollbar.container);
		
		// Add slide animations to new grid
		initSliders();
		
		// Add full width and height to container
		grid_scrollbar.container.css({
			'width': grid_container_width,
			'height': grid_container_height,
			'margin': -16
		});
		
		// Limit wrapper to 100% width
		grid_scrollbar.wrapper.css({
			'overflow': 'auto',
			'width-right': '100%'
		});
	}
}

function init_arrow_grid(){
	// If a grid exists on the page, add an arrow grid
	if(grid_container_original.length > 0){
		$('.main-inner').hide();
		
		// Hide the original grid
		grid_container_original.hide();
		
		// Create new grid wrapper abd container
		$('.section-main .c3').append('<div class="arrow-grid-wrapper grid grid-projects"><div class="inner-wrapper"><div class="grid-container" /></div></div>');
		
		// Get new wrapper and container
		grid_arrow.wrapper = $('.arrow-grid-wrapper');
		grid_arrow.innerWrapper = grid_arrow.wrapper.find('.inner-wrapper');
		grid_arrow.container = grid_arrow.wrapper.find('.grid-container');
		
		// Add grid to the container
		grid_container_original.find('.views-row').clone().appendTo(grid_arrow.container);
		
		// Add slide animations to new grid
		initSliders();
		
		// Setup wrapper
		grid_arrow.wrapper.css({
			'overflow': 'hidden',
			'height': grid_container_height,
			'position': 'relative',
			'padding-left': grid_arrow.button_width + grid_arrow.button_gap,
			'padding-right': grid_arrow.button_width + grid_arrow.button_gap
		});
		
		// Setup inner wrapper
		grid_arrow.innerWrapper.css({
			'overflow': 'hidden',
			'height': grid_container_height,
			'position': 'relative'
		});
		
		// Setup container
		grid_arrow.container.css({
			'width': grid_container_width,
			'height': grid_container_height,
			'position': 'absolute',
			'top': 0,
			'left': 0,
			'margin-right': -16
		});
		
		// Add arrow buttons
		grid_arrow.wrapper.append('<a class="grid-step grid-step-prev" href="#previous"><span class="arrow" /></a><a class="grid-step grid-step-next" href="#next"><span class="arrow" /></a>');
		grid_arrow.buttons = grid_arrow.wrapper.find('.grid-step');
		grid_arrow.prev = grid_arrow.wrapper.find('.grid-step-prev');
		grid_arrow.next = grid_arrow.wrapper.find('.grid-step-next');

		// Set up styles for buttons
		grid_arrow.buttons.css({
			'position': 'absolute',
			'top': 0,
			'display': 'block',
			'width': grid_arrow.button_width,
			'height': grid_container_height
		});
		
		// If browser is on a touch device, set mouseup/down events, else set mouseenter/leave events
		var startEvent = $('html.touch').length ? 'touchstart' : 'mouseenter';
		var endEvent = $('html.touch').length ? 'touchend' : 'mouseleave';
		
		// Prevent 'open link...' popup on the iPad
		if($('html.touch').length) grid_arrow.buttons.removeAttr('href');
		
		// Position previous button, and add hover functionality
		grid_arrow.prev.css('left', 0).bind(startEvent, function(){
		
			// Set up interval
			grid_arrow.interval = setInterval(function(){
				
				// Move the container by x to the right
				grid_arrow.container.css('left', grid_arrow.container.position().left + grid_offset);
				
				// Check the container doesn't exceed any boundaries
				grid_arrow_check_offset();
				
			}, grid_interval);
			
			$(this).bind(endEvent, function(){
				clearInterval(grid_arrow.interval);
			});
			
		});
		
		// Position next button, and add hover functionality
		grid_arrow.next.css('right', 0).bind(startEvent, function(){
			
			// Set up interval
			grid_arrow.interval = setInterval(function(){

				// Move the container by x to the left
				grid_arrow.container.css('left', grid_arrow.container.position().left - grid_offset);
				
				// Check the container doesn't exceed any boundaries
				grid_arrow_check_offset();
				
			}, grid_interval);
			
			$(this).bind(endEvent, function(){
				clearInterval(grid_arrow.interval);
			});
			
		});
		
		// Add click event to prevent hash from being added to URL (hash added to fix IE background bug)
		grid_arrow.buttons.click(function(){ return false; });
		
		$(window).resize(grid_arrow_check_width);
		
		grid_arrow_check_width();
	}
}

function grid_arrow_check_offset(){
	
	// Get the current offset
	var offset = grid_arrow.container.position().left;
	
	// Get the lowest limit (i.e. container moved to the left)
	var limit = (grid_container_width -16 - grid_arrow.innerWrapper.width()) * -1;
	
	// If the container exceeds any limit, set it to the limit
	if(offset < limit) grid_arrow.container.css('left', limit);
	if(offset > 0) grid_arrow.container.css('left', 0);

}

function grid_arrow_check_width(){
	// If the wrapper is bigger than the container, hide the buttons and center the boxes
	if(grid_arrow.wrapper.outerWidth(true) >= grid_arrow.container.outerWidth(true)){
		grid_arrow.buttons.hide();
		grid_arrow.wrapper.css({
			'padding': 0,
			'width': grid_arrow.container.outerWidth(true)
		});
		grid_arrow.container.css('left', 0);
		$('body').removeClass('main-full-width');
	}else{
		grid_arrow.buttons.show();
		grid_arrow.wrapper.css({
			'padding-left': grid_arrow.button_width + grid_arrow.button_gap,
			'padding-right': grid_arrow.button_width + grid_arrow.button_gap,
			'width': 'auto'
		});
		$('body').addClass('main-full-width');
		grid_arrow_check_offset();
	}
}

function init_grid_toggle(){
	if(grid_container_original.length > 0){
		grid_scrollbar.wrapper.hide();
		
		$('body').append('<a class="toggle-slider">Toggle Slider</a>');
		$('body > .toggle-slider').css({
			'background': '#182B69',
			'color': '#ffffff',
			'padding': 5,
			'margin': 10,
			'position': 'fixed',
			'bottom': 0,
			'right': 0,
			'display': 'block',
			'text-decoration': 'none',
			'border': '1px solid #ffffff',
			'z-index': 500
		}).click(function(){
			if(grid_scrollbar.wrapper.is(':hidden')){
				grid_scrollbar.wrapper.show();
				grid_arrow.wrapper.hide();
			}else{
				grid_scrollbar.wrapper.hide();
				grid_arrow.wrapper.show();
			}
		});
		
	}
}