//rollover change colour
		$('.box').hover(function() {		
			$(this).addClass('hover');		
		},
		function() {	
			$(this).removeClass('hover');		
		});
		
		
		

$(document).ready(function() { 

  
		
		

//add profile

// hide all the profileBannerUser
$('.box .profileBannerUser').hide();	  






 		
  		function reduceAllBoxes () {
	  		
	  		// auto reduce all other boxes
	  		$('.box').each(function() {
				$(this).animate({"width" : "180px", "height" : "280px"}, 1);	
				
				//hide content by removing the show class
			  	$('.box .content').hide();
			  	//$('.box .content').addClass('hide');
         	   $('.box .topBanner').show();  
			    //show contentPreview by removing hide class again
			   $('.box .contentPreview').show();
			   


// profile add

//show contentPreview by removing hide class again
$('.box .profileBannerUser').hide();	     	
	     	

	     	
	     	
	     	
	        	//hide the div 'closeButton' again
		    	$('.box .closeButton').hide();
			});
  		
  		}
		
		function resetAllBoxes() {
	
			// reset boxes so they fall back into original grid
			$('.box').each(function() {			
				$(this).css({'position':'', 'top':'', 'left':''});	
			});
				
		}
  
	  		
	  	// get height of screen everytime screen resizes
  		/*
  		
  		$(window).resize(function() {
  		
	  		var screenHeight = ($(window).height());
	  		
	  		if (screenHeight > 500) {
	  			var boxHeight = '880px';
	  			var contentHeight = '760px';
	  			//alert('boxHeight: ' + boxHeight);
	  		} else {
	  			var boxHeight = '580px';
	  			var contentHeight = '360px';
	  			//alert('boxHeight: ' + boxHeight);
	  		}
  		
  		});  
  
  		*/
  
  
  
	$('.box').click(function() { 
  		
		reduceAllBoxes();
		resetAllBoxes();
		
	  	//set up a variable that identifies the box clicked on
	  	var thisBox = (this.id);
	    
	    
	  	//enlarge the box to fullsize  	
	  	var screenHeight = ($(window).height());
	  	
		if (screenHeight > 750) {
		
			$(this).animate( { width:"580px", height: "580px"}, 1 );

		} else {
			$(this).animate( { width:"580px", height: "580px"}, 1 );
			
		}

	    //hide existing avatar
	    $('.box#' + thisBox + ' .topBanner').hide();
	    
		//add class 'showButton' to the div 'closeButton' with the box...this makes it visible
	    $('.box#' + thisBox + ' .closeButton').show();
	       
	       
//show contentPreview by removing hide class again
$('.box#' + thisBox + ' .profileBannerUser').show();		       
	       
	       
	         	     
	    //hide contentPreview
	   	$('.box#' + thisBox + ' .contentPreview').hide();
	   	
	   	//show content
	   	$('.box#' + thisBox + ' .content').show();
	   	
	    
	    
	    //enlarge content to fit new size;
	   	//$('.box#' + thisBox + ' .content').addClass('contentLarge'); 	    
	   	
		if (screenHeight > 750) {
	   	
	   		$('.box#' + thisBox + ' .content').css({'height': '400px'});
	  
		} else {
		
	   		$('.box#' + thisBox + ' .content').css({'height': '400px'});
		
		}		

		
rearrangeBoxes(thisBox);
		
	   	//load in external file into content div
		
		//get link to full article (which is hidden)
		var urlLoad = $('.box#' + thisBox + ' a').attr("href"); 

	   
		//alert(urlLoad);

	    //load into now visible content div
	    $('.box#' + thisBox + ' .content').load(urlLoad);


var pos = $('.box#' + thisBox).position();
//alert("POSITION: \nLeft: "+pos.left + "\nTop: " + pos.top);

$.scrollTo('.box#' + thisBox, 1800);		
		
		
		
		

	     
	    // CLOSING BOX 
	    // attach a click function to the closeButton div which is now visible  
	    $('.box#' + thisBox + ' .closeButton').click(function(event) 

	    	{ 
				
				//reduce content to fit new size;
	   			//$('.box#' + thisBox + ' .content').removeClass('contentLarge'); 
	   			//$('.box#' + thisBox + ' .content').addClass('contentSmall'); 
			   	
			   	//hide content by removing the show class
			  //	$('.box#' + thisBox + ' .content').removeClass('show');
	         	     
			    //show contentPreview by removing hide class again
			   //$('.box#' + thisBox + ' .contentPreview').removeClass('hide');

		  		// reduce the size of the parent div ie the box to original size  
			//	$(this).parent().parent().animate( { width:"180px", height: "280px"}, 1 );
	     	
	        	//hide the div 'closeButton' again
		    	$('.box#' + thisBox + ' .closeButton').hide();
		    	

// profile add

//hide profile banner info
$('.box .profileBannerUser').hide();	

//show preview avatar
$('.box .topBanner').show();
	    		    
			    //need to prevent from opening up again
			     event.stopPropagation();     	
		   		
		   		reduceAllBoxes();
				resetAllBoxes();


		
		
		    });
	});
});