var sectionNum;
var section;
var lastSectionNum;
var currentProjectNum;
var lastProjectNum;
var nextSectionLink;
var prevSectionLink;

var scrollRightPoint = -1;
var scrollLeftPoint = -1;

var currentPosition = 0;

$(function() { 
		   
	// which position should the portfolio details slider be in, based on cookie?
	if ($.cookie('portfolio_details_slider')=='up') {
		$("#portfolio_details .portfolio_slider").css("top","0px");
		$(".btn").removeClass("up");
		$(".btn").addClass("down");
		$("#details_btn").text("Hide Details");
	} 
	
	// click listener for portfolio details slider
	$(".btn").click(function () {
		if ($(this).hasClass("down")) {
			goDown($('#details_container'));
		} else {
			goUp($('#details_container'));
		}
	});

	// portfolio thumbnail rollovers (display title of project)
	$("#portfolio_thumbs ul li").bind('mouseover',function(){
		$("#thumb_rollover").html ('<b> -</b> '+$(this).children("a").children("img").attr("alt"));
	});
	
	$("#portfolio_thumbs ul li").bind('mouseout',function(){
		$("#thumb_rollover").html ('');
	});
	
	// get section and project number info from hidden input fields on the page
	sectionNum = parseInt($('#sectionNum').val());
	section = $('#sectionName').val();
	lastSectionNum = parseInt($('#lastSectionNum').val());
	currentProjectNum = parseInt($('#currentProjectNum').val());
	lastProjectNum = parseInt($('#lastProjectNum').val());
	nextSectionLink = $('#nextSectionLink').val();
	prevSectionLink = $('#prevSectionLink').val();
	
	// if we are directly accessing a project by a direct URL (for example through the sitemap),
	// or the last project of a section if we are browsing through the portfolio in reverse order,
	// we need to move the carousel so it shows the current project
	if (currentProjectNum > 9) {
		if ((lastProjectNum - currentProjectNum) < 9) {
			var number = lastProjectNum - 9;
			var distance = currentPosition - (number * 35);
			$("#carousel").animate( {left: distance+"px"},800,"easeOutExpo");
			currentPosition = distance;
			scrollRightPoint = -1;
			scrollLeftPoint = number;
		}
	// otherwise, start the carousel at the beginning
	} else {
		scrollPosition = 0;
		currentPosition = 0;
		scrollRightPoint = 9;
	}

	ajaxify();
 
});

function goUp(slider) {
	var thisID = slider.parent().parent().attr("id");
	$(".btn").removeClass("up");
	$(".btn").addClass("down");
	if (thisID == 'portfolio_services') {
		$("#details_btn").text("Hide Services");
		$.cookie('portfolio_services_slider','up', { path: '/', domain: 'www.interfaceengineering.com'});
	} else {
		$("#details_btn").text("Hide Details");
		$.cookie('portfolio_details_slider','up', { path: '/', domain: 'www.interfaceengineering.com'});
	}
	slider.animate( {top:"0px"},800,"easeOutExpo");	
}

function goDown(slider) {
	var thisID = slider.parent().parent().attr("id");
	$(".btn").removeClass("down");
	$(".btn").addClass("up");
	if (thisID == 'portfolio_services') {
		$("#details_btn").text("Show Services");	
		$.cookie('portfolio_services_slider','down', { path: '/', domain: 'www.interfaceengineering.com'});
		slider.animate( {top:"64px"},800,"easeOutExpo");
	} else {
		$("#details_btn").text("Show Details");	
		$.cookie('portfolio_details_slider','down', { path: '/', domain: 'www.interfaceengineering.com'});
		slider.animate( {top:"136px"},800,"easeOutExpo");
	}
}

