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

$(document).ready(function() { 
 	  	
 	  	// get height of screen everytime screen resizes
  		
  		function getScreenSize () {
	  	
	  		$(window).resize(function() {
	  		
		  		var screenHeight = ($(window).height());
		  		
		  		if (screenHeight > 750) {
		  			var boxHeight = '880px';
		  			var contentHeight = '760px';
		  			//alert(boxHeight);
		  		} else {
		  			var boxHeight = '580px';
		  			var contentHeight = '360px';
		  			//alert(boxHeight);
		  		}
	  		
	  		});  
  			return screenHeight
  		}
  		
  		 		
  		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');
			  	
			  		         	     
			    //show contentPreview by removing hide class again
			   $('.box .contentPreview').show();
			   
	     	
	        	//hide the div 'closeButton' again
		    	$('.box .closeButton').hide();
			});
  		
  		}
		
		function resetAllBoxes() {
		
//::
			//console.log('resetAllBoxes called');
		
			// reset boxes so they fall back into original grid
			$('.box').each(function() {			
				$(this).css({'position':'', 'top':'', 'left':''});
				$(this).css({'position':'relative', 'top':'0', 'left':'0'});
				$(this).css({'position':'', 'top':'', 'left':''});

			});
				
		}
  
	  	  
  
	$('.box').click(function() { 
  		

		reduceAllBoxes();
		resetAllBoxes();
		
	  	//set up a variable that identifies the box clicked on
	  	var thisBox = (this.id);
	    
	    
	  	//enlarge the box to fullsize
	  	$(this).animate( { width:"580px", height: "580px"}, 1 );

		//add class 'showButton' to the div 'closeButton' with the box...this makes it visible
	    $('.box#' + thisBox + ' .closeButton').show();
	         	     
	    //hide contentPreview
	   	$('.box#' + thisBox + ' .contentPreview').hide();
	   	
	   	//show content
	   	$('.box#' + thisBox + ' .content').show();

	   	
	    //enlarge content to fit new size;
	   	//$('.box#' + thisBox + ' .content').addClass('contentLarge'); 	    
	   
	   	//enlarge the box to fullsize  	
	  	var screenHeight = ($(window).height());
	  	
		if (screenHeight > 750) {
		
			$(this).animate( { width:"580px", height: "880px"}, 1 );

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

rearrangeBoxes(thisBox);
	
	   	//load in external file into content div
//alert('loading');		
		//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);

 
	    //enlarge content to fit new size;
	   	//$('.box#' + thisBox + ' .content').addClass('contentLarge'); 	    
	   	
		if (screenHeight > 750) {
	   	
	   		$('.box#' + thisBox + ' .content').css({'height': '765px'});
	  
		} else {
		
	   		$('.box#' + thisBox + ' .content').css({'height': '460px'});
		
		}			
		
		
		
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) 

	    	{ 
				
	     	
	        	//hide the div 'closeButton' again
		    	$('.box#' + thisBox + ' .closeButton').hide();
			    
			    //need to prevent from opening up again
			     event.stopPropagation();     	
		   		
		   		reduceAllBoxes();
				resetAllBoxes();


		
		
		    });
	});
});