//Set Up Page 
jQuery(function( $ ){		
		
	//borrowed from jQuery easing plugin
	//http://gsgd.co.uk/sandbox/jquery.easing.php
	$.easing.elasout = function(x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
	};
	
	//by default, the scroll is only done vertically ('y'), change it to both.
	$.scrollTo.defaults.axis = 'xy'; 			
	//this one is important, many browsers don't reset scroll on refreshes
	$('#gallery-scroll').scrollTo( 0 );//reset all scrollable panes to (0,0)
	$.scrollTo( 0 );//reset the screen to (0,0)

});

$(document).ready( function() {

$('#gallery-scroll ul').addClass("view");

$scrollContainer = $('#gallery-scroll');
$galImg = $('#gallery-scroll img');	

 
$(function scrollHighlight() {
	var images = new Array();
	
	$('#gallery-scroll img:eq(0)').addClass("imageOn");
	
	$($galImg).each(function() {
		var imgWidth = $(this).width();
		images.push ([imgWidth,this]);
	});	
			
				
	$($scrollContainer).scroll(function() {
		$('.on ul').hide();
		var scrollerPos = $(this).scrollLeft();
		var $lastImage = $('#gallery-scroll li.last img');
		
		//find total width of all images
		var totalWidth = 0;
		for (t=0; t<images.length; t++) {
			totalWidth += images[t][0];
		}
		//set up last image that does not reach leftPos
		var totalImages = totalWidth;
		var lastImageWidth = $($lastImage).width();
		if (lastImageWidth < $($scrollContainer).width()) {
			var lastImageWidth = $($scrollContainer).width();
		}
		var result = totalImages - lastImageWidth;		
		
		var leftPos = 0;
		$($galImg).removeClass();
		for (i=0; i<images.length; i++) {
			leftPos += images[i][0];
			if (scrollerPos < leftPos-100) {
				images[i][1].className='imageOn';
				break;
			}
			else if ( scrollerPos > result || scrollerPos == result ) {
				$($lastImage).addClass("imageOn");
			break;
			}	
		}
		
	});	
	
	
//Scroll to section dependent on imageNavigation
function scroller($scrollContainer,scrollToItem) {
	$scrollContainer.stop().scrollTo(scrollToItem, 800 );
}

$(function imageNavigation() {
	
	var links = $("#nav-controller a");

	//Set up Drop down
	$('#nav-controller').append('<p><span>view portfolio</span></p>');	
	$('#nav-controller').addClass('on');
	//$('.on p').css('opacity',0.3);
	
	
	$(".on p").click(function(){
	  $(".on ul").slideToggle("slow");
	  $(this).toggleClass("active");
	});

	
	//Set up Links
	/*for (z=0; z<links.length; z++) {
		var targetItem = "li:eq("+z+")";
		links[z].scrollToItem = targetItem;
		links[z].onclick = function() {
			var $targetOpacity = $(this).attr('href');
			$($targetOpacity).addClass('imageOn')
			$('.on ul').hide();
			scroller($scrollContainer,this.scrollToItem);
			return false;
		}
	}*/

	for (z=0; z<links.length; z++) {
		//var targetItem = "li:eq("+z+")";
		//links[z].scrollToItem = targetItem;
		links[z].onclick = function() {
			var $targetOpacity = $(this).attr('href');
			var $targetImage = $(this).attr('href');
			$($targetOpacity).addClass('imageOn')
			$('.on ul').hide();
			scroller($scrollContainer,$targetImage);
			return false;
		}
	}


});	
	
	
	
 });

});