var $top = jQuery.noConflict();
$top(function() {
	
	var totalPanelstop		= $top(".scrollContainertop").children().size();
		
	var regWidthtop			= $top(".paneltop").css("width");
	var regImgWidthtop		= $top(".paneltop img").css("width");
	var regTitleSizetop		= $top(".paneltop h2").css("font-size");
	var regParSizetop		= $top(".paneltop p").css("font-size");
	var movingDistancetop	= 240;
	var curWidthtop			= 260;
	var curImgWidthtop		= 120;
	var curTitleSizetop		= "20px";
	var curParSizetop		= "15px";

	var $toppanels			= $top('#slidertopsection .scrollContainertop > div');
	var $topcontainer		= $top('#slidertopsection .scrollContainertop');

	$toppanels.css({'float' : 'left','position' : 'relative'});
    
	$top("#slidertopsection").data("currentlyMoving", false);

	$topcontainer
		.css('width', ($toppanels[0].offsetWidth * $toppanels.length) + 100 )
		.css('left', "180px");

	var scrolltop = $top('#slidertopsection .scrolltop').css('overflow', 'hidden');

	function returnToNormaltop(element) {
		$top(element)
			.animate({ width: regWidthtop })
			.find("img")
			.animate({ width: regImgWidthtop })
		    .end()
			.find("h2")
			.animate({ fontSize: regTitleSizetop })
			.end()
			.find("p")
			.animate({ fontSize: regParSizetop });
	};
	
	function growBiggertop(element) {
		$top(element)
			.animate({ width: curWidthtop })
			.find("img")
			.animate({ width: curImgWidthtop })
		    .end()
			.find("h2")
			.animate({ fontSize: curTitleSizetop })
			.end()
			.find("p")
			.animate({ fontSize: curParSizetop });
	}
	
	//directiontop true = right, false = left
	function changetop(directiontop) {
	   
	    //if not at the first or last panel
		if((directiontop && !(curPaneltop < totalPanelstop)) || (!directiontop && (curPaneltop <= 1))) { return false; }	
        
        //if not currently moving
        if (($top("#slidertopsection").data("currentlyMoving") == false)) {
            
			$top("#slidertopsection").data("currentlyMoving", true);
			
			var nexttop         	= directiontop ? curPaneltop + 1 : curPaneltop - 1;
			var leftValuetop    	= $top(".scrollContainertop").css("left");
			var movementtop		= directiontop ? parseFloat(leftValuetop, 10) - movingDistancetop : parseFloat(leftValuetop, 10) + movingDistancetop;
		
			$top(".scrollContainertop")
				.stop()
				.animate({
					"left": movementtop
				}, function() {
					$top("#slidertopsection").data("currentlyMoving", false);
				});
			
			returnToNormaltop("#panel_"+curPaneltop+"top");
			growBiggertop("#panel_"+nexttop+"top");
			
			curPaneltop = nexttop;
			
			//remove all previous bound functions
			$top("#panel_"+(curPaneltop+1)+"top").unbind();	
			
			//go forward
			$top("#panel_"+(curPaneltop+1)+"top").click(function(){ changetop(true); });
			
            //remove all previous bound functions															
			$top("#panel_"+(curPaneltop-1)+"top").unbind();
			
			//go back
			$top("#panel_"+(curPaneltop-1)+"top").click(function(){ changetop(false); }); 
			
			//remove all previous bound functions
			$top("#panel_"+curPaneltop+"top").unbind();
		}
	}
	
	// Set up "Current" panel and nexttop and prev
	growBiggertop("#panel_1top");
	var curPaneltop = 1;
	
	$top("#panel_"+(curPaneltop+1)+"top").click(function(){ changetop(true); });
	$top("#panel_"+(curPaneltop-1)+"top").click(function(){ changetop(false); });
	
	//when the left/right arrows are clicked
	$top(".righttop").click(function(){ changetop(true); });	
	$top(".lefttop").click(function(){ changetop(false); });
	
	$top(window).keydown(function(event){
	  switch (event.keyCode) {
			case 13: //enter
				$top(".righttop").click();
				break;
			case 32: //space
				$top(".righttop").click();
				break;
	    case 37: //left arrow
				$top(".lefttop").click();
				break;
			case 39: //right arrow
				$top(".righttop").click();
				break;
	  }
	});
	
});