function flash(color, url) {
	var arrayPageSize = getPageSize();
	
	$('flash').setStyle({width: arrayPageSize[0] + "px"});
	$('flash').setStyle({height: arrayPageSize[1] + "px"});
	
	
	$('flash').show();
	Effect.Pulsate('flash',{pulses:40,duration:10,from:0.7});

	window.location = url;
	}
	

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){

 var xScroll, yScroll;

 if (window.innerHeight && window.scrollMaxY) {
 xScroll = document.body.scrollWidth;
 yScroll = window.innerHeight + window.scrollMaxY;
 } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
 xScroll = document.body.scrollWidth;
 yScroll = document.body.scrollHeight;
 } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
 xScroll = document.body.offsetWidth;
 yScroll = document.body.offsetHeight;
 }

 var windowWidth, windowHeight;
 if (self.innerHeight) { // all except Explorer
 windowWidth = self.innerWidth;
 windowHeight = self.innerHeight;
 } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
 windowWidth = document.documentElement.clientWidth;
 windowHeight = document.documentElement.clientHeight;
 } else if (document.body) { // other Explorers
 windowWidth = document.body.clientWidth;
 windowHeight = document.body.clientHeight;
 }

 // for small pages with total height less then height of the viewport
 if(yScroll < windowHeight){
 pageHeight = windowHeight;
 } else {
 pageHeight = yScroll;
 }
 // for small pages with total width less then width of the viewport
 if(xScroll < windowWidth){
 pageWidth = windowWidth;
 } else {
 pageWidth = xScroll;
 }


 arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
 return arrayPageSize;
}



var naviBubbleVisible = 1;
var naviBubbleActive = 0;
var hideTimeout;

function hideBubble() {
	if(!naviBubbleActive) {
	window.clearTimeout(hideTimeout);
	$('#bubbleNavi').animate({
  		 	opacity: 0,
			top: ['+=30','swing']
		}, 300, function() {
   	 	// Animation complete.
  		naviBubbleVisible = 0;
  		$('#bubbleNavi').hide();
	  	});
	}

}


function showBubble() {
	$('#bubbleNavi').show();
	$('#bubbleNavi').animate({
    	opacity: 1,
	    top: [51,'swing']
		  }, 300, function() {
    		// Animation complete.
  		});

}

function showProjects(link) {
	
	if(link.hasClass('all')) {
			$(".projectOverviewItem").show('slow');
			}
			
	if(link.hasClass('motion')) {
			$(".projectOverviewItem:not(.Motion)").hide('slow');
			$(".projectOverviewItem.Motion").show('slow');
		}	
		
	if(link.hasClass('illustration')) {
			$(".projectOverviewItem:not(.Illustration)").hide('slow');
			$(".projectOverviewItem.Illustration").show('slow');
		}	
		
	if(link.hasClass('print')) {
			$(".projectOverviewItem:not(.Print)").hide('slow');
			$(".projectOverviewItem.Print").show('slow');
		}	
		
	if(link.hasClass('showreel')) {
			$(".projectOverviewItem:not(.Showreel)").hide('slow');
			$(".projectOverviewItem.Showreel").show('slow');
		}	
		
		/*
		case 'illustration':
			$(".projectOverviewItem:not(.Animation)").hide('slow');
			$(".projectOverviewItem.Animation").show('slow');
			break;
		case 'print':
			$(".projectOverviewItem:not(.Animation)").hide('slow');
			$(".projectOverviewItem.Animation").show('slow');
			break;
		case 'showreel':
			$(".projectOverviewItem:not(.Animation)").hide('slow');
			$(".projectOverviewItem.Animation").show('slow');
			break;
		
	}*/
}

$(document).ready(function(){
	
	$('#workNaviLink a').hover(function(){
		showBubble();
  		},
  		
  		function(){
  			hideTimeout = window.setTimeout(hideBubble, 3000);
  		});
	
	$('#bubbleNavi').delay(2000).animate({
    	opacity: 0,
	    top: ['+=30','swing']
		  }, 600, function() {
    		// Animation complete.
    		naviBubbleVisible = 0;
    		//startzustände
			if(window.location.hash) {
				var start = window.location.hash.split('#').join('');
				$('#bubbleNavi ul li a.'+start).trigger('click');
				//window.location.hash = '';
			}
  		});
  	
  	$('#bubbleNavi').hover(
  		function(){
  			naviBubbleActive = 1;
  			},
  		function(){
  			naviBubbleActive = 0;
  			hideBubble();
  		}
  	);
  	
  	$('#bubbleNavi ul li a').click(function(){
  		$('#bubbleNavi ul li a').removeClass('selected');
  		$(this).addClass('selected');
  		showProjects($(this));
  		return false;
  	});

	
	$('.homeContent .projectOverviewItem .projectOverviewInner').click(
		function() {
			window.location = $(this).find('input.link').val();
		}
	);
	
	
	
	
	$('.projectOverviewItem .projectOverviewInner').hover(
		
		function() {
			var selectedContainer = $(this);
			if(!selectedContainer.hasClass('switching')) {
				
				//var hh = ($(this).height() / 3)*2;
				var hh = $(this).height();
				
				$(this).find('.projectOverviewThumb').stop();
				$(this).find('.projectOverviewThumbSelected').animate({
					top: ['+='+hh, 'swing']
  					}, 500, function() {
    				// Animation complete, thumbs neu sortieren
    				
				  });
				$(this).find('.projectOverviewThumbSelected').addClass('projectOverviewThumbSelectedOpen');
				}
			},
			
			
		function() {
			
			var selectedContainer = $(this);
			if(!selectedContainer.hasClass('switching')) {
				var selectedThumb = $(this).find('.projectOverviewThumbSelected');
			var thumbCount = $(this).find('.projectOverviewThumb').length;
			var preSelectedThumb = selectedThumb;
			
			//$(this).find('.projectOverviewThumb').stop();
			var containerHeight = $(this).height();
			 
			//soll durchgeswitcht werden?
			if(selectedThumb.hasClass('projectOverviewThumbSelectedOpen')) {
				
				
				var nextThumb = selectedThumb.next('.projectOverviewThumb');
				if(!nextThumb.length) {
					nextThumb = $(this).find('.projectOverviewThumb:first');
					}
				selectedThumb.removeClass('projectOverviewThumbSelectedOpen').removeClass('projectOverviewThumbSelected');
				nextThumb.addClass('projectOverviewThumbSelected');
					
					if(thumbCount>1) {
						selectedContainer.addClass('switching');
						
						preSelectedThumb.animate({
							    top: [0, 'linear']
  								}, 300, function() {
  									
									//das alte ganz nach oben  
									$(this).animate({
									    top: [containerHeight*-1, 'linear']
	  									}, 300, function() {
	    								// Animation complete.
	    								$(this).css('top',containerHeight+'px');
									  });
									
									nextThumb.css('top',(containerHeight-10)+'px');
									nextThumb.animate({
									    top: [0, 'linear']
	  									}, 300, function() {
	    								// Animation complete.
	    								selectedContainer.removeClass('switching');
										});
									
							  });
						} else {
							//nur 1 thumb
							selectedThumb.animate({
									    top: [0, 'linear']
	  									}, 500, function() {
	    								// Animation complete.
	    								});
						}
						
				} else {
				//kein switch...
				selectedThumb.animate({
					top: [0, 'swing']
	  				}, 500, function() {
	    			// Animation complete.
	    			});
				}
			}
			}
		);
	});