var animateScrolling = false;
var carouselScrolling = false;
var carouselTimeout = null;
var carouselTime = 10000;
var firstScroll = true;

$(document).ready( function() { 
	
	// Make only first 3 categories visible
	$('div.category:gt(2)').css( { 'opacity': '0', 'visibility': 'hidden' } );
	
	// Setup carousel
	$('#carousel a.carousel_lArrow').click( function( e ) {
		e.preventDefault();
	
		if( carouselScrolling ) return;
		carouselScrolling = true;
		clearTimeout( carouselTimeout );
		
		// Move last image to front
		var image = $('#carousel_inner div.carousel_image:last').detach();
		$('#carousel_inner').prepend( image );
		$('#carousel_inner').css( 'left', '-980px' );
		
		var max = $('#carousel_buttons a.carousel_button').size() - 1;
		
		$('#carousel_inner').animate( { 'left': '0px' }, 600, 'swing', function() {
			// Update carousel dots
			var pos = $('#carousel_buttons a.carousel_button.active').prevAll().length;
			if( pos == 0 )
			{
				pos = max;
			}
			else
			{
				pos--;
			}
			$('#carousel_buttons a.carousel_button').removeClass( 'active' );
			$('#carousel_buttons a.carousel_button:eq('+pos+')').addClass( 'active' );
			
			carouselScrolling = false;
			carouselTimeout = setTimeout( "$('#carousel a.carousel_rArrow').click();", carouselTime );
		} );
	} );
	$('#carousel a.carousel_rArrow').click( function( e ) {
		e.preventDefault();
		
		if( carouselScrolling ) return;
		carouselScrolling = true;
		clearTimeout( carouselTimeout );
		
		var max = $('#carousel_buttons a.carousel_button').size() - 1;
		
		$('#carousel_inner').animate( { 'left': '-980px' }, 600, 'swing', function() {
			// Move first image to end
			var image = $('#carousel_inner div.carousel_image:first').detach();
			$('#carousel_inner').append( image );
			$('#carousel_inner').css( 'left', '0px' );
			
			// Update carousel dots
			var pos = $('#carousel_buttons a.carousel_button.active').prevAll().length;
			if( pos == max )
			{
				pos = 0;
			}
			else
			{
				pos++;
			}
			$('#carousel_buttons a.carousel_button').removeClass( 'active' );
			$('#carousel_buttons a.carousel_button:eq('+pos+')').addClass( 'active' );
			
			carouselScrolling = false;
			carouselTimeout = setTimeout( "$('#carousel a.carousel_rArrow').click();", carouselTime );
		} );
	} );
	
	// Start autoscrolling
	carouselTimeout = setTimeout( "$('#carousel a.carousel_rArrow').click();", carouselTime );
	
	// Setup slider widths
	var sliderWidth = $('div.category').size() * 326;
	var sliderMax = ( $('div.category').size() - 3 ) * 326;
	$('#categories_scroller').width( sliderWidth + "px" );
	
	// Setup slider
	$('#categories_scrollbar div.ui-slider').slider( {
		animate: 500,
		min: 0,
		max: sliderMax,
		start: function( event, ui ) {
			$('#categories_scroller div.category:eq(3)').stop();
			if( firstScroll )
			{
				// Google Analytics
				_gaq.push(['_trackEvent', 'Landing', 'Scroll']);
				firstScroll = false;
			}
		},
		slide: function( event, ui ) {
			if( animateScrolling )
			{
				return false;
			}
			
			// Only update css if the bar is being dragged
			if( !$(event.originalEvent.target).is( "div.ui-slider" ) )
			{
				$('#categories_scroller').css( 'left', '-'+ui.value+'px' );
				setOpacity( ui.value );
			}
		},
		change: function( event, ui ) {
			if( animateScrolling )
			{
				return false;
			}
			
			$('#categories_scroller div.category:eq(3)').stop();
			
			// Don't animate if the handle (a) was used or if the slider ends were clicked
			if( event.originalEvent == null || !$(event.originalEvent.target).is( "a" ) )
			{
				animateScrolling = true;
				$('#categories_scroller').animate( 
					{ 'left' : '-'+ui.value+'px' }, 
					{
						duration: 500, 
						easing: 'linear',
						step: function(now, fx) {
							setOpacity( Math.round( Math.abs( now ) ) );
						},
						complete: function() {
							animateScrolling = false;
							
							// Make sure all elements are either fully visible or not
							$('#categories_scroller div.category').each( function( index ) {
								var curOpacity = $(this).css( 'opacity' );
								var roundOpacity = Math.round( curOpacity );
								if( roundOpacity != curOpacity )
								{
									$(this).css( 'opacity', roundOpacity );
									if( roundOpacity == 0 )
									{
										$(this).css( 'visibility', 'hidden' );
									}
								}
							} );
						}
					}
				);
			}
		},
		stop: function( event, ui ) {
			if( animateScrolling )
			{
				return;
			}
			
			if( ui.value % 326 != 0 )
			{
				var value = Math.round( ui.value / 326 ) * 326;
				$(this).slider( "option", "value", value );
			}
		}
	} );
	
	// Add slider hover effect for mouse over
	fadeScrollItemIn();
	
	// Add click event for the slider ends (since actual slider does not fill up the perceived width)
	$('#categories_scrollbar').click( function( e ) {
		e.preventDefault();
	
		// Determine which end of scroll bar was clicked
		if( !e ) var e = window.event;
		var posx;
		if( e.layerX )
		{
			posx = e.layerX
		}
		else
		{
			posx = e.clientX - $('#portfolioSlider').offset().left;
		}
				
		if( posx < 490 ) // Left side
		{
			// Set slider to min value
			$('#categories_scrollbar div.ui-slider').slider( "value", 0 );
		}
		else // Right side
		{
			// Set slider to max value
			var sliderMax = $('#categories_scrollbar div.ui-slider').slider( "option", "max" );
			$('#categories_scrollbar div.ui-slider').slider( "value", sliderMax );
		}
	} );
	
} );

