$(function() {
	
	//$(".scrollContainer").prepend($(".scrollContainer .panel").clone())

	var totalPanelsOld = $(".scrollContainer").children().size();
	var items = [];
	
	jQuery.each($(".scrollContainer .panel"), function(i, val) {
		items[i] = $(".scrollContainer #panel_"+(i+1)).html();
//		$(".photo-big img").parent().attr( "href", $("a",element).attr("href").replace('_big','') );
    });
	$(".scrollContainer").html("");
	
	for (j=0;j<9;j++){
		jQuery.each(items, function(i, val) {
			$(".scrollContainer").append("<div class='panel' id='panel_"+(totalPanelsOld*j+i+1)+"'>"+items[i]+"</div>");
		});
	}

	
	var totalPanels			= $(".scrollContainer").children().size();
		
	var regWidth			= $(".panel").css("width");
	var regImgWidth			= $(".panel img").css("width");
	var regTitleSize		= $(".panel h2").css("font-size");
	var regParSize			= $(".panel p").css("font-size");
	
	var movingDistance	    = 85;
	
	var curWidth			= 105;
	var curImgWidth			= 105;

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

	$panels.css({'float' : 'left','position' : 'relative'});

	$("#slider").data("currentlyMoving", false);


	$container
		.css('width', ($panels[0].offsetWidth * $panels.length) + 40);

	var scroll = $('#slider .scroll').css('overflow', 'hidden');


	function returnToNormal(element) {
		$(element)
			.animate({ width: regWidth, paddingTop: 14, paddingBottom: 5 })
			.find("img")
			.animate({ width: regImgWidth, height: 46 })
			.end()
			.removeClass("active");
	};
	
	function growBigger(element) {
		$(element)
			.animate({ width: curWidth, paddingTop: 1, paddingBottom: 1 })
			.find("img")
			.animate({ width: curImgWidth, height: 77 })
			.end()
			.addClass("active");
			
			$(".photo-big img").attr( "src", $("a",element).attr("href") );
			$(".photo-big img").parent().attr( "href", $("a",element).attr("href").replace('_big','') );
	}
	
	//direction true = right, false = left
	function change(direction,num) {
	
	    //if not at the first or last panel
		if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }	

        //if not currently moving
        if (($("#slider").data("currentlyMoving") == false)) {

			$("#slider").data("currentlyMoving", true);
			
			var next         = direction ? curPanel + num : curPanel - num;
			
			var leftValue    = $container.css("left");
			
			if (next+1 == totalPanels){
				next = totalPanelsOld*2-1;
				
				$("#panel_"+curPanel).css("width", regWidth).css("padding-top", 10).find("img").css("width", regWidth).removeClass("active")
				
				curPanel = next-1;
				
				$("#panel_"+curPanel).css("width", curWidth).css("padding-top", 10).find("img").css("width", curWidth)
				$container.css("left", - (next-3)*movingDistance + 40 );
				leftValue    = $container.css("left");
			}
			if (next-1 == 1){
//			               alert(next);
				next = totalPanelsOld*2+2;
				
				$("#panel_"+curPanel).css("width", regWidth).css("padding-top", 9).css("height", 46).find("img").css("height", 46).css("width", regWidth).removeClass("active")
				
				curPanel = next+1;
				
				$("#panel_"+curPanel).css("width", curWidth).css("padding-top", 5).css("height", 46).find("img").css("height", 46).css("width", curWidth);
				
				$container.css("left", - (next-1)*movingDistance + 40 );
				leftValue    = $container.css("left");
			}
			var movement	 = direction ? parseFloat(leftValue, 10) - movingDistance*num : parseFloat(leftValue, 10) + movingDistance*num;
			
		
			$container
				.stop()
				.animate({
					"left": movement
				}, function() {
					$("#slider").data("currentlyMoving", false);
				});
			
			returnToNormal("#panel_"+curPanel);
			growBigger("#panel_"+next);
			
			
			curPanel = next;
			
			//remove all previous bound functions
			$("a",".panel").unbind();	
			
			//go forward
			$("a","#panel_"+(curPanel+1)).click(function(){ change(true,1);return false });
			$("a","#panel_"+(curPanel+2)).click(function(){ change(true,2);return false });
			
			//go back
			$("a","#panel_"+(curPanel-1)).click(function(){ change(false,1);return false });
			$("a","#panel_"+(curPanel-2)).click(function(){ change(false,2);return false });
			
			//remove all previous bound functions
			$("#panel_"+curPanel).unbind();
		}
	}
	
	// Set up "Current" panel and next and prev
//	growBigger("#panel_"+ (totalPanelsOld+3) );	
//	var curPanel = totalPanelsOld + 3;

	growBigger("#panel_"+(totalPanelsOld+1));
	var curPanel = totalPanelsOld+1;
//	growBigger(curPanel);
//	alert(curPanel);
	
	$container.css("left", - (totalPanelsOld) * movingDistance+145);
	
	$("a","#panel_"+(curPanel+1)).click(function(){ change(true,1);return false });
	$("a","#panel_"+(curPanel-1)).click(function(){ change(false,1);return false });
	$("a","#panel_"+(curPanel+2)).click(function(){ change(true,2);return false });
	$("a","#panel_"+(curPanel-2)).click(function(){ change(false,2);return false });
//	$("a","#panel_"+(curPanel+1)).click(function(){ change(true,1);return false });	
//	$("a","#panel_"+(curPanel-1)).click(function(){ change(true,1);return false });		
	
	$container.mousewheel(function(event, delta) {
		if (delta > 0)
			change(false,1);
		else if (delta < 0)
			change(true,1);
		return false;
	});
	
	$(".panel a").click(function(){ return false });
	
	//when the left/right arrows are clicked
	$(".scrollButtons-right").click(function(){ change(true,1); });	
	$(".scrollButtons-left").click(function(){ change(false,1); });
	
	$(".scrollButtons").hover(
      function () {
        $('span',this).addClass("hover")
      },
      function () {
        $('span',this).removeClass("hover")
      }
    );

	
	$(window).keydown(function(event){
	  switch (event.keyCode) {
			case 13: //enter
				$(".scrollButtons-right").click();
				break;
			case 32: //space
				$(".scrollButtons-right").click();
				break;
	    case 37: //left arrow
				$(".scrollButtons-left").click();
				break;
			case 39: //right arrow
				$(".scrollButtons-right").click();
				break;
	  }
	});
	
});