var iOSDevice = false;

if (navigator.userAgent.match(/like Mac OS X/i)) {
	iOSDevice = true;
}

function setupCarouselPageItems(id, showOverFlow) {

	var itemsElement = document.getElementById(id);

	var items = $(itemsElement).children();

	if(iOSDevice) {
	
		$(function() {
			$(itemsElement).scrollpane({
				setupCss: false,
				onscrollfinish: function(pos, page) {
					updateCarouselPageControl(id, page);
				}
			});
		});
		
		// setup based on the ios-scroll.js plugin requirements
		
		itemsElement.style.overflow = "hidden";
		itemsElement.style.position = "absolute";

		if(showOverFlow) {
			itemsElement.style.overflow = "visible";
			itemsElement.style.position = "relative";
		}
				
		for (i=1;i<items.length;i++) {
			items[i].style.left = (i * itemsElement.offsetWidth) + "px";
			items[i].style.position = "absolute";				
		}
		
	}else {
		// calculate total width of items
		itemsElement.style.width = (items.length * itemsElement.offsetWidth) + "px";
	}
		
	setupCarouselPageControl(id);
	updateCarouselPageControl(id, 0);
}

function pageCarouselLeft(id) {
				
	var itemsElement = document.getElementById(id);
	var items = $(itemsElement).children();
	var currentPage = currentPageForItems(id);
	
	if(iOSDevice) {
		
		var pageNum = currentPage - 1;
		
		if(pageNum < 0)
			pageNum = 0;
	
		$(itemsElement).showpage(pageNum);
		
	}else {
	
		currentPage--;
		
		if(currentPage <= 0) {
			currentPage = 0;
		}
		
		scrollCarouselToPageNum(id, currentPage);
	}
}
function pageCarouselRight(id) {

	var itemsElement = document.getElementById(id);
	var items = $(itemsElement).children();
	
	var currentPage = currentPageForItems(id);
			
	if(iOSDevice) {
	
		$(itemsElement).showpage(currentPage + 1);
		
	}else {
	
		currentPage++;

		if(currentPage >= items.length - 1) {
			currentPage = items.length - 1;
		}
		
		scrollCarouselToPageNum(id, currentPage);
	}
}

function scrollCarouselToPageNum(id, pageNum) {

	var itemsElement = document.getElementById(id);
	var parent = document.getElementById(id+'Wrapper');
	var windowWidth = parent.offsetWidth;
	
	var newOffset = -pageNum*windowWidth;

	$(itemsElement).animate({"marginLeft": newOffset}); // jQuery
	
	updateCarouselPageControl(id, pageNum);
}

function setCarouseltoPageNum(id, pageNum) {

	var itemsElement = document.getElementById(id);
	
	if(iOSDevice) {
	
		$(itemsElement).showpage(pageNum);
		$('html, body').animate({scrollTop: $('html, body').offset().top}, 1000);

	}else {
	
		var parent = document.getElementById(id+'Wrapper');
		var windowWidth = parent.offsetWidth;
		
		var newOffset = -pageNum*windowWidth;
		itemsElement.style.marginLeft = newOffset + "px";
	
		updateCarouselPageControl(id, pageNum);
	}
}

function setupCarouselPageControl(itemsId) {

	var id = pageControlIdForCarouselId(itemsId);
	
	var element = document.getElementById(id);
	
	var sampleHTML = '<span class="pageControlItem "> &#8226; </span>';
	var html = "";
	
	var itemsElement = document.getElementById(itemsId);
	var pages = $(itemsElement).children();
	
	if(pages.length > 1) {
	
		for (i=0;i<=pages.length - 1;i++) {
			html+=sampleHTML;
		}
		
		element.innerHTML = html;
		updateCarouselPageControl(id, 0);
	}
}

function updateCarouselPageControl(itemsId, pageNum) {

	var currentPage = pageNum;
	
	var id = pageControlIdForCarouselId(itemsId);
	
	var element = document.getElementById(id);
	var items = $(element).children();

	for (i=0;i<=items.length;i++) {
		
		if(i == currentPage) {
		
			$(items[i]).addClass("currentPage");
			
		}else {
		
			$(items[i]).removeClass("currentPage");
		}
	}
}

function pageControlIdForCarouselId(id) {
	return id+'PageControlItems';
}

function currentPageForItems(id) {
	
	var pageNum = 0;
	var id = pageControlIdForCarouselId((id));
	var element = document.getElementById(id);
	var items = $(element).children();
		
	for (i=0;i<=items.length;i++) {
		if($(items[i]).hasClass("currentPage")) {
			pageNum = i;
			break;
		}
	}
	
	return pageNum;
}