$(".vert").css({backgroundImage:'none'});

	$(function() {
		$("#view_wrap").delegate("div.view_col", "mouseover", function() {	
			var $allCols = $('div.view_col').not(this);
			$el = $(this);

			// make the current column the large size
			$el.stop().animate({
				width: 475,
				height: 360,
				marginTop: 0
				}, {duration: '300',
					easing: 'easeOutSine'}).addClass("curCol");

			// make other columns the small size
			$allCols.stop().animate({
				width: 95,
				height: 342,
				marginTop: 18
			}, {duration: '300',
				easing: 'easeOutSine'})
			.removeClass("curCol");
		});
		
		var $container = $("div.view_col");

		$container.mouseover(
			function() { 
			
				$(".vert").stop().animate({opacity:1}, {duration: '500',
					easing: 'easeOutSine'});
					
				$(".vert", this).stop().animate({opacity:0}, {duration: '500',
					easing: 'easeOutSine'});
					
				$(".view_button").stop().animate({top:360}, {duration: 'fast',
					easing: 'easeOutSine'});
					
				$(".view_button", this).stop().animate({top:290}, {duration: '250',
					easing: 'easeOutBack'});

				$(".background").stop().animate({opacity:0.65}, {duration: '500',
					easing: 'easeOutSine'});
					
				$(".background", this).stop().animate({opacity:0}, {duration: '500',
					easing: 'easeOutSine'});
					
			})
			.css('position', 'relative')
			.append( $("<div>")
			.attr('class', 'background')
			.css({
				backgroundColor:'#000000',
				position: 'absolute',
				top:0,
				left:0,
				width: '475px', 
				height:'100%'
			})

		);

		$("#start").trigger("mouseover");
	});