// Contains all the JS logic for the Change City links
// Launches the pop over
// Display city selector
// Include this file on any page that has a change city button
// Make sure there is a button on the page with the class "change-city-link"

$(document).ready(function(){		
	
	$('#city-loader').hide();
	$('#city-button').show();
	
	$(".change-city-link").colorbox({onComplete:function() {
	
		$('#ca').hide();
		$('#uk').hide();
		$('#int').hide();
				
		$('.sel-area').click(function(){
			
			reset_all();
			
			// Get selected area and show regions
			var rel = $(this).attr('rel');
			$('#' + rel).show();				
			
			$('#sel-area-'+rel).css("background-color", "#C1D492");	
			$('#sel-area-'+rel).css("border-bottom", "8px solid #C1D492");
			
			return false;
		});
		
		$('.sel-region').click(function(){
		
			var rel = $(this).attr('rel');
			var code = $(this).attr('title');
			
			$('#cities').html('<br /><br /><br /><br /><br /><div style="text-align:center;"><img src="./_ui/images/icons/loading.gif"><br />Loading Cities</div><br /><br /><br /><br /><br />');
			$('#cities').show();
			
			$('#us').hide();
			$('#ca').hide();
			$('#uk').hide();
			$('#int').hide();
			
			$.ajax({
				url: rel,
				success: function(data) {
					
					$('#cities').html(data);
							
					$('.city-back').attr('rel', code);
					$('.city-back').show();	
				}
			});
			
			return false;
		});
		
		$('.city-back').click(function(){
									
			reset_all();
			
			var rel = $(this).attr('rel');
			$('#' + rel).show();
			
			$('#sel-area-'+rel).css("background-color", "#C1D492");	
			$('#sel-area-'+rel).css("border-bottom", "8px solid #C1D492");
												
			return false;								   
		});		
	
	}});
	
	function reset_all() {

		// Hide all areas
		$('#us').hide();
		$('#ca').hide();
		$('#uk').hide();
		$('#int').hide();
		$('#cities').hide();
		$('.city-back').hide();
		
		// Remove highlights
		$('.sel-area').css("background-color", "#F0EFDB");
		$('.sel-area').css("border-bottom", "8px solid #F0EFDB");	
	}

});