// JavaScript Document

var x =1;
var containerPosition = 0;
var direction;
var containerWidth;
var clickable = true;

var bannerContainer = null;
bannerContainer = document.getElementById('media');

function mediaWidth(numberBanners) {
	containerWidth = numberBanners*176+20;
	document.getElementById('media').style.width = containerWidth+'px';
}

function movingLeft(x, numberBanners) {
	//moving left, set banner size of a 160px img

	containerPosition += 176;
	direction = 'left';
	animated(containerPosition, 10, direction);

}
function movingRight(x, numberBanners) {
	//moving right, set banner size of a 160px img

	containerPosition -= 176;
	direction = 'right';
	animated(containerPosition, 10, direction);
}

function increment(totalBanners) {
	if (clickable == true) {
		clickable = false;
		if (x < totalBanners - 4) {
			x++;
			movingRight(x, totalBanners);
		
		} else {
			x=1;
			containerPosition = 0;
			fastRewind(numberBanners);
		}
	} else {
		//alert('not clickable!');	
	}
}
function decrease(numberButtons) {
	if (clickable == true) {
		clickable = false;
		if (x > 1) {
			x--;
			movingLeft(x, numberButtons);
		} else {
			x = numberButtons-4;
			bannerContainer = document.getElementById('media');
			containerPosition = -1*((numberButtons - 5) * 176);
			fastForward(numberBanners);
		}
	} else {
		//alert('not clickable!');	
	}
}
function animated(containerPosition, speed, direction) {
	var frame = 0;
	var motion = 0;
	testObject = document.getElementById("media");
	
	var countDown = setInterval(somefunction, speed);
	
	function somefunction() {
		
		if (frame < 176) {
			frame += 8; 
		} else {
			clickable = true;
			clearInterval(countDown);	
		}
		if (direction == 'right') {
			motion = containerPosition - frame + 176;
		} else if (direction == 'left') {
			motion = containerPosition + frame - 176;
		}
		testObject.style.left = motion+'px';
	}
}
function fastRewind(numberBanners) {
		
	var frame = 0;
	var motion = 0;
	var totalMove = 176*(numberBanners-5);
	testObject = document.getElementById("media");
	
	var countDown = setInterval(somefunction, 10);
	
	function somefunction() {
		
		if (frame < totalMove) {
			frame += 16; 
		} else {
			clickable = true;
			clearInterval(countDown);	
		}
		motion = -1*(totalMove - frame);
		testObject.style.left = motion+'px';
	}
}
function fastForward(numberBanners) {
		
	var frame = 0;
	var motion = 0;
	var totalMove = 176*(numberBanners-5);
	testObject = document.getElementById("media");
	
	var countDown = setInterval(somefunction, 10);
	
	function somefunction() {
		
		if (frame < totalMove) {
			frame += 16; 
		} else {
			clickable = true;
			clearInterval(countDown);	
		}
		motion = -1*frame;
		testObject.style.left = motion+'px';
	}
}