var myFluidGrid = {
				COLNUMBER : 5, // Minimum column number.
				COLMARGIN : 15, // Margin (in pixel) between columns/boxes.
				COLWIDTH : 180, // Fixed width of all columns.
				doLayout : function() {
					var self = this;
					var pointer = 0;
					var arr = [];

					var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));
					
						for(i=0;i<columns;i++){
     					arr[i] = 0;
						}

					$('.box').css('position', 'absolute');
					$('.box').each(function() {
	
					
						var tempTop = $('.bo2').outerHeight() + 100;
					
					if (tempTop < 101){
						var tempTop = 0;
					}
				

						var IMGWIDTH = $(this).outerWidth();

						
						
						if(IMGWIDTH > 590){
						var klein = Number.MAX_VALUE;
						var gross = 0;
						for(i=0;i<columns-1;i++){
     					if(arr[i]+arr[i+1] < klein){
        					klein = arr[i]+arr[i+1];
							gross = i;
   						}}
						for(i=gross;i<gross+1;i++){
						if(arr[i] > arr[i+1]){
							klein = arr[i]
						} else {
							klein = arr[i+1]
						}}
	
						if (arr[gross]) { tempTop = klein;	}
						$(this).css('top', tempTop + 'px');
	
						arr[gross] = tempTop + $(this).outerHeight() + self.COLMARGIN;
						arr[gross+1] = tempTop + $(this).outerHeight() + self.COLMARGIN;
						arr[gross+2] = tempTop + $(this).outerHeight() + self.COLMARGIN;
						arr[gross+3] = tempTop + $(this).outerHeight() + self.COLMARGIN;
						 
						var tempLeft = (gross * (self.COLWIDTH + self.COLMARGIN));
						$(this).css('left', tempLeft + 'px'); 
						 
						 }
						
						else if(IMGWIDTH > 395){
						var klein = Number.MAX_VALUE;
						var gross = 0;
						for(i=0;i<columns-1;i++){
     					if(arr[i]+arr[i+1] < klein){
        					klein = arr[i]+arr[i+1];
							gross = i;
   						}}
						for(i=gross;i<gross+1;i++){
						if(arr[i] > arr[i+1]){
							klein = arr[i]
						} else {
							klein = arr[i+1]
						}}
	
						if (arr[gross]) { tempTop = klein;	}
						$(this).css('top', tempTop + 'px');
	
						arr[gross] = tempTop + $(this).outerHeight() + self.COLMARGIN;
						arr[gross+1] = tempTop + $(this).outerHeight() + self.COLMARGIN;
						arr[gross+2] = tempTop + $(this).outerHeight() + self.COLMARGIN;

						 
						var tempLeft = (gross * (self.COLWIDTH + self.COLMARGIN));
						$(this).css('left', tempLeft + 'px'); 
						 
						 }
						 
						else if(IMGWIDTH > 180){
						var klein = Number.MAX_VALUE;
						var gross = 0;
						for(i=0;i<columns-1;i++){
     					if(arr[i]+arr[i+1] < klein){
        					klein = arr[i]+arr[i+1];
							gross = i;
   						}}
						for(i=gross;i<gross+1;i++){
						if(arr[i] > arr[i+1]){
							klein = arr[i]
						} else {
							klein = arr[i+1]
						}}
	
						if (arr[gross]) { tempTop = klein;	}
						$(this).css('top', tempTop + 'px');
	
						arr[gross] = tempTop + $(this).outerHeight() + self.COLMARGIN;
						arr[gross+1] = tempTop + $(this).outerHeight() + self.COLMARGIN;
						 
						var tempLeft = (gross * (self.COLWIDTH + self.COLMARGIN));
						$(this).css('left', tempLeft + 'px'); 
						 
						 }
						 else {
						
						var klein = Number.MAX_VALUE;
						var gross = 0;
						for(i=0;i<columns;i++){
     					if(arr[i] < klein){
        					klein = arr[i];
							gross = i;
   						}}
						
	

						
						if (arr[gross]) { tempTop = klein;	}
						$(this).css('top', tempTop + 'px');
						var IMGWIDTH = $(this).outerWidth();

						arr[gross] = tempTop + $(this).outerHeight() + self.COLMARGIN;
						

						
						var tempLeft = (gross * (self.COLWIDTH + self.COLMARGIN));
						$(this).css('left', tempLeft + 'px'); 
	
	}
					});
				}
			};
			$(window).ready(function() {
				myFluidGrid.doLayout();
			}).resize(function() {
				myFluidGrid.doLayout();
			});
			
			
			
			
			
			
			$(document).ready(function()
			{
  			  $(".Magazine_Button").click(
      			  function()
      			  {
        			    $(".magazine").css(
         			       {
         			           height: "auto",
							   overflow: "visible"

        			        });	
						
						 $(".vertical3").css(
         			       {
							   visibility: "hidden"
        			        });	
						 
						 $(".vertical4").css(
         			       {
							   visibility: "visible"
        			     });	
							
							myFluidGrid.doLayout();

					
      			  }
   			 );
				});
			
			
					$(document).ready(function()
			{
  			  $(".Magazine_Button2").click(
      			  function()
      			  {
        			    $(".magazine").css(
         			       {
         			           height: "0",
							   overflow: "hidden"

        			        });	
						
						 $(".vertical3").css(
         			       {
							   visibility: "visible"
        			        });	
						 
						 $(".vertical4").css(
         			       {
							   visibility: "hidden"
        			        });	
							
							myFluidGrid.doLayout();

					
      			  }
   			 );
				});
					
					
					$(document).ready(function()
{
    $(".vertical6b").hover(
        function()
        {
			
			$(this).animate(
                {
                    backgroundColor: "#FF0"

                }, 200);			
            $(".versteckt").animate(
                {
                    height: "120px"

                }, 200);
	




        },
        function()
        {
			$(this).animate(
                {
                    backgroundColor: "#FFF"

                }, 200);			
            $(".versteckt").animate(
                {
                    height: "0px"

                }, 200);


        }
    );
});