$( document ).ready ( function ( ) {
	var totalPanels			= $(".scrollContainer").children().size();
	var sizes				= [];
	var windowwidth			= $( window ).width();
	var currentPos		    = windowwidth * 0.15;

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

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

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

	//element set if a mouseover on the counters occours or if an image is clicked
	//caller if a key is pressed (ie, left, right, space or return)
	function change( element, caller ) {
		if ( caller ) {
			if ( caller == "left" ) {
				cont = true;
				for (a = 1; a <= totalPanels; a++ ) {
					$("#counter_"+ ( a ) ).css ( { 'font-weight' : 'normal' } );
					$( "#panel_" + ( a ) ).find ( ".paneltext" ).css ( { visibility: 'hidden' } );
					$( "#panel_" + ( a ) ).find ( ".paneltext" ).stop ( ).animate ( { height: '0px' } );
					if ( loggedon == true ) {
						$( "#panel_" + ( a ) ).unbind ( );
						$( "#panel_" + ( a ) ).click ( function ( ) { change ( this, null ); } );
					}
					/*
					src = $("#panel_"+(a)).find("img").attr("src");
					if ( src.indexOf ( "_p" ) ) {
						src = src.replace("_p", "_g");
						$("#panel_"+(a)).find("img").attr("src", src);
					}
					*/
					if ( sizes[a] == currentPos && cont == true) {
						if ( a != 1 ) {
							b = a - 1;
							currentPos = sizes[b];
							cont = false;
							panel = "#panel_" + b;
							$("#counter_" + ( b ) ).css ( { 'font-weight' : 'bold' } );
							$( panel ).find ( ".paneltext" ).css ( { visibility: 'visible' } );
							$( panel ).find ( ".paneltext" ).stop ( ).animate ( { height: '50px' } );
							if ( loggedon == true ) {
								$( panel ).unbind ( );
								$( panel ).click ( function ( ) { window.open ( "/includes/downloadBillede.php?billedeid=" + $( panel ).find ( "img" ).attr ( "id" ) ); } );
							}
							/*
							src = $("#panel_"+(a-1)).find("img").attr("src");
							if ( src.indexOf ( "_g" ) ) {
								src = src.replace("_g", "_p");
								$("#panel_"+(a-1)).find("img").attr("src", src);
							}
							*/
						} else {
							$("#counter_"+ a ).css ({ 'font-weight' : 'bold' });
							panel = "#panel_" + a;
							$( panel ).find ( ".paneltext" ).css ( { visibility: 'visible' } );
							$( panel ).find ( ".paneltext" ).stop ( ).animate ( { height: '50px' } );
							if ( loggedon == true ) {
								$( panel ).unbind ( );
								$( panel ).click ( function ( ) { window.open ( "/includes/downloadBillede.php?billedeid=" + ( $( panel ).find ( "img" ).attr ( "id" ) ) ); } );
							}
							/*
							src = $("#panel_"+(a)).find("img").attr("src");
							if ( src.indexOf ( "_g" ) ) {
								src = src.replace("_g", "_p");
								$("#panel_"+(a)).find("img").attr("src", src);
							}
							*/
						}
					}
				}
			} else {
				cont = true;
				selected = 0;
				for (a = 1; a <= totalPanels; a++ ) {
					$( "#counter_" + ( a ) ).css ( { 'font-weight' : 'normal' } );
					$( "#panel_" + ( a ) ).find ( ".paneltext" ).css ( { visibility: 'hidden' } );
					$( "#panel_" + ( a ) ).find ( ".paneltext" ).stop ( ).animate ( { height: '0px' } );
					if ( loggedon == true ) {
						$( "#panel_" + ( a ) ).unbind ( );
						$( "#panel_" + ( a ) ).click ( function ( ) { change ( this, null ); } );
					}
					/*
					src = $("#panel_"+(a)).find("img").attr("src");
					if ( src.indexOf ( "_p" ) ) {
						src = src.replace("_p", "_g");
						$("#panel_"+(a)).find("img").attr("src", src);
					}
					*/
					if ( sizes[a] == currentPos && cont == true ) {
						if ( a != totalPanels ) {
							currentPos = sizes[a+1];
							selected = a+1;
							cont = false;
						} else {
							selected = a;
							/*
							src = $("#panel_"+(a)).find("img").attr("src");
							if ( src.indexOf ( "_g" ) ) {
								src = src.replace("_g", "_p");
								$("#panel_"+(a)).find("img").attr("src", src);
							}
							*/
						}
					}
				}
				if ( selected ) {
					$("#counter_"+(selected)).css ({ 'font-weight' : 'bold' });
					$( "#panel_" + ( selected ) ).find ( ".paneltext" ).css ( { visibility: 'visible' } );
					$( "#panel_" + ( selected ) ).find ( ".paneltext" ).stop ( ).animate ( { height: '50px' } );
					if ( loggedon == true ) {
						$( "#panel_" + ( selected ) ).unbind ( );
						$( "#panel_" + ( selected ) ).click ( function ( ) { window.open ( "/includes/downloadBillede.php?billedeid=" + $( "#panel_" + ( selected ) ).find ( "img" ).attr ( "id" ) ); } );
					}
					/*
					src = $("#panel_"+(selected)).find("img").attr("src");
					if ( src.indexOf ( "_g" ) ) {
						src = src.replace("_g", "_p");
						$("#panel_"+(selected)).find("img").attr("src", src);
					}
					*/
				}
			}
		} else {
			for ( a = 1; a <= totalPanels; a++ ) {
				$("#counter_"+(a)).css ({ 'font-weight' : 'normal' });
				$( "#panel_" + ( a ) ).find ( ".paneltext" ).css ( { visibility: 'hidden' } );
				$( "#panel_" + ( a ) ).find ( ".paneltext" ).stop ( ).animate ( { height: '0px' } );
				if ( loggedon == true ) {
					$( "#panel_" + ( a ) ).unbind ( );
					$( "#panel_" + ( a ) ).click ( function ( ) { change ( this, null ); } );
				}
				/*
				src = $("#panel_"+(a)).find("img").attr("src");
				if ( src.indexOf ( "_p" ) ) {
					src = src.replace("_p", "_g");
					$("#panel_"+(a)).find("img").attr("src", src);
				}
				*/
			}
			mystring = new String (element.id);
			value = mystring.indexOf ( "_" );
			if ( parseInt(value) == 5 ) {
				id = element.id.substring ( 6 );
			} else {
				id = element.id.substring ( 8 );
			}
			$("#counter_"+(id)).css ({ 'font-weight' : 'bold' });
			$( "#panel_" + ( id ) ).find ( ".paneltext" ).css ( { visibility: 'visible' } );
			$( "#panel_" + ( id ) ).find ( ".paneltext" ).stop ( ).animate ( { height: '50px' } );
			if ( loggedon == true ) {
				$( "#panel_" + ( id ) ).unbind ( );
				$( "#panel_" + ( id ) ).click ( function ( ) { window.open ( "/includes/downloadBillede.php?billedeid=" + $( "#panel_" + ( id ) ).find ( "img" ).attr ( "id" ) ); } );
			}
			/*
			src = $("#panel_"+(id)).find("img").attr("src");
			if ( src.indexOf ( "_g" ) ) {
				src = src.replace("_g", "_p");
				$("#panel_"+(id)).find("img").attr("src", src);
			}
			*/
			currentPos = sizes[id]; 
		}

		$(".scrollContainer")
			.stop()
			.animate({
				"left": currentPos
			});
	}
	
	// Set up "Current" panel and next and prev	
	var curPanel = 1;
	$( "#counter_1" ).css ( { 'font-weight' : 'bold' } );

	$( ".scrollContainer" ).css ( { "left": parseFloat ( currentPos ) } );
	var totalWidth = parseFloat ( currentPos );
	for ( a = 1; a <= totalPanels; a++ ) {
		sizes[a] = totalWidth;
		$( "#counter_" + ( a ) ).mouseover ( function ( ) { change ( this, null ); } );
		$( "#panel_" + ( a ) ).click ( function ( ) { change ( this, null ); } );
		width = parseFloat ( $( "#panel_" + ( a ) ).find ( "img" ).width ( ) + 10);
		$( "#panel_" + ( a ) ).find ( ".paneltext" ).css ( { visibility: 'hidden', width: parseFloat ( $( "#panel_" + ( a ) ).find ( "img" ).width ( ) ) } );
		totalWidth -= width;
	}
	$( "#panel_1" ).find ( ".paneltext" ).css ( { visibility: 'visible' } );
	$( "#panel_1" ).find ( ".paneltext" ).stop ( ).animate ( { height: '50px' } );
	if ( loggedon == true ) {
		$( "#panel_1" ).unbind ( );
		$( "#panel_1" ).click ( function ( ) { window.open ( "/includes/downloadBillede.php?billedeid=" + $( "#panel_1" ).find ( "img" ).attr ( "id" ) ); } );
	}
	$container.css ( 'width', ( - ( totalWidth - currentPos ) ) * 2 );
	//when the left/right arrows are clicked

	$(".right").click(function(){ change( null, "right" ); });	
	$(".left").click(function(){ change( null, "left"); });
	
	$(document).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;
			default:
				break;
	  }
	});
	
});