$(document).ready(function(){

	var 
	speed = 1000,	// animation speed
	$wall = $('#demo').find('.wrap'),

	masonryOptions = {		   // initial masonry options
	  //columnWidth: 160, 
	  itemSelector: '.box:not(.invis)',
	  animate: true,
	  animationOptions: {
		duration: speed,
		queue: false
	  }
	};

	var selectedBox;
	var zIndex = 0;
	
	$wall.masonry(masonryOptions);

	//Hide (Collapse) the toggle containers on load
	$(".toggle_container").hide(); 

	//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
	$("h3.trigger").click(function(){
		$(this).next().slideToggle("slow");
		$(this).find('a').toggleClass('selected');
		return false; //Prevent the browser jump to the link anchor
	});
	
	function closeBox(box){
		if(!box){
			return;
		}
		box.find('.details').hide();
		box.addClass('closed', false);
		box.removeClass('selected');
		box.animate({
				width: box.data('ow'),
				height: box.data('oh')
			}, 
			500, 
			function(){
				// animiation done
				$wall.masonry(masonryOptions);
			}
		);
	}
	
	$('.box').click(function(){
		if(!$(this).hasClass('closed')){
			return;
		}
		var w = 500;
		$(this).find('img').each(function(k, v){
			$(v).attr('src', $(v).attr('src2'));
		});
		closeBox(selectedBox);
		$(this).addClass('selected');
		$(this).css('z-index', ++ zIndex);
		$(this).data('ow', $(this).width());
		$(this).data('oh', $(this).height());
		$(this).removeClass('closed');
		selectedBox = $(this);
		// make clicked box larger 
		$(this).find('.details').show();
		$(this).height('auto');
		$(this).width(w);
		var h = $(this).height();
		// $(this).find('.details').hide();
		$(this).height($(this).data('oh'));
		$(this).width($(this).data('ow'));
		$(this).animate({
				width: w,
				height: h
			}, 
			500, 
			function(){
				// animiation done
				// $(this).find('.details').show();
				$wall.masonry(masonryOptions);
			}
		);
	});

	$('.box .close').click(function(e){
		closeBox($(this).parents('.box'));
		selectedBox = null;
		e.stopPropagation();
	});
	
	var bgs = ["..\/img\/bg\/tubesbg.jpg"];
	var oneJan = new Date(new Date().getFullYear(), 0, 1);
	var dayOfYear = Math.ceil((new Date() - oneJan) / 86400000);
	var numImages = bgs.length;
	var bgIndex;
	if(dayOfYear < numImages){
		bgIndex = dayOfYear;
	} else {
		bgIndex = dayOfYear % numImages;
	}
	setBackground(bgIndex);
	$('#bgNext').click(function(){
		++ bgIndex;
		checkBgIndexBounds();
		setBackground(bgIndex);
	});
	$('#bgPrev').click(function(){
		-- bgIndex;
		checkBgIndexBounds();
		setBackground(bgIndex);
	});
	var els = $('#tel, #header, #content');
	$('#bgOnly').hover(function(){
		els.css('visibility', 'hidden');
		$('#container').css('background', 'none');
	}, function(){
		els.css('visibility', '');
		$('#container').css('background', '');
	});
	function setBackground(i){
		$('body').css('background', 'url(' + bgs[i].substr(3) + ')');
	}
	function checkBgIndexBounds(){
		if(bgIndex < 0){
			bgIndex = numImages - 1;
		}
		if(bgIndex > numImages){
			bgIndex = 0;
		}
	}
	
	$('#q').keyup(function(e){
		var q = $('#q').val().toLowerCase();
		$('.box').each(function(el){
			if($(this).text().toLowerCase().indexOf(q) != -1){
				$(this).removeClass('invis').show();
			} else {
				$(this).addClass('invis').hide();
			}
		});
		$wall.masonry(masonryOptions);
	});
	
	$('#clearQ').click(function(){
		$('#q').val('').keyup();
	});
	
	$('.box:first').click();

});