// Configuration  Change values below  All values in pixels
var thumbWidth = 78;
var thumbHeight = 78;
var thumbHorizontalPadding = 22; //Distance between thumbs
var thumbVerticalPadding = 8; // Padding left on the top and bottom of the thumbs
var viewableItems = 5;
var scrollAmount = 1; // number of items to scroll at a time  should be equal or less than the viewable items number to guarantee all items will be seen.
var navImagesWidth = 19;

// End Configuration

var viewportWidth = (thumbWidth + thumbHorizontalPadding) * viewableItems + thumbHorizontalPadding;
var containerWidth = navImagesWidth * 2 + viewportWidth + 2;  // 2 pixels must added to avoid the nav buttons overflowing.
var containerHeight = thumbHeight + thumbVerticalPadding * 2;  // Sets the viewport and container height.

// Set the limits for scrolling.  Used for looping the carousel.
var start = 0;
var currentPosition = start;
var end = 0;
var increment = scrollAmount * (thumbWidth + thumbHorizontalPadding);
var offset = (viewableItems - scrollAmount) * (thumbWidth + thumbHorizontalPadding);
// Set the carousel variable
var carousel;


//create onDomReady Event
window.onDomReady = DomReady;

//Setup the event
function DomReady(fn)
{
	//W3C
	if(document.addEventListener)
	{
		document.addEventListener("DOMContentLoaded", fn, false);
	}
	//IE
	else
	{
		document.onreadystatechange = function(){readyState(fn)}
	}
}

//IE execute function
function readyState(fn)
{
	//dom is ready for interaction
	if(document.readyState == "interactive")
	{
		fn();
	}
}


// Cross-browser implementation of element.addEventListener()
   function addListener(element, type, expression, bubbling)
   {
   bubbling = bubbling || false;
   if(window.addEventListener) { // Standard
   element.addEventListener(type, expression, bubbling);
   return true;
   } else if(window.attachEvent) { // IE
   element.attachEvent('on' + type, expression);
   return true;
   } else return false;
   }

//execute as soon as DOM is loaded
window.onDomReady(onReady);

//do on ready
function onReady()
{
	
	// Initialize Carousel
	var navLeft = document.getElementById('nav-left');
	var navRight = document.getElementById('nav-right');
	navLeft.style.width = navImagesWidth + 'px';
	navRight.style.width = navImagesWidth + 'px';
	navLeft.style.height = containerHeight + 'px';
	
	// add next and previous functions to the navigation buttons.
	addListener(navRight,'click', next);
	addListener(navLeft,'click', previous);
	// Set widths for the carousel, viewport and container
	carousel = document.getElementById("carousel");
	var carouselItems = carousel.getElementsByTagName('li');
	var carouselWidth = carouselItems.length * (thumbWidth + thumbHorizontalPadding); /*Makes sure the ul's width is enough to avoid overflow*/
	// Set the width of the carousel items
	
	for (var i = 0; i < carouselItems.length; i++)
	{
		carouselItems.item(i).style.width = thumbWidth + 'px';
		carouselItems.item(i).style.paddingLeft = thumbHorizontalPadding + 'px';
		carouselItems.item(i).style.paddingTop = thumbVerticalPadding + 'px';
	}
	carousel.style.width = carouselWidth + 'px';
	var container = document.getElementById('container');
	container.style.width = containerWidth + 'px';
	container.style.height = containerHeight + 'px';
	var viewport = document.getElementById('carousel-viewport');
	viewport.style.width = viewportWidth + 'px';
	viewport.style.height = containerHeight + 'px';
	// Asign the calculated end of the carousel to end.
	end = (carouselWidth - increment - offset) * -1;
}

function next()
{
	currentPosition -= increment;
	if(currentPosition < end)
	{
		currentPosition = start;
		carousel.style.left = currentPosition + 'px';
	}
	else
	{
		carousel.style.left = currentPosition + 'px';	
	}
	
}

function previous()
{
	currentPosition += increment;
	if (currentPosition > start)
	{
		currentPosition = end;
		carousel.style.left = currentPosition + 'px';
	}
	else
	{
		carousel.style.left = currentPosition + 'px';
	}
}





//document.getElementById("img_loc").style.top = document.getElementById("y").value + '%';
//document.getElementById("img_loc").style.left = document.getElementById("x").value + '%';