// Adjust opacity/visibilty of offscreen scroll items
function setOpacity( value )
{
	// Determine item position
	var leftPos = Math.floor( value / 326 );
	var rightPos = leftPos + 3;
	
	// Determine opacity
	var opacity_right = Math.round( ( value % 326 ) / 326 * 100 ) / 100;
	var opacity_left = 1 - opacity_right;
	
	// Set opacity
	$('#categories_scroller div.category:eq('+leftPos+')').css( 'opacity', opacity_left );
	$('#categories_scroller div.category:eq('+rightPos+')').css( 'opacity', opacity_right );

	// Set visibility
	if( opacity_left > 0 )
	{
		$('#categories_scroller div.category:eq('+leftPos+')').css( 'visibility', 'visible' );
	}
	else
	{
		$('#categories_scroller div.category:eq('+leftPos+')').css( 'visibility', 'hidden' );
	}
		
	if( opacity_right > 0 )
	{
		$('#categories_scroller div.category:eq('+rightPos+')').css( 'visibility', 'visible' );
	}
	else
	{
		$('#categories_scroller div.category:eq('+rightPos+')').css( 'visibility', 'hidden' );
	}
}

function fadeScrollItemIn()
{
	$('#categories_scroller div.category:eq(3)').css( 'visibility', 'visible' );
	
	$('#categories_scroller div.category:eq(3)').animate(
		{ 'opacity' : 0.4 }, 
		{
			duration: 1000, 
			easing: 'linear',
			complete: function() {
				fadeScrollItemOut();
			}
		}
	);
}
function fadeScrollItemOut()
{
	$('#categories_scroller div.category:eq(3)').animate(
		{ 'opacity' : 0.2 }, 
		{
			duration: 1000, 
			easing: 'linear',
			complete: function() {
				fadeScrollItemIn();
			}
		}
	);
}