var slider ;
// when the DOM is ready...
$(document).ready(function () {

    var $panels = $('#slider .scrollContainer > div');
    var $container = $('#slider .scrollContainer');

    // if false, we'll float all the panels left and fix the width 
    // of the container
    var horizontal = true;

    // float the panels left if we're going horizontal
    if (horizontal) {
        $panels.css({
            'float' : 'left',
            'position' : 'relative' // IE fix to ensure overflow is hidden
        });

        // calculate a new width for the container (so it holds all panels)
        $container.css('width', $panels[0].offsetWidth * $panels.length);
    }

    // collect the scroll object, at the same time apply the hidden overflow
    // to remove the default scrollbars that will appear
    var $scroll = $('#slider .scroll').css('overflow', 'hidden');

    // apply our left + right buttons
//    $scroll
//        .before('<a class="left"  > left</a>')
//        .after('<a class="right"  > right </a>');

    // handle nav selection
    function selectNav() {
        $(this)
            .parents('ul:first')
                .find('a')
                    .removeClass('selected')
                .end()
            .end()
            .addClass('selected');
    }

    $('#slider .navigation').find('a').click(selectNav);

    // go find the navigation link that has this target and select the nav
    function trigger(data) {
        var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
        selectNav.call(el);
    }

    if (window.location.hash) {
        trigger({ id : window.location.hash.substr(1) });
    } else {
        $('ul.navigation a:first').click();
    }

    // offset is used to move to *exactly* the right place, since I'm using
    // padding on my example, I need to subtract the amount of padding to
    // the offset.  Try removing this to get a good idea of the effect
    var offset = parseInt((horizontal ? 
        $container.css('paddingTop') : 
        $container.css('paddingLeft')) 
        || 0) * -1;

    var scrollOptions = {
        target: $scroll, // the element that has the overflow

        // can be a selector which will be relative to the target
        items: $panels,

        navigation: '.navigation a',

        // selectors are NOT relative to document, i.e. make sure they're unique
        prev: 'a.prev', 
        next: 'a.next',

        // allow the scroll effect to run both directions
        axis: 'xy',

        onAfter: trigger, // our final callback

        offset: offset,

        // duration of the sliding effect
        duration: 800,

        // easing - can be used with the easing plugin: 
        // http://gsgd.co.uk/sandbox/jquery/easing/
        easing: 'swing'
    };

    // apply serialScroll to the slider - we chose this plugin because it 
    // supports// the indexed next and previous scroll along with hooking 
    // in to our navigation.
    slider = $('#slider').serialScroll(scrollOptions);

    // now apply localScroll to hook any other arbitrary links to trigger 
    // the effect
    $.localScroll(scrollOptions);

    // finally, if the URL has a hash, move the slider in to position, 
    // setting the duration to 1 because I don't want it to scroll in the
    // very first page load.  We don't always need this, but it ensures
    // the positioning is absolutely spot on when the pages loads.
    scrollOptions.duration = 1;
    $.localScroll.hash(scrollOptions);
//	$('#sub-nav a').click(
//					  function()
//					  { 
//					  	$.get(this.href, function(data)
//										{
//											$('#projects').append(data);
//										});
//						return false;
//					  });
});

//// Dave's Slider
//
//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").addClass("showcase-slider");
//		$("#showcase 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="../work/js/' + 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 #" + 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 #" + 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 #" + 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 #" + 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;
//		});
//
//
//	});