jQuery(function() {
	prepThumbMenu();
	$('#portfolio-menu').scrollable({ 
   		size: 1, 
    	vertical: false, 
//		prev:'a.previous',     
//		next:'a.next', 
		activeClass:'selected', 
		items: '.items',
		navi: '.navi'
		
	});
	//set .items height to match scrollable area
	setScrollableHeight();
	//adjust scrollable height on text resize
	TextResizeDetector.TARGET_ELEMENT_ID = 'footer';
	TextResizeDetector.addEventListener(setScrollableHeight,null )
});


function prepThumbMenu() {
	//CONFIGURE
	var pageNumber   = 1;
	var itemsPerPage = 6;
	var items       = $('.thumb-menu li');
	var numPages     = Math.ceil($('.thumb-menu li').length / itemsPerPage);
	//CREATE THE VIEW PORT
	$('.thumb-menu').wrap('<div id="portfolio-menu"></div>').wrap('<div class="items"></div>');
	//CREATE PAGE NAV
	if (numPages > 1) {
		$('#portfolio-menu').prepend('<div class="navi"><a>1</a></div>');
	}
	//ID THE FIRST LIST
	$('.thumb-menu').attr('id', 'page' + pageNumber);
	//CREATE THE SUBSEQUENT PAGES
	pageNumber++;
	for (var i = pageNumber; i <= numPages; i++) {
		$('#portfolio-menu .items').append('<ul class="thumb-menu" id="page' + i +'"></ul>');
		$('.navi').append('<a>' + i + '</a>');
	}
	//ADD ITEMS TO THE APPROPRIATE PAGE
	var num = 0;
	for (var i = itemsPerPage; i < $('.thumb-menu li').length; i++) {
		$(items).eq(i).appendTo('#page' + pageNumber);
		num++;
		if (num == itemsPerPage) {
			num = 0;
			pageNumber++;
		}
	}
	//ADD THUMB ACTION TO ENABLE JS DETAIL
	$('.image-frame').each(function() {
		this.href = this.href + 'i/1'; 
	});
	
}




function setScrollableHeight() {
	$('#portfolio-menu .items').height($('#portfolio-menu .__scrollable').height());
}