var ta = false; // timer
var bh = 0; // background image height - change this if the background image changes
var wh = 0; // window height
var bottom = 0; // bottom of page (roughly)

function make_active(clss) {
	jQuery('#nav li').removeClass('active')
		.filter('li.'+clss).addClass('active');
}

$(document).ready( function( ) {
	// this grabs the height of the background image
	$('<img />')
		.attr('src',
			$('body')
				.css('background-image')
				.replace(/^url\(['"]?/g, '')
				.replace(/['"]?\)$/g, '')
		)
		.hide( )
		.appendTo('body')
		.load( function( ) {
			bh = $(this).height( ); //get height
			$(this).remove( );
		});

	// get some other measurements
	wh = $(window).height( );
	bottom = $('#bottom').position( ).top;

	$(window).scroll( function( ) {
		// we need to put the div_top inside the
		// function, because it might change
		var top = $(this).scrollTop( );

		var nav_top = $("#nav-container").position( ).top;
		var $nav = $("#nav-container");

		$nav.toggleClass('sticky', top > nav_top);

		move_background(top);

		// now make the highlights for the nav work
		if ($('div.content > div#bottom:in-viewport').size( )) {
			make_active('contact');
		}
		else {
			make_active($('div.content > div:in-viewport:first').attr('id'));
		}
	});

	// fake a window scroll event so we update everything as needed
	$(window).scroll( );

	$('#tabs').cycle({
		fx : 'scrollLeft',
		speed : 'slow',
		timeout : 0,
		pager : '#tabs_trigger',
		pagerAnchorBuilder: function(idx, slide) {
			// return selector string for existing anchor
			return '#tabs_trigger li:eq(' + idx + ') a';
		}
	});

	$('#nav').localScroll( );

	// color the image on image hover
	$('div.image').hover( function( ) {
		$('img.color', this).fadeIn( );
	}, function( ) {
		$('img.color', this).fadeOut( );
	});

	// show the captions on image hover
	$('div.image:has(div.caption)').hover( function( ) {
		$('div.caption', this).slideDown('slow');
	}, function( ) {
		$('div.caption', this).slideUp('slow');
	});

	// built the functions that will run the slideshows and drop-downs
	$('div.trigger').css('cursor', 'pointer').each( function( ) {
		var id_num = $(this).attr('id').slice(8);

		$('#show_'+id_num)
			.after('<div class="nav"><div id="prev_'+id_num+'" class="prev">Prev</div> <div id="next_'+id_num+'" class="next">Next</div></div>')
			.cycle({
				fx:      'fade',
				speed:   'slow',
				timeout: 0,
				next:    '#next_'+id_num,
				prev:    '#prev_'+id_num,
				after:   function(currSlideElement, nextSlideElement, options, forwardFlag) {
					var this_idx = get_curr_index(options.nextSlide, options.elements.length);
					ta = setTimeout("$('#small_nav_"+id_num+" a:eq("+this_idx+")').click( ); ta = false;", 1000);
				}
			});

		$('#small_show_'+id_num)
			.after($('<div id="small_nav_'+id_num+'"></div>').hide( ))
			.cycle({
				fx:      'fade',
				speed:   'slow',
				timeout: 0,
				pager:   '#small_nav_'+id_num
			});

		$(this).click( function( ) {
			if ( ! $('div.work-detail:visible').is('#detail_'+id_num)) {
				$('div.work-detail:visible').slideUp( );
			}

			$('#detail_'+id_num).slideToggle( );
		});
	});

	$('div.work-detail div.close-btn a').click( function( ) {
		$('div.work-detail:visible').slideUp( );
	});
});

function get_curr_index(next, count) {
	next = parseInt(next);
	count = parseInt(count);

	if (0 == next) {
		return count - 1;
	}

	return next - 1;
}

function move_background(top) {
	var scroll = (top / (bottom - wh));
	var bt = parseInt(-(scroll * bh) + (0.5 * wh));

	$('body').css('background-position', '0 '+bt+'px');
}