$().ready(function() {
	
	// Home tiles
	homeTiles = function() {
		homeTile = $('#home_tiles .home_tile');
		tileToggle = $('#home_tiles .home_tile .tile_toggle');
		
		// Define each tile's old/new attributes in JSON
		var tileAttributes = {'attributes': 
			[
				// Welcome
				{'originalWidth': '213px',
				'originalHeight': '230px',
				'originalTop': '20px',
				'originalLeft': '0px',
		
				'newWidth': '564px',								
				'newHeight': '307px',                             
				'newTop': '20px',                            		
				'newLeft': '0px'  
				},                                                 
				// Aviation                                        
				{'originalWidth': '125px',
				'originalHeight': '250px',
				'originalTop': '0px',
				'originalLeft': '214px',  
		                             
				'newWidth': '447px',                            
				'newHeight': '291px',                           
				'newTop': '0px',                     
				'newLeft': '214px'               
				},                                       
				// Business                                  
				{'originalWidth': '176px',
				'originalHeight': '199px',
				'originalTop': '11px',
				'originalLeft': '340px',
		                                      
				'newWidth': '398px',                      
				'newHeight': '266px',                          
				'newTop': '11px',                             
				'newLeft': '340px'                         	 
				},                                              
				// Disputes                                       
				{'originalWidth': '188px',
				'originalHeight': '187px',
				'originalTop': '23px',
				'originalRight': '33px',                      
		                                           
				'newWidth': '491px',                     
				'newHeight': '426px',                         
				'newTop': '23px',                           	
				'newRight': '33px'                         
				},                                        
				// Energy                                       
				{'originalWidth': '201px',
				'originalHeight': '173px',
				'originalBottom': '94px',
				'originalLeft': '0px',                       
		                                           
				'newWidth': '490px',                      
				'newHeight': '364px',                    
				'newBottom': '94px',                        
				'newLeft': '0px'                                        
				},                                                     
				// International                                         
				{'originalWidth': '137px',
				'originalHeight': '238px',
				'originalBottom': '29px',
				'originalLeft': '202px',                       
		                                              
				'newWidth': '503px',                                   
				'newHeight': '296px',                                  
				'newBottom': '29px',                                     
				'newLeft': '202px'                                        
				},                                                        
				// Insurance                                             
				{'originalWidth': '150px',
				'originalHeight': '225px',
				'originalTop': '211px',
				'originalRight': '248px',                         
		                                       
				'newWidth': '489px',                         
				'newHeight': '361px',                        
				'newTop': '211px',                           
				'newRight': '248px'                    
				},                                             
				// Shipping                                    
				{'originalWidth': '247px',
				'originalHeight': '126px',
				'originalBottom': '181px',
				'originalRight': '0px',                         
		                                         
				'newWidth': '526px',                         
				'newHeight': '337px',                        
				'newBottom': '181px',                            
				'newRight': '0px'                            
				},                                               
				// Emergency                                     
				{'originalWidth': '214px',
				'originalHeight': '111px',
				'originalBottom': '69px',
				'originalRight': '33px',                        
		                                             
				'newWidth': '379px',                             
				'newHeight': '333px',                            
				'newBottom': '69px',                               
				'newRight': '33px'                    
				}
			]
		};
		
		// Because expanding tiles always have a target opacity of 1, we can include the fade in this function
		expandTile = function(expandThis) {
			expandThis.find('.tile_toggle').html('- close');
			
			expandThis.find('.inner').animate({
				opacity: 1
			}, 500);
			
			if(expandThis.hasClass('right_align') && expandThis.hasClass('bottom_align')) {
				expandThis.css('z-index','10').animate({
					width: tileAttributes.attributes[expandIndex].newWidth,
					height: tileAttributes.attributes[expandIndex].newHeight,
					bottom: tileAttributes.attributes[expandIndex].newBottom,
					right: tileAttributes.attributes[expandIndex].newRight
				}, 500, function() {
					expandThis.addClass('active');
				});
			} else if(expandThis.hasClass('right_align') && !expandThis.hasClass('bottom_align')) {
				expandThis.css('z-index','10').animate({
					width: tileAttributes.attributes[expandIndex].newWidth,
					height: tileAttributes.attributes[expandIndex].newHeight,
					top: tileAttributes.attributes[expandIndex].newTop,
					right: tileAttributes.attributes[expandIndex].newRight
				}, 500, function() {
					expandThis.addClass('active');
				});
			} else if(expandThis.hasClass('bottom_align') && !expandThis.hasClass('right_align')) {
				expandThis.css('z-index','10').animate({
					width: tileAttributes.attributes[expandIndex].newWidth,
					height: tileAttributes.attributes[expandIndex].newHeight,
					bottom: tileAttributes.attributes[expandIndex].newBottom,
					left: tileAttributes.attributes[expandIndex].newLeft
				}, 500, function() {
					expandThis.addClass('active');
				});
			} else {
				expandThis.css('z-index','10').animate({
					width: tileAttributes.attributes[expandIndex].newWidth,
					height: tileAttributes.attributes[expandIndex].newHeight,
					top: tileAttributes.attributes[expandIndex].newTop,
					left: tileAttributes.attributes[expandIndex].newLeft
				}, 500, function() {
					expandThis.addClass('active');
				});
			}
			
		}
		
		// Collapse function
		collapseTile = function(collapseThis, fade) {
			collapseThis.find('.tile_toggle').html('+ open');
			
			// If true is passed, also fade
			if(fade == true) {
				collapseThis.find('.inner').animate({
					opacity: 0.3
				}, 500);
			}
			
			if(collapseThis.hasClass('right_align') && collapseThis.hasClass('bottom_align')) {
				collapseThis.css('z-index','4').removeClass('active').animate({
					width: tileAttributes.attributes[collapseIndex].originalWidth,
					height: tileAttributes.attributes[collapseIndex].originalHeight,
					bottom: tileAttributes.attributes[collapseIndex].originalBottom,
					right: tileAttributes.attributes[collapseIndex].originalRight
				}, 500, function() {
					collapseThis.css('z-index','1');
				});
			} else if(collapseThis.hasClass('right_align') && !collapseThis.hasClass('bottom_align')) {
				collapseThis.css('z-index','4').removeClass('active').animate({
					width: tileAttributes.attributes[collapseIndex].originalWidth,
					height: tileAttributes.attributes[collapseIndex].originalHeight,
					top: tileAttributes.attributes[collapseIndex].originalTop,
					right: tileAttributes.attributes[collapseIndex].originalRight
				}, 500, function() {
					collapseThis.css('z-index','1');
				});
			} else if(collapseThis.hasClass('bottom_align') && !collapseThis.hasClass('right_align')) {
				collapseThis.css('z-index','4').removeClass('active').animate({
					width: tileAttributes.attributes[collapseIndex].originalWidth,
					height: tileAttributes.attributes[collapseIndex].originalHeight,
					bottom: tileAttributes.attributes[collapseIndex].originalBottom,
					left: tileAttributes.attributes[collapseIndex].originalLeft
				}, 500, function() {
					collapseThis.css('z-index','1');
				});
			} else {
				collapseThis.css('z-index', '4').removeClass('active').animate({
					width: tileAttributes.attributes[collapseIndex].originalWidth,
					height: tileAttributes.attributes[collapseIndex].originalHeight,
					top: tileAttributes.attributes[collapseIndex].originalTop,
					left: tileAttributes.attributes[collapseIndex].originalLeft
				}, 500, function() {
					collapseThis.css('z-index','1');
				});
			}
		}
		
		// Standalone fade out function
		fadeOutTile = function(fadeOutThis) {
			fadeOutThis.find('.inner').animate({
				opacity: 0.3
			}, 500);
		}
		
		// Standalone fade in function
		fadeInTile = function(fadeInThis) {
			fadeInThis.find('.inner').animate({
				opacity: 1
			}, 500);
		}
		
		homeTile.click(function() {
			homeTile.each(function() {
				if($(this).hasClass('active')) {
					// Set index of tile to collapse
					collapseIndex = homeTile.index($(this));
					
					collapseTile($(this));
				}
				
				fadeInTile($(this));
			});
		});
		
		tileToggle.click(function() {
			// User clicked currently inactive tile
			if(!$(this).closest('.home_tile').hasClass('active')) {
				// Set index of clicked tile
				expandIndex = homeTile.index($(this).closest('.home_tile'));
				
				// Expand and fade in tile
				expandThis = $(this).closest('.home_tile');
				expandTile(expandThis);
				
				// Evaluate all other tiles
				homeTile.each(function() {
					// Set index of tile to collapse
					collapseIndex = homeTile.index($(this));
					
					collapseThis = $(this);
					
					// Fade out all other tiles
					if(!$(this).hasClass('active') && collapseIndex !== expandIndex) {
						fadeOutTile(collapseThis);
					}
					
					// If any other tile is open, close it and fade it out
					if($(this).hasClass('active') && collapseIndex !== expandIndex) {
						collapseTile(collapseThis, true);
					}
					
				});
			// User clicked currently active tile
			} else {
				// Set index of clicked tile
				collapseIndex = $(homeTile).index($(this).closest('.home_tile'));
				
				// Collapse and fade in tile
				collapseThis = $(this).closest('.home_tile');
				collapseTile(collapseThis, false);
				fadeInTile(collapseThis);
				
				// Evaluate all other tiles
				homeTile.each(function() {
					// Fade all tiles in
					fadeInTile($(this));
				});
				
			}
					
			
			return false;	
		});

	}
	homeTiles();
	
});