// This is a demo of a simple jQuery script which allows you to have floated elements
// which various height in variable width design. Try it by changing the width of your browser's window.
//
// This script has been written by petiar and you can use it freely as you wish.
// However, it would be nice if you did not remove following line. Thanks! :-)
// (c) http://petiar.sk - jQuery, Drupal, CodeIgniter

$(window).load(function () {
	
	calc();
	
	$(window).resize(function() {
		calc();
	})
	
	function calc() {
		
		var row = 0;
		var rowheight = 0;
		var elements = new Array();
		
		// .item is the base class - it identifies elements we are going to align
		$('.item').each(function(index, element) {
			var height = $('.content', this).height();
			var p = $(this).position();
			var top = p.top;

			if (top != row) {
				setHeight(elements, rowheight);
				// we need to set the position one more time because the object could have been
				// moved after setting height to previous ones
				var p = $(this).position();
				var top = p.top;
				
				row = top;
				elements.length = 0;
				rowheight = 0;
			}
			
			elements.push($(this));
			if (height > rowheight) {
				rowheight = height;
			}

		});
		if (elements.length > 0) {
			setHeight(elements, rowheight);
		}
	}
	
	function setHeight(elements, height) {
		$.each(elements, function(key, value) {
			$(this).css('height', height);
		})
	}
})





$(window).delay(100).queue(
	function(){
	$('#logo').animate({
		width: "31px",
		height: "31px",
		marginTop: "43px"},{queue:false,duration:500});
});





$(function() {
	$('#site_id').hover(
		function(){
			$('#logo').animate({
				width: "53px",
				height: "53px",
				marginTop: "32px"
				},{queue:false,duration:250});
		}, 
		function(){
			$('#logo').animate({
				width: "31px",
				height: "31px",
				marginTop: "43px"
				},{queue:false,duration:250});
	});
});