$(document).ready(function(){
	var slides = $('.folio'),
	slideshow = {width:0,height:0};
	
    // init functions for each div
	initfolio();
	
	/* start scrolling functions */
	
	// assign the rows
	var $thcontainer = $('div#portfolio ul');
	$thcontainer.animate({marginLeft:2}, 0);
	var $container = $('div#portfolio');
	
	// set width || 200 is image width plus 28 for the margin
	var maskWidth = 924;
		
	var topWidth = Math.ceil($('#portfolio ul li').length/2) * 235;
		
	$container.css('width',maskWidth + 'px');
	$thcontainer.css('width',topWidth + 'px');
	
	$('div.seeAll p:last-child').hover(function(){
		$(this).addClass('actNext');
		$(this).removeClass('next');
	},function(){
		$(this).removeClass('actNext');
		$(this).addClass('next');
	}).click(function(){
		movethumbs(false);
	});
	
	$('div.seeAll p:first-child').hover(function(){
		$(this).addClass('actPrev');
		$(this).removeClass('prev');
	},function(){
		$(this).removeClass('actPrev');
		$(this).addClass('prev');
	}).click(function(){
		movethumbs(true);
	});
	function movethumbs(b){
		$thcontainer.stop();
		var end = $container.width() - $thcontainer.width() + 30;
		if(b){
			$thcontainer.animate({marginLeft:2}, 'slow');
		}else{			
			if($container.width() < $thcontainer.width()){
				$thcontainer.animate({marginLeft:end}, 'slow');
			}
		}
	}
});