// JavaScript Document

// Override the onload event
window.onload = function()
{	
	var $magicBox = $("#linkBox");
	var wOffset = 27;
	var lOffset = 38;
		
	// ===========================================
	// NAVIGATION
	//============================================
	
    $magicBox
        .width($(".currentItem a").width() + wOffset)
        .css("left", $(".currentItem a").position().left - lOffset)
        .data("origLeft", $magicBox.position().left)
        .data("origWidth", $magicBox.width());

	$("#list li a").hover(function() {
        $el = $(this);
		// Check to see if the link is already black
		if ($el.css("color") === "rgb(0, 0, 0)" || $el.css("color") === "#000") {
			$(".currentItem a").css("color","#000");
		}
		
		$el
			.css("color","#FFF")
			.css("text-decoration","none");	
		
        leftPos = $el.position().left - lOffset;
        newWidth = $el.width() + wOffset;
        $magicBox.stop().animate({
            left: leftPos,
            width: newWidth
        });
   	}, function() {
		
		$el.css("color","#000");
		$("#navigation .currentItem a").css("color","#FFF");
			
        $magicBox.stop().animate({
            left: $magicBox.data("origLeft"),
            width: $magicBox.data("origWidth")
        });
    });
	
	// ===========================================
	// SMOOTH SCROLLING
	//============================================
	$(function(){
		$('a[href*=#]').click(function() {
			if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
				&& location.hostname == this.hostname) {
				var $target = $(this.hash);
				$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
				if ($target.length) {
					var targetOffset = $target.offset().top;
		
					// Animate the scroll
					$('html:not(:animated),body:not(:animated)').animate({scrollTop: targetOffset - 10}, 500);
					return false;
				}
     	  	 }
   		});
	});
	
	
	// ===========================================
	// PORTFOLIO SIDE BOX
	//============================================
	
	var top = $('#allPanels').offset().top - parseFloat($('#allPanels').css('marginTop').replace(/auto/, 0));
  	var leftHeight = $("#leftSide").height();
	var stopSpot = leftHeight - 580;
	$("#rightSide").height(leftHeight);
	//alert(leftHeight);
	
	$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
  	//$("#debug").html(y);	
    
	if (y >= top - 8 && y <= stopSpot) {
		$('#allPanels').addClass('fixed');
		$('#allPanels').removeClass('pinned');
	} else if (y > stopSpot) {
		$('#allPanels').removeClass('fixed');
		$('#allPanels').addClass('pinned');
	} else {
		$('#allPanels').removeClass('fixed');
	}
  });
}