$(document).ready(function() {
	var $all = $('#column-main .homebox');
	var $curr = null;
	var home = this;
	
	
	/* Click */
	this.box_click = function(event) {
		var $box = $(this);
		
		$all.unbind('mouseenter', home.box_mouseenter);
		$all.not(this).bind('click', {b:$(this)}, home.box_offclick);
		
		$box.animate({'width': 400, 'opacity': 1.0});
		if ($box.is('#four')) $('#one').animate({'width':0}).find('.off').fadeOut();
		
		$box.find('.on').css('opacity', '1').fadeOut();
		$box.find('.open').css('opacity', '1').fadeIn();
		$all.not($box).animate({'opacity': 0.1}, 500);
	};
	
	/* Close click */
	this.close_click = function(event) {
		var $box = $(this).closest('.homebox');
		
		$box.animate({'width': 200, 'opacity': 1.0});
		if ($box.is('#four')) $('#one').animate({'width':200}).find('.off').fadeIn();
		
		$box.find('.open').css('opacity', '1').fadeOut();
		$box.find('.on').css('opacity', '').fadeIn();
		$all.not($box).animate({'opacity': 1.0}, 500);
		
		$all.unbind('click', home.box_offclick);
		$all.bind('mouseenter', home.box_mouseenter);
		
		return false;
	};
	
	/* Mouse over */
	this.box_mouseenter = function(event) {
		if ($curr != null) {
			if ($curr.attr('id') === $(this).attr('id')) return;
			
			$curr.unbind('click', home.box_click);
			
			$curr.find('.on').stop(true,false).fadeOut();
			$curr.find('.open').stop(true,false).fadeOut();
		}
		
		$curr = $(this);
		
		$curr.find('.on').css('opacity', '').delay(250).fadeIn(function(){
			$curr.bind('click', home.box_click);
		});
	};
	
	/* Mouse over */
	this.box_offclick = function(event) {
		event.data.b.find('p.close').click();
	};
	
	
	$all.find('.on').hide();
	$all.find('.open').hide();
	
	$all.bind('mouseenter', home.box_mouseenter);
	$all.find('p.close').click(home.close_click);
});