// SETUP LAZYLOADER

	$(document).ready(function(){
		$("img").lazyload({
			threshold: 800,
			effect: "fadeIn",
			container: $('#project-stage'),
			event: "scroll"
		});
	});
	
// SETUP JSCROLLPANE

	$(document).ready(function(){
	
		var pane = $('#project-stage');
		
		function details_reset() {
			$('.project-details-wrapper').animate({'top':'-360px'}, {duration: 300, easing: 'linear'});
			if(!$.browser.msie){
				$('.project-details-callout').css({'-moz-transform':'scaleY(1)','-o-transform':'scaleY(1)','-webkit-transform':'scaleY(1)','transform':'scaleY(1)','bottom':'-23px'});
				$('.project-details-callout-title').animate({'bottom':'18px'}, {duration: 'slow', easing: 'swing'});
			}			
		}
		
		// INITIALISE
		$(function()
		{
			$(pane).jScrollPane(
				{ 
					clickOnTrack:false, 
					hijackInternalLinks:false,
					animateDuration:700,
					verticalGutter:100,
					showArrows:false,
					arrowButtonSpeed:250,
					horizontalDragMinWidth:200,
					horizontalDragMaxWidth:200
				}
			);
		});

		// SLIDER ANIMATE
		$(function()
		{
			var api = $(pane).data('jsp');
			function position()
			{
				currentX = api.getContentPositionX();
				api.getContentPane().find('.project').each(
					function()
					{
						if ($(this).position().left >= (currentX - 400)) {
							//project position
							target = ($(this).position().left);
							//get width of the current page padding (relative to window)
							doc_padding = (($(document).width() - $('#header').width()) / 2); 
							//scroll the project to the page padding less the offset
							if (target != currentX) {
								api.scrollToX(target, true);
							}
							details_reset();
							return false;
						} 					
					}
				);			
			}
			
			$(pane).bind('jsp-scroll-x', function() {
				$(document).unbind('mouseup.drag').bind('mouseup.drag',function() {
					position();
				});
			});
		
		});		

		// AUTO-SCROLL
		$(function() {
			var api_time = $(pane).data('jsp');
			var currentX = api_time.getContentPositionX();
			var lastX = $('.p-last .project-details-wrapper').attr('id');
			function interval_f() {
				interval = setInterval(function() {
					api_time.scrollByX(1010, true);
					var currentX = Math.floor((api_time.getContentPositionX()) / 10) * 10;
					if (lastX == currentX) {
						$('.project').fadeOut(40);
						api_time.scrollToX(0, true);
						$('.project').delay(800);
						$('.project').fadeIn(500);
					}
					details_reset();
					return false;			
				}, 12000);
			}
			$(pane).hover(
				function(){
					clearInterval(interval);
				}, function() {
					interval_f();
				}
			);
			$('.pp_pic_holder').live('mouseenter',
				function(){
					clearInterval(interval);
				});
		});
				
		// NAVI CONTROLS
		$(function() {
			var api_click = $(pane).data('jsp');
			$('.next').click(
				function(){
					api_click.scrollByX(1010, true);
					details_reset();
				}
			);
			$('.previous').click(
				function(){
					api_click.scrollByX(-1010, true);
					details_reset();
				}
			);			
		});
			
	});
	
// SETUP CUSTOM SCRIPT

	$(document).ready(function(){
		
		$(function() {	
		//DETAILS ROLLOUT
			$('.project-details-callout').hover(function() {
			//DETAILS CALLOUT HOVER OVER
				if($.browser.msie){
				//COMPENSATING FOR STRANGE IE 2px OFFSET
					var actual = '#'+-Math.floor(($('.jspPane').position().left) / 10) * 10;
				} else {
					var actual = '#'+-Math.round($('.jspPane').position().left);					
				}
				$(actual).hover(function() {
					//ACTUAL PROJECT HOVER OVER					
						if($(actual).css('top') == '-360px') {
							$(actual).animate({'top':'-355px'}, {duration: 100, easing: 'swing'});
						}
				}, function() {
					//ACTUAL PROJECT HOVER OFF
					if($(actual).css('top') == '-355px') {
						$(actual).animate({'top':'-360px'}, {duration: 100, easing: 'swing'});					
					}
					$(actual).unbind('mouseenter mouseleave click');
				});
				
			}, function() {
			//DETAILS CALLOUT HOVER OFF
			}), $('.project-details-callout').click(function() {
			//DETAILS CALLOUT CLICK
				if($.browser.msie){
				//COMPENSATING FOR STRANGE IE 2px OFFSET
					var actual = '#'+-Math.floor(($('.jspPane').position().left) / 10) * 10;
				} else {
					var actual = '#'+-Math.round($('.jspPane').position().left);					
				}
				$(actual).click(function() {
					if($(actual).css('top') != '0px') {
						$(actual).animate({'top':'0px'}, {duration: 'slow', easing: 'swing'});
						if(!$.browser.msie){
							$(actual).find('.project-details-callout').css({'-moz-transform':'scaleY(-1)','-o-transform':'scaleY(-1)','-webkit-transform':'scaleY(-1)','transform':'scaleY(-1)','bottom':'-25px'});
							$('.project-details-callout-title').animate({'bottom':'25px'}, {duration: 50, easing: 'swing'});
						}
					} else {
						$(actual).animate({'top':'-360px'}, {duration: 'slow', easing: 'swing'});
						if(!$.browser.msie){
							$(actual).find('.project-details-callout').css({'-moz-transform':'scaleY(1)','-o-transform':'scaleY(1)','-webkit-transform':'scaleY(1)','transform':'scaleY(1)','bottom':'-23px'});
						}
						$(actual).unbind('mouseenter mouseleave click');
						$('.project-details-callout-title').animate({'bottom':'18px'}, {duration: 'slow', easing: 'swing'});
					}	 
				});
			});
		});
				
		//SCROLLBAR ANIM
		$(function()
		{
			$('.jspHorizontalBar').hover(function() {
				$('.jspDrag').bind('mouseenter',function() {
					$('.jspDrag').animate({'top':'3px', 'max-height':'20px'}, {duration: 200, easing: 'swing'});
					}
				);
			}, function() {
				$('.jspDrag').animate({'top':'7px', 'max-height':'13px'}, {duration: 200, easing: 'swing'});
				$('.jspDrag').unbind('mouseenter');
			});
		});	
		
	});