// JavaScript Document
	var $numberOfBoxes = 23;
	$numberOfBoxes = $numberOfBoxes;
	
	var $currentBox = 0;

	function centreContent(){
		// SET THE TOPPANEL TO THE CENTRE
		//$("#topPanel").css( "left",($(document).width() - 830)/2 ); 
		//$("#topPanel").css( "top" , 20 );      
	
		// SET THE CONTAINER TO THE CENTRE
		$("#container").css("position","absolute");
		
		if($.browser.msie)
		{
			$("#container").css("top",($(window).height() - $("#container").height())/2 );
			$("#container").css("left",($(window).width() - $("#container").width())/2 );	
			
			$(".footer").css({'width':'850px','position':'absolute','left': $("#container").css("left"),'top':$(window).height() - 90 });
		}else{
			$("#container").css("top",($(document).height() - $("#container").height())/2 );
			$("#container").css("left",($(document).width() - $("#container").width())/2 );	
			
			$(".footer").css({'width':'850px','position':'absolute','left': $("#container").css("left"),'top':$(document).height() - 90 });			
		}
		//$(".logos").css({'position':'absolute','left':$(".footer").width() - $(".logos").width() });
		
		// SET THE BOTTOMPANEL TO THE CENTRE
		//$("#bottomPanel").css("left",($(document).width() - 830)/2 );
		//$("#bottomPanel").css( "top" ,($(document).height() - $("#bottomPanel").height()) );  	
	}
	
	// CENTRE ALL THE CONTENT
	$(document).resize(function () {
		centreContent();		
	});	
     
