$(document).ready(function() {
	var right = $('.region_images a.left'), // left Button
		left = $('.region_images a.right'), // right Button
		moving_item = $('#image_group_holder'),
		pic_total = $('#image_group_holder .image_group').children(),
		num_of_pic = Math.ceil(((pic_total.length)/12)), //gets the number of pages needed
		width_of_box = 348, // width of holding box
		new_width_cont = width_of_box * num_of_pic,
		cur_pos = 1, // sets the current position to be 0
		animating = false;
		moving_item.width(new_width_cont);

	$(left).click(function(){ // moving left
		var current_position = moving_item.css('left'),
			next_position = parseInt(current_position) - width_of_box;
		if(!animating && cur_pos < num_of_pic){
			animating = true;
			moving_item.animate({
				left: next_position
			}, 800, function(){
				animating = false;
				cur_pos+=1;
			})
		}
	})
	
	$(right).click(function(){ // moving right
		var current_position = moving_item.css('left'),
			next_position = parseInt(current_position) + width_of_box;
		if(!animating && cur_pos > 1 ){
			animating = true;
			moving_item.animate({
				left: next_position
			}, 800, function(){
				animating = false;
				cur_pos-=1;
			})
		}
	})
})