$(document).ready(function(){
	// define initial card
    lastBlock = $('#item1'); // this is needed so it knows what to hide on first click.
	$('#item1').addClass('selected'); // used by the stylesheet to make things pretty.
	// create click area
	$('#focus-items li').prepend('<div class="cardClick"></div>');
	// dimensions are also set in the stylesheet. Annoying and stupid.
    maxWidth = 780;
    minWidth = 59;
    maxHeight = 350;
    minHeight = 320;

    $('.cardClick').click(function(){
		// EXPAND CARD
		$(this).parent().find('.badge img').animate({top:"0",left:"0",width:"48px",height:"48px"}, 600); // animate (shrink) selected badge on card activation
		$(this).parent().toggleClass('selected').animate({width: maxWidth+"px"}, { queue:false, duration:600}).fadeTo(600, 1).animate({height: maxHeight+"px", marginTop:"-10px"}, { queue:true, duration:400});
		// HIDE CARD
        $(lastBlock).toggleClass('selected').animate({width: minWidth+"px", height: minHeight+"px", marginTop:"0"}, { queue:false, duration:500 });
		// complete disable of click area for active card
		$(this).hide(100);
		// temporary disable of click area for other cards until animation finishes
		$('.cardClick').not(this).hide().show(600);
		// get ready to go again!
		lastBlock = $(this).parent();
      }
    );


	
	// great bouncing badges, Batman!
	$('.cardClick').hover(function(){
        $(this).parent().find('.badge img').animate({top:"-24px",left:"-5px",width:"57px",height:"57px"}, 200); // embiggen!
    },function(){
		$(this).parent().find('.badge img').animate({top:"0",left:"0",width:"48px",height:"48px"}, 150); // uhh... emsmallen?
	});

});