$(document).ready(function() {

		function bob(){
			showMovement = true;
		};    
		
		centreContent();		
	
		// DEFINE A GLOBAL MOVEMENT FLAG
		var showMovement = true;

		// SET BROWSER CENTRE POINTS
		var browserWidthCentrePoint = $(document).width()/2;
		var browserHeightCentrePoint = $(document).height()/2;

		// CREATE ARRAY
		var originalAttributes = new Array()		
	  
		//RANDOM BACKGROUND COLOURS
		for(boxCounter=0;boxCounter<=$numberOfBoxes;boxCounter++)
		{	

// ##### STYLE #####
		
			// GET HEIGHT OF THE CURRENT FRAME
			//var tempOriginalBoxHeight = $("#box" + boxCounter).height() + 'px';
			var tempOriginalBoxHeight = 110 + 'px';

			// GIVE SUMMARY DIV A COLOUR AND PUSH IT DOWN TO THE BOTTOM OF FRAME			
			$("#box" + boxCounter + ' .summary').css({'top' : tempOriginalBoxHeight });

			// CORRECT THE ZINDEX 
			var zIndexNumber = 1000;

			$("#box" + boxCounter).css('zIndex', zIndexNumber);
			zIndexNumber -= 10;

			
// ##### VARIABLES #####			
			//GET THE ORIGINAL POSITION
			var pos = $("#box" + boxCounter).position();

			//STORE THE WIDTH AND HEIGHT OF THE ORIGINAL BOXES
			//originalAttributes[boxCounter] = new Array( $("#box" + boxCounter).height() , $("#box" + boxCounter).width(), $("#box" + boxCounter + ' .summary').height(), pos.left , pos.top )
			originalAttributes[boxCounter] = new Array( $("#box" + boxCounter).height() , $("#box" + boxCounter).width(), $("#box" + boxCounter + ' .summary').height(), parseFloat($("#box" + boxCounter).css('left')) , parseFloat($("#box" + boxCounter).css('top')) )


// ##### ANIMATION EVENTS #####
			
			//SLIDES THE BOX DOWN TO ITS NEW HEIGHT **** THIS WILL NEED TO BE INTUITIVE ****
			$("#box" + boxCounter).click(function () {

				showMovement = false;
				
				$currentBox = this.id;

				// CORRECT THE ZINDEX 
				var zIndexNumber = 1000;
				$('div').each(function() {
					$(this).css('zIndex', zIndexNumber);
					zIndexNumber -= 10;
				});

				// SET THE ZINDEX OF THE CURRENT OBJECT TO ENSURE IT STAYS IN FRONT		
				$(this).css('zIndex','1000');
			
				//RETRIEVES THE ORIGINAL FRAME DIMENSIONS
				var tempObjectNumber = String(this.id).substring(3,5);
				var tempAttributeArray = String(originalAttributes[tempObjectNumber]).split(",")				
				
				// ADJUSTS THE DEPTH OF THE FINAL ANIMATION POSITION BASED ON IMAGE DEPTH
				var tempObjectNewHeight = (110 + parseInt(tempAttributeArray[2])) + 20
				
				// CHECK THE WIDTH OF THE FRAME
				if( parseInt(tempAttributeArray[1]) > 250 )
				{
					//ANIMATE THE HEIGHT ONLY
					$(this).animate({ height: tempObjectNewHeight + "px" }, 500 );	

				}
				else
				{
					//ANIMATE THE HEIGHT AND WIDTH
					$(this).animate({ height: tempObjectNewHeight + "px", width : "270px" }, 250 );												
				}
				
				//SETUP THE HIDDEN BUTTON TO COVER WHOLE THING			
				$('.hiddenButton',this).css({ height: tempObjectNewHeight + "px",top:0 });
				
				
				//SHOULD WE ENSURE THERE ARE NO BOXES LEFT OPEN BY CLOSING THEM HERE?
				var i = 0;
								
				for(i=0;i<=$numberOfBoxes;i++)
				{				
					if(this.id != "box" + i)
					{
						//SETUP THE HIDDEN BUTTON TO COVER WHOLE THING			
						//$('.hiddenButton',this).css({ height: "0px",top:300 });						

						//RETRIEVES THE ORIGINAL FRAME DIMENSIONS
						var tempObjectNumber = String("box" + i).substring(3,5);
						var tempAttributeArray = String(originalAttributes[tempObjectNumber]).split(",")
						
						// CLOSING ANIMATION
						$("#box" + i).animate({ height: tempAttributeArray[0] + "px" , width: tempAttributeArray[1] + "px" }, 1000 );		
					}else{
						//alert(this.id)
					}
				}

			});	
			
		
			$(".hiddenButton","#box" + boxCounter).mouseout(function(){
			
				//SHOULD WE ENSURE THERE ARE NO BOXES LEFT OPEN BY CLOSING THEM HERE?
				var i = 0;
								
				for(i=0;i<=$numberOfBoxes;i++)
				{				
					if($("#box" + i).height() > 150)
					{
						//RETRIEVES THE ORIGINAL FRAME DIMENSIONS
						var tempObjectNumber = String("box" + i).substring(3,5);
						var tempAttributeArray = String(originalAttributes[tempObjectNumber]).split(",")
						
						// CLOSING ANIMATION
						$("#box" + i).animate({ height: tempAttributeArray[0] + "px" , width: tempAttributeArray[1] + "px" }, 1000 );		
					}
				}
			
				$(this).css({ height: "1px",top:300 });
			
			});		

			
	/*
			$("#box"+boxCounter).mouseover(function(){
			
					
				if(showMovement == false)
				{
					//SHOULD WE ENSURE THERE ARE NO BOXES LEFT OPEN BY CLOSING THEM HERE?
					var i = 0;
				
					for(i=0;i<=$numberOfBoxes;i++)
					{				
						if(this.id != "box" + i)
						{
							//RETRIEVES THE ORIGINAL FRAME DIMENSIONS
							var tempObjectNumber = String("box" + i).substring(3,5);
							var tempAttributeArray = String(originalAttributes[tempObjectNumber]).split(",")
							
							// CLOSING ANIMATION
							$("#box" + i).animate({ height: tempAttributeArray[0] + "px" , width: tempAttributeArray[1] + "px" }, 1000 );		
						}		
					}
			
					showMovement = true;
				}
			
			});
	
	*/
			//$("#box" + boxCounter + " > .summary").mouseout(function () {
			
			//		//RETRIEVES THE ORIGINAL FRAME DIMENSIONS
			//		var tempObjectNumber = String(this.id).substring(3,5);
			//		var tempAttributeArray = String(originalAttributes[tempObjectNumber]).split(",")
				
			//		// CLOSING ANIMATION
			//		$(this).animate({ height: tempAttributeArray[0] + "px" , width: tempAttributeArray[1] + "px" }, 50, bob);		
			//});				
			
									
		};		 

		if(!$.browser.msie)
		{
			var setSpeed = new Array();
	
			for(i=0;i<=25;i++)
			{	
				setSpeed[i] = Math.random()/2;
			}
			// MOVEMENT OF THE BOXES
	
			$().mousemove(function(e){
			
				//if(showMovement)
				//{
			  
					var speed = 0.3;
			  
					var moveThisX = ((e.pageX - browserWidthCentrePoint) * 100) / ( $(document).width() / 2 );
					var moveThisY = ((e.pageY - browserHeightCentrePoint) * 100) / ( $(document).height() / 2 );
					
					// WRITE OUT THE STATUS
					$('#bottomPanel').html( moveThisX +'% , ' + moveThisY + '%' );
					
					for(i=0;i<=25;i++)
					{						
							
						//RETRIEVES THE ORIGINAL FRAME DIMENSIONS
						var tempAttributeArray = String(originalAttributes[i]).split(",");					
								
						var newLeftCoordinate = tempAttributeArray[3];
						var newTopCoordinate = tempAttributeArray[4];
						
						var percentageX = ($("#box" + i).width() / 100) * (moveThisX * setSpeed[i] );
						var percentageY = ($("#box" + i).height() / 100) * (moveThisY * setSpeed[i] );
					
						//$("#box" + i).html("X:" + percentageX + "%<br>Y:" + percentageX + "%");
						
						var tempTopValue = ( percentageY + parseInt(tempAttributeArray[4]));
						
						//if(tempTopValue < 25)
						//{
						//	tempTopValue = 25;
						//}
						
						$("#box" + i).css({left: ( percentageX  + parseInt(tempAttributeArray[3])) + 'px',top: tempTopValue + 'px'});
											
					}			
				//}					  
			});
		}

 });