$(function() {
	$( "#draggable" ).draggable();
});

$(document).ready(function() {
	// hides the cityinfo01 as soon as the DOM is ready (a little sooner that page load)
	$('#cityinfo01').hide();
	$('#cityinfo02').hide();
	$('#cityinfo03').hide();
	$('#cityinfo04').show();
	
	$('#cityinfo01-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_01.png)");
	$('#cityinfo02-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_02.png)");
	$('#cityinfo03-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_03.png)");
	$('#cityinfo04-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_04_hover.png)");

	
 
 // slides down, up, and toggle the cityinfo01 on click    
   
  $('#cityinfo01-toggle').click(function() {
    $('#cityinfo01').slideDown('fast');
    $('#cityinfo02').slideUp('fast');
    $('#cityinfo03').slideUp('fast');
    $('#cityinfo04').slideUp('fast');
	
	$('#cityinfo01-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_01_hover.png)");
	$('#cityinfo02-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_02.png)");
	$('#cityinfo03-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_03.png)");
	$('#cityinfo04-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_04.png)");
    return false;
  });
   
  $('#cityinfo02-toggle').click(function() {
    $('#cityinfo02').slideDown('fast');
    $('#cityinfo01').slideUp('fast');
    $('#cityinfo03').slideUp('fast');
    $('#cityinfo04').slideUp('fast');
    
    $('#cityinfo01-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_01.png)");
	$('#cityinfo02-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_02_hover.png)");
	$('#cityinfo03-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_03.png)");
	$('#cityinfo04-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_04.png)");
    return false;
  });
  
  $('#cityinfo03-toggle').click(function() {
    $('#cityinfo03').slideDown('fast');
    $('#cityinfo01').slideUp('fast');
    $('#cityinfo02').slideUp('fast');
    $('#cityinfo04').slideUp('fast');
    
    $('#cityinfo01-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_01.png)");
	$('#cityinfo02-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_02.png)");
	$('#cityinfo03-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_03_hover.png)");
	$('#cityinfo04-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_04.png)");
    return false;
  });
  
  $('#cityinfo04-toggle').click(function() {
    $('#cityinfo04').slideDown('fast');
    $('#cityinfo01').slideUp('fast');
    $('#cityinfo02').slideUp('fast');
    $('#cityinfo03').slideUp('fast');
    
    $('#cityinfo01-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_01.png)");
	$('#cityinfo02-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_02.png)");
	$('#cityinfo03-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_03.png)");
	$('#cityinfo04-toggle').css("background-image","url(http://maddecentblockparty.com/img/city_04_hover.png)");
    return false;
  });

  
  
  
  $('#cityinfo01-hide').click(function() {
    $('#cityinfo01').slideUp('fast');
    return false;
  });
  
  $('#cityinfo02-hide').click(function() {
    $('#cityinfo02').slideUp('fast');
    return false;
  });
  
  $('#cityinfo03-hide').click(function() {
    $('#cityinfo03').slideUp('fast');
    return false;
  });
  
  $('#cityinfo04-hide').click(function() {
    $('#cityinfo04').slideUp('fast');
    return false;
  });
  
    
  
   
  
});