function ajaxify() {
	
	// if we are on the last project and last section, disable the right arrow button
	if (currentProjectNum == lastProjectNum && sectionNum == lastSectionNum){
		$('#arrow_right').html('');
		$('#arrow_right').addClass("disabled");
	}

	// which projects do we show when the next and previous buttons are clicked?
	// project IDs are in hidden input fields on the page
	// if there is no next or previous ID, that means we are at the first or last project of a section
	var prevID = $("#prevID").val();
	var nextID = $("#nextID").val();
	
	// add actions for previous arrow click
	if (prevID!='') {
		$("#arrow_left a").removeAttr('href');
		$("#arrow_left a").bind('click',function(e) {
		
			// scroll the carousel if we are at the left limit
			if (currentProjectNum == scrollLeftPoint) {
				
				if (scrollLeftPoint >= 10) {
					var number = 10;
					scrollRightPoint = scrollLeftPoint - 1;
					scrollLeftPoint = scrollLeftPoint - 10;
				} else {
					var number = scrollLeftPoint;
					scrollLeftPoint = -1;
					scrollRightPoint = 9;
				}
				var distance = currentPosition + (number * 35);
				$("#carousel").animate( {left: distance+"px"},800,"easeOutExpo");
				currentPosition = distance;
			}
			
			// now update the page with the new project
			update(prevID);
		});	
	}
	
	// add actions for next arrow click
	if (nextID!='') {
		$("#arrow_right a").removeAttr('href');	
		$("#arrow_right a").bind('click',function(e) { 
		
			// scroll the carousel if we are at the right limit
			if ((currentProjectNum == scrollRightPoint) && (lastProjectNum > scrollRightPoint)) {
				
				if ((lastProjectNum - scrollRightPoint) >= 10) {
					var number = 10;
					scrollLeftPoint = scrollRightPoint + 1;
					scrollRightPoint = scrollRightPoint + 10;
					
				} else {
					var number = lastProjectNum - scrollRightPoint;
					scrollRightPoint = -1;
					scrollLeftPoint = lastProjectNum - 9;
				}
				var distance = currentPosition - (number * 35);
				$("#carousel").animate( {left: distance+"px"},800,"easeOutExpo");
				currentPosition = distance;
			}
			
			// now update the page with the new project
			update(nextID);		
		});
	}
	
	// add actions for project thumbnail clicks
	$('#thumb_container ul li').each( function() {
		$(this).children("a").removeAttr('href');
		
		// the project ID is printed as part of the ID of the <li> containing the thumbnail e.g. "id="ID-77"
		var thumbID = $(this).attr("id").substring(3);
		$(this).bind('click',function(e) {
			// update the page with the new project
			update(thumbID);
			$(this).unbind('click');
		});
	});
	
}

function update(newID) { 

	// current menu order number of the project ID to display
	currentProjectNum = parseInt($('#ID-'+newID).attr("class").substring(4));
	
	// is the detail slider up or down?
	var  detailBtnClass = $(".btn").attr("class");
	
	// disable/enable left arrow and get information pertaining to the *new* previous project
	if (currentProjectNum == 0) {
		if (sectionNum == 0) {
			$('#arrow_left').html('');
			$('#arrow_left').addClass("disabled");
		} else {
			if ($('#arrow_left').hasClass("disabled")) $("#arrow_left").removeClass("disabled");
			$("#prevID").val('');
			$('#arrow_left').html('<a href="'+prevSectionLink+'" class="block"><span>Previous Project</span></a>');
		}
	} else {
		var prevProjectNum = currentProjectNum - 1;
		var prevProjectID = $(".num-"+prevProjectNum).attr("id").substring(3);
		$("#arrow_left").removeClass("disabled");
		$("#arrow_left").html('<a class="block"><span>Previous Project</span></a>');
		$("#prevID").val(prevProjectID); 
	}

	// disable/enable right arrow and get information pertaining to the *new* next project
	if (currentProjectNum == lastProjectNum) {
		if (sectionNum == lastSectionNum) {
			$('#arrow_right').html('');
			$('#arrow_right').addClass("disabled");
		} else {
			if ($('#arrow_right').hasClass("disabled")) $('#arrow_right').removeClass("disabled");
			$("#nextID").val('');
			$('#arrow_right').html('<a href="'+nextSectionLink+'" class="block"><span>Next Project</span></a>');
		}
	} else {
		var nextProjectNum = currentProjectNum + 1;
		var nextProjectID = $(".num-"+nextProjectNum).attr("id").substring(3);
		$('#arrow_right').html('<a class="block"><span>Next Project</span></a>');
		$('#arrow_right').removeClass("disabled");
		$("#nextID").val(nextProjectID);
	}
	
	
	// AJAX calls to load new content
	
	$("#main_photo").html('');									   	
	$("#main_photo").load('/portfolio-image.php', {id: newID, section: section});
	
	$("#image_details").html('');									   	
	$("#image_details").load('/portfolio-imagedetails.php', {id: newID});								   	

	$("#details_container").html(''); 
	$("#details_container").load('/portfolio-details.php', {id: newID, btnClass:detailBtnClass }, function(){
		// this code runs on completion of new details loading:
		
		// we need to reactivate event listeners for arrows with the new next/previous information
		// so we'll re-run the ajaxify funtion:
		ajaxify();
		
		// give the correct thumbnail the 'on' state
		$('#thumb_container ul li').removeClass("on");
		$('#ID-'+newID).addClass("on");
		
		// because we've reloaded the content in the details slider,
		// we need to re-activate event listener for hide/show details
		$(".btn").click(function () {
			if ($(this).hasClass("down")) {
				goDown($('#details_container'));
			} else {
				goUp($('#details_container'));
			}
		});
	});
	
}