$(document).ready(function() {
	var speed 		= 'fast';
	var ready		= true;
	var currentRef 	= '';
	var currentPrev = '.p_0';
	
	/**
	* INIT
	*
	*
	*/
	$(".thumb").click(click_thumb_handler);
	$("a.fancyGroup").fancybox({'overlayOpacity':'0.6', 'overlayColor':'#000', 'titleShow':false, 'cyclic':true }); 
	set_position();
	
	/* FILTER start */
	//$(".selectbox").selectbox();
	
	$("#refYear").bind($.browser.msie ? 'propertychange': 'change', function(e) {
		setFilter($(this).val(), $("#refType").val());
	});
	$("#refType").bind($.browser.msie ? 'propertychange': 'change', function(e) {
		setFilter($("#refYear").val(), $(this).val());
	});
	
	function setFilter(year, type) {
		document.location.replace("/filter/" + year + "/" + type + "/");
	}
	/* FILTER end */
	
	
	function set_position(){
		if(window.location.href.split('/')[4].length > 0 && $('.show').parent().position().top > $(".box").height()){
			var y = $('.show').parent().position().top + $(".reference").height() - $(".box").height()+1;
			$(".box ul").animate({"top": "-="+y}, 'slow', set_navigation);
		}
		else
			set_navigation();
	}
	
	/**
	*
	*
	*
	*/
	function set_navigation(event){
		var step 	= parseInt($(".reference").css('height'));
		var pos 	= parseInt($(".box ul").css('top'));
		var maxpos 	= parseInt($(".box ul").css('height')) - parseInt($(".box").css('height'));
		
		if((pos-step) < -maxpos){
			$("#down").addClass('disabled');
		}
		if((pos) >= 0){
			$("#up").addClass('disabled');
		}
	}
	
	
	/**
	*
	*
	*
	*/
	$("#down").click(function(event){
		event.preventDefault();
		this.blur();
		if($("#down").hasClass('disabled') != true){
			
			var step 	= $(".reference").height();
			var pos 	= $(".box ul").position().top;
			var maxpos 	= $(".box ul").height() - $(".box").height();

			if(pos > -maxpos && ready == true){
				ready=false;
				$("#up").removeClass('disabled');
				$(".box ul").animate({"top": "-="+step}, speed, function(){ready=true;});
			}
		
			if((pos-step) <= -maxpos){
				$("#down").addClass('disabled');
			}
		}
	});
	


	/**
	*
	*
	*
	*/	
	$("#up").click(function(event){
		event.preventDefault();
		this.blur();

		if($("#up").hasClass('disabled') != true){
			var step 	= $(".reference").height();
			var pos 	= $(".box ul").position().top;
		
			if(pos < 0 && ready == true){
				$("#down").removeClass('disabled');
				ready=false;
				$(".box ul").animate({"top": "+="+step}, speed,function(){ready=true;});
			}
			if((pos+step) >= 0){
				$("#up").addClass('disabled');
			}
		}
	});



	/**
	*
	*
	*
	*/	
	$(".reference a").click(function(event){
		event.preventDefault();
		this.blur();
		var target = $(this).parent().attr('id');

		if(currentRef != target){
			$('.reference a').removeClass('show');
			$(this).addClass('show');
			// neues Projekt merken
			currentRef = target
			// alte Projektdetails ausblenden
			$('.right').fadeOut('fast', function(event){
				// neue Projektdetails holen
				$.getJSON("/get/"+currentRef+"/", addDetails);
			});
		}
		
		
	});
	
	
	
	/**
	*
	*
	*
	*/
	function addDetails(data){
		// aufräumen
		$('#preview').empty();
		$('.viewer ul').empty();
		
		// Projektdetails hinzufügen
		$('#details').html('<h2>'+ data.h +'</h2><p>' + data.t + '</p>');
		$('<img/>').attr("src", '/img/show.png').addClass('zoom').appendTo('#preview');
		// erstes Bild und Thumbs hinzufügen
		$.each(data.p, function(i,pic){
			
			$('<img/>').attr("src", '/img/references/'+currentRef+'/viewer_'+pic).addClass('pic').addClass('p_' + i).appendTo('#preview');
			$('<li>').addClass('t_'+i).appendTo('.viewer ul');
			$('<a>').attr({href:'/img/references/'+currentRef+'/'+pic, title:'Vorschau anzeigen'}).addClass('thumb').appendTo('.t_'+i);
			$('<img/>').attr("src", '/img/overlayshadow_thumb.png').addClass('shadow').appendTo('.t_'+i+' a');
			$('<img/>').attr("src", '/img/references/'+currentRef+'/viewer_'+pic).appendTo('.t_'+i+' a');
			$('<li>').addClass('fg_'+i).css('display','none').appendTo('.viewer ul');
			myRel = (i>0) ? 'fancyGroup' : '';
			$('<a>').attr({href:'/img/references/'+currentRef+'/'+pic, rel:myRel}).addClass('fancyGroup fg').appendTo('.fg_'+i);
			
			if(i>0){
				$('.p_' + i).css('display','none');
			}else{
				currentPrev = '.p_' + i;
				$('#preview').attr({href: '/img/references/'+currentRef+'/'+pic, title: 'Referenz vergrößern'});
			}
		});
		
		// fancybox neu initiieren
		$("a.fancyGroup").fancybox({'overlayOpacity':'0.6', 'overlayColor':'#000', 'titleShow':false, 'cyclic':true }); 
		
		// Projekt anzeigen und Clickhandler frisch setzen
		$(".thumb").click(click_thumb_handler);
		$('.right').fadeIn('slow');
	}
	
	
	
	/**
	*
	*
	*
	*/	
	function click_thumb_handler(event){
		event.preventDefault();
		this.blur();
		
		// init
		$('a#preview').removeClass('fancyGroup');
		$('a.fg').addClass('fancyGroup');
		$('a.fancyGroup').attr('rel', 'fancyGroup');
		
		var target=$(this).parent().attr('class').replace('t','.p');
		var fancyOut=$(this).parent().attr('class').replace('t','fancy');
		
		if(currentPrev != target){
			$(currentPrev).css('display','none');
			currentPrev = target;
			$(currentPrev).fadeIn("slow");

			$('a#preview').attr('href', $(this).attr('href'));
		}
		
		// das aktuelle Thumbnail darf nicht noch einmal in der fancybox indiziert werden
		$('a.' + fancyOut).attr('rel', '');
		// fancybox neu initiieren
		$("a.fancyGroup").fancybox({'overlayOpacity':'0.6', 'overlayColor':'#000', 'titleShow':false, 'cyclic':true }); 
	}

	

	
	


});