$(function() {
	
	var totalPanels			= $(".scrollContainer").children().size();
		
	var regWidth			= $(".panel").css("width");
	var regImgWidth			= $(".panel img.imagefield").css("width");
	var regTitleSize		= $(".panel h2").css("font-size");
	
	

	var curPanel 			= 2;
	
	var curWidth			= 300;
	var panelWidth			= 225;
	var curImgWidth			= 300;
	var curTitleSize		= "15px";
	var hideTimer			= 200;
	var showTimer			= 600;

	var $panels				= $('#slider .scrollContainer > div');
	var $container			= $('#slider .scrollContainer');
	
	// Set dynamic paddings
	var panelPadding = (($('#slider').width()/4)-curWidth)/2;
	if (panelPadding < 0 ) {
		panelPadding = 0;
	}
	
	// Move block #slide to a distance
	var movingDistance = panelWidth + 2*panelPadding;
	
	// Set up "Current" panel and next and prev
	growBigger('#panel_'+curPanel);	
	
	
	// Show 3 panels onload
    if($.browser.msie){
      $panels.css({'float' : 'left','position' : 'relative', 'visibility' : 'hidden', 'padding-left': panelPadding , 'padding-right': panelPadding});
      $('#panel_'+(curPanel-1)+', #panel_'+curPanel+', #panel_'+(curPanel+1)).css("visibility" , "visible");
    } else {
    $panels.css({'float' : 'left','position' : 'relative', 'opacity' : '0', 'padding-left': panelPadding , 'padding-right': panelPadding});
      $('#panel_'+(curPanel-1)+', #panel_'+curPanel+', #panel_'+(curPanel+1)).css( 'opacity' ,'1');
    }
	
	$("#slider").data("currentlyMoving", false);
	
	// Correct start position of the current slide
	var totalPanelWidth = panelPadding*2+curWidth;
	var xPos = $("#panel_"+curPanel).position();
	if (xPos) {
		if (xPos.left < $('#slider').width()/2) {
			var correction = (($('#slider').width()/2)-xPos.left) - totalPanelWidth/2 ;
		}
		if (xPos.left > $('#slider').width()/2 && xPos.left < $('#slider').width()) {
			var correction = -((xPos.left - ($('#slider').width()/2)) + totalPanelWidth/2) ;
		}
	}
	else {
	correction = 0;
	};

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

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

	function returnToNormal(element) {
		$(element)
			.animate({ width: regWidth , 'top' : '0px' }).removeClass('current-slide')
			.find("h2")
			.animate({ fontSize: regTitleSize })
	};
	
	function growBigger(element) {
		$(element)
			.animate({ width: curWidth , 'top' : '20px'}).addClass('current-slide')
			.find("h2")
			.animate({ fontSize: curTitleSize })
	}
	
	//direction true = right, false = left
	function change(direction) {
	   
	    //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)) {
      if($.browser.msie){
        if (direction == true) {
          $("#panel_"+(curPanel-1)).css("visibility", "hidden");
          $("#panel_"+(curPanel-1)+" .slider-webcam").css("visibility" , "hidden");
          $("#panel_"+(curPanel+2)).css("visibility" , "visible");
          $("#panel_"+(curPanel+2)+" .slider-webcam").css("visibility" , "visible");
        }
        else {
          $("#panel_"+(curPanel+1)).css("visibility" , "hidden");
          $("#panel_"+(curPanel+1)+" .slider-webcam").css("visibility" , "hidden");
          $("#panel_"+(curPanel-2)).css("visibility" , "visible");
          $("#panel_"+(curPanel-2)+" .slider-webcam").css("visibility" , "visible");
        }
      } else {
        if (direction == true) {
          $("#panel_"+(curPanel-1)).animate({opacity : "0"}, hideTimer);
          $("#panel_"+(curPanel-1)+" .slider-webcam").animate({opacity : "0"}, hideTimer);
          $("#panel_"+(curPanel+2)).animate({opacity : "1"}, showTimer);
          $("#panel_"+(curPanel+2)+" .slider-webcam").animate({opacity : "1"}, showTimer);
        }
        else {
          $("#panel_"+(curPanel+1)).animate({opacity : "0"}, hideTimer);
          $("#panel_"+(curPanel+1)+" .slider-webcam").animate({opacity : "0"}, hideTimer);
          $("#panel_"+(curPanel-2)).animate({opacity : "1"}, showTimer);
          $("#panel_"+(curPanel-2)+" .slider-webcam").animate({opacity : "1"}, showTimer);
        }
      }
			
			$("#slider").data("currentlyMoving", true);
			
			var next         = direction ? curPanel + 1 : curPanel - 1;
			var leftValue    = $(".scrollContainer").css("left");
			var movement	 = direction ? parseFloat(leftValue) - movingDistance : parseFloat(leftValue) + movingDistance;

			$(".scrollContainer")
				.stop()
				.animate({
					"left": movement
				}, function() {
					$("#slider").data("currentlyMoving", false);
				});
			
			returnToNormal("#panel_"+curPanel);
			growBigger("#panel_"+next);
			
			curPanel = next;
			
			//remove all previous bound functions
			$("#panel_"+(curPanel+1)).unbind();	
			
			//go forward
			$("#panel_"+(curPanel+1)).click(function(){change(true); return false;});
			
            //remove all previous bound functions															
			$("#panel_"+(curPanel-1)).unbind();
			
			//go back
			$("#panel_"+(curPanel-1)).click(function(){change(false); return false;}); 
			
			
			//remove all previous bound functions
			$("#panel_"+curPanel).unbind();
		}
	}
	// just for first clicking
	$("#panel_"+(curPanel+1)).click(function(){change(true); return false;});
	$("#panel_"+(curPanel-1)).click(function(){change(false); return false;});
	
	//when the left/right arrows are clicked
	$(".right-botton").click(function(){change(true);});
	$(".left-botton").click(function(){change(false);});
});