$(function() {       
		$("#slider-panel .scroll div").click(function(){
			$("#slider").slider("value", $(this).index());
			// move panel
			change(this);   
		});  
		$("#slider").slider({
			min: 0,
			max: $('#slider-panel .scroll div').length-1, 
			value: 3,
			slide: function(event, ui) {
				elem = ('#panel_'+(parseInt(ui.value)+1));
				change(elem);   
				//$('#slider-panel .scroll #panel_'+ui.value).css({'border':'solid 1px red'});
			}
		});
		$('#panel_'+$('#slider-panel .scroll div').length).css({'padding-right':0});
		
		$("#slider-panel .scroll").scrollable().navigator();

		
		
		
		var totalPanels			= $("#slider-panel .scroll div").length;
		var regWidth			= 120;
		var regImgWidth			= 150;
		var regHeight			= 123;
		var regImgHeight		= 123;
		
		var movingDistance	    = 290;
		
		var curWidth			= 340;
		var curImgWidth			= 340;
        var curHeight			= 286;
		var curImgHeight		= 286;
		
		var $panels				= $('#slider-panel .scroll > div');
		var $container			= $('#slider-panel .scroll');

		$panels.css({'float' : 'left'});
	    
		$("#slider-panel").data("currentlyMoving", false);

		$container
			.css('width', 3000)

		var scroll = $('#slider-panel').css('overflow', 'hidden');
		
		
		function returnToNormal(element) {
			$(element)
				.animate({ width: regWidth, height: regHeight, marginTop: 163, marginLeft: 0, marginRight: 0})
				.find("img")
				.animate({ width: regImgWidth, height: regImgHeight })
			    .end()
		};
		
		function returnNextPrev(element) {
			$(element)
				.animate({ width: 170, height: 143, marginTop: 143, marginLeft: 0, marginRight: 0})
				.find("img")
				.animate({ width: 170, height: 143 })
			    .end()	
		}
		
		function growBigger(element) {
			$(element)
				.animate({ width: curWidth, height: curHeight, marginTop: 0, marginLeft: 10, marginRight: 10 })
				.find("img")
				.animate({ width: curImgWidth, height: curImgHeight })
			    .end()
		}
		
		//direction true = right, false = left
		function change(elem) {
		   
		   	// get clicked item
		   	var a_current = $(elem).attr("id").split("_");
			var new_current = a_current[1];
				
		    //if not at the first or last panel
			if(((new_current > curPanel) && !(curPanel < totalPanels)) || ((new_current < curPanel) && (curPanel <= 1))) { return false; }	
	        
	        //if not currently moving
	        if (($("#slider-panel").data("currentlyMoving") == false)) {
	            
				$("#slider-panel").data("currentlyMoving", true);
				
				var next		 = parseInt(new_current) + 1;
				var prev         = parseInt(new_current) - 1;
				var next2        = parseInt(new_current) + 2;
				var prev2        = parseInt(new_current) - 2;
				
				//returnToNormal("#panel_"+curPanel); 
				$('#slider-panel .scroll div').each(function(){
					id = $(this).attr("id");
					if(id != "panel_"+next && id != "panel_"+prev && id != "panel_"+next2 && id != "panel_"+prev2 && id != "panel_"+new_current){
						returnToNormal("#"+id);
					}
				}) 
				
				growBigger("#panel_"+new_current);
				returnNextPrev("#panel_"+next);
				returnNextPrev("#panel_"+prev);
				returnToNormal("#panel_"+next2);
				returnToNormal("#panel_"+prev2);
				
				
				if(new_current - 3 >0) {
					movement = -120*(new_current - 3);
				}
				else if (new_current - 3 == 0) {
					movement = 0;	
				}
				else if (new_current - 3 == -1) {
					movement = 120;	
				}
				else if (new_current - 3 == -2) {
					movement = 290;	
				}
				
				$(".scroll")
				.stop()
				.animate({
					"left": movement
				}, function() {
					$("#slider-panel").data("currentlyMoving", false);
				});
				// set new current   
				curPanel = new_current;
				
			}
		}
		
		// Set up "Current" panel and next and prev
		growBigger("#panel_3");
		// prev image
		returnNextPrev("#panel_2");
		// next image
		returnNextPrev("#panel_4");
		var curPanel = 3;
		var movement = 0;
		$(window).keydown(function(event){
		  switch (event.keyCode) {
				case 13: //enter
					$(".right").click();
					break;
				case 32: //space
					$(".right").click();
					break;
		    	case 37: //left arrow
					$(".left").click();
					break;
				case 39: //right arrow
					$(".right").click();
					break;
		  }
		});
});