var animSpeed = 200;
	var panelWidth = 750;
	
	$(document).ready(function(){


		// get the page's body class
		var thisPage = $("body").attr("class");

		// initialize by adding our magic slider classes
		$("#showcase-featured").addClass("showcase-slider");
		$("#showcase-featured div.item").addClass("item-slider");


		// and, let's also do something about those previews
		$("ol.previews").addClass("previews-large");

		// however, if there's an .external-link class, load a new window
		$("ol.previews a.external-link").click(function(){
			var urlPath = $(this).attr("href");
			window.open(urlPath, "bcExternal");
			return false;
		});
		
		// if there's no .external-link class, pop up the large image
		$("ol.previews a:not(.external-link)").click(function(){
			var thisCaption = $(this).text();

			// no captions on portfolio pages, please
			if (thisPage != "portfolio") {
				$(this).parent().append('<span class="caption">' + thisCaption + '</span>');
			}

			// create a new image object, add it and fade in
			var imgPath = $(this).attr("href");
			$(this).parent().append('<img src="' + imgPath + '" width="725" height="425" />').css({display:"none"}).fadeIn(animSpeed * 2);
			// also add a virtual "close" link
			$(this).parent().append('<span class="close">Close</span>');
			// set the class, and then perform cleanup duties after
			$(this).parent().addClass("selected").click(function(){
				$(this).children("span").remove();
				$(this).children("img").fadeOut(animSpeed, function(){
					$(this).parent().removeClass("selected");	
					$(this).remove();
				});
			});
			return false;
		});


		// set all the UI bits in one go
		function drawUI(position, direction) {
			setPosition(position, direction);
			setTitle(position);
			setNav(position);
		}

		// set the item title and counter status
		function setTitle(counter) {
			var currentPos = counter;
			$("h3.work-title").text("").prepend('<span class="counter">' + currentPos + '/' + (items.length - 1) + '</span>');
			// let's make sure the title attribute is set first, if not show counter only
			if ($("#item-" + currentPos).attr("title")) {
				var title = $("#item-" + currentPos).attr("title");
				$("h3.work-title").prepend(title + " ");
			}
		}
		// set the nav links for the item pager
		function setNav(counter) {
			var next = counter + 1;
			if (counter < (items.length - 1)) {
				$("#pager .next a").attr("href", "#item-" + next);
			}
			var prev = counter - 1;
			if (counter > 1) {
				$("#pager .previous a").attr("href", "#item-" + prev);
			}
		}
		// set new position of items and slide them in place
		function setPosition(current, direction) {

			// current will be index 1
			// but our array is index 0

			var offsets = new Array();
			
			// first, set descending offsets for all items prior to current
			offsetValue = 0;
			// debug:
			//$("body").append(current + "/" + (items.length - 1)  + " | ");
			for (i = current; i > 0; i--) {
				offsetValue = offsetValue - panelWidth;
				offsets[i] = offsetValue;
				// debug:
				//$("body").append("a" + i + " " + offsets[i] + " | ");
			}
			// then, set ascending offsets for all items after current
			offsetValue = 0;
			for (i = current; i <= (items.length - 1); i++) {
				offsetValue = offsetValue + panelWidth;
				offsets[i] = offsetValue;
				// debug:
				//$("body").append("b" + i + " " + offsets[i] + " | ");
			}
			offsets[current] = 0;


			// the adjacent panel is the one we're animating along with the current panel
			// counter-intuitively, it's in the opposite direction that the panels are traveling
			var adjacent = false;
			if (direction == "left") {
				adjacent = current + 1;
			} else {
				adjacent = current - 1;
			}

			// debug:
			// $("body").append("p" + current + " " + adjacent + " | ");
			// $("body").append("<br />");

			for (i = 1; i <= (items.length - 1); i++) {
				// we only want to animate the visible ones
				// otherwise, rapid double-clicks lead to ugly stacking errors
				if ((i == current) || (i == adjacent)) {
					// slide portfolio pages, fade the rest
					if (thisPage == "portfolio") {
						$("#showcase-featured #" + items[i]).animate({left:offsets[i]}, animSpeed);
					} else {
						// for fades, we need to fade in the current, as we fade out the adjacent
						if (i == current) {
							$("#showcase-featured #" + items[i]).css({left:offsets[i], display:"none"}).fadeIn(animSpeed);
						} else {
							// we'll fade out the adjacent first, then set a callback to move it to its new position
							$("#showcase-featured #" + items[adjacent]).fadeOut(animSpeed * 2, function(){
								$(this).css({left:offsets[adjacent]});
							});
						}
					}
				} else {
					// if we're not going to animate them though, let's just move the offsets
					$("#showcase-featured #" + items[i]).css({left:offsets[i]});
				}
			}
		}





		// start by getting a list of every "item" div on the page
		var items = new Array();
		var i = 1;
		$("div.wrap2a div").each(function(){
			// if we found that "item" class that we're looking for, then let's throw the element's id into our array
			if ($(this).hasClass("item")) {
				items[i] = $(this).attr("id");
				i++;
			};
		});


		// initialize starting position
		var currentPanel = 1;
		drawUI(currentPanel, "");

		
		// the meat of the slider. One set for prev, another for next
		$("#pager li.next a").click(function() {
			// let's only do this if there's more to come
			if (currentPanel < (items.length - 1)) {
				currentPanel++;
				drawUI(currentPanel, "right");
			}
			return false;
		});
		$("#pager li.previous a").click(function() {
			// let's only do this if there's more to come
			if (currentPanel > 1) {
				currentPanel--;
				drawUI(currentPanel, "left");
			}
			return false;
		});


	});