$(document).ready(function(){	
  $('.circle').each(
    function(){
		  $(this).css('opacity', 0).css('display', 'block').attr('cleft', parseInt($(this).css('left'))); $(this).attr('ctop', parseInt($(this).css('top')));
		  $(this).css('left', 55).css('top', 55);
      $(this).animate({left:  $(this).attr('cleft'), top: $(this).attr('ctop'), opacity: 1}, 6750, 'swing');
    }
  );
  $('.clickable').each(
    function(){
      var xc = (parseInt($(this).attr('cleft')) + Math.round($(this).width()/2));
      var yc = (parseInt($(this).attr('ctop')) + Math.round($(this).height()/2));
      var bid = "#" + this.id + "_big";
      var cid = "#" + this.id;
      
      $(bid).attr('cwidth', $(bid).width()).attr('cheight', $(bid).height()).height(0).width(0).css('left', xc).css('top', yc);
      $(cid).attr('cwidth', $(cid).width()).attr('cheight', $(cid).height());
      
      $(this).click(function() {
        $(this).animate({left: xc, top: yc , opacity: 0, width: 0, height: 0}, 350, 'swing', 
        function() {
          $(bid).css('display', 'block').animate({
            left:  xc - Math.round($(bid).attr('cwidth')/2), 
            top: yc - Math.round($(bid).attr('cheight')/2), 
            opacity: 1, 
            width: parseInt($(bid).attr('cwidth')), 
            height: parseInt($(bid).attr('cheight'))
          }, 300, 'swing');
        }
        );
      })
      $(bid).click(function() {
        $(bid).animate({left: xc, top: yc , opacity: 0, width: 0, height: 0}, 350, 'swing');
          $(cid).animate({
            left: parseInt($(cid).attr('cleft')), 
            top: parseInt($(cid).attr('ctop')), 
            opacity: 100, 
            width: parseInt($(cid).attr('cwidth')), 
            height: parseInt($(cid).attr('cheight'))
          }, 300, 'swing');
      })
    }
  );
});